Looking ahead to 2018, I think there are three possible breakthroughs on the front end


  1. Front-end logic layer(Including three frameworks, Webpack, front-end data management)
  2. Front-end interaction layer(including CSS3, Canvas, SVG, VR, etc., and corresponding performance optimization)
  3. Node server layer(that is, the server domain, and the development of front-end development tools)
Of course, there are desktop applications like Electron, but I think most people’s plans are in the web domain.



First, front-end logic layer

Problems solved by the front-end logic layer: front-end rendering problems.

In essence, it is how the various data taken from the back end (structured data from the database, various materials) are combined into page elements.



Front-end rendering, in fact, is template + data = page

In the template section

① HTML is responsible for structure

② CSS is responsible for styling

③ JS is responsible for logic


A page with only templates and no back-end data can be considered a static page

The three major frameworks we currently have provide mapping between templates and data.

The research in logic layer is mainly to learn and master three frameworks: Vue, React and Angular



This is the main part of our daily work, 90 percent of the front end. Is also a lot of companies will go to focus on the content of the interview.

However, the current market is not, you will be a new framework can capricious take OFFER period.

In the case of a front-end blowout, just knowing the basics is not enough. You have to dig deep.



A part that can be dug deep

① Frame part: For example, Vue+ Vuex+ VuE-Router + Axios family bucket

(React and Angular have a similar set of family buckets.)

To gain an edge on the front end competition, you need to dig deep into the principles of these frameworks.

Study:

A. Source code and implementation principle (theory)

B. Common application scenarios and implementation of common problems (experience)

C. Horizontal comparison of similar problems (for example, vuex needs to know how redux is implemented)



② Construction part: Webpack + NPM/YARN + scaffolding (e.g. vUE – CLI) + SASS

The construction part, in fact, is an easy area to distinguish. The more research you do, the better able you will be to handle the changes in the project.

Study:
A. Webpack configuration and application scenarios

B. command use of NPM, and some advanced usage (setting up private NPM or writing global package, etc.)

C. How to set up scaffolding quickly, and how to customize the change

D. How to configure ESLint, unit tests, etc.



③ Code specification part: ES6 + TS + CSS specification, etc

Not to mention the code specification, front-end JS and CSS are poorly designed languages. If you want to handle a larger project, then the specification is something you can’t ignore.



The logical layer is the front end of what we usually understand.



Second, front-end interaction layer

The so-called interaction layer can be understood as the special effects we often say.

In the current trend, the performance of mobile browsers is gradually improving.

The big trend in the future is that the effect of front-end development is infinitely closer to the original effect



At the same time, some big factories are also in advance of the layout, before the amazing quartet of Tmall creation festival H5

http://www.jianshu.com/p/111ee1fde39f



If we want to take advantage of this wave, then we must learn in advance. Maybe three years from now, the ability to develop special effects on the front end will also become a standard skill.



You can look at it in three pieces



1. Show and learn:

Many students do not know special effects, but do not know what to achieve.

With the front end of a variety of things tinkered, finally came out of the special effects, but the effect is very ugly.

No, no, no, do the special effects, should look like the special effects first set up to do.

It is recommended that you learn Adobe Effects (AE), visually see what motion Effects look like, and then translate into motion Effects for the front end.

2. Related mathematical/visual principles:

A. Bezier curve principle B. parallax principle C. damping formula

3. Realization of relevant technical means

The front end currently realizes animation special effects in eight ways

http://www.offcn.com/it/2017/0110/5881.html




GIF: design directly out of GIF, front-end direct use

② Frame by frame animation: CSS3 STEP property or JS to make frame by frame animation

(3) CSS 3: the transition/transform/animation

④ SVG: SVG is good for mobile

⑤ Canvas: Canvas is suitable for some large-area dynamic effects

⑥ Flash to Canvas: I don’t know that

⑦ Video: use H5 video label

Js animation: can cooperate with the platform to provide API (gravity sensing, etc.) to develop more complex dynamic effects



Node service layer

Node in the front end should be everyone knows. In actual use, node should be used in the following scenarios:

① As a front-end construction aid toolNode is often involved in scaffolding

② As a server to do the rendering layer: Implements interface merging and template rendering

③ As a complete server: Usually in a start-up company, one person can build all web functions. Such as wechat public account project



So if you want to learn, where do you start?

My personal approach to learning a new skill is

Take the original document, go through it quickly, and then learn the framework.

Don’t look at the original, it is easy to learn a set of frameworks, is a learning volume.

Learning native knowledge will help you learn frameworks faster.



Commonly used in the framework:

① Express ② KOA ③ Derived frameworks ④ Other frameworks



I recommend beginners learn the Express framework. The reason is very simple, easy to learn, use more, more tutorials.

The Node framework I personally want to learn about is Ali’s egg.js.



The recommendation is that

① Dachang development, oriented to engineering

The double 11 has withstood the test, the quality is guaranteed

conclusion

The front end is the end engineer, all features depend on the client.

So you front-end colleagues, in addition to the above functions, or pay more attention to the browser and mobile environment changes.

Something like HTTP2 protocol, PWA, openGL, etc., can change the way the front end works at any time.



I have listed so many above, but I have not learned many of them. But in addition to technical ability, perhaps the following comprehensive ability, for the front-end ER is also to pay attention to

① Self-planning ability: Insight into trends in the technology field and personal learning plans

② Quick learning ability: Search ability (using all kinds of knowledge on the Internet), knowledge transfer ability

③ Communication ability and knowledge output ability: Product-oriented, and back-end, community-oriented



Front end to learn a lot of things, the students together ~!