Let’s give a rough preview first:

• Project engineering

• Development direction

• Professional environment

• Summary of the framework/skills to be mastered

The summary is placed first:

• The front-end in 2017 is not so much more cruel as it is more standardized. In the past two years, novices who went through various trainings for a few months and casually offered tens of thousands or tens of thousands will be eliminated by the market. .

• Front-end development tools/compilation tools are gradually taking shape. Although they are not as complete as IDE environments for top-ranked programming languages ​​such as object-c, java, and C+, they are. The concept of engineering modularity has begun to take root in people's hearts. Those who write original HTML CSS Javascript code these days are either small projects or novices.

• Front-end work is more challenging and the direction is more diverse

Suppose I want to enter the pit of WEB front-end development this year

The web front-end is emphasized here because many iOS and Android developments now include the title of big front-end. Mainly because of the emergence of React isomorphism, many of them started to be mixed together.

First of all, let’s review the front-end in the impression of our old classmates:

• 老 antique: PS cut image export

• Newbie: Adobe Dreamweaver writing code

• lazy: UltraEdit, notepad++ …

Maybe after you become proficient, you can just find something that can type and start writing. code, but I met an old front-end veteran with many years of experience. He wrote a piece of code by hand without checking it because he was too lazy to open the editor, and submitted it directly. Then he accidentally typed the wrong character, which almost ended the entire project. matter. Really powerful people should be very cautious at all times. Please make good use of the IDE's error checking and correction functions.

Different from the past, if you want to start web front-end development this year (hereinafter referred to as front-end), then at least you don’t have to worry about too many browser compatibility, but it doesn’t mean that you don’t need to care at all, just The development environment is not as troublesome as before because of the emergence of various compilers.

The most severe challenge faced by the front-end in China is:

Lagging browser version iterations.
I got a mobile phone from one of the top 500 domestic mobile phone companies. When I saw that it came with the webkit kernel, it turned out to be the 2003 Releases version of webkit. I was quite shocked at the time. After all, the Android kernel is also 4.x. I still don’t know I know how they managed to put such an old browser kernel into a relatively new Android system, and I don’t know what it means. Of course, even with Qualcomm SOC baseband, it is very difficult to upgrade the system. , not to mention other soc basebands.

The Android version of WeChat was roughly Chrome 35 before the deadline (the latest is Chrome 55), and it has remained unchanged for one year, which is said to be for stability.

UC, Baidu, and other shell browsers are very popular, but they only call the browser kernel of the system. Don’t tell me that they have optimized the loading speed. The loading speed is determined by the network status and system hardware. , does it have anything to do with your shell browser? So I don’t know what is written in their dozens of megabytes of capacity, and it’s scary to think about it.

In short, in the desktop era, we are faced with the cancer of IE6, 7, and 8. In the mobile era, we are faced with the cancer of Android (domestic only)

Recommend two editors:

• ##ATOM The most popular editor at present

• Sublime text Although the conscience editor is paid, it is not mandatory. It is just an occasional reminder.

• vscode The basic plug-in is complete but the update of third-party plug-ins is slow

If a worker wants to do his job well, he must first sharpen his tools.

Please don’t Double-click the HTML to preview the code you wrote like before. There is a question I have answered hundreds of times for newbies in some groups: XXXXX is not allowed by Access-Control-Allow-Origin, basically 99% of it is caused by double-clicking HTML directly (the remaining 1% is caused by http cross-domain and so on)

Thanks to the development of nodejs, now Browsersync and webpack dev server can quickly deploy a project directory, provided that you have node installed.

The front-end no longer directly writes CSS, HTML, and JS

Although this subtitle is a bit exaggerated, it is a trend.
The browser runs the Iron Triangle: css html js. If the existing browsers remain unchanged, these necessary files will be less and less likely to be written directly by engineers in the future. Instead, they will choose a compilation tool. Write it in your favorite emerging language, and then compile it into a file that the browser can recognize. Of course, it is not ruled out that the browser can directly run less, scss, ts and other files in the future. This is possible. . The most famous example is that jQuery's syntax has been absorbed by ES2015 and even new-age browsers and has built-in native support (it was even reported that browsers would have built-in jQuery in the past)

CSS:

Now most of them are compiled into ordinary css files through less, scss, sass, etc.

For example:

In the less file we write this:

.foo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    .bar {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        &:hover {
            color:red;
        }
    }
}

The compiled css is like this:

.foo {
  display: -webkit-box;    
  display: -webkit-flex;    
  display: -moz-box;    
  display: -ms-flexbox;    
  display: flex;    
  -webkit-box-pack: center;    
  -webkit-justify-content: center;    
  -moz-box-pack: center;    
  -ms-flex-pack: center;    
  justify-content: center;    
  -webkit-box-orient: vertical;    
  -webkit-box-direction: normal;    
  -webkit-flex-direction: column;    
  -moz-box-orient: vertical;    
  -moz-box-direction: normal;    
  -ms-flex-direction: column;    
  flex-direction: column;
}

.foo .bar {    
  -webkit-box-flex: 0;    
  -webkit-flex-grow: 0;    
  -moz-box-flex: 0;    
  -ms-flex-positive: 0;    
  flex-grow: 0;    
  -webkit-flex-shrink: 0;    
  -ms-flex-negative: 0;    
  flex-shrink: 0;    
  -webkit-flex-basis: auto;    
  -ms-flex-preferred-size: auto;    
  flex-basis: auto;
}

.foo .bar:hover {    
  color: red;
}

The above is an example using css,

There are also pug (formerly called jade) for HTML, HAML
typescript for JS, coffeeScript
But here I want to talk about js in particular, The new versions of ES6 and ES7 are actually very perfect. They have all the syntax modularization and so on. Then they can be compiled into a version compatible with popular browsers through the famous Babel compiler. Although I think typescript is quite good. , but I personally feel that there is no need to increase the cost of team learning unless it is your personal hobby.

With the development of the front-end and the maturity of nodejs, It is imperative to separate the front-end and back-end. As front-end projects become more and more complex, a robust and clear module system is very important, otherwise you will be fooled at any time.

• Angular 2

• Vue.js 2.0

• React

• React-Native

I am personally optimistic about vue2 and its family bucket

These frameworks inevitably require a compiler, a project directory, and nodejs.

So it’s imperative to get started now and engineer your project, don’t be too troublesome. Of course, I only point out the path here and do not give an in-depth introduction. I will introduce how to start engineering your project in a separate article in the future.

Development direction

The front-end has always had two directions:

• Interaction direction

• Data direction

It is a very difficult road to walk without being black or biased. It is also very lacking.
In short, just choose a path you like and stick to it. Let’s talk about some trends in these two directions this year.

Interactive direction

The hottest thing in 2016 is undoubtedly VR. Around 2013, Google engineers pushed a wave of webGL, but there were various performance and rendering issues. It wasn't completely done yet. (Actually, I don’t think it’s been done yet)
But no matter what, webGL will definitely be popular.

For now, the ones that can continue to be followed are
Three.js and Mozilla’s A-frame,
especially aframe recently It’s a big move, and it all cooperates with threejs to start webVR
But here I still recommend that everyone learn webGL first and then play webVR.

Many people don’t know why they haven’t started webGL. Indeed, a lot of three-dimensional matrix algorithm fixed-point rendering can make people dizzy at the beginning, but don’t be afraid, try blender, an open source modeling software, threejs also has this Export plug-in for the software. Although blen4web charges a fee, you can still refer to it.

Other libraries were either abandoned or suddenly disappeared.

Of course friends with outstanding skills and financial resources can try unity3D

Tips: Try to try it on a mobile phone. The current Retina desktop display...webGL really can't be used, let alone the web, native 3D rendering is difficult on Retina displays, but you can set the parameters to render 1x, but it's just a bit ugly.

By the way, do you think that if you are interactive, you don’t need to learn data-oriented things? Don't be naive, you still have to learn what you need to learn, so I say the road is not easy.

Data Direction

There is no doubt that this is the orthodox route that everyone should agree on, and it is also a direction that has been developed very comprehensively. The road has been paved by many predecessors. Various MV* frameworks, various server-side node middleware, and the big front-end suddenly swallowed up most of the work that the back-end originally had to do.
Separate development of front-end and back-end is unstoppable, and big data visualization is still very popular
If everything goes well, people in this direction will benefit from promotions and salary increases if they learn D3.js.

Digression: There is something called WeChat Mini Program, which you can study as a way to improve your skills.

Chrome PWA project In fact, if you have time, you can take a look at it as a way to improve your skills.

The author's personal opinion: With so many things to do, it is better to do the Add to homescreen function. Sometimes I feel that Chrome is really not popular in China.

Career Environment

The current employment environment is actually very suitable for entry-level front-end, and it has eliminated Microsoft's three major cancer browsers (Taobao was the first to not support IE8, well done), even in Even if the mobile webkit kernel is not perfect, you can still write a lot of the web effects you want. Anyway, the customer objects of the old version of the kernel cannot bring you any profit at all, so it is better to give up directly. Because only the latest technology can bring you benefits and a sense of accomplishment.

Various front-end tools are gradually bringing convenience to front-end development. Although it is indeed troublesome to deploy in the early stage, let me ask you, if you don’t even have this patience, I really can’t see where your future is.

Then what we have to face is also a force majeure factor. I am not here to encourage you to do anything. Sometimes some blocks and some learning materials are blocked by mistake. Please be sure not to give up on this and find a way to break through the blockade. Let me give you an example. Suppose you want to use npm to install the node module. Then the first problem we face is some force majeure blockades and QoS restrictions of operators. Some friends recommended yarn to me. I tried it myself and was blocked in a mess.

I think we can use npm here. Thank you very much to Taobao for forking npm. It's called cnpm. Their website address is npm.taobao.org. I won't go into details about how to use it. I'll see for myself.

However, sometimes this does not meet our needs, such as some operations under the command line.

假设你有 SS 这种梯子。
那么你可以在命令行下做一些临时的 proxy 设置：
MacOS 终端（假设你梯子的端口是1087）：

export http_proxy="http://127.0.0.1:1087"
export https_proxy="http://127.0.0.1:1087"

Windows 命令行（同样假设你的端口如下）：

set http_proxy=http://127.0.0.1:1080
set https_proxy=http://127.0.0.1:1080

然后就可以愉快地 $ npm xxxxx… 或者 ATOM 的升级 package 也能这么干。

题外话：ATOM升级package不顺利的话，用这个方法然后命令行

apm install [packagename]

总结:掌握的框架 / 技能