var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var N=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var t in e)c(a,t,{get:e[t],enumerable:!0})},l=(a,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of m(e))!k.call(a,s)&&s!==t&&c(a,s,{get:()=>e[s],enumerable:!(i=d(e,s))||i.enumerable});return a};var w=(a,e,t)=>(t=a!=null?p(u(a)):{},l(e||!a||!a.__esModule?c(t,"default",{value:a,enumerable:!0}):t,a)),b=a=>l(c({},"__esModule",{value:!0}),a);var r=N((T,o)=>{o.exports=_jsx_runtime});var q={};g(q,{default:()=>f,frontmatter:()=>y});var n=w(r()),y={title:"What is a Single Page Application",date:new Date(16140384e5),excerpt:"Learn what Single Page Applications are, how they work, and how they differ from traditional websites."};function h(a){let e=Object.assign({p:"p",a:"a",h2:"h2",strong:"strong",h3:"h3",pre:"pre",code:"code",span:"span",ul:"ul",li:"li"},a.components),{Image:t}=e;return t||S("Image",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:"Not all websites behave in the same way. Web development has been constantly evolving and in the years many libraries and frameworks came out, providing new approaches and techniques to develop web applications."}),` `,(0,n.jsxs)(e.p,{children:["A modern approach which has gained popularity in the last years is the Single Page Application model. Single Page Applications have become quite popular thanks to libraries and frameworks like ",(0,n.jsx)(e.a,{href:"https://reactjs.org/",children:"React"}),", ",(0,n.jsx)(e.a,{href:"https://angular.io/",children:"Angular"})," and ",(0,n.jsx)(e.a,{href:"https://vuejs.org/",children:"Vue"}),", which adopt their principles as their default behavior."]}),` `,(0,n.jsx)(e.p,{children:"This article will be an overview of what Single Page Applications are, how they differ from traditional websites and how they work behind the scenes."}),` `,(0,n.jsx)(e.h2,{children:"Traditional websites"}),` `,(0,n.jsx)(e.p,{children:"Traditional websites are made of multiple pages, which the browser downloads as the user visits different parts of the website."}),` `,(0,n.jsx)(e.p,{children:"Any time the user clicks on an internal link, the url changes and a new page is requested to the server. The server responds with an HTML file containing exactly the content of the requested page, which is then rendered by the browser."}),` `,(0,n.jsx)(e.p,{children:"You can notice that any time the url changes a loading spinner appears next to the document title. This shows that a new page is being requested and then loaded by the browser."}),` `,(0,n.jsx)(t,{alt:"Spinner",src:"/static/images/single-page-applications/spinner.gif",width:882,height:479}),` `,(0,n.jsx)(e.h2,{children:"Single Page Applications"}),` `,(0,n.jsxs)(e.p,{children:["A ",(0,n.jsx)(e.strong,{children:"Single Page Application"})," (or SPA) is a web application which can be used and consulted from a single page."]}),` `,(0,n.jsx)(e.p,{children:"This doesn't mean that they can't have multiple sections like an Homepage, About page, etc.."}),` `,(0,n.jsxs)(e.p,{children:["It means instead that a SPA only ",(0,n.jsx)(e.strong,{children:"requests to the server a single page"}),". And no matter how many links we click to navigate the website. No other page will ever be requested other than the first one, because ",(0,n.jsx)(e.strong,{children:"it is always the current page which is dynamically rewritten"})," in response to user actions."]}),` `,(0,n.jsx)(e.p,{children:"This is possible thanks to JavaScript. Single Page Applications contain a lot of JavaScript code which is responsible for creating the elements that compose the page, and reorganize them to respond to user actions."}),` `,(0,n.jsx)(e.p,{children:"For example, when the user clicks on a link, JavaScript observes a change in the URL and modifies the content of the page to show the corresponding section of the website."}),` `,(0,n.jsxs)(e.p,{children:["You can notice that while navigating through a SPA, no loading spinner is ever shown. This makes sense, because the browser is not requesting nor loading any new page, but instead is the ",(0,n.jsx)(e.strong,{children:"same current page"})," that is being continuously rewritten and reorganized by JavaScript."]}),` `,(0,n.jsxs)(e.p,{children:["This mechanism is called ",(0,n.jsx)(e.a,{href:"https://developers.google.com/web/updates/2019/02/rendering-on-the-web",children:"Client Side rendering"}),", because the creation of the page happens on the client side, that is by a JavaScript script executed in the browser."]}),` `,(0,n.jsx)(e.p,{children:"On the other side we have Server Side Rendering, where the server generates the HTML that makes up the page, and sends it to the client ready to be rendered."}),` `,(0,n.jsx)(e.h3,{children:"What SPAs are made of"}),` `,(0,n.jsx)(e.p,{children:"We've covered in general how a SPA works, but let's understand in more detail what happens behind the scenes."}),` `,(0,n.jsxs)(e.p,{children:["When we visit a SPA, the server responds with a ",(0,n.jsx)(e.strong,{children:"single HTML file"}),", which is almost empty. It doesn't contain any content about the page being visited, but only the skeleton of a typical HTML document and a few more things."]}),` `,(0,n.jsx)(e.p,{children:"It could look something like this:"}),` `,(0,n.jsx)(e.pre,{className:"language-html",children:(0,n.jsxs)(e.code,{className:"language-html code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token doctype",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"html"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"lang"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"en",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"head"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"charset"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"utf-8",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"rel"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"icon",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"href"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"%PUBLIC_URL%/favicon.ico",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"name"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"viewport",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"content"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"width=device-width, initial-scale=1",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"name"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"theme-color",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"content"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"#000000",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"name"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"description",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"content"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"An awesome single page application",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"rel"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"apple-touch-icon",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"href"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"%PUBLIC_URL%/logo192.png",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"rel"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"manifest",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"href"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"%PUBLIC_URL%/manifest.json",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"title"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"My Single Page App",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"body"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"noscript"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"You need to enable JavaScript to run this app.",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"id"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"root",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"src"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"/static/js/2.3d193e6f.chunk.js",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token script"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"src"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"/static/js/main.83bc384a.chunk.js",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token script"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:"You can notice a few elements which may look not very obvious at first. Let's uncover what they do:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"noscript"})," tag: the content inside a ",(0,n.jsx)(e.a,{href:"https://www.w3schools.com/tags/tag_noscript.asp",children:"noscript"})," tag will be displayed only if JavaScript is not enabled in the browser. In fact, as we covered, single page applications require JavaScript in order to work. If a user tries to visit our SPA with JavaScript disabled they will get a message informing them that they need to enable it in order to use the website."]}),` `,(0,n.jsxs)(e.li,{children:["empty ",(0,n.jsx)(e.code,{children:"root"})," div: this will be the container of the entire application, where JavaScript code will place the ",(0,n.jsx)(e.a,{href:"https://it.wikipedia.org/wiki/Document_Object_Model",children:"DOM"}),` elements which will make up the page. The id doesn't have to be "root" necessarily. The point is that JavaScript needs to identify a container element where all other elements of the page will be appended.`]}),` `]}),` `,(0,n.jsxs)(e.p,{children:["Finally, at the end of the body, a SPA contains one or more ",(0,n.jsx)(e.code,{children:"script"})," tags. They usually have a very weird filename (which allows to use ",(0,n.jsx)(e.a,{href:"https://web.dev/http-cache/#invalidating_and_updating_cached_responses",children:"caching techniques"}),`) but they are actually normal JavaScript scripts, and they constitute the core of the entire application. All the logic that will handle the generation of the UI resides inside them.`]}),` `,(0,n.jsxs)(e.p,{children:["This is what happens. When the browser receives the HTML file from the server it will start parsing it, but nothing will be actually displayed, because the file doesn't contain content at all. When the ",(0,n.jsx)(e.code,{children:"script"})," tags are reached, the browser will request those JavaScript files to the server, and as soon as they are loaded they will handle the creation of all the elements which make up the page and populate the ",(0,n.jsx)(e.code,{children:"root"})," div container with content."]}),` `,(0,n.jsx)(e.p,{children:"For example, let's see how to create a simple button element and append it to the page with JavaScript."}),` `,(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"language-js code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"// Create the element"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," button ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token dom variable",children:"document"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"createElement"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'button'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:["button",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"innerText"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'I am a button!'"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"// Add some styles"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:["button",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"style"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"backgroundColor"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'#3372d6'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:["button",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"style"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"color"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'#ffffff'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:["button",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"style"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"padding"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'10px'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:["button",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"style"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"borderRadius"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'8px'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:["button",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"style"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"border"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'none'"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"// Append it to the container"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," container ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token dom variable",children:"document"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"getElementById"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'root'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:["container",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"appendChild"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"button",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:"And this is what the result would look like:"}),` `,(0,n.jsx)(t,{alt:"Button",src:"/static/images/single-page-applications/button.png",width:680,height:287}),` `,(0,n.jsxs)(e.p,{children:["This doesn't seem too hard, and JavaScript has many more functionalities to create dynamic HTML and ",(0,n.jsx)(e.a,{href:"https://www.w3schools.com/js/js_htmldom.asp",children:"interact with the DOM"}),"."]}),` `,(0,n.jsx)(e.p,{children:"But when dealing with complex UI it can get quite repetitive and complicated. This is why SPAs are usually written with JavaScript libraries or frameworks like React, Angular, or Vue which make it very easy to obtain this behavior."}),` `,(0,n.jsxs)(e.p,{children:["React is my personal favorite choice. The React team has also made a tool called ",(0,n.jsx)(e.a,{href:"https://create-react-app.dev/",children:"Create React App"}),", which let's you create a SPA very quickly and with zero configuration."]}),` `,(0,n.jsx)(e.h3,{children:"Dynamic data"}),` `,(0,n.jsx)(e.p,{children:"Some pages require to visualize some information dynamically. Their content is not always the same, but depends for example from data saved in a database, so it can possibly change on every request."}),` `,(0,n.jsx)(e.p,{children:"In traditional websites the server takes care of this. When the page is requested by the client, the server queries the database (or whatever the source of the data is) and populates the page with the obtained data. Then it sends the page to the client, which only has to concern about rendering it."}),` `,(0,n.jsxs)(e.p,{children:["In a Single Page Application this process is JavaScript's job again. The page obtained by the server doesn't contain data. It is instead JavaScript which ",(0,n.jsx)(e.strong,{children:"makes another request to the server to get data"})," and uses the obtained information (typically in ",(0,n.jsx)(e.a,{href:"https://it.wikipedia.org/wiki/JavaScript_Object_Notation",children:"JSON"})," format) to generate the UI dynamically."]}),` `,(0,n.jsx)(e.p,{children:"This will typically require some sort of loading screens, to handle temporarily absence of data, while it is being obtained from the server."}),` `,(0,n.jsx)(e.h3,{children:"Pros and Cons"}),` `,(0,n.jsx)(e.p,{children:"Now that you know what a SPA is, and how they work, let's see which are some pros and cons of using them."}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Pros of SPAs"})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["They have an extremely ",(0,n.jsx)(e.strong,{children:"reactive behavior"})," to user interactions, which gives them an almost native feeling, resulting in great UX."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Less traffic and workload for the server"}),", which doesn't have to handle page generation, and only has to send a single HTML file to the client."]}),` `,(0,n.jsxs)(e.li,{children:["They allow to better ",(0,n.jsx)(e.strong,{children:"decouple frontend and backend"}),", UI and data. The server isn't concerned about generating UI, but only needs to respond with data when it is requested."]}),` `]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Cons of SPAs"})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"They don't work without JavaScript."}),` `,(0,n.jsxs)(e.li,{children:["The ",(0,n.jsx)(e.strong,{children:"first load could be very slow"}),", because the browser downloads the whole application in one shot, event if the user will only visit a single section of the website."]}),` `,(0,n.jsxs)(e.li,{children:["It's complicated to optimize them for good ",(0,n.jsx)(e.strong,{children:"SEO"}),"."]}),` `]}),` `,(0,n.jsx)(e.h2,{children:"Conclusion"}),` `,(0,n.jsx)(e.p,{children:"We've covered quite a bit of how SPAs and traditional websites work."}),` `,(0,n.jsx)(e.p,{children:"I now encourage you to start paying attention on what happens on the sites that you visit, and see if the principles of SPAs apply or not."}),` `,(0,n.jsx)(e.p,{children:"For example, what happens when you click on a link? Does a loading a spinner appear? Or it switches to a new page with an extremely fast transition and no loading at all?"}),` `,(0,n.jsx)(e.p,{children:"You can also try to inspect the page source code (on Chrome you can use Ctrl+U / Cmd+Opt+U). Does it contain the content that you actually see on the page? Or just a bunch of weird named scripts?"}),` `,(0,n.jsxs)(e.p,{children:["The Network tab of browser ",(0,n.jsx)(e.a,{href:"https://developers.google.com/web/tools/chrome-devtools",children:"Developer Tools"})," is another great place to find out what's going on in a website. Do you ever see an HTML document being requested after the first load?"]}),` `,(0,n.jsx)(e.p,{children:"All these questions lead you to the answer of whether you are visiting a SPA or not, and help you to understand what the websites that you visit are doing behind the scenes."}),` `,(0,n.jsx)(e.p,{children:"Knowing how websites work is essential to develop better web applications, and being aware that not all of them behave in the same way is part of that. I think it is important to know the various mechanisms and approaches that exist, and that we have at our disposal, so we can make the choice that better fits our needs."})]})}function v(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(h,a)})):h(a)}var f=v;function S(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(q);})(); ;return Component;

Posts

How to deploy a Node.js server with AWS EC2, nginx and SSL

What is a Single Page Application