Front-end architecture evolution and mainstream UI

Enterprise 2020-04-23 10:41:49 views: null

Article Directory

The front-end has evolved to the present, and various technical frameworks have emerged endlessly. As a developer, it is necessary to do some front-end work, so what is the architecture of the entire front-end? Let's take a look back

Three front-end elements

  • HTML (structure): Hyper Text Markup Language (Hyper Text Markup Language), determines the structure and content of the web page
  • CSS (Expression): Cascading Style Sheets, set the presentation style of the web page
  • JavaScript (behavior): is a weakly typed scripting language whose source code does not need to be compiled, but is interpreted and run by the browser to control the behavior of the web page

HTML is called Hypertext Markup Language, which is a markup language. It combines a series of tags to form pages with different structures! For the study of html tags, you can go to the rookie tutorial to learn, no more details here!

CSS Cascading Style Sheets is also a markup language, not a programming language, so you cannot customize variables, reference, etc. In other words,
it does not have any grammatical support. Its main defects are as follows:

  • The grammar is not strong enough, for example, it cannot be nested to write, which leads to the need to write many repeated selectors in modular development;
  • There is no variable and reasonable style reuse mechanism, so that logically related attribute values ​​must be output repeatedly in the form of literals, which makes it difficult to maintain;

This has led to an unreasonable increase in the workload of our work. To solve this problem, front-end developers will use a tool called [CSS preprocessor] to provide CSS-style style layer reuse mechanism, reduce redundant code, and improve the maintainability of style code. Greatly improve the development efficiency of the front-end in style.

What is a CSS preprocessor?

The CSS preprocessor defines a new language. The basic idea is to use a special programming language to add some programming features to the CSS, use CSS as the target to generate files, and then developers only need to use this language. Encode CSS. Translated into easy-to-understand words, it is "use a special programming language to design the Web page style, and then convert it into a normal CSS file through a compiler for the project to use".

What are the common CSS preprocessors?

  • SASS: Based on Ruby, it is powerful through server-side processing. High resolution efficiency. Need to learn Ruby language, it is more difficult to get started than LESS.
  • LESS: Based on NodeJS, handled by the client, easy to use. The function is simpler than SASS, and the resolution efficiency is also lower than SASS, but it is enough in actual development, so our backstage staff recommends using LESS if necessary.

JavaScript is a weakly typed scripting language. Its source code does not need to be compiled before it is sent to the client to run, but the text format character code is sent to the browser to be interpreted and run by the browser.

Native Native JS development
Native JS development, that is, let us follow the [ECMAScript] standard development method, referred to as ES, is characterized by all browsers supporting.

The ES standard has been released as follows:

  • ES3
  • ES4 (internal, not officially released)
  • ES5 (full browser support)
  • ES6 (commonly used, the current mainstream version: webpack packaged into ES5 support!)
  • ES7
  • ES8
  • ES9 (Draft stage)

Starting from ES6, a version is released every year, with the name of the year, the difference is that new features are gradually added.

TypeScript Microsoft's standard
TypeScript is a free and open source programming language developed by Microsoft. It is a superset of JavaScript, and essentially adds optional static typing and class-based object-oriented programming to the language. Dominated by Anders Helsberg (the father of C #, Delphi, TypeScript; founder of .NET).

JavaScript framework

1.jQuery library

The most well-known JavaScript library has the advantage of simplifying DOM operations. The disadvantage is that DOM operations are too frequent, which affects the performance of the front end; it is only used in the eyes of the front end to be compatible with IE6, 7, 8;

2.Angular library

The front-end framework acquired by Google was developed by a group of Java programmers. It is characterized by moving the back-end MVC pattern to the front-end and adding the concept of modular development. It cooperates with Microsoft and uses TypeScript syntax development; friendly to back-end programmers and front-end Programmers are not very friendly; the biggest disadvantage is the unreasonable version iteration (eg: 1st generation-> 2nd generation, except for the name, basically two things; Angular6 has been launched)

3.React

Produced by Facebook, a high-performance JS front-end framework; features a new concept [virtual DOM] for reducing real DOM operations, simulating DOM operations in memory, effectively improving the front-end rendering efficiency; the disadvantage is that it is complicated to use because Need to learn an additional [JSX] language;

4.View

A progressive JavaScript framework, the so-called progressive means gradually implementing new features, such as implementing modular development, routing, state management and other new features.

Its characteristic is the combination of the advantages of Angular (modular) and React (virtual DOM);

5.Axios

Front-end communication framework; because the boundary of Vue is very clear, just to deal with the DOM, so it does not have communication capabilities, then you need to use an additional communication framework to interact with the server; of course, you can also choose to use the A JAX communication function provided by jQuery;

JavaScript builder

  • Babel: JS compilation tool, mainly used for new ES features that are not supported by the browser, such as for compiling TypeScript
  • WebPack: module packer, the main function is to pack, compress, merge and load in order

NodeJs

Node.js is a JavaScript running environment based on the Chrome V8 engine. To put it bluntly, it is JavaScript running on the server side;

Front-end personnel also need to master certain back-end technologies in order to facilitate development, but we Java back-end personnel know that the back-end knowledge system is extremely large and complex, so in order to facilitate front-end personnel to develop back-end applications, such technologies as NodeJS appeared. NodeJS authors have claimed to give up NodeJS (said to be doing well architecture coupled with heavy node_modules, authors may make it uncomfortable), began developing a new architecture of what is Deno? What is the difference with Node.js?

Since it is a back-end technology, it certainly needs frameworks and project management tools. The NodeJS framework and project management tools are as follows:

  • Express: NodeJS framework
  • Koa: Express Lite
  • NPM: Comprehensive project management tool, similar to Maven
  • YARN: NPM alternative, similar to the relationship between Maven and Gradle

Common UI framework

  • Ant-Design: produced by Alibaba, based on React UI framework
  • ElementUI, MintUi, iview, ic ,: produced by hungry, based on the UI framework of Vue
  • Bootstrap: An open source toolkit for front-end development by Twitter
  • AmazeUI: Also called "Sister UI", an HTML5 cross-screen front-end framework
  • Layui: Lightweight framework (Layer)

Ant-Design

ant.design is a liberated ui and front-end tool based on react. It provides a consistent design to facilitate our rapid development and reduce unnecessary design and code. Many developers of practical react frameworks are already using ant.design. , And the number of stars on github has long been tens of thousands, which shows its fiery degree.

The purpose of ant.design is also to improve the experience and happiness of users, developers and other parties.

The design of ant.design is very delicate, iview of vue is to imitate ant.design to achieve

ElementUi

ElementUi is hungry? The front-end open source maintenance VueUI component library. The complete components basically cover all the components needed in the background. The documentation explains in detail and the examples are also very rich. Mainly used to develop PC-side pages, it is a VueUI component library with relatively high quality!

MintUi

MintUi is a mobile component library based on Vue.js launched by the hungry front-end team. The components are relatively simple and the functions are simple and easy to use!

iview

iview is a powerful Vue-based UI library. There are many practical basic components that are more abundant than elementui's components, mainly serving the middle and back office products of the PC interface. The single-file Vue componentized development model is based on npm + webpack + babel development, supports ES2015 high-quality, feature-rich and friendly API, and free and flexible use of space.

Remarks: It belongs to the front-end mainstream framework, which can be considered for selection. The main feature is that the mobile terminal supports more

ICE

Fei Bing is the Alibaba team's mid / backend application solution based on React / Angular / Vue. Within Alibaba, there are already more than 270 projects from almost all BUs in use. Fei Bing includes a complete link from the design end to the development end to help users quickly build their own mid- and back-end applications.

Remarks: The main component is still mainly React, and the support for Vue is still not perfect, and it is still in the wait-and-see stage.

VantUI

Vant UI is a Vue component library implemented by the Youzan front-end team based on the unified specifications of Youzan. It provides a complete set of UI basic components and business components. Through Vant, you can quickly build a unified style page to improve development efficiency.

Here

at-ui is a front-end UI component library based on Vue 2.x, mainly used to quickly develop PC website products. It provides a set of npm + webpack + babel front-end development workflow, independent CSS style, even if different frameworks are used to achieve a unified UI style.

CubeUI
cube-ui is a refined mobile component library based on Vue.js developed by Didi team. Support on-demand introduction and post-compilation, lightweight and flexible; strong scalability, can easily achieve secondary development based on existing components.

Flutter

Flutter is Google's mobile UI framework, which can build high-quality native applications on Android and iOS in a very short time. Flutter works with existing code, it is used by developers and organizations around the world, and Flutter is free and open source.

Remarks: Produced by Google, the main feature is to quickly build native APP applications, such as a hybrid application, the framework is a mandatory framework

Ionic

Ionic is both a CSS framework and a Javascript UI library. Ionic is currently the most promising HTML5 mobile application development framework. Build applications through SASS, which provides many UI components to help developers develop powerful applications. It uses JavaScript MVVM framework and AngularJS / Vue to enhance the application. Provide two-way binding of data and use it to become a common choice for web and mobile developers.

mpvue

mpvue is a front-end framework developed by Meituan that uses Vue.js to develop applets. It currently supports WeChat applets, Baidu smart applets, Toutiao applets and Alipay applets. The framework is based on Vue.js, and the modified runtime framework runtime and code compiler compiler are implemented so that it can run in an applet environment, thereby introducing the Vue.js development experience for applet development.

Remarks: Complete Vue development experience, and support multi-platform small program development, recommended to use

WeUi

WeUI is a set of basic style libraries that are consistent with WeChat's native visual experience. The WeChat official design team tailored the WeChat web pages and WeChat applets to make the user's perception of use more unified. Contains various elements such as button, cell, dialog, toast, article, icon and so on.

Evolution of front-end separation

In order to reduce the complexity of development, the back-end is the starting point, for example: the use of frameworks such as Struts and SpringMVC is the MVC era of the back-end;

Take the SpringMVC process as an example:

  • 1. Initiate a request to the front controller (DispatcherServlet)
  • 2. The front-end controller requests HandlerMapping to find the Handler (you can search according to the XML configuration and annotations)
  • 3. The processor mapper HandlerMapping returns a Handler to the front-end controller. HandlerMapping will map the request to a HandlerExecutionChain object (including a Handler processor (page controller) object and multiple HandlerInterceptor interceptor objects). Through this strategy mode, it is very Easy to add new mapping strategies
  • 4. The front-end controller calls the processor adapter to execute the Handler
  • 5. The processor adapter HandlerAdapter will execute the Handler according to the result of the adaptation
  • 6. Handler completes and returns ModelAndView to the adapter
  • 7. The processor adapter returns the ModelAndView to the front-end controller (ModelAndView is a low-level object of the springmvc framework, including Model and view)
  • 8. The front-end controller requests the view resolver to perform view resolution (resolved into a real view (jsp) based on the logical view name). It is easy to change other view technologies through this strategy, and only need to change the view resolver
  • 9. View parser returns View to the front controller
  • 10. The front-end controller performs view rendering (view rendering fills the model data (in the ModelAndView object) into the request field)
  • 11. The front-end controller responds to the user

advantage:

MVC is a very good collaboration model, which can effectively reduce the coupling degree of the code, and can make developers understand where the code should be written from the architecture. In order to make View more pure, you can also use template engines such as Thymeleaf and Freemarker, so that Java code cannot be written in the template, and the division of labor between front and back ends is more clear. Single application!

Disadvantages:

Front-end development relies heavily on the development environment and development efficiency is low. Under this architecture, there are two modes of front-end and back-end collaboration:

1. The first is to write DEMO in the front end. After writing, let the back end set the template. The advantage is that DEMO can be developed locally and is very efficient. The disadvantage is that a back-end set of templates is needed, which may be wrong. After the set is completed, the front-end needs to be determined, and the cost of communication back and forth is relatively large;

2. Another collaboration mode is that the front end is responsible for all development on the browser side and the development of the View layer template on the server side. The advantage is that the UI-related code is written by the front end. The back end does not need to pay too much attention. The disadvantage is that the front-end development is heavily bound to the back-end environment. The environment has become an important factor affecting the efficiency of the front-end development.

The front-end and back-end responsibilities are entangled: the template engine is powerful, and various business logics can still be realized through the context variables obtained. But in this way, as long as the front end is weak, it is often required by the back end to write a lot of business code at the template layer. Another big gray area is that functions such as page routing should be the most concerned by the front end, but it is implemented by the back end.

The era of ajax

Time goes back to 2005. AJAX (Asynchronous JavaScript And XML, asynchronous JavaScript and XML, old technology and new usage) was formally proposed and began to use CDN as a static resource storage, so the emergence of the JavaScript king returned (before this JS was used to The era of single page application of SPA (Single Page Application) where dog skin plaster ads are posted on the web.


Advantages: In
this mode, the division of labor between the front and back ends is very clear, and the key collaboration point between the front and back ends is the A JAX interface. It looks so beautiful, but looking back, it is not much different from the JSP era. The complexity is moved from the server-side JSP to the browser's JavaScript, and the browser-side becomes very complicated. Similarly Spring MVC, this era began to emerge browser layered architecture:

[pictures of foreign chains dump fails, the source station may have a security chain mechanism, it is recommended to save the picture down directly upload (img-fP8yZYUq-1587440620216) ( )]
Disadvantages:

  • Front-end and back-end interface conventions: If the back-end interface is a mess, if the back-end business model is not stable, then the front-end development will be very painful; many teams have similar attempts, through interface rules, interface platforms, etc. With the interface rules precipitated with the back end, it can also be used to simulate data, so that the front and back ends can achieve efficient parallel development after the interface is agreed.
  • Complexity control of front-end development: SPA applications are mostly function-interactive, and it is normal for JavaScript code to exceed 100,000 lines. The organization of a lot of JS code, the binding with the View layer, etc. are not easy things

Front-end MV * era

The MV * mode here is as follows:

  • MVC (based on synchronous communication): Model, View, Controller
  • MVP (mainly asynchronous communication): Model, View, Presenter
  • MVVM (mainly asynchronous communication): Model, View, ViewModel

In order to reduce the complexity of front-end development, a large number of front-end frameworks have emerged, such as: AngularJS, React, Vue.js, EmberJS, etc. The general principle of these frameworks is to first layer by type, such as Templates, Controllers, Models, and then in the layer Do the internal division, as shown below:

advantage:

  • The front and back responsibilities are clear: the front end works on the browser, and the back end works on the server. A clear division of labor allows parallel development, easy simulation of test data, and front-end development. The back end can focus on the processing of business logic and output RESTful and other interfaces.
  • The complexity of front-end development is controllable: the front-end code is heavy, but the reasonable layering allows the front-end code to do its job. This piece is quite interesting, as simple as the choice of template features, there are many, many particularities. It's not that the stronger the better, the restrictions, what freedoms are left, how the code should be organized, all of this design, it takes the thickness of a book to explain.
    -The deployment is relatively independent: you can quickly improve the product experience

Disadvantages:

  • Code cannot be reused. For example, the backend still needs to perform various verifications on the data, and the verification logic cannot reuse the code on the browser side. If it can be reused, data verification at the back end can be relatively simple.
  • Fully asynchronous, which is bad for SEO. Often, the server needs to do a downgrade solution for synchronous rendering. Performance is not optimal, especially in a mobile Internet environment.
  • SPA can not meet all needs, there are still a lot of multi-page applications. URL Design requires back-end cooperation, and the front-end cannot be fully controlled.

The full stack era brought by NodeJS

The front-end-based MV * mode solves many problems, but as mentioned above, there are still many shortcomings. With the rise of NodeJS, JavaScript has the ability to run on the server. This means that there can be a new R & D model:

In this R & D model, the responsibilities of the front and back ends are clear. For the front end, the two UI layers do their job:

  • Front-end UI layer handles the presentation logic of the browser layer. Render styles through CSS, add interactive functions through JavaScript, and HTML generation can also be placed on this layer, depending on the application scenario.
  • Back-end UI layer handles routing, templates, data acquisition, cookies, etc. Through routing, the front end can finally control the URL design independently, so that whether it is a single-page application or a multi-page application, the front end can be freely controlled. The back end can finally get rid of the strong focus on the presentation, and can concentrate on the development of the business logic layer.

Through Node, the Web Server layer is also JavaScript code, which means that part of the code can be reused before and after, and scenarios that require SEO can be rendered synchronously on the server side. Performance problems caused by too many asynchronous requests can also be alleviated by the server side. The shortcomings of the former model can be solved almost perfectly by this model.

Compared with the JSP model, the full-stack model seems to be a regression, and indeed a regression to the original development model, but it is a spiral-up regression.

The full stack model based on NodeJS still faces many challenges:

  • The front end needs to have a further understanding of server-side programming. Mastering network knowledge such as TCP / IP.
  • Efficient communication between NodeJS layer and Java layer. In NodeJS mode, all are on the server side, RESTful HTTP communication may not be efficient, and communication through SOAP and other methods is more efficient. Everything needs to go through verification.
  • Proficient understanding of deployment and operation and maintenance levels requires more knowledge points and practical experience.
  • How to transition a large number of historical issues. This may be the greatest resistance.

MVVM mode

What is MVVM mode?

MVVM (Model-View-ViewModel) is a software architecture design pattern, which is used by Microsoft WPF (used to replace WinForm, which used to develop desktop applications in the past) and Silverlight (similar to Java Applet, which is simply to browse Developed by Ken Cooper and Ted Peters, architects of WPF running on the device, is an event-driven programming method that simplifies the user interface. Published by John Gossman (also the architect of WPF and Silverlight) on his blog in 2005.

MVVM is derived from the classic MVC (Model-View-Controller) pattern. The core of MVVM is the ViewModel layer, which is responsible for transforming the data objects in the Model to make the data easier to manage and use. Its functions are as follows:

  • This layer performs two-way data binding with the view layer upwards
  • Data interaction with the Model layer through interface requests

MVVM is quite mature. The popular MVVM frameworks are Vue.js and AngularJS.

Why use MVVM mode?

The essence of all architectures is for decoupling!

The MVVM pattern is the same as the MVC pattern. The main purpose is to separate the view and the model. There are several benefits:

  • Low coupling: The View can be changed and modified independently of the Model. A ViewModel can be bound to different Views. When the View changes, the Model can remain unchanged. When the Model changes, the View can also remain unchanged.
  • Reusable: You can put some view logic in a ViewModel and let many Views reuse this view logic.
  • Independent development: Developers can focus on business logic and data development (ViewModel), and designers can focus on page design.
  • Testable: The interface has always been more difficult to test, and now the test can be written for the ViewModel.

The overall structure of mvvm:

View:

View is the view layer, that is, the user interface. The front end is mainly constructed by HTML and CSS. In order to more conveniently display the data of the ViewModel or Model layer, various front-end and back-end template languages ​​have been generated, such as FreeMarker, Thymeleaf, etc., and the major MVVM frameworks such as Vue.js, AngularJS, EJS, etc. also have their own built-in template languages ​​for building user interfaces.

Model:

Model refers to the data model, and generally refers to various business logic processing and data manipulation performed by the back end, mainly around the database system.
The difficulty here mainly lies in the need to agree with the front-end unified interface rules

ViewModel:

ViewModel is a view data layer generated and maintained by the front-end developer organization. At this layer, the front-end developer transforms the Model data obtained from the back-end and performs secondary packaging to generate a view data model that conforms to the expected use of the View layer.

It should be noted that the data model encapsulated by ViewModel includes the state and behavior of the view, while the data model of the Model layer only contains the state.

  • For example, what is displayed in this section of the page and what is displayed in that section belong to the view state (display)
  • What happens when the page loads in, what happens when you click on this piece, and what happens when this piece scrolls are all part of the view behavior (interaction)

View state and behavior are encapsulated in ViewModel. This encapsulation allows the ViewModel to completely describe the View layer.

Because of the two-way binding, the content of the ViewModel will be displayed in the View layer in real time, so that front-end developers no longer have to inefficiently and troublesomely manipulate the DOM to update the view.

The MVVM framework has already done the most dirty and tired part. Our developers only need to process and maintain the ViewModel, update the data and the view will be automatically updated accordingly, and truly implement event-driven programming.

The View layer is not the data of the Model layer, but the data of the ViewModel. The ViewModel is responsible for interacting with the Model layer. This completely decouples the View layer and the Model layer. This decoupling is crucial. It is the separation of the front and back ends. side
case an important part of the embodiment.

to sum up

In the early days of the Internet, there was no concept of front-end and back-end. Almost all the work was done by back-end developers. Later, the development of view layer technology became better and better, and the rendering support for pages became better and better. Developer of view layer technology. If we are still in the wave of the times, if we still stay at a single technical level, it is inevitable that the market and the horizon will become narrow, so the full stack is put on the agenda of many developers. Must be, then it is time to study and study a wave of big front ends!

One third
Published 16 original articles · Like 133 · Visits 5334
Private letter concerns

Guess you like

Origin blog.csdn.net/iME_cho/article/details/105654633
Recommended
Ranking
#2019110700005
What materials and procedures are required for patent transfer
What is the blockchain Ethereum triplet state root transaction root receipt root
Front-end study notes 04 --- About the insertion of html pictures and videos
Documents required for the filing of WeChat Mini Programs in special industries, the filing process of WeChat Mini Programs in special industries, how to file WeChat Mini Programs in special industries
2017 Qingdao-site tournament I The Squared Mosquito Coil
[BZOJ3165][HEOI2013]Segment (line segment tree without marking)
Kettle series: KettleEasyExpand, an open source Kettle universal plugin by Ma Jinju
The latest tutorial on making framework for iOS
DAX Section 6: Statistical Functions
Daily
More
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

Code World

© 2018 codetd.com