Vue Series (1): Single page application

Introduction: On the page of knowledge points, if there is infringement, please see here.

Keywords: SPA, single HTML file, JS-only operation, Virtual DOM, hash/history API routing jump, Ajax response, on-demand loading, MVVM

SPA

Let's take a look at the above explanation in the encyclopedia, Emmmm, General, I do not understand each time to search for some words, will be accustomed to the first to see the interpretation of the encyclopedia, anyway, I never expect to understand, just hope to have a general framework, haha ~

The single page app (Spa:single-page application), which is a Web page application, is a Web application that loads a single HTML page and dynamically updates the page as the user interacts with the application. --from Baidu Encyclopedia

" single page Application (English: Single-page application, abbreviation SPA) is a model of a Web application or Web site that interacts with the user by dynamically rewriting the current page, rather than reloading the entire new page from the traditional server. This approach avoids interrupting the user experience by switching between pages, making the application more like a desktop application. In a single-page application, all the necessary code (HTML, JavaScript, and CSS) is retrieved by loading a single page, or dynamically loading the appropriate resources and adding them to the page as needed (usually in response to user actions). Although you can use the location hash or the HTML5 history API to provide the ability to perceive and navigate individual logical pages in your application, the page will not reload at any point in the process and will not transfer control to other pages. Interaction with a single-page application typically involves dynamic communication with the backend of the Web server. "--From Wikipedia

Isn't that foggy?

What is What:spa?

Simple point ~ the way to speak simple point ~

• The entire webapp only a single HTML file , all operations are done on this page, JS to load HTML, CSS and JS as needed
• The illusion of multiple HTML paging files is implemented dynamically by using JS to manipulate DOM nodes (so jumping to a new page is essentially deleting the DOM node of this page and adding a new page Dom node.) From here, it leads to the concept of a virtual DOM, which will be said later.
• Jump illusion between different pages, but also through the JS control hash or the history API (go, back) to route (this is a more clear point of separation of the front and rear)
• Finally, the response function is realized through AJAX pull data.

Characteristics:

• Speed: Better user experience, allowing users to feel the speed and fluency of native app in WebApp
• MVVM: The classic MVVM development model, front and back accountability
• Ajax: Business logic is all locally operated and data needs to be submitted synchronously via Ajax
• Routing: Use the # number in the URL as the address of the current view (http://xxx.com/#/), changing the parameter after the # number to load different page fragments. (the page does not reload!) ）

Advantages:

• Separation of the front and rear concerns, the frontend is responsible for the interface display, including page jump logic, the backend is only responsible for data management (storage and computing), do not mix the logic of the front and back.
• Reduce the pressure on the server, the server only use data can be, without the tube display logic and page composition, throughput capacity increased several times.
• The same set of back-end program code/interface, can be reused, not only the same application can be used for web interface, mobile phone, tablet and other clients, but also can be reused in different applications.

Disadvantages:

• SEO problem: Not friendly to SEO, but can be solved by Prerender and other technology part
• Forward, backward, address bar, etc., need to be managed by the program
• Bookmarks that need to be controlled by a program

Why: How to use the spa?

SPA vs. MPA:

	single page application (SPA)	Multi-page application (MPA)
	SPA: MPA:
Application composition	A shell page and multiple page fragments	Composed of multiple complete pages
Jump mode	Fragment Jump: Delete or hide a page fragment, load another page fragment and display it. This is a simulation jump between fragments and does not leave the shell page	Page jump: Jump from one page to another page
URL pattern	Http://xxx.com/index.html#page1 Http://xxx.com/index.html#page2	Http://xxx.com/page1.html Http://xxx.com/page2.html
Refresh Mode	Page fragment Local Refresh	Full page Refresh
Whether public resources are overloaded after a jump	Whether	Is
Passing Data between pages	Because on a page, you can set global constants to record these fixed data, so the page fragment passing data is easy to implement	Rely on URLs, cookies, localstorage, to make trouble
Page Toggle Transition Screen	Easy to implement	Cannot be implemented
User Experience	Fast switching between page fragments, good transitions and user experience, including on mobile devices	Slow loading between pages, not fluent, poor user experience, especially on mobile devices
Seo	Need a separate plan to do, a little trouble	Can do directly
Special Application Range	Applications that require high experience, especially mobile applications	Need for search engine-friendly sites
Development difficulty	Higher, MVVM pattern framework	Lower, easy frame selection
Maintenance costs	Relatively easy	Relatively complex

How: How to Achieve SPA?

The MVVM framework: a Web browser-oriented JavaScript framework, such as AngularJS, Vue.js, React, Ember.js, Meteor.js, and ExtJS, incorporates the single page application (SPA) principle.
At the moment, the top three frames are heard:Angular, Vue and React.
Of course, this series we still mainly discuss Vue, and I also have to consolidate proficiency in using Vue, while Angular Novice on the road, everyone together to refuel ducks!

Vue Series (1): Single page application