Single page application architecture

summary

Single page application (SPA ) It is a great way to create a very attractive and unique user experience .Gmail、Google Maps、Airbnb、Netflix、Pinterest、Paypal And many other single page application examples use single page application architecture design to create fluency 、 Scalable experience .

However , in the past ,SPA Let marketers know nothing about content management . Fortunately, , You can now send your SPA And correct CMS Related to , So as to provide developers and marketers with the required control . Single page application (SPA) It is a great way to create a very attractive and unique user experience .

What is a single page application ？

seeing the name of a thing one thinks of its function , A single page application is a page , Most of it remains unchanged , Only a small part of the information needs to be changed at a time . A good example could be your email account inbox , Most of these options remain unchanged , Such as titles and sidebars . This is different from the traditional page loading when the browser refreshes the entire page to present new information .

This piece by piece transmission More efficient on the client 、 More easily , It is also very cost-effective on the server side . 

How a single page application architecture works ？ 

Single page application architecture does not load a complete new page from the server , Instead, it interacts with users by dynamically changing existing pages . This method eliminates the interruption of user experience between pages , Make the application more like a desktop application . The content on the website is repeated many times , And always be consistent （ The footer 、 header 、 The logo 、 Navigation bar, etc ）. This consistency makes it easier to load pages , And it will not affect the server load time . 

Advantages of single page application architecture

Single page application architecture has many advantages , Including enhanced application performance and consistency , And reduce development time and infrastructure costs . Development teams can run at different rates , At the same time, by isolating the presentation from the content and data, it is integrated into the overall solution . The single page application architecture is used to create mobile 、 Responsive desktop and tablet design .

A single time file loads each HTML、CSS、JS

After the initial page is loaded , The server will not send you any additional HTML; You have to download everything from scratch . When the server sends you shell page (UI) when , Your browser will present the user interface . then , When you click ,SPA Requests for data and tags will be sent back , The server will return the required raw materials , Your browser will receive and generate updated UI—— None of this requires reloading the entire page . A single page application architecture is particularly useful on a large number of browsing pages with duplicate templates , Because they are easy to interchange .

Fast response front-end construction  

In addition to the above improved performance , Single page application architecture design also allows developers to design the front end faster .SPA Decoupling design of , Or the separation of back-end services and front-end presentation , Is the reason behind this . On the back end , Many key business functions have not changed much .

Although how your consumers log in 、 register 、 Purchase and follow orders “ appearance ” Or the presentation may change from time to time , But the logic behind it is still very consistent with the data arrangement - You don't want to risk screwing up .

Again , Your basic materials and data may remain unchanged , But the way you want to present may change . You can separate the back-end logic and data from its presentation , Convert it to “ service ”, And developers can create various front-end ways to display and use the service . With the help of separate architecture , Developers can build independently of the underlying back-end technology 、 Start and test the front end .

They design the look and feel they want the user experience , Then use these services to draw content 、 Data and functions . This is the use of API Accomplished ,API It is how the management program is organized 、 A collection of rules for exchanging and reorganizing data . such API Architecture allows developers Work quickly on the user interface , At the same time, ensure that the business critical back-end technology will not be compromised .

Enhanced user experience

As more and more functions are designed as modular services that can be modified independently （ Microservice architecture ）, It's getting easier to try how to display and use functions .

SPA The framework is well suited to experimenting with these services to develop compelling 、 Dynamic and even animated user experience . Besides , Many people choose to use a specific programming language to create （ many SPA Frame usage javascript）, And because of API, Written in one language SPA You can happily interact with back-end services written in other languages .

Easily build feature rich applications

Use SPA Application direction Web Adding complex functions to an application is simple . for example ,SPA Development can easily create content editors with real-time analysis Web Applications . Use standards Web Application time , Performing content analysis requires reloading the complete page .

Use Angular Single page application architecture and React、Vue and Ember Comparison

Developer leverage Angular and React Other framework （ as well as Ember and Vue Etc ） Create quickly and gracefully SPA. In short , These frameworks are a set of reusable components , They follow a defined set of build rules , And many developers have contributed to this .

You can mix clay 、 Dry bricks 、 Mining and self forming steel , Or you can use ready-made bricks and pipes , Focus on building a unique home .

In the following single page application diagram , You can clearly see the internal working principle of a single page application ：

Why single page application architecture and CMS It's hard to match in history ？

When adopting single page application architecture , Developers may think of the experience as “ Applications ”, But visitors will still regard it as a web page , Where there are web pages, there are marketing teams eager to optimize them . because SPA It is an application that needs development work to change the design and delivery of experience , So marketers are forced to return to the digital stone age （ That is to say 1990 years ） And request development help for each change , This leads to inevitable bottlenecks .

2 The main reasons are as follows ：

• Deleted the editing tools commonly used by marketers

What the marketing team relies on CMS Editing tools （ Real-time Preview 、 Drag and drop 、 What you see is what you get editing, etc ） Usually with CMS Related to the delivery layer .

Content to API Can pass SPA The standard way of reading is simply stored in CMS in , also SPA Confirm delivery . Back end CMS I don't know what the architecture of a single page application should look like , Because it is generated at the front end , Therefore, the preview cannot be generated . result ,CMS Users are forced to adopt outdated methods ： fill out a form , Cross your fingers , Click publish , Then check its appearance in real time .

Back to our example of drawing by numbers ,CMS Maintain the original content （ draw ）, and SPA Contains instructions for how the material should be displayed in numbers . Due to the lack of this description in the preview , I'm not sure what the content should look like .

It's pure “ Headless ” Content delivery （ namely ,CMS The delivery layer is not “ head ”）. This is great for rapid development , But it's a little difficult for marketers who want to make changes to the website without coding . Besides , Marketers are used to starting from “ page ” Thinking from the perspective of , But because of SPA Is a separate page , The page building and editing tools that marketers want are not available .

If they want a new “ page ”（SPA Medium “ Route ”） Or they want the view to look different , They have to contact the developers .

• Make it difficult to reuse content

There are two main reasons for this problem ： One is due to outdated CMS, Another reason is that SPA framework . For starters , some CMS You are not allowed to separate the appearance of the material from the way it is stored .

SPA It cannot be based on API Use content in a way , Because the content is not standard 、 Stored in a format unrelated to the presentation . Of course , It's not just SPA The problem of . This type of CMS Settings usually cannot reuse content across channels .

The FAQs you post on your website can't just let someone browse on their smart watch , Because these materials are related to the way it is displayed （ Page based system ）. You must save the same content in two different ways . In order to operate effectively ,SPA Need content-based CMS, It can extract the original content and present it as needed .

stay SPA aspect , Challenges from many websites will be mixed . Although some parts can be used as SPA Set up , But other parts may be set up in the traditional way （ This is usually true SEO Better ）, And there must be a sense of consistency between them . If you have two barrels of material , Regular website fragments and SPA Fragments , This cohesion will be broken . You need content that applies to all platforms .

The following single page application architecture diagram illustrates the relationship between browser and server ：

The last thought  

If you want rich interaction between users and Applications ,SPA Is a must . This strategy is usually used in applications such as Google Maps , To provide real-time view changes when you scroll from one location to another or click the location marker to view photos of a specific location .

secondly , If you want to provide real-time updates on the page , You may almost need to use this strategy ; notice 、 It is needed for data flow and real-time visualization . If your content is static , Then implement SPA Users will be asked to download and execute before viewing any content JavaScript Payload , To reduce the user experience .

Third , By displaying static only on request HTML material , It can increase the accessibility of users who use old browsers or have slow Internet connections . Last , If the robot cannot access any title or content , Ignore showing any HTML Information may affect SEO ranking .

The server-side rendering solution mentioned above can help reduce loading time , It is not enabled JavaScript Our visitors provide some basic readability . We suggest that it is not enabled JavaScript The basic function of viewers to view your content , So that they can decide whether to enable it according to the content they see when loading the homepage JavaScript.