Coding

SPAs vs MPAs/MVC – Are Single Page Apps always better?

  • 00:00:01 welcome to this video about topic which
  • 00:00:04 I get asked about quite often in the
  • 00:00:07 comments
  • 00:00:08 I'm Maximilian and in this video I'll
  • 00:00:10 dive into the question single page
  • 00:00:12 applications versus multi-page
  • 00:00:14 applications or MVC Model View
  • 00:00:17 controller applications which approach
  • 00:00:19 should you choose and when should you
  • 00:00:21 choose it let's have a look
  • 00:00:26 so that's a question I get quite a lot
  • 00:00:28 should you create a single page
  • 00:00:30 application use a framework like angular
  • 00:00:32 for that or should you create a
  • 00:00:35 multi-page application for example with
  • 00:00:38 node express or with laravel for PHP and
  • 00:00:42 I often sometimes see the comparison
  • 00:00:45 single page application versus MVC Model
  • 00:00:48 View controller now that comparison to
  • 00:00:51 begin with that isn't super accurate
  • 00:00:53 because model D controller is more is a
  • 00:00:56 pattern where you basically get a get a
  • 00:01:00 clear approach on how to structure your
  • 00:01:02 files structure your project and make
  • 00:01:05 sure that you split the responsibilities
  • 00:01:07 of your app in a certain way now that
  • 00:01:09 it's not necessarily the opposite of a
  • 00:01:12 single page application so I like to
  • 00:01:13 compare single page versus multi page
  • 00:01:15 applications but let's first have a look
  • 00:01:17 at what is each of these two things how
  • 00:01:20 do we see or how do we recognize what is
  • 00:01:23 a single page application and what is a
  • 00:01:25 multi page application let's have a look
  • 00:01:27 here's the website of the New York Times
  • 00:01:30 obviously a news page page living of
  • 00:01:34 presenting news which people read so
  • 00:01:37 articles which people read I can tell
  • 00:01:40 you the New York Times page is a multi
  • 00:01:42 page application how can you see that
  • 00:01:45 let's click an article and watch this
  • 00:01:47 reload I can here in the top left of my
  • 00:01:49 browser you see how it becomes an X data
  • 00:01:53 because my browser is now reaching out
  • 00:01:55 to the server of the New York Times and
  • 00:01:57 fetching that article is all the
  • 00:01:59 resources needed for this article
  • 00:02:01 resources would be images but of course
  • 00:02:03 also CSS or JavaScript because there is
  • 00:02:06 JavaScript on this page too if I expand
  • 00:02:09 this for example that handled by a
  • 00:02:11 Chavez script so one thing which is
  • 00:02:14 sometimes perceived an incorrect way is
  • 00:02:17 that single page applications would use
  • 00:02:19 JavaScript and multi page applications
  • 00:02:21 would not that is incorrect
  • 00:02:23 a multi page application is what we well
  • 00:02:26 the only thing we created a couple of
  • 00:02:28 years ago basically and obviously we did
  • 00:02:30 use javascript there too the interesting
  • 00:02:33 thing about a multi page application is
  • 00:02:34 that if we open the developer tools and
  • 00:02:36 go to the network tab that indeed
  • 00:02:39 every new page we fetch is downloaded
  • 00:02:43 that is why you see if I click on the
  • 00:02:44 main page get a couple downloads all the
  • 00:02:47 images everything but if you closely
  • 00:02:49 watch this section on the right and I
  • 00:02:51 click on this article again well now it
  • 00:02:54 is downloaded again so here we fetch a
  • 00:02:57 brand new page with different assets
  • 00:02:59 this is the interesting part or that is
  • 00:03:02 what happens in the multi page
  • 00:03:03 application every request we send to the
  • 00:03:06 server so whenever we type a new URL or
  • 00:03:09 click on a link leads to a new page
  • 00:03:12 being sent back from the server now that
  • 00:03:16 could be a pure HTML page and a couple
  • 00:03:18 of assets used in a page like CSS and
  • 00:03:21 JavaScript and that would still be a
  • 00:03:22 multi-page application and then we would
  • 00:03:25 get different HTML pages for different
  • 00:03:27 URLs we enter or the server is using
  • 00:03:30 some server-side language like PHP or
  • 00:03:32 node and renders this HTML page on the
  • 00:03:36 server again so for example when using
  • 00:03:37 label it could use the blade templating
  • 00:03:40 engine literal ships with to render HTML
  • 00:03:42 for which it sends back the core
  • 00:03:45 takeaway is that we always get a new
  • 00:03:47 file for every request
  • 00:03:49 that's a multi-page application the
  • 00:03:51 whole website the New York Times website
  • 00:03:53 here consists of multiple pages which we
  • 00:03:56 download when we visit different parts
  • 00:03:59 of the page now the opposite would be
  • 00:04:02 the angle I Oh page the official page of
  • 00:04:04 the angular framework but of course
  • 00:04:06 there are way more single page
  • 00:04:08 applications than just this one now this
  • 00:04:10 is a single page application and the
  • 00:04:12 quickest way to tell is if you click on
  • 00:04:14 something let's say on the dog's watch
  • 00:04:16 again this real icon you see that it
  • 00:04:19 didn't spin at all
  • 00:04:20 same for resources no matter what I
  • 00:04:23 click here most links or probably all
  • 00:04:25 links here will not trigger a page
  • 00:04:28 reload or will not trigger a new page
  • 00:04:31 being fresh a pet from the server
  • 00:04:33 instead we can see what happens if in
  • 00:04:35 Spector's page – and go to the elements
  • 00:04:38 tab now let's expand this and let's not
  • 00:04:42 expand this AIO shell here if i now go
  • 00:04:45 back to getting started you see a bunch
  • 00:04:48 of the parts here was rear-ended a bunch
  • 00:04:50 of the web page was rear-ended and
  • 00:04:53 if I go to tutorial here in click on
  • 00:04:55 introduction again parts of the page
  • 00:04:57 were rear-ended and that is what a
  • 00:04:59 single page application does we only get
  • 00:05:02 one page one from the server only one
  • 00:05:07 there will never be a second page we
  • 00:05:09 fetched no matter where we click instead
  • 00:05:12 this one page also downloads a bunch of
  • 00:05:14 asset CSS images but typically also a
  • 00:05:18 lot of JavaScript because it's then this
  • 00:05:21 JavaScript code which will listen to you
  • 00:05:24 RL changes to clicks on links and will
  • 00:05:28 then rerender parts of the Dom in the
  • 00:05:31 loaded page whenever we need to do
  • 00:05:34 something whenever we for example switch
  • 00:05:37 the page by clicking a link keep in mind
  • 00:05:39 we don't switch it we just change parts
  • 00:05:41 off the page so javascript listens to
  • 00:05:43 that for example and then re renders
  • 00:05:45 parts of the dom now you could write all
  • 00:05:47 the logic on your own typically though
  • 00:05:49 you use a framework like angular react
  • 00:05:51 view to do that so that you have some
  • 00:05:55 helpers in this task of rerender in the
  • 00:05:57 dom listening to route changes and so on
  • 00:06:00 that is a single page application and
  • 00:06:02 one big advantage you can already see
  • 00:06:04 here is that it's super fast whenever we
  • 00:06:07 click somewhere things have to instantly
  • 00:06:09 were instantly taken there that's like
  • 00:06:11 the feeling we know from mobile or
  • 00:06:13 desktop apps there also when we click
  • 00:06:17 somewhere things happen super fast
  • 00:06:19 because even if we need to load some
  • 00:06:21 data from the server again and that
  • 00:06:23 certainly is also the case for single
  • 00:06:25 page applications if we need to fetch
  • 00:06:27 some user or some article data that
  • 00:06:29 happens behind the scenes so the
  • 00:06:31 application test website still reaches
  • 00:06:34 out to the server more than once that is
  • 00:06:36 not the thing but it will never get a
  • 00:06:38 new HTML file back it will only get some
  • 00:06:41 typically JSON data which JavaScript and
  • 00:06:44 again can handle to parse it and well
  • 00:06:47 render something on the page and was the
  • 00:06:49 disturbing so we might see a spinner so
  • 00:06:51 that is how it works we never load new
  • 00:06:53 pages only data and therefore for the
  • 00:06:55 user it always feels like the page is
  • 00:06:57 instantly change even if we need to wait
  • 00:07:00 for data then we present some nice
  • 00:07:01 spinner and that is the
  • 00:07:04 user experience of a single page
  • 00:07:06 application now with that leads us to
  • 00:07:09 the question is a single page
  • 00:07:10 application always better than a
  • 00:07:12 multi-page application the answer is no
  • 00:07:14 let's compare some advantages and
  • 00:07:16 disadvantages of both approaches let's
  • 00:07:19 start with the single page application
  • 00:07:20 there we have two highly reactive
  • 00:07:22 behavior as a huge advantage is behavior
  • 00:07:26 which feels like a mobile or a desktop
  • 00:07:28 app when we click somewhere things
  • 00:07:30 happen instantly
  • 00:07:30 we never have to wait or it doesn't feel
  • 00:07:33 like waiting that is a huge advantage
  • 00:07:35 and the reason the major reason or a
  • 00:07:37 single page applications are so popular
  • 00:07:39 these days a lot of the typical business
  • 00:07:42 applications running the browser like
  • 00:07:44 slack or Google Adsense for example use
  • 00:07:47 single page applications because even
  • 00:07:49 though it runs in the browser it is like
  • 00:07:51 a desktop app right if you use slack for
  • 00:07:55 example it really feels like a desktop
  • 00:07:56 app and yes there is a desktop after
  • 00:07:58 well up to but the thing is in the
  • 00:08:00 browser it is a single page application
  • 00:08:01 because things happen super fast and we
  • 00:08:03 want that behavior in a lot of the apps
  • 00:08:06 we also have a decoupled front end
  • 00:08:08 that's another advantage if you're
  • 00:08:10 creating a single page application you
  • 00:08:12 don't need to write any server-side code
  • 00:08:14 typically in bigger developer teams you
  • 00:08:17 have some guys focusing on the back end
  • 00:08:20 on the server-side code and they will
  • 00:08:22 create an API to which you can reach out
  • 00:08:25 from your single page application from
  • 00:08:27 your front-end so in angular for example
  • 00:08:30 you have the angular HTTP service to
  • 00:08:32 send requests to the backend and you
  • 00:08:34 don't need to worry about the back edge
  • 00:08:35 you will know where to send requests to
  • 00:08:37 in which kind of data you can expect to
  • 00:08:39 get back you can focus on the front-end
  • 00:08:41 on the on the JavaScript code obviously
  • 00:08:43 on writing your logic on the front that
  • 00:08:44 but also on the styling restructure you
  • 00:08:47 have a decoupled front-end and that can
  • 00:08:49 make it much easier to work on that page
  • 00:08:51 there are of course some other
  • 00:08:53 advantages you could list a bigger
  • 00:08:55 disadvantage though is that search
  • 00:08:57 engine optimization can be challenging
  • 00:09:00 there are tools and actually innovation
  • 00:09:03 there is rapid so a lot of new things
  • 00:09:06 are coming up every day actually when it
  • 00:09:08 comes to this but right now it still is
  • 00:09:10 kind of complicated or at least takes
  • 00:09:13 quite some advanced knowledge to make
  • 00:09:16 your single page application
  • 00:09:18 supera SEO friendly because crawlers
  • 00:09:22 like the Googlebot can parse JavaScript
  • 00:09:26 and can understand your page even if you
  • 00:09:28 render it with JavaScript but they have
  • 00:09:30 big problems if you're loading the
  • 00:09:33 content asynchronously and that happens
  • 00:09:35 a lot on single page applications that's
  • 00:09:37 this spinner
  • 00:09:38 thing right we visit a page and that
  • 00:09:41 page loads instantly keep in mind we
  • 00:09:43 don't really visit a new page just some
  • 00:09:45 parts of the Dom change and to the
  • 00:09:47 crawler everything is done at this point
  • 00:09:49 the crawler doesn't know there is more
  • 00:09:52 data to arrive and that this data will
  • 00:09:54 eventually be rendered on the page so to
  • 00:09:57 the crawler if you're loading a list of
  • 00:09:59 blog articles the crawler might just see
  • 00:10:02 the spinner and that of course does
  • 00:10:04 really miss the point of search engine
  • 00:10:06 optimization so that's challenging there
  • 00:10:08 are tools but it requires advanced
  • 00:10:11 knowledge most of the time now an hour
  • 00:10:14 disadvantage could be that you
  • 00:10:16 absolutely require JavaScript now
  • 00:10:18 obviously most people have that turned
  • 00:10:21 on but a single page application just
  • 00:10:23 can't run without JavaScript everything
  • 00:10:25 happens through JavaScript everything
  • 00:10:28 gets rear-ended fruit JavaScript if it's
  • 00:10:30 turned off your page won't work at all
  • 00:10:33 another thing which is not necessarily a
  • 00:10:35 disadvantage but also important to
  • 00:10:37 mention is that single page applications
  • 00:10:40 tend to favor more modern browsers now
  • 00:10:44 support for older browsers isn't that
  • 00:10:47 bad typically you won't see Internet
  • 00:10:50 Explorer 8 support in a single page
  • 00:10:52 application if you need that as a
  • 00:10:54 different story
  • 00:10:55 but if you want to optimize for as many
  • 00:10:57 browsers as possible you can also hit
  • 00:11:00 limits when creating a single page
  • 00:11:02 application on the other hand to focus
  • 00:11:05 on at least a little bit more modern
  • 00:11:07 browsers gives you way more tools and
  • 00:11:09 things you can do with your application
  • 00:11:11 that's why it's not necessarily a
  • 00:11:13 disadvantage what about a multi page
  • 00:11:16 application then their search engine
  • 00:11:19 optimization is a big advantage
  • 00:11:21 obviously since you get a brand new page
  • 00:11:24 which already holds the finished content
  • 00:11:27 for every request the user sees what the
  • 00:11:30 crawler sees
  • 00:11:31 and therefore your your search engine
  • 00:11:34 crawlers will really fetch what is on
  • 00:11:37 your page and that make search engine
  • 00:11:40 optimization way easier another
  • 00:11:43 advantage in my opinion is that well we
  • 00:11:46 only both multi page applications until
  • 00:11:48 a couple of years ago and still today
  • 00:11:51 the majority of the web pages are multi
  • 00:11:54 page applications hence there are a lot
  • 00:11:57 of best practices approaches examples
  • 00:12:01 tutorial solutions frameworks which
  • 00:12:04 embrace that concept right which allow
  • 00:12:07 you to create multi page applications
  • 00:12:09 and therefore it might be much easier
  • 00:12:11 especially as a new developer to get
  • 00:12:14 into creating web pages when working
  • 00:12:16 with this multi page application
  • 00:12:18 approach there are things which are
  • 00:12:20 simply easier because you got more
  • 00:12:22 resources to learn them that shouldn't
  • 00:12:24 of course not be the final criterion
  • 00:12:28 which you decide what you want to build
  • 00:12:30 but it is a criteria in the end because
  • 00:12:33 if things are easier to learn use and
  • 00:12:35 well create crates and secure
  • 00:12:38 applications with that is definitely
  • 00:12:40 noteworthy there are disadvantages to
  • 00:12:44 basically the opposite of the advantages
  • 00:12:47 of the single page application you could
  • 00:12:49 say we have slower pages in that we need
  • 00:12:54 to fetch new pages for every request
  • 00:12:55 with wait for that now if your server
  • 00:12:58 slow your application is slow and even
  • 00:13:01 though you still would have to wait for
  • 00:13:02 data to be fetched in a single page
  • 00:13:04 application to there you at least see a
  • 00:13:07 spinner and the majority of the page was
  • 00:13:10 loaded on a multi page application
  • 00:13:12 nothing is loaded if you winter the new
  • 00:13:13 page and that can lead to a worse user
  • 00:13:17 experience because you constantly have
  • 00:13:19 to wait for the whole page to load not
  • 00:13:22 an absolute nightmare of course but
  • 00:13:24 definitely a worse user experience than
  • 00:13:26 in single page applications and we have
  • 00:13:29 a tighter coupling of front-end and
  • 00:13:31 back-end since your server is the one
  • 00:13:35 sending the HTML pages or the
  • 00:13:39 server-side rendered pages you
  • 00:13:41 typically we'll have one process or one
  • 00:13:45 bigger project where you have to service
  • 00:13:47 I logic for example in your controllers
  • 00:13:49 and your models and then you have two
  • 00:13:51 views and yes obviously the views would
  • 00:13:54 be created by front-end developers but
  • 00:13:56 they still need to be aware of the
  • 00:13:58 server-side environment you're working
  • 00:14:00 in the server-side language which will
  • 00:14:02 render the views in the end and that is
  • 00:14:05 certainly not impossible to handle but
  • 00:14:08 might be a disadvantage might be easier
  • 00:14:10 in a single-page application you can
  • 00:14:12 just hire an angular expert and let him
  • 00:14:14 create a application for you and you can
  • 00:14:16 use your PHP level back-end and your
  • 00:14:19 angular expert doesn't have to think
  • 00:14:22 about the connection of the two at all
  • 00:14:24 now on the other hand or just like on
  • 00:14:28 the single page application case there
  • 00:14:31 is one neutral point in my opinion
  • 00:14:33 multi-page applications tend to have a
  • 00:14:36 better support for legacy browsers
  • 00:14:38 because they not depend on JavaScript as
  • 00:14:41 much they certainly use it to enhance
  • 00:14:43 the individual pages to add some
  • 00:14:45 reactive elements to them but they're
  • 00:14:49 not as dependent as single page
  • 00:14:51 applications and for that reason they
  • 00:14:54 typically support more browsers which
  • 00:14:57 you might matter to you too so that's my
  • 00:15:00 competition of course basically my
  • 00:15:04 opinion or what I find to be important
  • 00:15:06 please let me know in the comment
  • 00:15:09 section what you think about it which
  • 00:15:11 other things matter to you which are
  • 00:15:14 advantages to you see for single page or
  • 00:15:16 multi page applications in case you're
  • 00:15:19 now wondering well what should I choose
  • 00:15:21 it really depends on your project here
  • 00:15:24 at some point probably more points to be
  • 00:15:27 found in the comment section there is no
  • 00:15:29 super right or super wrong here
  • 00:15:31 typically its search engine optimization
  • 00:15:34 super important to you right now you
  • 00:15:36 still might want to pick a multi page
  • 00:15:38 application if you're creating more like
  • 00:15:40 an in-browser business application like
  • 00:15:44 slack or something like that a single
  • 00:15:46 page application might be a great
  • 00:15:48 solution for you I hope this video was
  • 00:15:51 helpful and hopefully see you in future
  • 00:15:53 videos
  • 00:15:54 fine