SPA, Single Page Application. What is SPA or single page portal What is single page application
This article will focus on Single Page Application (SPA). The pros and cons of a web application built on the principles of a single page site (SPA) will be considered.
What is SPASingle Page Application - abbreviated SPA, translated into Russian means “Single Page Application”. In other words, SPA is a web application hosted on one web page, which, to ensure operation, loads all the necessary code along with loading the page itself. This type of application appeared relatively recently, with the beginning of the HTML5 era and SPA is a typical representative of HTML5 applications.
As we know, HTML5 is nothing more than HTML + CSS3 + JavaScript + [few new tags]. Thus, SPAs are applications written in JavaScript. And, therefore, slightly paraphrasing the previous definition we get:
“SPA is a web application hosted on one page, which, to ensure operation, loads all javascript files (modules, widgets, controls, etc.), as well as CSS files, along with loading the page itself.”
If the application is quite complex and contains rich functionality, such as an electronic document management system, then the number of files with scripts can reach several hundred, or even thousands. And “...loading all scripts...” in no way means that when loading the site, all hundreds and thousands of files with scripts will be downloaded at once. To solve the problem of loading a large number of scripts into SPA, an API called AMD is called upon. AMD implements the ability to download scripts on demand. That is, if the “main page” of a one-page portal required 3 scripts, they will be loaded immediately before the program starts. And if the user clicked on another page of a one-page portal, for example, “About the program,” then the AMD principle will load the module (script + markup) only before going to this page.
It turns out a little crumpled: “One page... another page, third page... one-page portal.” Let’s dot all the “E”s. We will call the page of the site on which all links to all CSS and links to scripts necessary for the SPA to work “Web page”. The file with such a page is usually called “index.html” (in ASP.NET MVC it can be index.cshtml or index.vbhtml or even index.aspx) And the pages that the user switches inside a one-page portal will be called “modules”.
Let's look at the pros and cons of this approach. Why is all this needed and why is SPA so popular?
SPA: ProsThe first advantage worth noting is the fact that SPA applications work perfectly on both desktop and mobile devices. “Large” computers, tablets, smartphones, and, in the end, simple phones (some) can easily work with sites built on the SPA principle. So, the first “plus” is that it works on a large number of devices, which means that by creating one application, you get a much larger audience of users than when using the standard approach.
Next, the second “plus” is a rich user interface, the so-called User Experience. Since there is only one web page, it is much easier to build a rich, rich user interface. It's easier to store session information, manage view states, and control animation (in some cases).
The third “plus” is that SPA significantly (by several times) reduces the so-called “circling”, that is, downloading the same content over and over again. If your portal (site) uses a template, then along with the main content of any page, the site visitor must download the template markup. Yes, data caching at this stage of WWW development has achieved the highest results, but if there is nothing to cache, then neither time nor resources are wasted on it.
SPA: ConsIf you program in C#, then the only disadvantage of SPA is the need to learn JavaScript. In any case, I was unable to find out any other global problems.
Components of SPAThe principles of any framework (we'll talk about them later) that implements the SPA paradigm must adhere to the following concepts and definitions:
- SPA supports client navigation. All “walks” of the user through the page modules are uniquely recorded in the navigation history, and the navigation is “deep”, that is, if the user copies and opens a link to the internal page module in another browser or window, he will be taken to the corresponding page.
- SPA is located on one web page, which means that everything necessary for the operation of the site (portal), scripts and styles, must be defined in one place in the project - on a single web page.
- SPA permanently stores the state (important variables) of the client (client script) in the browser cache or in Web Storage.
- SPA loads all the scripts required to start the application when the web page is initialized.
- SPA gradually loads modules on demand.
As you probably already guessed, SPA is an abstract concept. This is the principle of application architecture. Let's talk about where to start when developing a website according to SPA principles.
There are a large number of basic libraries (framework - from the English word framework - “base, structure, frame”) that implement the Single Page Application principle. What do these frameworks provide:
- provide basic principles for SPA development, minimizing labor costs for solving universal problems (see section “Components of SPA);
- frameworks were created by a community of developers, which means they use the experience of creating websites of many programmers;
- frameworks are the starting point for creating a structure based on a Single Page Application.
Since I have been working on the NET platform for many years, I will be looking at Single Page Application templates based on ASP.NET. Let's look at the following comparison table.
Comparison of SPA template featuresThe table shows the most common templates for the basis of building a Single Page Application application. Please note that the basic building blocks for building a full-fledged framework, such as DurandalJS and HotTowel, which are highlighted in green, are highlighted in blue.
Hi all! In this article we will understand what SPA is in web development and what its pros and cons are.
DescriptionPerhaps some of you have already heard the abbreviation SPA. However, not everyone may know what it is, so let's find out.
SPA (single page application) is a web application that runs on one page. It loads all the necessary javascript and css files when the page first loads, and then all communication between the client and server is reduced to a minimum. Those. With this approach, most of the site's work is done on the client side, and if you need to get data from the server, this is usually done using JSON.
This method of creating websites appeared relatively recently, with the advent of HTML5, but is already actively gaining momentum. In principle, there is nothing surprising here, because such a web application will work much faster than conventional sites, and development will not take much time. Fortunately, there are now a bunch of frameworks that allow you to create very complex sites of this type quite simply and quickly. At the moment, React is considered the best framework. It has more advantages than its competitors, and is also easy to learn and use. If you want to learn more about how to use it, I recommend taking a look. For now, let's move on to the advantages of SPA.
Pros of SPA- Supports a large number of devices. Unlike the standard approach, SPA applications work equally well on both desktop computers and mobile devices. This way, you can create one application and be sure that it will not slow down and will work perfectly even on not very powerful devices
- Powerful UX. In applications based on this approach, it is much easier to store various information, manage the presentation of the site, and animations. Also, since there is only one working page, writing a beautiful user interface will not be difficult
- High performance . It is very common to see loading of the same content on regular websites. For example, the site header, footer, menu and other elements that do not change from page to page, however, are loaded from the server every time. With the use of the SPA approach, such a problem simply will not exist, because content will be loaded as needed, which will significantly increase the speed of the application
SPA has almost no downsides. The only thing worth noting is that the development of such applications should be carried out quite carefully. The thing is that if there are memory leaks, for example, the application may start working much slower than we would like. But all this already depends on the developer, on his skills, therefore, if you want to make high-quality applications, then I advise you to pay attention to the video course "". It was compiled by a professional specifically so that you, too, can learn how to make powerful and fast applications, and the number of truly high-quality sites on the Internet has increased.
ConclusionSo, today we looked at what SPA (single page application) is, what are its advantages and disadvantages.
Today I would like to describe my view on web application development (or single page application). A web application is a website whose operation is transferred as completely as possible to the client side. Such a website “communicates” with the server only with pure data, without loading html content. All buttons, forms, etc. are processed by javascript, all lists, tables, blocks and other page elements are drawn using javascript when changed. That is, the server provides only data, usually in json format, and the client side independently generates the site page, all templates, lists, links, tables and other updated elements.
Basic rules of single page applicationThe above points, from my point of view, are the main ones. Of course, to optimize work, or to avoid complicating the system, something will have to be sacrificed.
Sequence of working with the web applicationWith this sequence, a question arises regarding points 5-10 (and a request for data), why not immediately request data when changing the address? The answer is simple: we create one entry point to handle the uri change, and one entry point to handle the new address and request data. If you do this every time in a dozen methods, it will be bad code, since there will be a lot of copy-paste. The above image will have two entry points and, as a consequence, extension points for these sections of the web application.
Implementing a Single Page ApplicationFinally, using the sequence / click on the active element -> change the uri -> process the new uri -> request data -> render new page elements / you can create full-featured single-page applications. In my work I used , and distributed almost everything into classes, each of which controlled its own area.
A main javascript initialization file is created that launches the application. The main class is also created (for example, singleApplication), which manages the state of the application, initializes the necessary events (events), works with the history object, processes and changes the url, and other functions. The URL is generated with SEO support (/category/tech/page/2) using the /key/value/ concept. In my application, I also used , which allowed me to reduce the number of errors, minimize the coherence of classes and make it easier to work with callback functions on which I built my single page application.
Single Page Application or SPA - single page application- a website or web application based on a single HTML document. Typically, in such an application, JavaScript frameworks (“frameworks” for development) such as AngularJS, BackboneJS, Ember.js, etc. are connected to an HTML page. These frameworks allow you to display different content on the page, depending on user actions and/or the state of the page URL . State changes can occur when clicking on links whose href consists of a URL fragment starting with the “#” character. Sometimes with a couple of characters “#!”, in the case of search engine promotion of this site (in Yandex).The content of such a site is loaded from the server using AJAX - asynchronous JavaScript and XML. To implement work via AJAX, you also need to implement part of the application on the server side. Scripting languages are commonly used. For ease of operation and scaling of the system, REST (architecture for interaction of application parts) is chosen.
Single Page Application and JavaScript FrameworksVarious frameworks are used to build single-page applications:
- backbone.js (Russian) - a lightweight library written by CoffeeScript and used for developing SPA pages with support for REST architecture
- ember.js (Russian) - also a free JavaScript framework based on Model-View-Controller modules (development pattern - MVC)
- angular.js (Russian) - framework, MVC. One of the authors continues to work on the framework while working at Google.
It can be built using selectors by identifier and target selector :target , CSS properties to control the visibility of content (display, visibility and margin). One-page website templates include all the necessary content for the visitor to work. In this simplest case, there is no need to connect JS frameworks.
The pseudo-class:target allows you to select HTML elements on the page whose id attribute matches the hash value from the address bar. For example, if the URI is present in the address bar: http://site/test-po-html#result, then an element with the identifier #result will be found on the HTML page and CSS styles will be applied to it.
The frame of such a page may look like this (attention! For simplicity, the same height is used for all pages. In practice, the volume of content will be different)
Container( font: 1em sans-serif; width:600px; min-height:500px; margin:auto; border:1px solid #000; position: relative; ) h1,h2,h3,h4,h5,h6 (margin: 0 ;).page( width:600px; height:430px; position: absolute; top:60px; display: none; background-color: #fff; ) div:first-of-type( display:block; z-index: 1 ; ) div:target( display:block; z-index: 2; )
One-page static site link1 link2 link3 link4 page 1 of a one-page site page 2 of a one-page site page 3 of a one-page site page 4 of a one-page site
View an example of work. With pages using JS frameworks, work is done in a different way.
Recently, Netpeak Agency specialists have been working on many sites using AJAX technologies, as well as sites written in JavaScript frameworks. Without additional optimization, they are not ready for promotion in search engines. Therefore, I will describe in detail what SPA sites are, how they work, and how you can make Single Page Application SEO-Friendly.
The article will be useful to SEO specialists and website owners who want to switch to Single Page Application, but are hesitant because SPAs can quarrel with search engines.
What is SPASPA (Single Page Application) is a single-page JavaScript application that launches and runs in the browser. Unlike a “traditional” site, the architecture of SPA sites is built in such a way that page rendering occurs entirely on the client side, and not on the server side.
A JavaScript application runs in the user's browser, and all necessary page content is dynamically loaded using AJAX. Navigation through the site occurs without reloading pages. Due to this architecture, SPA sites work faster than “traditional” sites.
Let's take a closer look at how content is loaded and rendered on SPA sites:
Pros of SPA sites:
- high speed;
- fast development;
- creating versions for different platforms based on ready-made code (desktop and mobile applications).
Disadvantages of SPA sites:
- JavaScript is not processed by most search engines;
- SPA sites do not work without JS enabled in the browser;
- they cannot be analyzed for errors by popular programs and tools (for example, Netpeak Spider).
Popular JavaScript frameworks:
- Angular ;
- Meteor;
- React ;
- Backbone ;
- Ember ;
- Vue ;
- polymer;
- Knockout.
Today, only the Google search robot can render the content of SPA sites, as it uses tools based on Chrome 41 for rendering. ASK.com uses Google search results. For other search engines, the content must be coded in HTML format.
Google and Yandex robots can index a Single Page Application if the site structure meets certain rules. At the same time, Yandex requires a complete HTML copy of the page.
Google only needs to use the correct URL format. In the summer of 2018, Google will stop indexing HTML copies of pages and will only use rendering.
(!) You cannot prohibit the indexing of JS and CSS files for Google search robots. By limiting their indexing, Google will not be able to index the content of SPA sites.
There are two ways to “force” search robots to index AJAX pages:
This method involves generating HTML copies of pages (snapshots) at a separate URL using the parameter "?_escaped_fragment_".
Using a URL with "#!"If AJAX page addresses are formed using "#" (hash), which means you need to replace them with “#!” (hashbang). For example, with https://example.com/#url to https://example.com/#!url.
Google will crawl the content using the main URL, and the Yandex robot, having detected “#!” in the URL, will request a snapshot of the page. It will replace "#!" to “?_escaped_fragment_=” and scan it at https://example.com/?_escaped_fragment_=url.
Examples of addresses with “#!” and HTML copies of pages:
- https://example.com/home#!page → https://example.com/home?_escaped_fragment_=page;
- https://example.com/index/#!main → https://example.com/index/?_escaped_fragment_=main;
- https://example.com/#!home/index → https://example.com/?_escaped_fragment_=home/index.
If the site uses “traditional” URLs ( https://example.com/url), You must specify the following meta tag on all pages:
Google will crawl the content using the main URL, and the Yandex robot, having detected a meta tag on the page , will request an HTML copy of the page. It will also add the parameter “?_escaped_fragment_=” to the URL and crawl it at the address https://example.com/url?_escaped_fragment_=
For popular frameworks there are ready-made solutions that replace “#!” to "traditional" URLs, for example, HTML5 mode for Angular.
(!) The meta tag should not be placed in the HTML copy of the document: in this case, the page will not be indexed.
(!) On HTML copy pages, canonical should either be absent or refer to itself.
For example, on the page https://example.com/home?_escaped_fragment_= the following canonical must be specified:
Serve HTML copies of the page at the main URL
This method is suitable for a SPA site with “traditional” URLs. What is the point: a search robot, requesting a page using the main URL, receives an HTML copy of the page instead of the dynamic version.
You can identify a search robot by User-Agent. For example, according to the list of Yandex robots.
Rendering HTML CopiesIn order for search engines to index the content, it is necessary to implement the creation of HTML copies of pages.
HTML copies are rendered versions of SPA website pages. For example, the content of the source code of the SPA site page looks like this:
Single Page Application
And here is a rendered HTML copy of this page:
Page TITLE PAGE CONTENT
To create HTML copies of pages, you can:
There are many ready-made solutions for rendering HTML copies, so if you are using a popular framework (eg Angular), implementing HTML copies of pages should only take a few developer hours.
Rendering on your serversSuitable for large projects. You can use the following tools to render HTML copies on your servers:
- PhantomJS ;
- Angular Universal;
- Angular-SEO.
Suitable for small projects. To render HTML copies on third-party servers, you can use the following tools:
- BromBone;
- Prerender.io ;
- RenderJS.io.
Isomorphic JavaScript allows the page to be rendered both on the server and in the user's browser. Thus, when the page is first loaded, the user receives a regular HTML page and a JavaScript application. Further navigation on the site for the user will be dynamic, while search engines will receive the HTML version of the page each time.
This approach to website development allows you to kill two birds with one stone: the website receives all the benefits of a SPA website and the ability to promote in search engines without additional implementations.
Page rendering on SPA sites occurs on the client side, so without additional modifications, the response code for a non-existent page will be 200 OK. 
SPA sites must correctly process non-existent pages and return a 404 error as the page title.
Setting up Google AnalyticsThe standard Universal Analytics code is executed when each new page is loaded, and SPA sites load content dynamically, “simulating” the transition between pages. In order for Google Analytics to correctly process transitions on pages, you need to ensure that the Universal Analytics counter is activated every time the URL changes on the site.
You can set up Google Analytics for SPA sites using Tag Manager and the “History” trigger or by manually transferring data.
Using Tag Manager and the “History” trigger ConclusionsSPA sites are the present and the future, so there is no need to be afraid to take on such projects. Single Page Application can be made friends with search engines. To make your SPA website friendly to both SEO and users, I recommend:
Loading...