Any IT solution can only be as good as its documentation and that's why we work hard to keep the SAFE docs up to date. An important part of the docs are the recipes, which are step-by-step guides to help you bring all kinds of functionality to your SAFE app.

This week, we have added 3 new recipes to the SAFE docs that show you how to add multiple pages to you SAFE app. In this blog post I compare the different approaches so that you can find the recipe that's right for you.

Routing with a shared model

The easiest way to have multiple pages in a SAFE app is by using routing with a shared model. All data is added to a single model and messages are added to a single update function. It's very straightforward, but becomes hard to maintain in larger applications. A benefit is that the state of pages is maintained when moving away to other pages.

Routing with separate models

A more scalable option is to implement routing with separate models. Every page has its own model and update and view functions. By creating a single module for every page, individual pages are easier to maintain. A drawback of this approach is that we need to add some extra code to handle update messages. We also lose the state when switching between pages.

Routing with UseElmish

If you do want separate models, views and update functions, but don't want to deal with extra logic to deal with messages routing using the UseElmish hook is the way to go. It has all the advantages of routing with separate models, but because of the UseElmish hook we don't have to deal with messages of all pages in a single place.

Conclusion

As you see, all three approaches of splitting up your applications have advantages and disadvantages. While having a single model works well for smaller apps, for larger apps you'll probably want to go for one of the solutions that splits pages into their own modules.

Check out the SAFE docs for more recipes. Have a recipe you want to share, or feel like something is missing in the docs? Contribute on GitHub!