Shulou(Shulou.com)06/01 Report--

Trend of front-end development in recent years

1. Older browsers are phased out, and mobile demand increases:

The old browser mainly refers to IE6-IE8, which does not support ES5 features; IE9+, chrome, sarafi and firefox fully support ES5, and most browsers on mobile are based on webkit kernel, so ES5 is also fully supported on mobile, so vue can play an important role in mobile and modern browsers.

two。 There are more and more front-end interactions and more and more complex functions:

Now the front end is all-inclusive, such as high-end technology library and framework, cool operating activities page, H5 Mini Game, of course, the application of front-end technology in more commercially valuable applications, such as the following figure.

3. Architecture migration from traditional background MVC to REST API+ front-end MV* (MVC, MVP, MVVM)

In traditional MVC, the current front-end and back-end data interaction will refresh the entire page, resulting in a poor user experience. So we communicate with the back-end REST API through Ajax, refresh a block of the page asynchronously, optimize and enhance the experience, and bring the MVC to the front end to do it.

Back to the top (go to top)

MVVM framework

Basic concept of 1.MVVM framework: it mainly includes View, ViewModel and Model, as shown in the following figure. Under the MVVM architecture, views and data can not communicate directly, it will communicate through the middleware ViewModel. ViewModel takes up the position of an observer: when the data changes, ViewModel observes the change and notifies the view to update accordingly; while the user operates the view, ViewModel can also listen for the change, and then notify the data to make changes, thus realizing the two-way binding of the data.

Application scenario of 2.MVVM Framework

MVVM framework aims at front-end applications with complex interaction logic. It provides basic architectural abstraction and ensures front-end user experience through Ajax data persistence.

So the benefits of the MVVM framework are obvious: when the current side operates on the data, it can persist the data through Ajax requests without having to refresh the entire page, just change the part of the data content that needs to be changed in the dom. Especially on the mobile side, refreshing pages is too expensive. Although some resources will be cached, the dom, css and js of the page will be reparsed by the browser, so the mobile page will usually be made into a SPA single-page application. On this basis, many MVVM frameworks are born, such as Angular.js, react.js, vue.js.

Back to the top (go to top)

Vuejs and its ecology

Vue.js is mainly developed by domestic Daniu Youyuxi. It started as a personal project and received wide attention from open source in early 2014. At first, you positioned it as a view library rather than a framework, but with the development of third-party libraries such as vue-router,vue-resource, Vuejs gradually grew into a framework.

1. It is a lightweight MVVM framework (only 20-odd kb)

two。 Core thought

① data driven: data (model) changes drive views (view) to update automatically. DOM is a natural mapping of data.

② componentization: extend HTML elements to encapsulate reusable code

The number of star with 4.github exceeding 35K + is perfect in the community.

Back to the top (go to top)

Vue vs Angular React

The Vue official website has made a detailed comparative analysis of the various mainstream frameworks (Chinese version address). Here is a brief summary.

Vue.js is lighter, with a size of only 20k+ after gzip. Angular has 56K MagneReact has 44K.

The learning curve of Vue.js is relatively stable.

Vue.js draws on the strengths of the two families and draws lessons from the instructions of Angular and the componentization of react.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.