[{"@context":"http:\/\/schema.org","@type":"Article","@id":"https:\/\/www.the-future-of-commerce.com\/2019\/06\/06\/benefits-of-single-page-applications\/#Article","articleBody":"The benefits of single page applications have become more and more clear as the customer experience requires e-commerce providers to deliver quick, reliable interactions with them.\nOver the last 20 years, most websites have been built in the same way \u2013 with the use of HTML, CSS, and JavaScript. These technologies have become more advanced over time, but the principle has largely remained the same: A user interacts with a webpage and the user\u2019s browser makes a call to a web server which, in turn, responds with another batch of HTML, CSS, and JavaScript, which is then loaded and displayed in the browser.\n(Whew. That\u2019s a lot.)\nThis process most commonly involves the page being refreshed, although some technologies, such as AJAX, do enable developers to alter some content without refreshing the entire page. Because of this, most websites act and behave distinctly like a website, rather than an application.\nMost websites also have a tightly coupled back-end and presentation layer, meaning there is no real separation between the front and back end of a website, as both are part of a single monolithic application.\nHow single page applications and progressive web apps can improve customer experience\nOver the last decade, native iOS and Android apps have become common place for almost all of us. These applications behave differently than actual websites, providing users with a very different, and often more satisfying, experience.\nPages don\u2019t refresh when a link or button is pressed, changes load much faster, and the experience is often a lot better than the equivalent mobile website. In the case of a native e-commerce app, when a user clicks on a link, the application will make a call to a back end server, but rather than that server returning the HTML, CSS, and JavaScript presentation layer, it is simply sending the required raw data, and the application manages how that is displayed to the user.\nFor example, if a user clicks on a product to view its details, the application will call the back end server asking for the details of that product and the server will respond with a string of data that contains items such as the product name, its price, and a link to an image, but doesn\u2019t need to also send any HTML, CSS, or JavaScript to define how it will be displayed.\nThe application itself is the presentation layer, so it doesn\u2019t need any of that from the back end server. This is much faster and allows the application to display the product details to the customer without refreshing a page. The technology gives developers freedom to build a seamless and fluid customer experience without the constraints of the traditional model.\nWouldn\u2019t it be great if an app-like experience could be provided through a web browser so that the distinction between a native app and a website becomes blurred?\nThis is where Single Page Applications (SPAs) and Progressive Web Apps (PWAs) come in.\nWhat is a Single Page Application?\nAn SPA is an application written in JavaScript that runs in a web browser, and generally doesn\u2019t require a page refresh to show new information.\nWhen a user first visits the website, the application, along with presentation resources (HTML, CSS, and some scripts) are loaded into the browser. From this point onwards, the user is on a single web page, and the application is loading the relevant content and altering the display as and when required.\nJust like a native app, when a user clicks on a link, the application calls the back end server, which in turn sends the required data in a string, which does not generally include any of the presentation resources, as they\u2019ve already been loaded when the user first visited the website.\nBecause the user is essentially only on a single web page, there isn\u2019t really a concept of refreshing a page. Instead, the application alters the page to show different information when required.\nSPAs are generally entirely de-coupled from the back end application and interfaces to the back end through a set of APIs.\u00a0 It will often sit on its own server and can deployed separately. In a way, it\u2019s quite agnostic towards the back end application, as it\u2019s simply sending and receiving data to and from it \u2013 treating it like a 3rd party system.\nWe\u2019ve all been using SPAs for a while now, probably without even realizing it. Facebook, Gmail, Twitter, LinkedIn, and Instagram (among many others) all use SPAs in place of their websites.\nIf you visit any of those websites now, you\u2019ll notice that they behave much more like a native app than a traditional website.\u00a0 Pages rarely, if ever, refresh when you interact with them, and are very fast. Clicking on links and buttons changes the content you\u2019re looking at, but items like the header and footer almost never refresh once they\u2019ve\u00a0 initially loaded.\nBenefits of Single Page Applications\nThe biggest and most obvious advantage of an SPA is how they can be used to improve customer experience by allowing designers and developers to provide an app-like experience and not be constrained by the traditional approach of reloading pages.\nThis does require a new way of designing and thinking, as the normal rules no longer apply, but the benefits to the user experience can be massive.\nSPAs generally load content much faster than standard websites, as much of the presentation resources (HTML,CSS) are loaded only once. Interactions with the application only require a call to the back end server to retrieve small amounts of data, rather than fully formed HTML\/CSS pages. The application can then rapidly display the changed data without having to reload the page.\nBecause an SPA is entirely de-coupled from the back end application, it can deployed separately, which can have a very big advantage. A small front-end change will not require the entire application to be deployed which can be quite a big task and sometimes requires downtime.\nDisadvantages of an SPA\nOne of the biggest challenges of using SPAs is the impact it has on SEO. As they don\u2019t always have the traditional structure of distinct pages, each with a distinct url, this can cause issues with search engines indexing the content. However, this can be countered with the use of techniques such as server-side rendering and ensuring that clicks do generate unique urls.\nIt\u2019s also becoming less of an issue over time, as search engine bots are being changed to cope with SPAs. Google is one of the companies championing them, after all.\nSome SPAs take a little time to load on the first visit because the application and presentation resources are loading on the first page view.\nThis is very noticeable with SPAs such as Gmail, where they have a big loading image when you first visit the website. This issue can be countered with the use of server-side rendering and efficient programming to ensure that the initial load of the application and resources is not too big.\nWhat is a Progressive Web App?\nA PWA is a little hard to define, as it\u2019s not any specific technology, but more of a development methodology or set of principles that together make a website or application more or less PWA.\nThe term PWA was originally coined by Google, who created a checklist to define what makes a PWA. Among other things Google have defined that a PWA must be:\nSafe \u2013 served under https\nResponsive \u2013 fit any form factor\nAble to work offline \u2013 using service workers to cache pages\nFast \u2013 able to load fast on a 3G connections\nApp-like \u2013 using app-shell mode and design to feel like an app\nInstallable \u2013 use a manifest file to allow app to be added to home screen\nEngaging \u2013 using tools such as push notifications\nProgressive \u2013 works on all browsers but is progressively better on modern browsers\nAs you can see, some of the checklist items are a little vague or subjective. You can also see that some of them sound similar to an SPA. A traditional HTML\/CSS website can be made into a PWA as can an SPA. An SPA isn\u2019t automatically a PWA, but has some features that push it in that direction.\nConfused yet?\nAdvantages of PWAs\nAs with an SPA, one of the biggest advantages of a PWA is the improvement in the customer experience, giving it an app-like feel and bridging the gap between a traditional mobile website and a native iOS or Android app.\nFeatures like the ability to save to your home screen or being able to cache pages through service workers can make the website look and feel a bit like a native app.\nPWAs also tend to be very fast, as that\u2019s one of the key principles in the checklist.\nThe Android operating system gives browsers access to the hardware of the mobile device. which allows things like push notifications and use of NFC scanning, which can really improve the CX.\nDisadvantages of PWAs\nThe biggest disadvantage of PWAs is the lack of support from Apple. To get the best out of a PWA, it really needs to run on an Android device, as the Android operating system gives browsers access to a significant amount of features on the device, whereas Apple severely restricts this. This is slowly improving, but there\u2019s still a long way to go.\nAnother disadvantage is the lack of a clear definition, which can be open to interpretation.\nSPAs and PWAs are the future of website development\nAlthough this technology is still not entirely mainstream for most e-commerce websites, it\u2019s undoubtedly the future of website development.\nWhile SPAs are a specific technology that can be used to build an e-commerce application, PWAs are generally websites that\u2019ve been built following a methodology laid out by Google, which they feel provides the best customer experience.\nAnyone developing an SPA should aim to meet the PWA checklist as much as possible in order to provide the best possible CX. These technologies give designers and developers more freedom in the user experience and journeys, allowing them to move away from the traditional page by page model.\nMany software providers like SAP and IBM are heavily investing in creating SPA front ends for their e-commerce platforms, and I suspect that within a few years, most e-commerce websites will be built in this way, using JavaScript frameworks such as Angular, Vue, or React.\nFewer and fewer e-commerce sites will be built using the traditional HTML\/CSS model, and the gap between websites and native apps will get smaller and smaller, to a point where it\u2019ll be hard to distinguish between them.\nDuring uncertain times, what makes a great CX? Join experts as they discuss.","author":{"@type":"Person","@id":"https:\/\/www.the-future-of-commerce.com\/2019\/06\/06\/benefits-of-single-page-applications\/#Article_Person","image":{"@type":"ImageObject","@id":"https:\/\/www.the-future-of-commerce.com\/2019\/06\/06\/benefits-of-single-page-applications\/#Article_Person_ImageObject","url":"https:\/\/23x6xj3o92m9361dbu2ij362-wpengine.netdna-ssl.com\/wp-content\/uploads\/2017\/06\/Branwell-Moffat-e1497890164339-150x150.jpg"},"name":"Branwell Moffat","sameAs":["https:\/\/twitter.com\/branwellm?lang=en","https:\/\/www.linkedin.com\/in\/branwellmoffat\/"],"url":"https:\/\/www.the-future-of-commerce.com\/contributor\/branwell-moffat\/"},"dateModified":"2020-11-06T22:14:22+00:00","datePublished":"2019-06-06T15:35:45+00:00","description":"The benefits of single page applications and progressive web apps improve customer experience. Within a few years, most e-commerce websites will be built with them.","headline":"The benefits of single page applications and progressive web apps: Improving CX","image":{"@type":"ImageObject","@id":"https:\/\/www.the-future-of-commerce.com\/2019\/06\/06\/benefits-of-single-page-applications\/#Article_ImageObject","height":"630","url":"https:\/\/www.the-future-of-commerce.com\/wp-content\/uploads\/2019\/06\/thumbnail-16489e76d8bc47b3abf3312bd5b76abc-1200x630.jpeg","width":"1200"},"mainEntityOfPage":"https:\/\/www.the-future-of-commerce.com\/2019\/06\/06\/benefits-of-single-page-applications\/","name":"The benefits of single page applications and progressive web apps: Improving CX","publisher":{"@type":"Organization","@id":"https:\/\/www.the-future-of-commerce.com\/","additionalType":"https:\/\/www.wikidata.org\/wiki\/Q1193236","description":"Relevant, timely information & analysis on commerce trends, both consumer-facing and B2B.","logo":{"@type":"ImageObject","@id":"https:\/\/23x6xj3o92m9361dbu2ij362-wpengine.netdna-ssl.com\/wp-content\/themes\/hybris_foc\/assets\/images\/layout\/logo-new-2x.png?_=1","height":"96","url":"https:\/\/23x6xj3o92m9361dbu2ij362-wpengine.netdna-ssl.com\/wp-content\/themes\/hybris_foc\/assets\/images\/layout\/logo-new-2x.png?_=1","width":"500"},"name":"The Future of Customer Engagement and Experience","sameAs":["https:\/\/podcasts.apple.com\/us\/podcast\/a-call-for-a-better-experience\/id1479742201","https:\/\/twitter.com\/FutureOfCEC","https:\/\/www.linkedin.com\/groups\/4844282","https:\/\/www.the-future-of-commerce.com\/feed\/"],"url":"https:\/\/www.the-future-of-commerce.com\/"},"url":"https:\/\/www.the-future-of-commerce.com\/2019\/06\/06\/benefits-of-single-page-applications\/#Article"},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"2019","item":"https:\/\/www.the-future-of-commerce.com\/2019\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"06","item":"https:\/\/www.the-future-of-commerce.com\/2019\/\/06\/#breadcrumbitem"},{"@type":"ListItem","position":3,"name":"06","item":"https:\/\/www.the-future-of-commerce.com\/2019\/\/06\/\/06\/#breadcrumbitem"},{"@type":"ListItem","position":4,"name":"The benefits of single page applications and progressive web apps: Improving CX","item":"https:\/\/www.the-future-of-commerce.com\/2019\/06\/06\/benefits-of-single-page-applications\/#breadcrumbitem"}]}]