The right structure to build MPAs

Learn
1

Hello,

First of all, I would like to sorry if this post is not in the right site and for my (possible) lack of knowledge.

I am trying to develop a Multiple Page Application (MPA) and some doubts come to my mind:

  1. Every page of the application is in its own Elm module and has its own HTML page, allowing me to organize and modularize the app. I would like to know if this approach is right or there is another better. This is an example of the folder structure:

    /Page1/
    Page1.elm
    State.elm
    Types.elm
    ...
/Page2/
    Page2.elm
    State.elm
    Types.elm
    ...

  2. My second doubt is if I can use Browser.Navigation with this approach in order to avoid blank pages or load redundant data. For this, I have thought to make a main module who control which page to show, but I do not know if Browser.Navigation can be used having different modules with different HTML pages. I think so, but I have not found any documentation about MPA and I am not sure.

Maybe my doubts came for my lack of knowledge in some aspects of Elm, in that case, I would thank you any documentation to read.

Thanks in advance.

2

Given that each page is a separate HTML document, I’m not sure Browser.Navigation fits your setup. From the docs, it is for Browser.application, which takes over the whole page. In your case it seems like routing to the HTML pages will be done by the server, and when using Browser.application it is centralized on the client.

If you instead have a SPA (one HTML file, multiple pages. Yes, terrible name), then Browser.Navigation and Browser.application are designed exactly for that.

3

Thanks for replying @joakin :smile:

Maybe my problem is that when I think in MPAs I instantly think in multiple HTML files and I cannot realize how can I have multiple pages without more than one HTML. Do you know where can I find some information about it?

Should I draw the page based on the URL with a case statement in my view code? In that case my model definition should be shared between all my modules, isn’t it?

Or maybe, should I have one global model that contains all the modules models and pass it through every submodel?

Thanks in advance.

4

Yes to all of your questions!

First it would be a good idea to read up on the concept and see if it is really what you want. Wikipedia has a good overview.

Once you have a clear idea that it is what you want, (instead of server side routing and having separate Elm apps on each page keeping the routing a server responsibility), other community members have already done a great job explaining and with example applications on github. I recommend starting with:

With that there is already a lot of information, feel free to ask here or in slack if you have more specific questions about it :+1:

1 Like
5

If you decide to use the SPA approach with Browser navigation here is another example https://github.com/sporto/elm-tutorial-app, smaller than the elm-spa-example

Aside from that, try to start by putting all the view, update, model code for a page inside one module. e.g. Just Page1.elm instead of State, Types etc. This will make your application simpler. Break this apart if you really need to.

1 Like
6

If you want to see an example of using Browser.Navigation, you could look at my repo : https://github.com/perty/elm-navigation-test

It has also a Power Point presentation, should that make it easier to understand. A crude version is here on SlideShare: https://www.slideshare.net/PerLundholm/elm-spa-navigation

1 Like
7

Another small dummy app with multiple pages https://github.com/tgelu/elm-spa-example
I tried to both allow each page to have its own model/update/view/subscriptions but also that any page can use/edit a “global” model which I called Session – inspiration from Richard’s elm-spa-example

1 Like
8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.