All topics

Single Page Application (SAP)

Leo

1 month 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

1 month 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

1 month 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
Janis

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

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

1 month 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

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

1 month ago
SPAs are 2010. Nobody builds SPAs anymore
Lucas G

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

1 month 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
So very close
Andreas Møller

1 month 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

1 month 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

1 month 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

1 month 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

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

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

1 month 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

1 month 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

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

1 month 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

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

1 month ago
Lucas G

1 month ago
Hmm 🤔
Andreas Møller

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

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

1 month 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

1 month 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

1 month ago
I took it that way
Lucas G

1 month 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

1 month ago
Indeed.
Andreas Møller

1 month 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

1 month 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

1 month 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

1 month ago
Ofc not.
Andreas Møller

1 month 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

1 month ago
Absolutely
StuartM

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

1 month 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

1 month 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

1 month 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

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community