1. Introduction
2017 has passed quietly, 2018 has arrived. People are progressing and technology is developing. What’s on the front end in 2018, what technologies to watch, what will rise and what will fall? The following is a prediction of my personal judgment, I hope to play a reference role for you! The techniques mentioned below are only for your attention, not for all of them, but for what you need to learn, and what you are interested in learning! If you have any tools, frameworks, libraries that you can recommend, please feel free to comment on them. Let’s make progress and learn from each other!
2.PWA
PWA(Progressive Web Apps) is a series of solutions developed by Google using cutting-edge technology to make Web pages experience like Apps. One thing is clear: a PWA is a web page, and a web application can be developed using cutting-edge technology.
Since Google proposed the PWA, it has continued to gain the attention of the industry. Just this year, Google announced that PWA will be given the same treatment and permissions as android native apps. This means that the future of the basic web and APP will be closer, so the attention will be further increased.
Get started with PWA: Write a Very simple PWA page your first Progressive Web App
3.TypeScript
TypeScript is developed by Microsoft. It is a superset of JavaScript, a free and open source programming language. In this language, optional static typing and class-based object-oriented programming were added. The following figure illustrates the relationship between typeScript and JavaScript!
(Image source: Moji – from JavaScript to TypeScript)
Angular has started developing with typeScript, and React and Vue have expanded typeScript support. It’s not hard to see how popular typeScript is!
TypeScript sources: from JavaScript to TypeScript 1 – What is TypeScript?
4. How threatening Parcel can be to Webpack
Webpack is a JavaScript module packaging tool, which simply means analyzing, compiling, packaging, etc., each module, so that the resulting file can be run in the browser.
(Image from Beginner tutorial – Getting Started with Webpack)
Webpack works as a module packaging tool, but it can also replace some of the functionality of automatic build tools like Gulp! After the development of 2017, Webpack is also hot for all to see.
But, but. In late 2017, there was a dark horse: Parcel. Parcel took most people by surprise and is one of the biggest surprises of 2017. The biggest advantage of Parcel seems to be the biggest disadvantage of WebPack: configuration and performance! Parcel boasts zero-configuration, multi-core packaging, and uses file caching, nearly 10 times faster than WebPack!
(Image from Neal’s post on Announcing Parcels: a fast, zero-configuration Web application packaging tool)
From Star, Parcel seems to have outperformed Webpack at the time, and the heat is still on.
The difficulty with WebPack, I think, is that the configuration is cumbersome and the documentation is not perfect. As for packing times, no comparison, no harm. If Parcel can do all these things, there’s no denying that it’s getting a fair share of webpack.
Announce Parcel: A fast, zero-configuration Web application packaging tool Parcel Vs Webpack
5.WebAssembly
A collaboration between Google, Microsoft, Mozilla, Apple and others on a common binary and text format for the Web.
To quote the Tencent IVWEB team: WebAssembly is a new bytecode format. Its abbreviation is “.wasm”,.wasm is the filename suffix, is a new level of security binary syntax. It is defined as a “compact, short load time format and execution model” and is designed as a Web multiprogramming language object file format. This means that performance on the browser side is greatly improved, and it also allows us to implement a set of underlying building blocks, such as strong typing and block-level scope.
When WebAssembly first came out, some developers even wondered if WebAssembly would replace JavaScript. My feeling here is that JavaScript is not going to be replaced by WebAssembly, waiting to die, but rather co-exists with WebAssembly! In 2017, Four browsers, Chrome, Firefox, IE and Safari, unified WebAssembly solution. This is a rare situation. As far as I know, this is the first time such a unified situation has occurred, which shows that the four browser manufacturers attach importance to WebAssembly. As for how WebAssembly will evolve in 2018, it’s hard to say. The initial prediction is that WebAssembly will be widely available, but it’s not ready for widespread development yet. But if so, this is worth paying attention to!
What is WebAssembly? Why does it affect every Web developer? WebAssembly Practices: How to Write code
React, Angular,vue troika
In 2017, React is growing rapidly, vue is playing the role of the dark horse of the framework, and Angular is not as popular as before, but it can’t be ignored! In the 2017 survey report, we can see that the trend is basically that React has taken over the mainstream, with no framework in second place, angular1 and Angular2 in third and fourth respectively.
In China, react is first and VUE is second
Vue was hot in 2017, but the potential of VUE in 2018 can’t be underestimated (1.2 million people want to use VUE). Although the possibility of exceeding React is not very high, the position will still be upgraded
What has changed in the front end in 2017, and what do you expect in 2018? 2017 Front End events and Trends review, 2018 where to go? JavaScript Status Report 2017: Asked 23,000 developers, and they gave this list of the most noteworthy JavaScript trends of 2018
Anyway, I think there is no best framework for this, only the most suitable. The troika did not say that all must be! The following is, if the JS foundation is good, the learning framework will be easier to get started. If the extreme do not learn JS, directly start the framework, will be very difficult, very easy to meng.
Artificial intelligence and big data
Artificial intelligence and big data are not a technology, but a field. In the past two years, they have been very popular, and not only at the front end. I also think it’s the next wave of dividends from the Internet. Very worth paying attention to and learning! This is also a popular trend, so some data visualization tools (Echart, D3, etc.) and AI libraries are getting attention!
8.yarn VS npm
It is believed that when it comes to front-end engineering, modular developers will inevitably rely on NPM for installation of functional packages. Especially in the early days of Node.js, NPM was a standard feature of engineering. But in 2017, NPM’s position is clearly under threat from YARN! Yarn also surpassed NPM in this year’s survey. The advantages of YARN are: fast, safe, and some touching details! If the situation continues, the gap will gradually become larger!
Yarn, Not Yet another NPM Third-party client Yarn vs NPM: Everything You Need to Know
9. Is CSS in JS still controversial?
The front end area has always been the recommendation structure layer (HTML), presentation layer (CSS), behavior layer (javascript) separation. But with React, that rule seems to have been overturned! Because react’s component structure requires HTML, CSS, and javascript to be written together. Many developers are not used to or even opposed to CSS in JS. So in 2018, will the debate continue?
CSS in JS Introduction Intensive reading please stop csS-in-JS behavior What do you think of CSS in JS? Stop writing CSS in JavaScript
10. Flex and Grid layouts are more popular
Before the front page layout, inline-block, float, postion layout, etc. But with Flex and the Grid, the layout is much simpler.
First of all, Flex is supported by almost all browsers, and its convenience features are also welcomed by many developers!
(Image from Ruan yifeng’s web diary -Flex Layout Tutorial: Grammar)
Grid, on the other hand, is supposed to be the next generation layout, but it’s not as browser-compatible as Flex. But it’s also important to understand. After all, it’s a W3C standard. Compatibility is further enhanced.
The resources
CSS Grid layout: What is a Grid layout? What is a Grid layout
11.rxjs
I have a little knowledge of RXJS, but I haven’t used it yet. It may be that you are unfamiliar with this, but I mention it here because I think RXJS is worth recommending. RxJS is a responsive programming library that uses Observables to make it easier to write asynchronous or callback-based code. This project is a rework of rea-Extensions /RxJS(RxJS 4) with better performance, better modularity, and a better debugger call stack while maintaining most of the backward compatibility, Only some breaking changes were made to reduce the outer API.
References RXJS Chinese documentation RXJS Simple introduction to a popular way to understand RXJS
12. Other aspects
Limited by space, there are a few I also think can be concerned about the simple to say. The following
Small program
First of all, micro channel small program, since the micro channel small program out, a lot of front end ridicule. When chatting with others in a group, many people also mentioned: a small program out, I think it is no future of the thing. Or: There is no way to kill apps. Applet is just a castration of apps, and rival manufacturers will not develop applet. There is also: learning this is not as good as focusing on the PWA, that is more meaningful than this. In 2017, I was also quite concerned about developing small programs, so that I didn’t learn small programs at all in 2017. But in the fourth quarter of 17 years or the end of the year, wechat has announced that it can embed HTML5 page, can also develop small games. Let me see the small program has just released the heat. In 18 years, small program development, whether I will touch and learn to develop small program, it will be seen. But it’s worth watching.
The second is the small program of Alipay, although I feel no news, but after all, it is a big factory. Attention is worth attention. Whether to learn or not, and whether to develop, is another matter!
Electron
Touted as a great tool for developing desktop applications. Also tried a few official instances, the operation is very smooth, but because the temporary development of desktop applications, so did not pay attention to, also did not learn. Still pay attention in 2018, and even learn to develop!
WebVR and WebAR
Looking at the so-called related examples, the effects of VR and AR do not interest me, although in those instances, I do not understand how outdated development. But in this case, it’s worth paying attention. After all, this is the beginning of WebVR and WebAR.
13. Which technologies will decline
angular
We also mentioned that Angular has a lot of usage in the front-end framework. Google also has 5.x, how can it be here? Here’s just a little prediction. Angular has been less discussed in 2017. It is expected that angular usage will continue to decline in 2018, but it will not decline, and it will still have a big place in the front-end framework. In 18 years, Angular will still be one of the three frameworks along with React and Vue, but not as many users as react and Vue.
jquery
Jquery isn’t going to die in 2018 either, it’s just going to see a further decline in usage. When it comes to jquery, it’s really a change of age. When I first came into the front end, jquery was the world. At that time, compared to other libraries and frameworks, jquery was a big MAC and was far ahead in usage. Even Microsoft supports jquery on the.NET platform. In the early days of my career, the unspoken rule was: no one would recognize you as the front end without jquery. You can see where jquery was at that time. I also believe that many people have feelings for jquery. Only technology does not speak feelings!
Es5 Syntax of the following versions
In this paragraph, es6 refers to the grammar above ES6, including ES7 and ES8. Es5 stands for the syntax below ES5, including ES3
After two years of development, es6 has been welcomed by many developers for its convenience and utility. 2017 should be the first time that ES6 grammar usage is higher than ES5, and in 2018, ES6 grammar usage will continue to increase. The usage rate of es5 and other grammars will continue to decline. Even for current development, you will use Babel to compile es6 syntax into ES5.
grunt
At the time of gulp’s release, Grunt’s position was already at risk. Now that some of the tools of the automated build tool have been replaced by packaging tools, the automated build tool is not as useful as it used to be, not to mention that a better build tool is available on the market.
sea.js
Sea-.js was developed by Chinese people, and when it was used, it was full of joy that finally something from Chinese people was on the stage. Sea. Js by virtue of simple, light weight and other advantages extremely popular. However, with the modular es6, even the author of Sea-.js Yu Bo also said on weibo that it is time to build a tombstone for Sea-.js and KISSY.
14. Summary
Well, about 2018 of the personal predictions for the front end of this aspect and some recommended attention to write here! Although I have written so much, I am not saying that all of them should be learned, should be able to, but I suggest that you pay attention to, learn what technology to see their own needs, according to their interests. What is mentioned in the article is only what I pay attention to, and some of them I just understand, but do not learn or use in depth. Also feel that in front of this aspect, there is no what the best tools, frameworks, libraries, etc., only the most suitable for their own.
Finally, if you have any tools, frameworks, libraries, or other technologies, please feel free to comment in the comments section. Let us learn from each other and make progress together!
— — — — — — — — — — — — — — — — — — — — — — — — — gorgeous line — — — — — — — — — — — — — — — — — — — — want to know more, pay attention to focus on my WeChat public number: waiting for book cabinet
