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
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 .
Vue3.0
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 ：
speed
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 .
volume
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 .
Maintainability
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
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
Technology
Daily Recommendation