The latest articles on DEV Community by kacorvus (@kacorvus). https://dev.to/kacorvus https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1126644%2F7a70f8ee-4ed5-482f-a947-230bab72107e.png https://dev.to/kacorvus en kacorvus Tue, 25 Jul 2023 22:09:00 +0000 https://dev.to/kacorvus/exploring-elm-pages-v3-full-stack-elm-2in9 https://dev.to/kacorvus/exploring-elm-pages-v3-full-stack-elm-2in9 <p>Let's examine the persistence in the TODO app example (<a href="https://github.com/dillonkearns/elm-pages/tree/master/examples/todos">https://github.com/dillonkearns/elm-pages/tree/master/examples/todos</a>).</p> <h2> Overall project structure </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QwLnkwxe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afw8630o4ehbc2xv73oi.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QwLnkwxe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afw8630o4ehbc2xv73oi.png" alt="Image description" width="580" height="1356"></a></p> <ul> <li> <p><code>app/Route/</code> files - one per page, has <code>pages</code>, <code>data</code>, and <code>view</code> functions; <code>pages</code> runs at build time (or on server); <code>data</code> runs at build time (or on server); <code>view</code> runs at build time (or on server) and on client (e.g. Visibility__.elm, Login.elm)</p> <ul> <li> <code>data</code> function can refer to <code>Backend.Custom</code> tasks, which call out to functions exposed from local node js libraries. In particular, there is a <code>custom-backend-task.ts</code> file which defines functions wrapping prisma db calls.</li> </ul> </li> <li><p><code>app/</code> files contains sitewide utilities like layout, menu messages, and global state</p></li> <li><p><code>prisma/schema.prisma</code> defines the database schema</p></li> <li><p><code>src/*</code> contains local elm libraries of functions that route modules and others can use. elm-pages-v3 recommends using <code>app</code> for well known files required by the framework, and using <code>src</code> for additional elm source code</p></li> </ul> <h2> Interaction with backend persistence </h2> <p>reads</p> <ul> <li><p>Receive any necessary parameters as data from front end, encode as a parameter object and send to backend custom functions. (<code>Backend.Custom.run "getTodosBySession" (Encode.string parsedSession) resultDecoder</code> where <code>parsedSession</code> is the parameter in this case.)</p></li> <li><p>The custom backend function receives arguments, runs call, responds with result.</p></li> <li><p>The response is decoded back to elm types, using the <code>resultDecoder</code>. The result is used building out a <code>Data</code> instance and eventually invoking <code>Server.Response.render</code> with this <code>Data</code> instance.</p></li> </ul> <p>writes</p> <ul> <li><p>something triggers an update action, which reaches <code>performAction</code></p></li> <li><p>receive data from action, encode it and other arguments to send to backend custom function (<code>BackendTask.Custom.run "createTodo" (Encode.object [ ( "sessionId", sessionId |&gt; Encode.string ) ] ) noopDecoder</code>)</p></li> <li><p>the custom backend function receives arguments, runs call </p></li> <li><p>the response is decoded to elm types, which results in no value in this case, and then <code>Server.Response.render</code> with a populated <code>ActionData</code></p></li> </ul> elm elmpagesv3 webdev nextjs