Introducing elm-pages v3 - full-stack Elm and scripts!

Show and Tell
13

Yes, what happens is that elm-pages takes the Route Modules that you define and it compiles two versions of your app. One that runs on the Backend (that will execute during your build step, or on the server for server-rendered Routes), and one that runs on the Frontend.

Backend app

  • Resolves data for the given URL (uses ports under the hood to communicate with NodeJS as needed to read files, etc.)
  • Takes the resolved Route Module’s Data and calls the Route Module’s init. Throws away the Effect, it only needs the Model
  • Calls the Route Module’s view function with the Model from init and the resolved Data
  • Turns the return value of the Route Module’s view into the final HTML to be rendered using the Shared.view function, and adding the surrounding HTML for an elm-pages skeleton (<script> tags, <style> tags, etc.). It also includes a base64 encoded version of the binary encoded version of the Route Module’s Data.

Frontend app

  • The initial paint of the page is from the HTML (no JS/Elm) that was rendered out on the server as described above
  • After the initial paint is all done, elm-pages passes in this serialized data in as an Elm Flag, then renders the Route Module for the given URL. This time, init is called and the Effect is not thrown away but is actually performed. However, data is not performed (it is only ever performed in the Backend, as the name BackendTask implies). data is already available through the Flags that elm-pages managed under the hood for us.
  • Any subsequent page navigations will go and reach out to the Backend to resolve the Data for that URL. Since the rendered app is a single-page app (SPA), it does not do a full page load (no HTML is downloaded), instead it only downloads the binary serialized form of the Route Module’s Data. If it is a pre-rendered Route Module, then this is just loading a static file from a CDN. If it is a server-rendered route, then the server returns that binary content and resolves it at request-time.

Hope that is helpful! Let me know if there’s anything else that’s fuzzy about it. I would love to help demystify these things in the docs, so questions and pointers about which parts are unclear are very helpful!

4 Likes