2019 Although there is no disruptive technology in the field of big front end in , however Flutter,WebAssembly,Serverless The booming development of China's economy is still beyond our expectation ,
Let us also see the trend of big front-end integration .

In those who have returned to work 2020 year , What are the top technology trends in the big front end that you can't miss ? Let's have a look with Xiaobian today ~


TypeScript It is based on JavaScript Programming language based on , A lot of times we say it's a JavaScript Superset of , Or extension set .
So called superset , In fact, it is in the JavaScript Some extended features are added to the original . What about the extra ones , It's actually a more powerful type system , And yes ECMAScript
Support for new features . And it will eventually compile to the original JavaScript.

That is to say , use TypeScript later , We developers can use it directly in the development process TypeScript New features offered , as well as TypeScript
More powerful type system to complete the development work . It is then compiled to run directly in a production environment JavaScript code .

Then its effect is obvious . We have already realized the advantages of type system , It is to help us avoid possible type exceptions in the development process , Improve coding efficiency , And the reliability of the code . New feature support is needless to say .
ECMAScript A lot of very useful new features have been iterated over the years , But there are compatibility issues in many environments of achievement .TypeScript
Support automatic conversion of these new features , So we can use them immediately .

So even if we don't need a type system , adopt TypeScript To use ECMAScript It's also a good choice . because TypeScript
Finally, you can choose to compile to the minimum ES3 Version code , So the compatibility is very good .

Because it's compiled into JavaScript. So any one of them JavaScript Application in running environment , Can be used TypeScript development .
For example, browser applications ,Node.js application ,React Native, Or is it Electron Desktop applications .

Compared with Flow,TypeScript As a complete programming language , It's more powerful . The ecology is also more sound , More perfect . Especially for development tools , Microsoft's own development tools
TypeScript They are very friendly .


Vue yes “ A progressive framework for building user applications ”. Its design is very flexible , A single Vue Library integration into other projects , It can also be used completely Vue Building complex projects .Vue
It is often seen as a framework that is easy to understand and implement , It supports pure HTML Template , and React Need to use JavaScript By definition DOM element .

Vue 3.0 Five key changes :


Faster is Vue One of the main selling points at present ,Vue Famous for its rendering speed , Like other frameworks ,Vue Using virtual DOM To render components . To speed up the rendering process , Virtual must be reduced
DOM Workload of . Prompt by compile time , Component quick path , Singleton call , optimization slot Generation and other means to achieve the purpose of speed-up .


at present ,Vue It's already very small ( After compression 20KB). As a result of tree shaking optimization ( Eliminate non critical code ),3.0 The estimated size of is about 10KB( After compression ). The main thing is to remove the Vue
Not a very important library for the project , It can be done through import Statement to use them , Instead of packing them in the Lord src In code .


Vue 3.0 From Flow go to TypeScript, At the same time, it attaches great importance to compatibility and ease of use , Don't like to use it TypeScript Users can still use pure
JavaScript.Vue 3.0 Provides better modularity , This makes it more customizable and flexible , It also provides transparency , Developers can drill down into the source code .
Compiler rewriting is one of the most exciting features , Not only does it bring better IDE support , And you can create source maps , If there are runtime errors , It will give the file location and line number for the error .

Native oriented

Vue 3.0 It will be platform independent —— It will run pure JavaScript, And it is not assumed in its main build that the Node.js Something like that . This flexibility enables the
Web,iOS or Android Applications become easier . Native oriented Vue It's more like React Substitute for .

Ease of use

open Reactivity API—— The new changes allow developers to explicitly create reactive objects and customize re rendering hook.3.0 It's solved Vue
A problem that users often complain about : When and why to re render components ?3.0 Provides a renderTriggered event , It allows people to see what triggers the update .
This wonderful feature will enable Vue More transparent .


JAMstack It refers to the use of JavaScript,API and Markup Built technology stack ,JAM yes JavaScript,API and Markup For short , First letter abbreviation ,
JAMstack A client based JavaScript, reusable API And pre build Markup Modern Web Development architecture , Three criteria need to be met :

1. JavaScript:
request / Any dynamic programming in the response cycle is determined by JavaScript handle , Run entirely on the client . This can be any front-end framework , library , Even light JavaScript.

2. API: All server-side processes or database operations are abstracted as reusable API, use JavaScript adopt HTTPS visit . These can be customized or take advantage of third-party services .

3. Markup: Templated tags should be built in advance at deployment time , You typically use the site builder for content sites or Web Building tools for applications .

Why? JAMstack It's going to be popular ?

1. Better performance : Why wait for pages to build dynamically when they are generated at deployment time ? When it comes to minimizing the time of the first byte , There is nothing like passing CDN The pre built files provided are better .

2. Higher security : Abstracting the server-side process as a microservice API, Can reduce the surface area of attack . You can also leverage the expertise of professional third-party services .

3. It's cheaper , Easier to expand :
When your deployment is equivalent to a bunch of files that can serve anywhere , Extensions are about making these files available in more places .CDN It's perfect , It usually includes expanding all their plans .

4. Better developer experience : Loose coupling and control separation allow for more targeted development and debugging , And for site generator extension selection CMS Separate stack of marketing options and eliminates the need for content maintenance .

2020 The development trend of the front end is very clear , It can be said that we can't understand the principle of these three technologies , It is bound to seriously affect work efficiency , Even job hopping will be at a disadvantage .

therefore , It is necessary to find a reliable person to point out the maze , Today, I'd like to introduce to you a very powerful technical master , In the front-end teaching has rich industry experience .

If you want to be fast , And in-depth grasp of these technologies ,

Welcome to Mr. Wang Lei

《2020 Front end on the job promotion training camp 》

2 month 18 day -20 day , Every night 20:00

original price 98, Limited time free !

Scan the code and buy the course immediately

Blood emesis finishing 2020 Three front end technologies , Don't miss it

Come and scan the code and learn

©2020 ioDraw All rights reserved
Java exercises 1: Simply define a car class New photo album app launched by Microsoft : Using cross platform framework React Native to write Chapter two Fundamentals of programming Programming exercises pandas Time order of webpack Code segmentation import()Vue slot slot: Default slot , Named slot , Scope slot Fundamentals of data analysis ——R language ( Processing missing values )C++ Implementation of matrix meteor shower effect PostMan Advanced Usage , Interface MD5+Secret autograph Sign The 12th Blue Bridge Cup B group C/C++ Provincial competition