Single Page Application advantages and disadvantages

Question

I ve read about SPA and it advantages  I find most of them unconvincing  There are 3 advantages that arouse my doubts   Question  Can you act as advocate of SPA and prove that I am wrong about first three statements                                     ADVANTAGES       1  SPA is extremely good for very responsive sites      Server-side rendering is hard to implement for all the intermediate   states - small view states do not map well to URLs       Single page apps are distinguished by their ability to redraw any part   of the UI without requiring a server roundtrip to retrieve HTML  This   is achieved by separating the data from the presentation of data by   having a model layer that handles data and a view layer that reads   from the models    What is wrong with holding a model layer for non-SPA  Does SPA the only compatible architecture with MVC on client side   2  With SPA we don t need to use extra queries to the server to download pages   Hah  and how many pages user can download during visiting your site  Two  three  Instead there appear another security problems and you need to separate your login page  admin page etc into separate pages  In turn it conflicts with SPA architecture   3 May be any other advantages  Don t hear about any else                                    DISADVANTAGES        Client must enable javascript  Only one entry point to the site  Security    P S  I ve worked on SPA and non-SPA projects  And I m asking those questions because I need to deepen my understanding  No mean to harm SPA supporters  Don t ask me to read a bit more about SPA  I just want to hear your considerations about that

User · Answer

2  With SPA we don t need to use extra queries to the server to download pages   I still have to learn a lot but since I started learn about SPA  I love them   This particular point may make a huge difference   In many web apps that are not SPA  you will see that they will still retrieve and add content to the pages making ajax requests  So I think that SPA goes beyond by considering  what if the content that is going to be retrieved and displayed using ajax is the whole page  and not just a small portion of a page   Let me present an scenario  Consider that you have 2 pages     a page with list of products a page to view the details of a specific product   Consider that you are at the list page  Then you click on a product to view the details  The client side app will trigger 2 ajax requests    a request to get a json object with the product details a request to get an html template where the product details will be inserted   Then  the client side app will insert the data into the html template and display it   Then you go back to the list  no request is done for this   and you open another product  This time  there will be only an ajax request to get the details of the product  The html template is going to be the same so you don t need to download again   You may say that in a non SPA  when you open the product details  you make only 1 request and in this scenario we did 2  Yes  But you get the gain from an overall perspective  when you navigate across of many pages  the number of requests is going to be lower  And the data that is transferred between the client side and the server is going to be lower too because the html templates are going to be reused  Also  you don t need to download in every requests all those css  images  javascript files that are present in all the pages   Also  let s consider that you server side language is Java  If you analyze the 2 requests that I mentioned  1 downloads data  you don t need to load any view file and call the view rendering engine  and the other downloads and static html template so you can have an HTTP web server that can retrieve it directly without having to call the Java application server  no computation is done   Finally  the big companies are using SPA  Facebook  GMail  Amazon  They don t play  they have the greatest engineers studying all this  So if you don t see the advantages you can initially trust them and hope to discover them down the road    But is important to use good SPA design patterns  You may use a framework like AngularJS  Don t try to implement an SPA without using good design patterns because you may end up having a mess

User · Answer

I am a pragmatist  so I will try to look at this in terms of costs and benefits   Note that for any disadvantage I give  I recognize that they are solvable   That s why I don t look at anything as black and white  but rather  costs and benefits   Advantages   Easier state tracking - no need to use cookies  form submission  local storage  session storage  etc  to remember state between 2 page loads  Boiler plate content that is on every page  header  footer  logo  copyright banner  etc   only loads once per typical browser session  No overhead latency on switching  pages     Disadvantages   Performance monitoring - hands tied  Most browser-level performance monitoring solutions I have seen focus exclusively on page load time only  like time to first byte  time to build DOM  network round trip for the HTML  onload event  etc   Updating the page post-load via AJAX would not be measured   There are solutions which let you instrument your code to record explicit measures  like when clicking a link  start a timer  then end a timer after rendering the AJAX results  and send that feedback   New Relic  for example  supports this functionality   By using a SPA  you have tied yourself to only a few possible tools  Security   penetration testing - hands tied  Automated security scans can have difficulty discovering links when your entire page is built dynamically by a SPA framework   There are probably solutions to this  but again  you ve limited yourself  Bundling  It is easy to get into a situation when you are downloading all of the code needed for the entire web site on the initial page load  which can perform terribly for low-bandwidth connections   You can bundle your JavaScript and CSS files to try to load in more natural chunks as you go  but now you need to maintain that mapping and watch for unintended files to get pulled in via unrealized dependencies  just happened to me    Again  solvable  but with a cost  Big bang refactoring  If you want to make a major architectural change  like say  switch from one framework to another  to minimize risk  it s desirable to make incremental changes   That is  start using the new  migrate on some basis  like per-page  per-feature  etc   then drop the old after   With traditional multi-page app  you could switch one page from Angular to React  then switch another page in the next sprint   With a SPA  it s all or nothing   If you want to change  you have to change the entire application in one go  Complexity of navigation  Tooling exists to help maintain navigational context in SPA s  like history js  Angular 2  most of which rely on either the URL framework     or the newer history API   If every page was a separate page  you don t need any of that  Complexity of figuring out code  We naturally think of web sites as pages   A multi-page app usually partitions code by page  which aids maintainability    Again  I recognize that every one of these problems is solvable  at some cost   But there comes a point where you are spending all your time solving problems which you could have just avoided in the first place   It comes back to the benefits and how important they are to you

User · Answer

One major disadvantage of SPA - SEO  Only recently Google and Bing started indexing Ajax-based pages by executing JavaScript during crawling  and still in many cases pages are being indexed incorrectly    While developing SPA  you will be forced to handle SEO issues  probably by post-rendering all your site and creating static html snapshots for crawler s use  This will require a solid investment in a proper infrastructures   Update 19 06 16   Since writing this answer a while ago  I gain much more experience with Single Page Apps  namely  AngularJS 1 x  - so I have more info to share    In my opinion  the main disadvantage of SPA applications is SEO  making them limited to kind of  dashboard  apps only  In addition  you are going to have a much harder times with caching  compared to classic solutions  For example  in ASP NET caching is extreamly easy - just turn on OutputCaching and you are good  the whole HTML page will be cached according to URL  or any other parameters   However  in SPA you will need to handle caching yourself  by using some solutions like second level cache  template caching  etc

User · Answer

I would like to make the case for SPA being best for Data Driven Applications   gmail  of course is all about data and thus a good candidate for a SPA     But if your page is mostly for display  for example  a terms of service page   then a SPA is completely overkill   I think the sweet spot is having a site with a mixture of both SPA and static MVC style pages  depending on the particular page   For example  on one site I am building  the user lands on a standard MVC index page   But then when they go to the actual application  then it calls up the SPA   Another advantage to this is that the load-time of the SPA is not on the home page  but on the app page  The load time being on the home page could be a distraction to first time site users   This scenario is a little bit like using Flash   After a few years of experience  the number of Flash only sites dropped to near zero due to the load factor   But as a page component  it is still in use

User · Answer

In my development I found two distinct advantages for using an SPA  That is not to say that the following can not be achieved in a traditional web app just that I see incremental benefit without introducing additional disadvantages    Potential for less server request as rendering new content isn   t always or even ever an http server request for a new html page  But I say potential because new content could easily require an Ajax call to pull in data but that data could be incrementally lighter than the itself plus markup providing a net benefit  The ability to maintain    State     In its simplest terms  set a variable on entry to the app and it will be available to other components throughout the user   s experience without passing it around or setting it to a local storage pattern  Intelligently managing this ability however is key to keep the top level scope uncluttered    Other than requiring JS  which is not a crazy thing to require of web apps  other noted disadvantages are in my opinion either not specific to SPA or can be mitigated through good habits and development patterns

User · Answer

I understand this is an older question  but I would like to add another disadvantage of Single Page Applications   If you build an API that returns results in a data language  such as XML or JSON  rather than a formatting language  like HTML   you are enabling greater application interoperability  for example  in business-to-business  B2B  applications  Such interoperability has great benefits but does allow people to write software to  mine   or steal  your data  This particular disadvantage is common to all APIs that use a data language  and not to SPAs in general  indeed  an SPA that asks the server for pre-rendered HTML avoids this  but at the expense of poor model view separation   This risk exposed by this disadvantage can be mitigated by various means  such as request limiting and connection blocking  etc

User · Answer

For such companies as google  amazon etc  whose servers are running at max capacity in 24 7-mode  reducing traffic means real money - less hardware  less energy  less maintenance  Shifting CPU-usage from server to client pays off  and SPAs shine  The advantages overweight disadvantages by far  So  SPA or not SPA depends much on the use case   Just for mentioning another  probably not so obvious  for Web-developers  use case for SPAs  I m currently looking for a way to implement GUIs in embedded systems and browser-based architecture seems appealing to me  Traditionally there were not many possibilities for UIs in embedded systems - Java  Qt  wx  etc or  propriety commercial frameworks  Some years ago Adobe tried to enter the market with flash but seems to be not so successful    Nowadays  as  embedded systems  are as powerful as mainframes some years ago  a browser-based UI connected to the control unit via REST is a possible solution  The advantage is  the huge palette of tools for UI for no cost   e g  Qt require 20-30  per sold unit on royalty fees plus 3000-4000  per developer   For such architecture SPA offers many advantages - e g  more familiar development-approach for desktop-app developers  reduced server access  often in car-industry the UI and system muddles are separate hardware  where the system-part has an RT OS     As the only client is the built-in browser  the mentioned disadvantages like JS-availability  server-side logging  security don t count any more

User · Answer

Disadvantages  1  Client must enable javascript  Yes  this is a clear disadvantage of SPA  In my case I know that I can expect my users to have JavaScript enabled  If you can t then you can t do a SPA  period  That s like trying to deploy a  NET app to a machine without the  NET Framework installed   2  Only one entry point to the site  I solve this problem using SammyJS  2-3 days of work to get your routing properly set up  and people will be able to create deep-link bookmarks into your app that work correctly  Your server will only need to expose one endpoint - the  give me the HTML   CSS   JS for this app  endpoint  think of it as a download update location for a precompiled application  - and the client-side JavaScript you write will handle the actual entry into the application   3  Security  This issue is not unique to SPAs  you have to deal with security in exactly the same way when you have an  old-school  client-server app  the HATEOAS model of using Hypertext to link between pages   It s just that the user is making the requests rather than your JavaScript  and that the results are in HTML rather than JSON or some data format  In a non-SPA app you have to secure the individual pages on the server  whereas in a SPA app you have to secure the data endpoints   And  if you don t want your client to have access to all the code  then you have to split apart the downloadable JavaScript into separate areas as well  I simply tie that into my SammyJS-based routing system so the browser only requests things that the client knows it should have access to  based on an initial load of the user s roles  and then that becomes a non-issue    Advantages   A major architectural advantage of a SPA  that rarely gets mentioned  in many cases is the huge reduction in the  chattiness  of your app  If you design it properly to handle most processing on the client  the whole point  after all   then the number of requests to the server  read  possibilities for 503 errors that wreck your user experience   is dramatically reduced  In fact  a SPA makes it possible to do entirely offline processing  which is huge in some situations  Performance is certainly better with client-side rendering if you do it right  but this is not the most compelling reason to build a SPA   Network speeds are improving  after all   Don t make the case for SPA on this basis alone  Flexibility in your UI design is perhaps the other major advantage that I have found  Once I defined my API  with an SDK in JavaScript   I was able to completely rewrite my front-end with zero impact on the server aside from some static resource files  Try doing that with a traditional MVC app      This becomes valuable when you have live deployments and version consistency of your API to worry about     So  bottom line  If you need offline processing  or at least want your clients to be able to survive occasional server outages  - dramatically reducing your own hardware costs - and you can assume JavaScript  amp  modern browsers  then you need a SPA  In other cases it s more of a tradeoff

User · Answer

Disadvantages  Technically  design and initial development of SPA is complex and can be avoided  Other reasons for not using this SPA can be    a  Security  Single Page Application is less secure as compared to traditional pages due to cross site scripting XSS   b  Memory Leak  Memory leak in JavaScript can even cause powerful Computer to slow down  As traditional websites encourage to navigate among pages  thus any memory leak caused by previous page is almost cleansed leaving less residue behind  c  Client must enable JavaScript to run SPA  but in multi-page application JavaScript can be completely avoided  d  SPA grows to optimal size  cause long waiting time  Eg  Working on Gmail with slower connection    Apart from above  other architectural limitations are Navigational Data loss  No log of Navigational History in browser and difficulty in Automated Functional Testing with selenium   This link explain Single Page Application s Advantages and Disadvantages

User · Answer

Let s look at one of the most popular SPA sites  GMail   1  SPA is extremely good for very responsive sites   Server-side rendering is not as hard as it used to be with simple techniques like keeping a  hash in the URL  or more recently HTML5 pushState  With this approach the exact state of the web app is embedded in the page URL  As in GMail every time you open a mail a special hash tag is added to the URL  If copied and pasted to other browser window can open the exact same mail  provided they can authenticate   This approach maps directly to a more traditional query string  the difference is merely in the execution   With HTML5 pushState   you can eliminate the  hash and use completely classic URLs which can resolve on the server on the first request and then load via ajax on subsequent requests   2  With SPA we don t need to use extra queries to the server to download pages   The number of pages user downloads during visit to my web site   really how many mails some reads when he she opens his her mail account  I read  50 at one go  now the structure of the mails is almost the same  if you will use a server side rendering scheme the server would then render it on every request typical case        - security concern - you should  should not keep separate pages for the admins login that entirely depends upon the structure of you site take paytm com for example also making a web site SPA does not mean that you open all the endpoints for all the users I mean I use forms auth with my spa web site      - in the probably most used SPA framework Angular JS the dev can load the entire html temple from the web site so that can be done depending on the users authentication level  pre loading html for all the auth types isn t SPA    3  May be any other advantages  Don t hear about any else     these days you can safely assume the client will have javascript enabled browsers   only one entry point of the site  As I mentioned earlier maintenance of state is possible you can have any number of entry points as you want but you should have one for sure   even in an SPA user only see to what he has proper rights  you don t have to inject every thing at once  loading diff html templates and javascript async is also a valid part of SPA     Advantages that I can think of are    rendering html obviously takes some resources now every user visiting you site is doing this  also not only rendering major logics are now done client side instead of server side  date time issues - I just give the client UTC time is a pre set format and don t even care about the time zones I let javascript handle it  this is great advantage to where I had to guess time zones based on location derived from users IP   to me state is more nicely maintained in an SPA because once you have set a variable you know it will be there  this gives a feel of developing an app rather than a web page  this helps a lot typically in making sites like foodpanda  flipkart  amazon  because if you are not using client side state you are using expensive sessions  websites surely are extremely responsive - I ll take an extreme example for this try making a calculator in a non SPA website I know its weird     Updates from Comments     It doesn t seem like anyone mentioned about sockets and long-polling    If you log out from another client say mobile app  then your browser   should also log out  If you don t use SPA  you have to re-create the   socket connection every time there is a redirect  This should also   work with any updates in data like notifications  profile update etc      An alternate perspective  Aside from your website  will your project   involve a native mobile app  If yes  you are most likely going to be   feeding raw data to that native app from a server  ie JSON  and doing   client-side processing to render it  correct  So with this assertion    you re ALREADY doing a client-side rendering model  Now the question   becomes  why shouldn t you use the same model for the website-version   of your project  Kind of a no-brainer  Then the question becomes   whether you want to render server-side pages only for SEO benefits and   convenience of shareable bookmarkable URLs

User · Answer

Try not to consider using a SPA without first defining how you will address security and API stability on the server side  Then you will see some of the true advantages to using a SPA  Specifically  if you use a RESTful server that implements OAUTH 2 0 for security  you will achieve two fundamental separation of concerns that can lower your development and maintenance costs     This will move the session  and it s security  onto the SPA and relieve your server from all of that overhead   Your API s become both stable and easily extensible    Hinted to earlier  but not made explicit  If your goal is to deploy Android  amp  Apple applications  writing a JavaScript SPA that is wrapped by a native call to host the screen in a browser  Android or Apple  eliminates the need to maintain both an Apple code base and an Android code base

[javascript] Single Page Application: advantages and disadvantages

Examples related to javascript

Examples related to architecture

Examples related to client-side

Examples related to single-page-application