Statement ： This article is reproduced in the video , Video address ：https://www.bilibili.com/video/BV18E411a7mC?p=3
The front end has evolved to the present , Various technical frameworks have emerged one after another , As a developer, you have to do some front-end work , So what is the architecture of the whole front end ？ Let's review .
HTML be called Hypertext Markup language , It's an iconic language . It combines through a series of tags , Make up a page with different structure ！ About html Tag learning can go to Novice tutorial Study , No more details here ！
CSS Cascading style sheets It's also a markup language , It's not a programming language , So you can't customize variables , Can't quote, etc , In other words, it doesn't have any syntax support , Its main defects are as follows ：
As a result, we have increased a lot of workload in our work for no reason . To solve this problem , Front end developers use a method called 【CSS The preprocessor 】 Tools for , Provide CSS Missing style layer reuse mechanism 、 Reduce redundant code , Improve the maintainability of style code sex . Greatly improve the front-end development efficiency in style .
CSS The preprocessor Defined a new language , The basic idea is this , In a special programming language , by
CSS Added some programming features , take
CSS Generate files as targets , Then developers just use this language to do
CSS Coding of . It's easy to change into popular If you understand it, it means “ In a special programming language , Conduct
Web Page style design , And then through the compiler to normal
CSS file , For project use ”.
frequently-used CSS The preprocessor :
Native Native JS Development means let's follow 【
ECMAScript】 Standard development methods , Abbreviation is
ES, The feature is that all browsers support .
ES The standard has been released in the following versions ：
from ES6 Start releasing a version every year , Take the year as the name , The difference is to gradually add new features .
C#、Delphi、 TypeScript The father of ;
.NET founder ) The dominant .
You are most familiar with
DOM operation , The disadvantage is that
DOM Too often , Affect front end performance ; stay The front end uses it just for compatibility
Java Programmer development , Its characteristic is that the backstage
MVC Mode moved to the front and added mode The idea of block development , Working with Microsoft , use
TypeScript Grammar development ; Friendly to back office programmers , Not very friendly to front-end programmers good ; The biggest drawback is that the version iteration is unreasonable ( Such as :1 generation -> 2 generation , Except for the name , It's basically two things ; Has launched
JS The front frame ; It's characterized by new concepts 【 fictitious
DOM】 Used to reduce real
DOM operation , Simulate... In memory
DOM operation , Effectively improve the front-end rendering efficiency ; The disadvantage is that it's complicated to use , Because you need to learn a little extra door 【
JSX】 Language ;
It is characterized by a combination of
Angular( modularization ) and
DOM) The advantages of ;
Vue The boundaries are clear , Just to deal with
DOM, So they don't have the ability to communicate , At this point, you need Use a communication framework to interact with the server ; Of course, you can also choose to use
AJAX Communications functions ;
Node.js It's based on
Chrome V8 Engine
In order to facilitate development, front-end personnel also need to master certain back-end technology , But we
Java The backstage staff know that the backstage knowledge system is extremely huge and complex , So in order to facilitate the front-end staff to develop background applications , And that's what happened
NodeJS Technology like this .
NodeJS The author of has claimed to give up
NodeJS( It is said that the architecture is not well done, coupled with the cumbersome node_modules, Maybe the author is upset ), Start developing a new architecture Deno ( What is? Deno？ Follow Node.js What's the difference ？)
Since it's backstage Technology , It certainly needs frameworks and project management tools ,
NodeJS The framework and project management tools are as follows :
HTML5Cross screen front frame
Ant-Design Is based on
react A liberation of development ui And front end tools , It provides consistent design to facilitate our rapid development and reduce unnecessary design and code , A lot of practical
react The developers of the framework are already using
Ant-design 了 , And it's in
star It's already tens of thousands , It shows the degree of heat .
Ant-DesignThe goal is also to improve users 、 The experience and happiness of developers and so on .
Ant-DesignIt's a wonderful design ,
ElementUi Is the front-end open source maintenance hungry
VueUI Component library , The components are complete, covering all the components needed by the background , The document is explained in detail , There are plenty of examples . Mainly used for development
PC End page , It's a high quality
VueUI Component library !
MintUi It's a front-end team based on
Vue.js Mobile component library of , The components are relatively single , The function is simple and easy to use ！
iview It's a powerful base on
UI library , There are many practical basic components than
elementui The components are richer , Mainly for
PC The middle and back products of the interface . Use single file
Vue Component development mode be based on
npm + webpack + babel Development , Support
ES2015 High-quality 、 Rich in functions Amicable
API, Use space freely and flexibly .
remarks : Belongs to the front-end mainstream framework , It can be considered to use , The main feature is that the mobile terminal supports more
Flying ice The Alibaba team is based on
React/Angular/Vue In the background application solutions , Inside Alibaba , There has been a 270 many One from almost all BU The project is using . Flying ice contains a complete link from the design end to the development end , Help users quickly build Belongs to own in the backstage application .
remarks : The main components are
React Mainly , Yes
Vue Our support is not perfect , It's still in the wait-and-see stage
Vant UI It's implemented by youzan front-end team based on the unified specification of youzan
Vue Component library , A complete set is provided
UI Basic components and business groups Pieces of . adopt Vant, Can quickly build a unified style page , Improve development efficiency .
at-ui It's based on
Vue 2.x The front end of the
UI Component library , Mainly used for rapid development
PC Website products . It provides a set of
npm + webpack + babel Front end development workflow ,
CSS The style is independent , Even with different frameworks, the implementation can be unified
UI style .
cube-ui It is based on
Vue.js Implementation of the elegant mobile component library . Support on-demand introduction and post compilation , Lightweight and flexible ; Extensibility is strong , It is convenient to realize secondary development based on existing components .
Flutter It's the mobile end of Google
UI frame , It can be built in a very short time
iOS High quality primary applications .
Flutter Works with existing code , It's used by developers and organizations around the world , also
Flutter It's free and open source .
APP Applications , For mixed applications, the framework is required
Ionic Is both a
CSS The framework is also a
Ionic It is the most potential one at present
HTML5 Mobile application development frame . adopt
SASS Building the application , It provides a lot of
UI Components to help developers develop powerful applications . It USES
Web Common choice with mobile developers .
mpvue It's a use developed by meituan
Vue.js Develop a front-end framework for applets , At present, we support Wechat applet 、 Baidu intelligent Xiaocheng order , Headline widget and Alipay applet . Based on the framework of
Vue.js, Modified runtime framework
runtime And code compilers
compiler Realization , Make it run in a small program environment , Thus, it introduces
Vue.js Development experience .
remarks : complete
Vue Development experience , And support multi platform small program development , Recommended
WeUI It is a set of basic style library consistent with wechat native visual experience , The official design team of wechat is responsible for the design of wechat website and wechat applet Tailored , Make the user's use perception more unified . contain
button、cell、dialog、toast、article、icon And so on plain .
To reduce the complexity of development , The starting point is the back end , such as :
Struts、SpringMVC And so on , It's the back end
MVC Time ;
With SpringMVC Process as an example :
Handler（ According to
xmlTo configure 、 Annotation to find ）
HandlerMappingReturn to the front controller
Handler,HandlerMappingWill map the request to
HandlerExecutionChainobject （ Contains a
Handlerprocessor （ Page controller ） object , Multiple
HandlerInterceptorInterceptor object ）, Through this strategic model , It's easy to add new mapping strategies
HandlerAdapterIt will be executed according to the result of adaptation
HandlerExecution complete returns... To the adapter
springmvcOne of the underlying objects of the framework , Include
jsp)）, It's easy to change other view technologies through this strategy , Just change the view parser
ModelAndViewIn the object ) Fill in
MVCIt's a very good collaboration model , It can effectively reduce the coupling degree of code , From the perspective of architecture, developers can understand where the code should be written . In order to make
ViewMore pure , You can also use
FreemarkerAnd the template engine , Make it impossible to write in the template
JavaCode , Make the division of labor between the front end and the back end clearer . Single application !
Front end development relies heavily on development environment , Low development efficiency , Under this structure , There are two modes of front-end and back-end collaboration :
DEMO, After writing , Let the back end cover the template . The advantage is
DEMOIt can be developed locally , Very efficient . The disadvantage is You also need a back-end template , It's possible to get it wrong , It needs to be confirmed by the front end , It costs a lot to communicate back and forth ;
UIdependent The code is written by the front end , Don't pay too much attention to the back end , The disadvantage is that the front-end development is heavily bound to the back-end environment , The environment becomes the front end of the impact It's an important factor in efficiency .
The responsibilities of the front and back are intertwined : The template engine is powerful , You can still implement various business logic through the context variables you get . But this way, as long as the front end is weak , Often will be back-end requirements in the template layer to write a lot of business code . There is also a big gray area , Page routing and other functions should be the most concerned of the front end , But it's implemented by the back end .
Time to go back to 2005 year
XML, Old technology, new usage ) Was formally proposed and put into use
CDN As a static resource store , And there it is
JS It's all used to post dog skin plaster advertisements on the website ) Of
SPA(Single Page Application) Single page application era .
AJAXInterface . It looks so wonderful , But if you look back , This is related to
JSPThere is little difference in times . The complexity comes from the server side
JSPMoved to the browser's
Spring MVC, In this era, the layered architecture of browser began to appear :
SPAMost applications are functional interactive ,
JSOrganization of code , And
ViewLayer binding, etc , It's not easy
Here MV The pattern is as follows :*
To reduce the complexity of front-end development , A lot of front-end frameworks have sprung up , such as :
AngularJS 、 React 、Vue.js 、 EmberJS etc. , The general principle of these frameworks is to stratify by type first , such as
Templates、Controllers、Models, And then do the segmentation in the layer , Here's the picture :
Front end oriented
MV* Patterns solve a lot of problems , But as mentioned above , There are still many shortcomings . With
NodeJS The joy of rise ,
In this R & D model , The responsibilities of the front and back end are clear . For the front end , Two
UI Each layer performs its duties :
CSSRendering style , adopt
URL Design, In this way, whether it is a single page application or a multi page application , The front end can be adjusted freely . The back end can finally get rid of A strong focus on presentation , Instead, you can focus on the development of the business logic layer .
Node,Web Server So are the layers
SEO The scene of the scene can be To render synchronously on the server side , The performance problems caused by too many asynchronous requests can also be alleviated by the server . Shortcomings of the former model , Almost all of them can be solved perfectly through this mode .
JSP Compared to model , Full stack mode seems to be a return , It is indeed a return to the original development mode , It's just a spiral Upward regression .
be based on NodeJS Full stack mode of , There are still many challenges :
WPF( Used in substitution
WinForm, With I used this technology to develop desktop applications ) and
Silverlight( Be similar to
Java Applet, Simply put, it's on the browser Running
Ted PetersDevelopment , It's an event driven programming that simplifies the user interface . from
John Gossman( also
SilverlightArchitect ) On 2005 Published on his blog in .
MVVM From the classic
MVC(Model-View-Controller) Pattern .
MVVM The core is
ViewModel layer , Responsible for transferring in Model Data objects in to make data easier to manage and use , Its functions are as follows :
MVVM It's quite mature , Now popular MVVM Framework has
Vue.js , AngularJS etc. .
Why use MVVM Pattern ？
The essence of all architectures is to decouple !
MVVM Patterns and MVC Model as , The main purpose is to separate views (View) And models (Model), There are several benefits :
mvvm The overall structure of ：
View: View Is the view layer , That's the user interface . The front end is mainly composed of
CSS To build , To make it easier to show
Model Layer data , Various front-end and back-end template languages have emerged , such as
FreeMarker、 Thymeleaf wait , The major
MVVM The frame is like
Vue.js,AngularJS,EJS And so on have their own built-in for building user interfaces Template language .
Model Data model , It generally refers to various business logic processing and data manipulation carried out by the back end , Mainly around the database system . The difficulty here mainly lies in the need to unify with the front-end agreement Interface rules
ViewModel It is the view data layer generated and maintained by the front-end developers . In this layer , Front end developers get from the back end
Model Data conversion processing , Make secondary packaging , To generate compliance
View Layer uses the expected view data model .
It should be noted that ViewModel The encapsulated data model includes two parts: view state and view behavior , and Model Layer's data model is state only .
View state and behavior are encapsulated in
ViewModel in . Such packaging enables
ViewModel It can be described completely
View layer .
Thanks to bidirectional binding ,
ViewModel The content of will be displayed in real time
View layer , In this way, the front-end developers no longer have to operate inefficiently and troublesome
DOM To update the view .
MVVM The frame has made the dirtiest and most tired piece , We developers only need to deal with and maintain
ViewModel, Update the data and the view will be automatically updated accordingly , Real event driven programming .
View Layers don't show
Model Layer data , It is
ViewModel The data of , from
ViewModel Responsible for working with
Model Layer interaction , This is completely decoupled
View Layer and the
Model layer , This decoupling is critical , It is an important part of the implementation of the front and rear end separation scheme .
In the early days of the Internet, there was no concept of front end and back end , Almost all the work is done by the background developers , Later, the view layer technology developed better and better , Rendering support for pages is getting better and better , A front-end developer focused on view layer technology was born . In the tide of the times, if we still stay in a single technical level , Inevitably, the market and vision become narrow , So the whole stack theory has been put on the agenda of many developers , It is the so-called general trend of the world Long period of division , A long time must be divided. , So it's time to study the front end of learning ！