For me, the different complexity in handling authentication & authorization is also worth to mention. In MPAs you have all the control on the server, which makes role-based access to pages / page sections quite easy. With SPAs however it is more complex, because you have authorization logic on both sides, API and the frontend, and you must keep both in sync. You need to check permissions on server-site when fetching a SPA + whenever data is requested via the API. Additionally you have to check locally if a user is allowed to access a page when he clicks some link. Therefore the SPA app must know which routes the user can access. So you kind of have to expose your route protection logic to the client. And you have to keep the authorization rules in sync on client-site and server-site which could get a bit tedious in some cases. For me the whole thing of authentication and especially authorization is much easier and more intuitive in MPAs. But anyway, SPAs are so much cooler, I swallow the pill :-)
you forgot to mention caching in MPA. All your scripts and CSS will be cached by the browser and will not be loaded again from the server, which makes the page loads much faster. Of course the same applies for SPA. And I noticed that modern browsers load MPA like SPA these days. I mean you don't notice the whole page being reloaded. In my personal opinion, SPA is very handy for closed apps like admin dashboard, etc. Because you don't care about SEO.
Exactly, I absolutely agree on using SPA on the authenticated dashboard oriented concepts where SEO isn't required and keep the outside structure of the website as a MPA.
@@haddagart I superb agree with you on this point, but one question is: how to make the outside structure in MPA and the dashboard SPA? Do u mean sth like the html frame? e.g. make the navigation bar in one frame and the SPA in another frame.? or some hack way of using React, Angular, or Vue etc.? e.g. The navigation bar as MPA in thr backend and the content part of each page as SPA? But as such there would be some html code overlapping, how to resolve this?
1:27 1:39 New York Times is a multi-page app (MPA) 7:09 Is SPA always better than MPA 7:18 SPA 7:21 highly reactive 8:07 decoupled frontend 8:57 disadvantage: SEO (search engine optimization) is challenging 10:14 disadvantage: Javascript is strictly required 10:39 tends to favor modern browser 11:18 MPA 11:42 12:50 disadvantage: slower, constantly needs to load pages 13:28 disadvantage: tightly coupled frondend and backend 14:31
A MPA can also do partial dom updates through say JQUERY. So it doesn't necessarily reload the whole page. You could unfair receive the same input you would get in SPA like JSON and parse that and do whatever you want to manipulate the dom
I feel like SPAs are the future. With server side rendering the reliance on Javascript in the browser stops being such a concern. Before this year I wrote exclusively MPAs but now that I have discovered VUE I am loving the SPA model.
@@academind I want to create a classified website like olx as startup, do you think it's good idea to use spa and learn Vue e.g, or should I use normal mpa with J's library like iquery and Ajax. I just finish Django. Thank you
I have heard many marketing perspectives on the SPA v MPA debate. It's great to hear a dev perspective, And one that a non-dev can understand. Thank you for the explanation. I appreciate it.
Other downsides with SPA: - Takes way longer to create than a normal, traditional MPA. If you want to iterate quickly and create MVP's. A traditional MPA might be better way to go. - The SEO disadvantage is not only due to more difficult to crawl the content, the initial load time also takes a hit which means worse user experience from user that just visit a single page on your SPA. Good video though! :)
Are you talking about development speed? I've written both kind applications, and believe me, SPA is incredibly fast to create, MPA have much more parts to maintain and that means: more work, code to write, test ending up in more time developing a solution, obviously if you compare a SPA with a CMS like wordpress, drupal or any pre-created software of course, you have less work to perform to get the things working.
That's probably because you're experienced in the framework (or tools) used to create SPA. When I was a beginner in Angular I found the concepts so complicated that I would constantly use jQuery to implement a version first and then "substitute" it into Angular framework. It does take time to learn a new framework, but after that learning period everything becomes natural
I think if you compare learning period of a SPA with a MPA, SPA will have a much more tiny period to learn the concepts than a MPA. Imagine yourself, for example, passing for the learning period of an application that you build with Java (let's say JSF, for example) and the learning period to develop the same app with angular or vue.
Felipe Pereira The learning period of SPA is only shorter if you already have a well designed server side API built by someone else. In most cases, neither SPA or MPA would give significant advantage in terms of learning curve or development speed. However, building a well designed SPA is much more difficult than building a well designed MPA. This is because to build a well designed SPA, you actually need to have a LOT of knowledge that are often more or less mostly automatic in MPA. These are things like URL/History, bookmarks, refresh/prev/next behavior, session management, multi tabbed behavior, caching, etc. SPA actually gives you more control over these, so if you actually need to and did take explicit control of these, often SPA could be the only feasible way to build certain things; in most cases though, the browser's defaults works just fine for MPA but not so much with SPA. So, often you can build a decent MPA much more quickly than a decent SPA.
Amazing video as always Max :D. One thing to mention is that you could make just a few parts of your site a SPA (only the actual app, dashboard, etc) so you can have the best of both worlds. Btw you should really make a series about Electron :)
It's a good overall explanation but there are more things to consider. With SPA there is more overhead in handling authentication, routing and state management. It's all easy and cool when you look from afar but implementation of an spa requires more work than an MPA and has it's share of headaches. Also, with server side caching, MPAs are lightning fast
Great video (as per usual)! I will say that the big thing missing was MOBILE. SPA's make building both mobile & web app's much more consistent because everything is API driven already.
MPA for websites and SPA for web applications. Basically MPA is "standard" where as SPA is a "hack". I hope in some point this hack will be a base for a standard way of creating web applications.
I don't agree, a website like quora.com being a web application still is an MPA. And also some websites like an official website of some technology, documenting (angular.io) being a website still is a SPA.
@@TheWandererDoc I think what he means is: MPA for websites that were specifically designed for the web in the traditional way and SPA for apps in general (which feel more like desktop/mobile apps) that run in the web.
From working with a Mvc project that should have been a spa. You find that mvc component based architecture is harder to maintain and components are bigger. You need to plan your enclosures far more for your js. Conditional rendering or creating new elements on the page requires lots of programically creation in js or partial static views. The partial views create major issues with timing for your Javascript.
What you want to use for your project? I want to develop a project which is multi vendor restaurant booking system . Like food panda , trip advisor , the fork etc . I decided to use Nodejs and express as backend , mongodb for database , Vue for admin dashboard and front end also . Can you share your thought please ? I appreciate it , it will help me . Thank you
cons of spa: - if you make a javascript error in one js object, your entire app could have problems - Generally all the interfaces use the same structure, so you lose the freedom to show very different views pros of spa: - Totally agree with you thanks for the video! -
Hey Max, Its actually one of the questions i asked you on one of your recent videos about CSR and SSR, great to see you making a video about this :) I think marketing is pretty important for any idea, like the most important one coz if ur service is good people will wait for the loading and everything so that eliminates most of negatives about MPA(ssr). However at the same time i think if u market your idea properly and people can go to your website directly it won't matter if u r using SPA (csr) without proper SEO (vue-meta should be ok) as long as people can get on your website. I've seen that even if you are using SPA google will still show your app in search results, especiialy if people link your website on their facebook or other social media. Despite all of that.... What if im not trying to make something like slack but rather a bit more advanced with some products displayed that i want to sell, will it be reasonable to use SPA? Maybe my clients won't be able to find anything through google but rather going to my website and search for the product there. So what are those secret and advanced strategies to somehow tell google that I DO have a product here? So Max if at one point you get sometime, please show what could be done to make it work (vue), i have my own ideas but i havent tested them yet :) P.S why google is so rich but cant do shit about SPA or is doing it too slow, they have so many super smart engineers working there. Maybe they r just too happy that they work there and forget to do the real job (this is joke, no need to be offended but the question why google cant do this is real) EDIT: overall SPA would be 1000 times better than anything for user experience, plus for cost it would be better coz it will only require images, text, videos etc from server, no need to create the entire html page each time with new requests. If there are clear good stratgies then SPA would always be better even for e-stores, SPA is the future its just a question of time
Thanks for sharing your thoughts here! Cases like the one you mention (=> shops) are indeed tricky. Since SEO can of course be made to work with SPAs, building a SPA might be worth it if all the other reasons speak for a SPA, too (i.e. you're not bound to use a certain technology for example)
Good video Max! I wonder if you might could make a video about SEO for SPAs. In the company I work for we want to relaunch our website as an SPA to use all the advantages it offers, but we really depend on SEO for ours website. So yeah we're kinda stuck right now. :/
One critical advantage of MPA is that you can use custom themes for the front-end with dedicated plugins,and on SPA is quite hard or quite impossible on large scale apps example -> i used to buy themes from themeforest for a custom web site and i found out that besides SEO using SPA does not like custom themes with their own js plugins, because after navigation from one page to another even if the all the scripts of the theme are in the scripts array from the angujar.json, the html that is rendered dynamically will not be seen by theme's js plugins, thus every time i was on a specific page that used a js script for a fancy animation , that animation will only work once, if tha app is rendered at start with that page, if i navigate back and and return again all the fancy animations will not work. A workaround to this issue is that I needed to load all my specific js plugins every time again when the page was rendered. THE BOTTOM LINE IS: IF you need like, admin, dashboard, timestamps, todo, agile project for monitoring chart flow and stuff like that USE!! SPA (Angular or whatever) with dedicated front end UI (like Angular material and Nebular, not some random custom theme bought for internet). IF you are building a ecommerce web site with products and checkout sections with different pages that use custom theme and custom js plugins and you also need SEO, i highly recommend MPA.
Another thing to consider is maintainability. If you have a plan where your application will be retired and replaced with a new version at some point, making a SPA is great idea. If you know you will be supporting this application for 5 years or more, you may want to avoid using a SPA framework. Nobody knows what the future holds and JavaScript frameworks come and go. If Angular or React greatly lose popularity, you may not want to be stuck working with them forever. Making new applications is easy! It is maintaining and updating 10 year old code written by someone else that is a challenge.
I want to create a classified website like olx as startup, do you think it's good idea to use spa and learn Vue e.g, or should I use normal mpa with J's library like iquery and Ajax. I just finish Django. Thank you
I was hoping to hear about security concerns between the two. And isn't SEO a big concern for any website? Please share some links if possible on how to go about SEO in SPAs. Great Video!
Very instructive comparision thank you. What I really wonder is that do we not use template engine with SPA? Lets say, I am using node.js and express as a backend. Will I directly serve an html page without any template engine also known as "view" in MVC? Thanks a lot..
Nice Explanation. As Max raises SEO limitation for SPA, but angular provides a very useful tool to handle SEO that is angular universal, it provides SEO as well as so fast loading of app rather than simple angular application. So, the only difference is you have to use different angular module (angular universal) to handle SEO. Max, I think you should introduce angular universal application in your videos that would be useful.
For small and medium businesses, MPA/MVC serves well because not all people in the world use latest and greatest smartphones that can render SPA or support constant network activities of SPA
SEO for most websites is generally heavily overrated anyway. The average local service provider (i.e. brick-and-mortar shop) will benefit much more from a well managed Google Business profile and accompanying social media. Analyse yourself: if you go look for lets say a bicycle repair shop, isnt it the little maps result with the shortlist that will capture your first interest, especially if they have user reviews? Those results will also have the link to your site, if people would like to visit it. Or buying products, what search results will get your attention? In short, your site doesn't need to be a special case to NOT need SEO, the other way around: your site needs to be a special case to DO rely on organic ranking.
i agree with this..max is helpful but a little to black and white .. i could not use angualar just on the seo comment, which looks like a waste of a great tool .
I am a big fan of SPA especially when rendering them directly at client. I have been using React for a long while now and i thank that it is by far the best thing that has happened to front end developing in context of JS. I got one issue for which i really worry about. It has to do with social media sharing like Facebook, Twitter and so on. The impossibility to share things due to fact that they are rendered at client annoys me a lot and i can't find a solution of it unless i make some drastic work arounds which in the end make your life harder.
What about applications that have multiple single page applications. What are those called? For example you might have a page that encapsulates a functioning unit of a much larger enterprise application. That page is by itself is a single page application because as you work with it, it posts and gets new data through Ajax calls and does not fully refresh. But when you navigate to another functioning unit of the app you will fetch an entirely new single page application.
@Max, another wonder simplified explanation of tech concepts from you. Thanks a mil. In your opinion, is the fact that you can't load a web page content from another domain in an SPA a disadvantage? I have had to open another domain's page in another tab just to achieve this.
I've been slowly ramping up on SPA development. One thing that I notice, compared with traditional websites is that SPAs have rather huge initial page loads, which seems to be a major drawback. I know that people are working on reducing this but it's still a thing.....
Max, awesome video as always. One small request, if it is possible - can you change backround color from white to something darker? This is hard on eyes to watch in continuity.
The best max! ... What do you think about ajax components? I use PHP and the components of my pages dynamically created them with the server and the structure of the page is loaded using AJAX. In this case it would be an MPA. Do you think that I should start to make a change to SPA for future developments?
According to this comparison I would choose SPA. Why? I think there are actually no disadvantages. Yes, SEO can be challenging but it is not impossible - it can be done - it is not quantum mechanics - it is not a huge effort. Javascript strictly required? Right now I have MPA and it still does not run withous JS since I use many Vue components so practically no difference. It is worth mentioning that loading speed is very important factor. Users are impatient, one second may be a significant difference. Or am I missing something?
Thanks Max for explaining the differences in a way that's easy to comprehend. Liked the part of MPA leading to reload and related network traffic, vs what happens in SPA. A question, what's the need of changing URL in SPA when it doesn't need to reload the page? I see angular.io changes to angular.io/events when I click on events link.
MPA is not necessarily slow. If you minimize the content and load only the js/css that you use it can load pretty fast. Of course it will never be as fast as an SPA :p
Is it true to say that MPAs lend themselves to better for accessibility? There are tools and techniques (WAI-ARIA) that enable SPA to support disabled users better but; the dependency on JavaScript, replacing DOM sections and lazy programmers all conspire against SPA being the better option.
Nice video! Very well explained. Isn't it another disadvantage of SPAs that although they're faster when switching views, they're slower when processing data, like generating the HTML for large, nested lists or the like? In such cases they can heavily block the UI, right?
They can, yes but you can (and should) handle such cases via lazy loading/ loading once a user scrolls down etc. It doesn't get that much better if you render huge lists on the server. It'll take time, too and still needs to be processed by the browser (only once though, that's correct.
Great video, many thanks for that. You are a specialist in Angular 4, I guess, and I'd like to ask you about the SEO thing, how does it look if it comes to a SPA based on Angular 4? Could you give me some hints on this topic (what should I read about)?
How can we make MPAs with laravel and Vue.js with multi platform application - web + mobile app? Quickest response will be appreciated. And thanks for this your nice tutorials.
My server side rendered React and Node JS boilerplate gives me all the benefits from both categories. But yes, sorting out SEO for a SPA is a whole other can of worms to figure out.
I don't understand why an app, including SPA, that requires User Authentication to render contents, needs SEO -- How can Google crawl your protected app contents when the Googlebot can't even login to your app?
Thanks for a nice Video. Will SPA download full web page or a screenful size at a time ?. Example, If I browse a lengthier SPA webpage and I have not scroll till the bottom of the page, Will SPA download entire web page or only initial screen of the web page ?
I just want to ask something, I've been playing around with it. But whenever i try to test the login route in POSTMAN, it throws a HTTPException This action is unauthorized. Any clue why does this happen? For complete description, i also posted on Laracast with regards w/ my problem. Here's the link laracasts.com/discuss/channels/laravel/testing-api-login-throws-a-httpexception-403
SPA Design question. So I have just finished my public major public facing page. It is an SPA. Now I need to make an adminstrative site. Should I make this a separate SPA, sharing modules with the first SPA or should add to the original SPA. My gut tells me this is a separate site, but I just don't know. What do you all think?
@Academind Is the following also the case to build an MPA over SPA: when it is significantly a big project that handles different independent modules/domains?
Not necessarily - SPAs can be useful for many web projects. Basically for all projects where you want to provide the "mobile app like" instant behavior and UX
![Angular vs React vs Vue [2020 Update]](http://i.ytimg.com/vi/lYWYWyX04JI/mqdefault.jpg)
For me, the different complexity in handling authentication & authorization is also worth to mention.
In MPAs you have all the control on the server, which makes role-based access to pages / page sections quite easy.
With SPAs however it is more complex, because you have authorization logic on both sides, API and the frontend, and you must keep both in sync.
You need to check permissions on server-site when fetching a SPA + whenever data is requested via the API.
Additionally you have to check locally if a user is allowed to access a page when he clicks some link. Therefore the SPA app must know which routes the user can access. So you kind of have to expose your route protection logic to the client. And you have to keep the authorization rules in sync on client-site and server-site which could get a bit tedious in some cases.
For me the whole thing of authentication and especially authorization is much easier and more intuitive in MPAs. But anyway, SPAs are so much cooler, I swallow the pill :-)
you forgot to mention caching in MPA. All your scripts and CSS will be cached by the browser and will not be loaded again from the server, which makes the page loads much faster. Of course the same applies for SPA.
And I noticed that modern browsers load MPA like SPA these days. I mean you don't notice the whole page being reloaded.
In my personal opinion, SPA is very handy for closed apps like admin dashboard, etc. Because you don't care about SEO.
Exactly, I absolutely agree on using SPA on the authenticated dashboard oriented concepts where SEO isn't required and keep the outside structure of the website as a MPA.
Your response is very helpful.
@@haddagart I superb agree with you on this point, but one question is: how to make the outside structure in MPA and the dashboard SPA? Do u mean sth like the html frame? e.g. make the navigation bar in one frame and the SPA in another frame.? or some hack way of using React, Angular, or Vue etc.? e.g. The navigation bar as MPA in thr backend and the content part of each page as SPA? But as such there would be some html code overlapping, how to resolve this?
1:27
1:39 New York Times is a multi-page app (MPA)
7:09 Is SPA always better than MPA
7:18 SPA
7:21 highly reactive
8:07 decoupled frontend
8:57 disadvantage: SEO (search engine optimization) is challenging
10:14 disadvantage: Javascript is strictly required
10:39 tends to favor modern browser
11:18 MPA
11:42
12:50 disadvantage: slower, constantly needs to load pages
13:28 disadvantage: tightly coupled frondend and backend
14:31
Awesome explanation Max, Thank you for keep making video so far 😁 can't wait to watch another video from you soon
Thank YOU Muhammad for your support! No need to wait for long, the next video will come on Thursday ;)
A MPA can also do partial dom updates through say JQUERY. So it doesn't necessarily reload the whole page. You could unfair receive the same input you would get in SPA like JSON and parse that and do whatever you want to manipulate the dom
I feel like SPAs are the future. With server side rendering the reliance on Javascript in the browser stops being such a concern. Before this year I wrote exclusively MPAs but now that I have discovered VUE I am loving the SPA model.
I feel the same, especially as "issues" like SEO will be easier to handle
@@academind I want to create a classified website like olx as startup, do you think it's good idea to use spa and learn Vue e.g, or should I use normal mpa with J's library like iquery and Ajax. I just finish Django. Thank you
3 years later, there are still SEO problems
And then 3 years ago again seo problem haha
@@phillipemonares1220 and then 5 years later its improving finally hahaha (With next.js, astro etc)
I have heard many marketing perspectives on the SPA v MPA debate. It's great to hear a dev perspective, And one that a non-dev can understand. Thank you for the explanation. I appreciate it.
Other downsides with SPA:
- Takes way longer to create than a normal, traditional MPA. If you want to iterate quickly and create MVP's. A traditional MPA might be better way to go.
- The SEO disadvantage is not only due to more difficult to crawl the content, the initial load time also takes a hit which means worse user experience from user that just visit a single page on your SPA.
Good video though! :)
Are you talking about development speed? I've written both kind applications, and believe me, SPA is incredibly fast to create, MPA have much more parts to maintain and that means: more work, code to write, test ending up in more time developing a solution, obviously if you compare a SPA with a CMS like wordpress, drupal or any pre-created software of course, you have less work to perform to get the things working.
That's probably because you're experienced in the framework (or tools) used to create SPA. When I was a beginner in Angular I found the concepts so complicated that I would constantly use jQuery to implement a version first and then "substitute" it into Angular framework. It does take time to learn a new framework, but after that learning period everything becomes natural
I think if you compare learning period of a SPA with a MPA, SPA will have a much more tiny period to learn the concepts than a MPA.
Imagine yourself, for example, passing for the learning period of an application that you build with Java (let's say JSF, for example) and the learning period to develop the same app with angular or vue.
Felipe Pereira The learning period of SPA is only shorter if you already have a well designed server side API built by someone else.
In most cases, neither SPA or MPA would give significant advantage in terms of learning curve or development speed.
However, building a well designed SPA is much more difficult than building a well designed MPA. This is because to build a well designed SPA, you actually need to have a LOT of knowledge that are often more or less mostly automatic in MPA. These are things like URL/History, bookmarks, refresh/prev/next behavior, session management, multi tabbed behavior, caching, etc. SPA actually gives you more control over these, so if you actually need to and did take explicit control of these, often SPA could be the only feasible way to build certain things; in most cases though, the browser's defaults works just fine for MPA but not so much with SPA. So, often you can build a decent MPA much more quickly than a decent SPA.
Crystal explanation !!
This makes you different from other RUclipsrs.🤟🤟
Amazing video as always Max :D. One thing to mention is that you could make just a few parts of your site a SPA (only the actual app, dashboard, etc) so you can have the best of both worlds. Btw you should really make a series about Electron :)
That's right, it's not an all-or-nothing choice - thanks for adding this!
Now got a clear understanding of SPA and MPA, Max Thanks for the wonderful explanation :)
This was such a very nice and thorough overview! Thank you for your work in illustrating and explaining this.
There is also advantage of SPA that you can use apis for WEB,ANDROID,IOS and DESKTOP apps. With multipage cant.
It's a good overall explanation but there are more things to consider. With SPA there is more overhead in handling authentication, routing and state management. It's all easy and cool when you look from afar but implementation of an spa requires more work than an MPA and has it's share of headaches. Also, with server side caching, MPAs are lightning fast
Great video (as per usual)!
I will say that the big thing missing was MOBILE. SPA's make building both mobile & web app's much more consistent because everything is API driven already.
MPA for websites and SPA for web applications. Basically MPA is "standard" where as SPA is a "hack". I hope in some point this hack will be a base for a standard way of creating web applications.
I feel the same! At this moment, it is more comfortable to make websites using MPA and Control Panels and applications with SPA
You summarized it easily.
I don't agree, a website like quora.com being a web application still is an MPA. And also some websites like an official website of some technology, documenting (angular.io) being a website still is a SPA.
lol web and web app is the same
@@TheWandererDoc I think what he means is: MPA for websites that were specifically designed for the web in the traditional way and SPA for apps in general (which feel more like desktop/mobile apps) that run in the web.
Awesome video Max as always.I feel like im learning all that good stuff here!
It's makes me really happy to read that the videos help you, thanks so much :)
From working with a Mvc project that should have been a spa. You find that mvc component based architecture is harder to maintain and components are bigger. You need to plan your enclosures far more for your js. Conditional rendering or creating new elements on the page requires lots of programically creation in js or partial static views. The partial views create major issues with timing for your Javascript.
Thanks max! For you content. After I saw it. I knows what I do for my project. Thank you.
Thank you so much for your comment, it's really great to read that the video was helpful!
What you want to use for your project? I want to develop a project which is multi vendor restaurant booking system . Like food panda , trip advisor , the fork etc . I decided to use Nodejs and express as backend , mongodb for database , Vue for admin dashboard and front end also . Can you share your thought please ? I appreciate it , it will help me . Thank you
cons of spa:
- if you make a javascript error in one js object, your entire app could have problems
- Generally all the interfaces use the same structure, so you lose the freedom to show very different views
pros of spa:
- Totally agree with you
thanks for the video!
-
If bookmarks are important on your site (over 90 percent of sites) use MPA or a hybrid. If not, use SPA.
In Max's Vue course on Udemy only focuses on SPA version, hopefully add the MPA section for us who prefer to learn the lower of both patterns
after hell of time spending this video helps me to understand Angular thanks
Hey Max, Its actually one of the questions i asked you on one of your recent videos about CSR and SSR, great to see you making a video about this :)
I think marketing is pretty important for any idea, like the most important one coz if ur service is good people will wait for the loading and everything so that eliminates most of negatives about MPA(ssr). However at the same time i think if u market your idea properly and people can go to your website directly it won't matter if u r using SPA (csr) without proper SEO (vue-meta should be ok) as long as people can get on your website. I've seen that even if you are using SPA google will still show your app in search results, especiialy if people link your website on their facebook or other social media.
Despite all of that....
What if im not trying to make something like slack but rather a bit more advanced with some products displayed that i want to sell, will it be reasonable to use SPA? Maybe my clients won't be able to find anything through google but rather going to my website and search for the product there. So what are those secret and advanced strategies to somehow tell google that I DO have a product here?
So Max if at one point you get sometime, please show what could be done to make it work (vue), i have my own ideas but i havent tested them yet :)
P.S why google is so rich but cant do shit about SPA or is doing it too slow, they have so many super smart engineers working there. Maybe they r just too happy that they work there and forget to do the real job (this is joke, no need to be offended but the question why google cant do this is real)
EDIT: overall SPA would be 1000 times better than anything for user experience, plus for cost it would be better coz it will only require images, text, videos etc from server, no need to create the entire html page each time with new requests. If there are clear good stratgies then SPA would always be better even for e-stores, SPA is the future its just a question of time
Thanks for sharing your thoughts here! Cases like the one you mention (=> shops) are indeed tricky. Since SEO can of course be made to work with SPAs, building a SPA might be worth it if all the other reasons speak for a SPA, too (i.e. you're not bound to use a certain technology for example)
best ever explaination ever on SPA vs MPA
Awesome to read that Viral, thank you!
Best quality videos here, thanks Max.
Thank you very much Rajat :)
Nice and Clear explanation Max, It's very useful for beginner to knows difference between the SPA & MPA. thanks Max.
So great to read that the video was helpful, thank you so much Ramki :)
Good video Max! I wonder if you might could make a video about SEO for SPAs. In the company I work for we want to relaunch our website as an SPA to use all the advantages it offers, but we really depend on SEO for ours website. So yeah we're kinda stuck right now. :/
I'll certainly cover SSR (which basically is one important building block in making SPAs work with SEO) in the future, yes.
Hell yeah. I'm excited to see that :D
Thanks for this video. I'm taking a course in single page web app development next semester and I wasnt sure what "single page" meant.
Very good explanation, this video what I was looking for to understand if to continue in your nodejs or moving to the mern stack 👍👍👍👍
Great explanation. You solve my biggest problem. Lots of love from INDIA.
Excellent video, it helped me a lot to choose what approach to use
One critical advantage of MPA is that you can use custom themes for the front-end with dedicated plugins,and on SPA is quite hard or quite impossible on large scale apps example -> i used to buy themes from themeforest for a custom web site and i found out that besides SEO using SPA does not like custom themes with their own js plugins, because after navigation from one page to another even if the all the scripts of the theme are in the scripts array from the angujar.json, the html that is rendered dynamically will not be seen by theme's js plugins, thus every time i was on a specific page that used a js script for a fancy animation , that animation will only work once, if tha app is rendered at start with that page, if i navigate back and and return again all the fancy animations will not work. A workaround to this issue is that I needed to load all my specific js plugins every time again when the page was rendered.
THE BOTTOM LINE IS:
IF you need like, admin, dashboard, timestamps, todo, agile project for monitoring chart flow and stuff like that USE!! SPA (Angular or whatever) with dedicated front end UI (like Angular material and Nebular, not some random custom theme bought for internet).
IF you are building a ecommerce web site with products and checkout sections with different pages that use custom theme and custom js plugins and you also need SEO, i highly recommend MPA.
You describe this stuff so well, thanks!
Thank you Max for clarifying that ❤
Always happy to read that Chrif, thanks again for your awesome support :)
Great video. Cleared up a lot of confusion for me. Thanks!
Very clear explanation & very helpful 👍
Awesome video understood all the concept very easily
Another thing to consider is maintainability. If you have a plan where your application will be retired and replaced with a new version at some point, making a SPA is great idea. If you know you will be supporting this application for 5 years or more, you may want to avoid using a SPA framework. Nobody knows what the future holds and JavaScript frameworks come and go. If Angular or React greatly lose popularity, you may not want to be stuck working with them forever. Making new applications is easy! It is maintaining and updating 10 year old code written by someone else that is a challenge.
I want to create a classified website like olx as startup, do you think it's good idea to use spa and learn Vue e.g, or should I use normal mpa with J's library like iquery and Ajax. I just finish Django. Thank you
I was hoping to hear about security concerns between the two. And isn't SEO a big concern for any website? Please share some links if possible on how to go about SEO in SPAs. Great Video!
Thank you so much for your clear explanation and demonstration on the SPA.
So great to read that the video was helpful for you, thanks a lot for your comment!
Very instructive comparision thank you.
What I really wonder is that do we not use template engine with SPA? Lets say, I am using node.js and express as a backend. Will I directly serve an html page without any template engine also known as "view" in MVC?
Thanks a lot..
Nice Explanation. As Max raises SEO limitation for SPA, but angular provides a very useful tool to handle SEO that is angular universal, it provides SEO as well as so fast loading of app rather than simple angular application. So, the only difference is you have to use different angular module (angular universal) to handle SEO.
Max, I think you should introduce angular universal application in your videos that would be useful.
I'll certainly do some videos about Angular Universal in the future, no worries! :)
For small and medium businesses, MPA/MVC serves well because not all people in the world use latest and greatest smartphones that can render SPA or support constant network activities of SPA
SEO for most websites is generally heavily overrated anyway. The average local service provider (i.e. brick-and-mortar shop) will benefit much more from a well managed Google Business profile and accompanying social media. Analyse yourself: if you go look for lets say a bicycle repair shop, isnt it the little maps result with the shortlist that will capture your first interest, especially if they have user reviews? Those results will also have the link to your site, if people would like to visit it. Or buying products, what search results will get your attention?
In short, your site doesn't need to be a special case to NOT need SEO, the other way around: your site needs to be a special case to DO rely on organic ranking.
i agree with this..max is helpful but a little to black and white .. i could not use angualar just on the seo comment, which looks like a waste of a great tool .
Very good video max, Thank you for your video. Superb MAX !
So awesome to read that, thanks so much Wisnu!
Thank you for every video you make !
Thank YOU for your support Wael :)
I have interview and i find this the best explanation on SPA
Thank YOU so much, I'm happy to hear you're liking it!
I like a combination of mvc, jquery and vue js.... not full spa but spa like components and structures on separate pages
I am a big fan of SPA especially when rendering them directly at client. I have been using React for a long while now and i thank that it is by far the best thing that has happened to front end developing in context of JS. I got one issue for which i really worry about. It has to do with social media sharing like Facebook, Twitter and so on. The impossibility to share things due to fact that they are rendered at client annoys me a lot and i can't find a solution of it unless i make some drastic work arounds which in the end make your life harder.
What about applications that have multiple single page applications. What are those called? For example you might have a page that encapsulates a functioning unit of a much larger enterprise application. That page is by itself is a single page application because as you work with it, it posts and gets new data through Ajax calls and does not fully refresh. But when you navigate to another functioning unit of the app you will fetch an entirely new single page application.
That’s how we always used to do it. Realistically, it’s still the best way to go for most sites. You get the best of both worlds.
Thanks Max, very clear and helpful explanation.
Thanks so much, so happy to read that it was helpful :)
This is helpful. Thanks max
thanks so much for this clarity!
@Max, another wonder simplified explanation of tech concepts from you. Thanks a mil. In your opinion, is the fact that you can't load a web page content from another domain in an SPA a disadvantage? I have had to open another domain's page in another tab just to achieve this.
I've been slowly ramping up on SPA development. One thing that I notice, compared with traditional websites is that SPAs have rather huge initial page loads, which seems to be a major drawback. I know that people are working on reducing this but it's still a thing.....
Sean Rasmussen Yup Time to Interactive is a concern but won't be within a year or so => Web Assembly and other cool stuff
Awesome explanation, really great overview
Max, awesome video as always. One small request, if it is possible - can you change backround color from white to something darker? This is hard on eyes to watch in continuity.
Thanks for your feedback - I'll consider this for future videos, yes
Clarified Max, thanks for the video.
Thanks a lot Sai, great to read that the video was helpful for you!
you earned my respect man !
Good explanation. Where is pwa progressive web app? Is it spa? Can you also explain pwa? What is it’s role?
The best max! ...
What do you think about ajax components?
I use PHP and the components of my pages dynamically created them with the server and the structure of the page is loaded using AJAX. In this case it would be an MPA. Do you think that I should start to make a change to SPA for future developments?
According to this comparison I would choose SPA. Why? I think there are actually no disadvantages. Yes, SEO can be challenging but it is not impossible - it can be done - it is not quantum mechanics - it is not a huge effort. Javascript strictly required? Right now I have MPA and it still does not run withous JS since I use many Vue components so practically no difference. It is worth mentioning that loading speed is very important factor. Users are impatient, one second may be a significant difference. Or am I missing something?
Thanks Max for explaining the differences in a way that's easy to comprehend. Liked the part of MPA leading to reload and related network traffic, vs what happens in SPA. A question, what's the need of changing URL in SPA when it doesn't need to reload the page? I see angular.io changes to angular.io/events when I click on events link.
Links bring SEO and every page should have an identity
MPA is not necessarily slow. If you minimize the content and load only the js/css that you use it can load pretty fast. Of course it will never be as fast as an SPA :p
This was very helpful to me. Thank you so much!
Thank you for the clear explanation!👍
Is it true to say that MPAs lend themselves to better for accessibility?
There are tools and techniques (WAI-ARIA) that enable SPA to support disabled users better but; the dependency on JavaScript, replacing DOM sections and lazy programmers all conspire against SPA being the better option.
Awesome explanation!!
Thanks so much Deepak! :)
A sort of in between solution would be the static site generation, which would provide a mix of both approach, right?
so, now its 2020 three years after this video, is SEO is better now for spa aps?
Super clear explanation. Thanks a lot dear. I have subscribed.
Thank you for your great feedback and your support, happy to have you on board :)
Great video!
Nice video! Very well explained.
Isn't it another disadvantage of SPAs that although they're faster when switching views, they're slower when processing data, like generating the HTML for large, nested lists or the like? In such cases they can heavily block the UI, right?
They can, yes but you can (and should) handle such cases via lazy loading/ loading once a user scrolls down etc. It doesn't get that much better if you render huge lists on the server. It'll take time, too and still needs to be processed by the browser (only once though, that's correct.
Great video, many thanks for that. You are a specialist in Angular 4, I guess, and I'd like to ask you about the SEO thing, how does it look if it comes to a SPA based on Angular 4? Could you give me some hints on this topic (what should I read about)?
There is a project/ package named Angular Universal which allows you to prerender Angular apps/ pages on the server - you might want to dig into that
Who the F disliked this video?! Great work, great video! Very informative! =)
You can never make everybody happy I guess, but we're very happy with the feedback we get from you and so many others :)
How can we make MPAs with laravel and Vue.js with multi platform application - web + mobile app? Quickest response will be appreciated.
And thanks for this your nice tutorials.
Best explanation - Thank you so much for this (Y)
thanks for the breakdown
thanks Max for this great video I am a big fun of your videos :) .. please make a video on how use vue.js in a multipage application
My server side rendered React and Node JS boilerplate gives me all the benefits from both categories. But yes, sorting out SEO for a SPA is a whole other can of worms to figure out.
Im loving Laravel+Livewire, best of both worlds.
I don't understand why an app, including SPA, that requires User Authentication to render contents, needs SEO -- How can Google crawl your protected app contents when the Googlebot can't even login to your app?
Thanks for a nice Video. Will SPA download full web page or a screenful size at a time ?. Example, If I browse a lengthier SPA webpage and I have not scroll till the bottom of the page, Will SPA download entire web page or only initial screen of the web page ?
Thanks for the vid. The explanations were very clear.
Awesome to read that, thank you!
I just want to ask something, I've been playing around with it. But whenever i try to test the login route in POSTMAN, it throws a HTTPException This action is unauthorized. Any clue why does this happen?
For complete description, i also posted on Laracast with regards w/ my problem. Here's the link
laracasts.com/discuss/channels/laravel/testing-api-login-throws-a-httpexception-403
SPA Design question. So I have just finished my public major public facing page. It is an SPA. Now I need to make an adminstrative site. Should I make this a separate SPA, sharing modules with the first SPA or should add to the original SPA. My gut tells me this is a separate site, but I just don't know. What do you all think?
thanks! From Argentina
@Academind Is the following also the case to build an MPA over SPA: when it is significantly a big project that handles different independent modules/domains?
Thank you for explanation max. I have one quastion, can we use angular 2x or vue2 in multiple page app (mvc). Or we have to use jquery and javascript?
thank you for the knowledge you are sharing.. it is really helpful
Thank you for explanation,
So , SPA will be more useful for well known website, right?
Not necessarily - SPAs can be useful for many web projects. Basically for all projects where you want to provide the "mobile app like" instant behavior and UX
Nicely done. ✅
Thank you very much for the great explanation.
Thanks a lot Captin!
thank you for informative knowledge.. its help a lot
makes sense thanks!
Very well explained.
So cool to read that Kruti, thank you!
Thank you for making this video....
Spa asynchronous....then what about Ajax ...if we compared
Great video. Thanks.
Great Video
How can you create a multi page app with express?