What are some considerations to keep in mind when I make a SPA (single page app) compared to a regular page app? It seems that SPA’s are a bit faster in loading time, but in general what are the up and downsides of using SPA’s?
I personally am not sold on single page apps yet. They seem like they would be a nightmare to maintain if you have more than two or three different views.
We actually just published an article about it on Medium:
Also there is many other background info about the pro’s and con’s of SPA’s:
https://upnetix.com/en/blog/maximizing-benefits-from-single-page-application-instead-of-blindly-following-the-hype/100
https://www.vandelaydesign.com/single-page-design-trends/
https://www.quora.com/When-should-I-go-with-Single-Page-Application-SPA-and-when-should-I-go-with-Multi-Page-Application-MPA
I’d like to see an example of a 20 "page’ SPA.
This could be any admin dashboard 
There are many examples of this and they are not any harder to manage than a 20 page website as you are not managing 20 different HTML files but 20 views.
Of course SPA is not the best solution for ALL the sites out there
4 Likes
Thanks George. That’s an interesting selection of sites.
I was particularly interested in information I noticed on two of the sites, eg on microsoft.com:
SPAs can be designed to run in a disconnected mode, making updates to a client-side model that are eventually synchronized back to the server once a connection is re-established. .<
Would this be possible with Wappler - eg with an SPA and local storage? Another site seemed to suggest it was almost an automatic feature of SPAs.
I have no experience with developing SPAs. I had assumed that a conventional multi-page site could be partly an SPA, but it seems essentially a site is one or the other. Is that correct?
In facts, as @Teodor wrote there is not the best solution for all.
It depends what you need to do.
For example… George’s article today solved a problem for me to make a more elegant way to represent different views in the application.
Thank’s @George, perfect timing !!
1 Like
You should indeed see SPA’s more as injected content views where needed.
As for offline available that will be more easy to do with PWA other nice term meening Progressive Web Apps.
There you have all the caching of your app files and actually the app can run fully offline and even be installed as a regular smart phone app.
PWA support will be coming also to Wappler soon
9 Likes
Actually admin dashboard is a perfect use case for SPA. Just see the different sub pages as injected content views in your main page.
Your main page having all the global menu and sidebar for example doesn’t really change but just the content views. So with SPA you will achieve that - instead of loading the whole main frame over and over again for each new detail page - you will just inject the new views.
That is also very lightweight because you are loading just the view html and injecting it with Ajax ( that is what the app connect route component does)
So you will have a super responsive admin dashboard that auto refreshes just the content parts it needs to.
Also it loads fast initially because the main page contains only the main frame with menus and maybe sidebar. Then later on demand the content views got loaded as needed, and cached for reuse.
So all advantages as you see @brad
2 Likes
Going over the documentation it seems more complicated than it may be worth. Can you have more than one SPA set up on a site? Suppose you have a page that has a slightly different layout or perhaps a second language?
You mean generally - eg using it on multi-page sites and SPAs equally?
The potential increases by the week.
1 Like
Yes, you can have hybrid/multi page apps.
I.E. several main templates and different views loaded in them
2 Likes
Yes absolutely! Don’t take the name “Single” Page Apps too literally. See them more as main pages on your site! You can have as many as you want! The SPA term just indicates that content views are dynamically loaded on demand and not initially together with the page html.
As we also support server side routing in Wappler, together with client side routing/content injection SPAs you can do a so called Hybrid MPA - so multiple pages acting as SPAs together bound with global routing with URL rewrites.
1 Like
Here’s an impressive example from the angular.js site George linked to:
If you want to see a Single Page Application in action, I invite you to head over to the AngularUniv https://angular-university.io and start clicking on the home page on the list of latest courses, and on the top menu.<
1 Like
I get this feeling of déjà vu when I read the contents of this discussion. Remember InterAKT? Or am I showing my age?
Nearly two decades ago, all of my sites were built as SPA’s by using a nifty Dreamweaver extension (forgot it’s name). OK, it was not as nifty as the Wappler version, but the principle remains the same. Unfortunately Adobe decided to kill the extension off after having called it ADDT.
What I am trying to say is that I am overjoyed with seeing a return of the easiest of all Template systems. It is simple, foolproof and easy to maintain. No need for SSI’s for navigation bars and footers, no need to remember to manually add our ‘og’ and other meta data to each of our pages. And so the list goes on. We are left with just one place to add/modify/delete and the change will have immediate effect for all of our content.
1 Like
I was also one of those InterAKT users (beginning of 2000). They were ahead of time. Their Ajax SPA solution was really great and easy to work with.
I had to wait a long time until a similar approach is available with Wappler. This is really great news!
1 Like
I have since changed my views on the SPA model. This was actually easy t set up for static content. We need more documentation on dynamic content such as detail pages. That I can’t figure out yet.
This technically sounds more like the Pjax technique employed by Turbolinks, which gives a SPA-like feeling to the app, but isn’t a SPA in the traditional sense (fully client-side app).