Multipage Stipple webapp

Hi all,

Is it possible to have multipage apps based on Stipple? Not necessarily with different url, but with a clickable menu just like a Shinydashboard does with the R Shiny framework.
I bet there is a strong interest from enterprises and academics for more complex apps, in Julia.

Hi @julien_goo

Yes, totally possible! I’ve built a few this summer and the best approach is to treat each page as a standalone application (but of course, reusing layouts, views, models, etc).

Create an MVC app (resource oriented, like here Working with Genie Apps · Genie - The Highly Productive Julia Web Framework) and make each Controller a Stipple app. This means that navigation between pages will be stateless (there will be a full page reload between individual pages and they will have distinct URLs) but each page will be reactive/interactive.

In my opinion it’s better to have truly separate pages as each MVC resource will encapsulate its logic, making reasoning about the code simpler. Also, you can easily add extra features like authentication, authorisation, etc. With caching (also included) load times are instant.

Keep in mind some “details” that in my experience made a huge difference, like avoidid global objects/state [made a huuuuge difference in overall performance] and using the recently added StippleUI.Intersection which only updates UI elements visible on the screen [very useful for dashboards with multiple reactive elements].

Unfortunately I can’t share actual code as it’s closed source and I have yet to document the best ways of building this kind of apps but I’ll do my best to release some docs ASAP. Feel free to reach out via DM here, Github or Gitter if you need help.

3 Likes

Thanks for your answer.
Good to learn that more complex dashboards can be build with multipages. I will be really interested to read some docs about it and see an app example. For my job, a complex dashboard is the only missing piece to have all my data science and AI solutions in Julia.

I understand that having global objects affects performance, but it is common to use inputs or results one page in an another one. How would you easily share info or structs between pages ? It is very convenient in RShiny dashboard, but complex in Dash with real multipage (different URLs and dash statelessness).

It’s definitely easier to show code than to explain :slight_smile: I’ll try to come up with some simple multi-page app example.

You can store the state of the app in some form of persistent storage and associate it with a user id stored on a cookie. The user info will be there already if you deploy authentication. If not, Stipple exposes a simple cookie API.

As for the actual struct storage, a quick and dirty method is Julia serialization (no need for DBs). Bonus: this state can be persisted indefinitely and the users can always get back to the dashboards as they left them.

2 Likes

Please any update on this because I’m Trying build something like that with Julia, Genie and Stipple. After making a controller in Genie app, I don’t know how to include it in Genie route. I used one of the examples in Stipple demo then move the route part in the file to Genie general route file then I have no idea of what to do next


The image is the general Genie route file
And I got this error

Here is my Controller

I’m really new to Julia and Genie

I got this working following the way you said it should be done. I just changed the route inside the Stipple file to a function and call the function in general Genie route file. I don’t know if it’s security wise to do so.

Is there a public example on this topic?

I.e. Server-side templates from Genie (such as from the mvc tutorial) plus some reactive single page apps with Stipple.

Like this one for Django. Build a modern web app using Django and Javascript with no build tools | blog

2 Likes

There finally is an example: Adding reactive pages · Genie Framework Resource Center

1 Like

and the page is gone…

sorry about that! I’ve moved some pages around. Here’s the link