Examples or documentation for real-world applications

[JivanRoquet]

Hello. The examples in the aptly-named folder are great and very useful, but they're all kind of toy examples. Same can be said for the documentation. Ideal to grasp the general concepts but not quite enough to understand what would it be to build a life-scale front-end application, with dozens of views/pages, dozens of state elements synchronized with a backend API, complex interactions between "components" etc.

Would there be anything available that demonstrates (or documents) the recommended way to structure Flame applications in a more real-life fashion?

I'd be particularly interested in:

• how to handle different views/pages based on routing (e.g. login, settings, posts, dashboard...)
  • should we use purescript-routing for this? how to integrate it with purescript-flame?
• how to handle global application state (sort-of the equivalent of a Vuex/Redux "store")
  • e.g. subscribe/emit are fine for a few items but things become unbearable quickly without a global store
• how to handle synchronization between backend API and application state
• user authorization/authentication
• integration with a full-blown UI library like Foundations, Bootstrap or Bulma
• basically anything that showcases a real-life, complex application built with Flame

Many thanks.

[easafe]

Hello again @JivanRoquet ,

This library was made initially to be used in https://github.com/melanchat/melanchat. You could study that for some ideas. @chekoopa might have something to say/show too, but I am not sure if their work is open source.

However, I can't say there is a enforced (or even recommended) way to do anything. Since it is a smallish library, anything past rendering is up to you. How would I prolly do it:

how to handle different views/pages based on routing (e.g. login, settings, posts, dashboard...)
should we use purescript-routing for this? how to integrate it with purescript-flame?

If you mean a single page application, then yes you could use purecript-routing/purecript-routing-duplex/native js apis/whatever and tie it back to this library with events. Other than that, there is nothing built in for routing, tho suggestions and pull requests are always welcome.

how to handle global application state (sort-of the equivalent of a Vuex/Redux "store")
e.g. subscribe/emit are fine for a few items but things become unbearable quickly without a global store

Having a single model is the equivalent to global stores. In my experience (likewise in Elm) it is not worth it to structure your application in components. I'd advise against using subscriptions for this. For example, in melanchat, there is a single model (the IMModel record) and a single message type (IMMessage) for the entire /im page, even if the business logic code is broken down into modules (like chat/contacts/history/etc). If you have two code units on a same page that are totally independent, then defining several mount points might make sense (that's how the lazy loaded parts in the /im page [like modals for settings and whatnot] work), but if they have to constantly communicate, I'd suggest trying to set it up as a single model first.

how to handle synchronization between backend API and application state
user authorization/authentication
integration with a full-blown UI library like Foundations, Bootstrap or Bulma

I am not quite sure what you mean by synchronization here, but you can perform IO in the update function and then change your model in however way you need. Same as with CSS, view only define markup, you are free to use any kind of styling.

[JivanRoquet]

Hello @easafe sorry I've been sidetracked by another project but thank you very much for your extensive comment. I'll definitely look more into that in the coming weeks.