new website development


Webalready entered2.0It's time,Today's web pages tend to develop towards the system application level.,It is no longer the interface that simply displayed information as before.。Many nowWebAppHas achieved the function of the native application,And use its own advantages to gradually replace it。HTML5also very powerful,multi-platform,The good compatibility of multi-screen devices enables front-end engineers to show their talents on various platforms。

Single PageSPAapplication is a special Web application。it restricts all activities to oneWebin the page,only in theWebLoad the corresponding page when the page is initializedHTML、JavaScript and CSS。Once the page is loaded,SPANo page reloads or jumps due to user actions。Instead, use JavaScript dynamic transformationHTMLContent,in order to fulfillUIInteraction with users。Since page reloads are avoided,SPA Can provide a smoother user experience。benefit fromAjax,We can achieve no-jump refresh,thanks to the browserhistroymechanism,we usehashchanges so that it is possible to push interface changes。So as to simulate the single page switching effect of the element client,As shown1-2shown。

new website development

picture1-2 SPAApplication principle

After a development model catches fire,The corresponding framework will follow。Like the hottest in recent yearsVue.js,is currently the most popularMVVMframe,great for doingSPA,This book will also focus onVue.jsBasic knowledge and project construction and development。nowadaysSPASingle-page applications are in full swing,Being sought after is justified,Of course it also has its downsides。Everything has two sides。

(new website development)The advantages are:

(1) good interactive experience:The front end performs partial rendering,Avoid unnecessary jumps and repeated rendering。

(new website development)(2) Separation of front-end and back-end responsibilities(Front-end is responsibleView,Backend is responsibleModel ),clear structure:single pageWebApplications can andRESTfuluse with the statute,pass throughREST APIProvide interface data,and useAjaxAsynchronous fetch,This helps to separate the work of client and server。

(3) Reduce the stress on the server:The server only needs to provide the data,No need to care about front-end display logic and page synthesis,increased performance。SPAIn the application, the server can first include a static resource(HTML、 CSS 、JSWait)static load data(payload)send to client,After that, the client only needs to get the rendered page or view data.。

(new website development)(4) Share a set of back-end program code:Can be used at the same time without modifying the back-end program codeWebinterface、mobile phone、A variety of tablet clients。

Disadvantages are:

(1) SEO(Search Engine Optimization)high difficulty:Since all content is dynamically replaced in one page,that is to usehashFragments implement routing,while usinghashFragment will not act asHTTPpart of the request sent to the server,so inSEOnatural weakness。andSPAusehashThe purpose of the fragment is;When the content of the fragment is sent to change,Browsers don't look likeURLSend requests as you would when sending changes,This makes it possible to request only the data needed for the page or rendering,instead of fetching and parsing the entire document per page。

(2) First load time is too long:for single pageWebApplication function and display effect,need to be loaded when the page is loadedjs、CSSunified loading,Some pages load on demand。

(new website development)(3) The complexity of the page increases,The level of complex logic is multiplied:Since the backend only provides data, it no longer cares about the display logic and page synthesis of the frontend,So these display logic and page synthesis need to be written on the front end(go ahead、back etc.),Therefore, it will greatly increase the complexity of the page and the difficulty of logic.。