All topics

Single Page Application (SAP)

Leo

7 months ago

Hi everyone! I’m new to Toddle and would love some guidance on creating a single-page application. I’m especially unsure about setting up the URL do I need to build separate pages, or is there a way to handle it differently? Also, how can I ensure that when a user clicks to navigate to a different section, the URL updates without reloading the page? Should I be using tabs, or is there a more effective approach? Any advice would be greatly appreciated!
@Leo
Hi everyone! I’m new to Toddle and would love some guidance on creating a single-page application. I’m especially unsure about setting up the URL do I need to build separate pages, or is there a way to handle it differently? Also, how can I ensure that when a user clicks to navigate to a different section, the URL updates without reloading the page? Should I be using tabs, or is there a more effective approach? Any advice would be greatly appreciated!
Lucas G

7 months ago

Page paths can be parameters as well
So a typical route to go is to handle show/hide logic based on URL paths
You can update those parameters without causing a page reload
gazinhio

7 months ago

You can check out my tutorial here, I've queued it up to the part where I talk about URLs and using them for developing SPAs in Toddle. This was made back in January and a huge amount has changed in Toddle since but most of it is still relevant. Hope it helps

https://youtu.be/ICTzRosXYec?si=746htnjKVbJpmkXb&t=10572
👍1
Janis

7 months ago

@ great tutorial btw! Watched it some months ago and it helped me a lot in setting up my SPA 👌🔥
👍1
Lucas G

7 months ago

Now that contexts are a thing, it makes it even easier to make SPAs
Andreas Møller

7 months ago

Is there a particular reason why it has to be a SPA?
@Andreas Møller
Is there a particular reason why it has to be a SPA?
Lucas G

7 months ago

SPAs are modern Andreas, get with the times
Andreas Møller

7 months ago

SPAs are 2010. Nobody builds SPAs anymore
Lucas G

7 months ago

Yeah but everything from 2000-2010 is coming back, including SPAs
Andreas Møller

7 months ago

I very much plan to kill the SPA.
We already support https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API

We just need slightly better cache control and https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition
🔥2
👍1
So very close
Andreas Møller

7 months ago

This is a multipage application.
Javascript is disabled, every click is a complete new page load
@Andreas Møller
This is a multipage application.
Javascript is disabled, every click is a complete new page load
Lucas G

7 months ago

Nice! I need to learn more about this. I just transitioned the core of my app to SPA so that things could be instant and realtime stuff
But I don’t mind going back if I don’t need it
Lucas G

7 months ago

Thankfully it’s “only” 1.6mb to load it so it’s still less than a lot of websites
But still, whatever performance boosts I can go for 😬
Andreas Møller

7 months ago

There is still some work left to make it as smooth as you see in the video. I am hitting a cached version which is why I am getting the instant page loads
The problem with SPAs is that they start out at 1.6 MB but they scale
Lucas G

7 months ago

Yeah I know
I’m keeping an eye on it
Andreas Møller

7 months ago

We are not too far away from begin able to provide the same performance on multi page apps consistently.
Lucas G

7 months ago

It was honestly pretty quick as an MPA but there was still a couple hundred ms load time on page loads because of APIs
Andreas Møller

7 months ago

That is why in v2 we let you decide what APIS should be fetched during the server render
If you prefer a more SPA like feel then you can just delay the data fetching until after the page is loaded.
Lucas G

7 months ago

It would still not be instant but I’m willing to test stuff
Andreas Møller

7 months ago

While we are refactoring to open source we will also make some changes to how projects are served, which should result in a significant boost in how fast pages are served.
When you combine that with specilative rendering it should feel instant
Andreas Møller

7 months ago

It is this technique we use on our blog
Andreas Møller

7 months ago
Lucas G

7 months ago

Hmm 🤔
Andreas Møller

7 months ago

The blog is making an API call every time, so "empty" pages will be even faster
Lucas G

7 months ago

Some browsers have speculative rendering disabled no?
Basically anything not chrome lol
Andreas Møller

7 months ago

https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API
Yes it only works in chrome.
Same for multi page view transitions which is what I use in the movie demo.
That is why we are close.
But not quite there yet.
@Andreas Møller
I very much plan to kill the SPA.
We already support https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API

We just need slightly better cache control and https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition
gazinhio

7 months ago

This is a little disconcerting. I have a great deal of time and effort invested in building a number of SPAs and Toddle provides numerous and very efficient ways of doing it, albeit probably unintentionally. I hope this is just a future desire for how things will go for when we want to build new apps.
@gazinhio
This is a little disconcerting. I have a great deal of time and effort invested in building a number of SPAs and Toddle provides numerous and very efficient ways of doing it, albeit probably unintentionally. I hope this is just a future desire for how things will go for when we want to build new apps.
Lucas G

7 months ago

I took it that way
Lucas G

7 months ago

He cant take them away from you he doesn’t have that power
Jokes aside though it’s part of toddle’s flexibility to allows us to choose how we build things
gazinhio

7 months ago

Indeed.
Andreas Møller

7 months ago

I mean "kill the SPA" in quotes. We will only ever improve support for it if that is what you want to build
Andreas Møller

7 months ago

We use a combination of both in toddle. The editor is using a web socket connection, so it has to be an SPA.
The rest of the pages are server rendered.
But the number of good use-cases for SPAs are about to get a whole lot smaller.
gazinhio

7 months ago

Sure, I assumed as much but wanted to give my two cents that we're out here building large SPA apps and if there are any thoughts of doing something that could impact that, please don't. I can't turn back and re-start now! I'm too old 🧓
Andreas Møller

7 months ago

Ofc not.
Andreas Møller

7 months ago

But you can (and probabaly should) mix and match. Some pages could be part of a SPA and others can be normal pages.

Login pages e.g. should probably not be part of the SPA, but your dashboard pages could be etc.
gazinhio

7 months ago

Absolutely
StuartM

7 months ago

Of course, there is an alternative 🤣 (just to stir it up a bit)
Andreas Møller

7 months ago

Yes 100% but i dont think you need to compromise
@Andreas Møller
But you can (and probabaly should) mix and match. Some pages could be part of a SPA and others can be normal pages.

Login pages e.g. should probably not be part of the SPA, but your dashboard pages could be etc.
Leo

7 months ago

That's exactly what I need using an SPA for the dashboard to keep interactions smooth, while adopting an MPA for the rest of the app. @NoCode ProCode really convinced me to make the switch and try Toddle, and after just two days of using it, I have to say, I'm absolutely loving the experience! and thanks for all your support.
@Leo
That's exactly what I need using an SPA for the dashboard to keep interactions smooth, while adopting an MPA for the rest of the app. @NoCode ProCode really convinced me to make the switch and try Toddle, and after just two days of using it, I have to say, I'm absolutely loving the experience! and thanks for all your support.
NoCode ProCode

7 months ago

🙏💛

Single Page Application (SAP)

Leo

Lucas G

gazinhio

Janis

Lucas G

Andreas Møller

Lucas G

Andreas Møller

Lucas G

Andreas Møller

Andreas Møller

Lucas G

Lucas G

Andreas Møller

Lucas G

Andreas Møller

Lucas G

Andreas Møller

Lucas G

Andreas Møller

Andreas Møller

Andreas Møller

Lucas G

Andreas Møller

Lucas G

Andreas Møller

gazinhio

Lucas G

Lucas G

gazinhio

Andreas Møller

Andreas Møller

gazinhio

Andreas Møller

Andreas Møller

gazinhio

StuartM

Andreas Møller

Leo

NoCode ProCode