This article is originally published by Jay. Please indicate the author and source

I’m sorry that I didn’t rush to post articles like other public accounts. Every year at this time, there is always a big wave of predictions for the year’s front end and technical framework. I am writing this article for people who want to enter the front end of the industry this year, whether you are hovering at the door, or are already half foot into the unknown, can refer to the experience of the pioneers.

Here’s a quick preview:

  • Project engineering
  • The development direction
  • Professional environment
  • Summarize the framework/skills to be mastered

Summary before:

  • The front end of 2017 is not so much more brutal as more standardized. In the first two years, various kinds of training will come out for a few months and offer a price of tens of thousands of novices will be eliminated from the market.
  • Front-end development tools/compilation tools gradually take shape, although not as good as object-C, Java, C+ and other top programming languages have a perfect IDE environment, but. The concept of modular engineering began to take root in people’s minds, this year also write original HTML CSS Javascript code, or is a small project, or is a novice.
  • Work on the front end is more challenging and diverse

Let’s say I’m going to get into WEB front-end development this year

I’m emphasizing the Web front end because now a lot of iOS and Android development has added the term big front end. Mainly because of React isomorphism, a lot of things are starting to mix together.

First let’s review the front end of our old classmates’ impression:

  • Antique: PS cut diagram export
  • Novice xiao Bai: Adobe Dreamweaver code
  • UltraEdit, notepad++…

Maybe you can find a hammer random word master after things can start writing code, but I met a front-end doyen with many years of rich experience, because lazy to open the editor, writing a piece of code and no inspection, submit directly, then accidentally press the wrong character, cause the entire project nearly abandoned. A really strong person should be very cautious at all times. Make use of the error checking and correction features of the IDE.

Unlike in the past, if you’re going to start developing a web front end this year, at least you won’t have to deal with browser compatibility as much, but you won’t have to worry about it at all. It’s just that the development environment isn’t as crater-ridden as it used to be, thanks to the emergence of various compilers.

The most serious domestic challenges facing the front end are:

Backward browser version iteration. I got a mobile phone from one of the top 500 companies in China, and when I looked at the webKit kernel, I got the Release version of WebKit in 2003. I was more shocked, after all, the android kernel is 4 x, I still don’t know how they do so a old browser kernel into a relatively new android, also don’t know a few do mean, of course, even the qualcomm baseband soc, want to upgrade the system and hard, let alone other soc baseband.

Wechat for android was a roughly Chrome35 version before press time (Chrome55 is the latest) and has remained unchanged for a year, supposedly for stability.

UC, Baidu, such as shell browser popular, but they call only the browser kernel of the system, you don’t say to me optimized the loading speed what things, loading speed is the state of the network, system hardware decision, with you a shell browser has half a dime relationship? So I don’t know what’s written in their tens of megabytes, and it’s scary to think about it.

In summary, in the desktop era, we are facing IE6, 7,8 cancer, in the mobile era we are facing android cancer.

Three editors are recommended:

  • ATOM is currently the most popular editor
  • Sublime Text Conscience Editor, although charged, is not mandatory and is only occasionally reminded
  • VSCode base plugins are perfect but third-party plugins are slow to update (@jay, -). – There are many plugins now, ok ~)

To do a good job, he must sharpen his tools.

The rapid development of front-end frameworks means the constant rapid iteration of various plug-ins, so Dreamweaver, a large semi-closed tool, although unilaterally powerful, is obviously unable to keep up with the pace of community updates, even if I installed the latest version of 2017 to try it out, I feel that it is not up to The Times

Project engineering

Avoid meaningless error reporting

To be honest, while it’s great that the concept of front-end engineering is finally taking off, the truth is that it’s still in its infancy and not very friendly to beginners. It is not like Xcode, which can directly establish a project, then configure, and then write code in one step. Although macOS platform has a CodeKit has done a very good job, but because the update strength can not keep pace with the development of various frameworks, so, it is only a reference.

Now, to write the front end, you need at least a localhost or something. This is very, very basic stuff. Please don’t double click on HTML to preview your code like you used to. Here’s a question I’ve answered hundreds of times in some groups for newbies: XXXXX is not allowed by access-Control-allow-origin, basically 99% of this is caused by double-clicking HTML.

Now that you’re setting up a localhost, it’s going to be a lot of trouble to deploy IIS, OS Server, whatever it is at least I think it is. And also involves some paid software and so on, the cost rises a lot.

Thanks to nodeJS, Browsersync and WebPack Dev Server can now quickly deploy a project directory, provided you have Node installed.

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

Although the subtitle is a bit exaggerated, it’s a trend. Browser running iron Triangle: CSS, HTML, JS, these required files, if existing browsers remain the same, then future engineers will be less likely to write these files directly, instead of using compiler tools, choose a favorite language to write, and then compile into the browser can understand the iron triangle file. Of course, the browser can run less, SCSS, TS and other files directly in the future, it is possible.

The most famous example is that jQuery syntax has been incorporated into ES2015 and even into the new generation of browsers with built-in native support (previously, jQuery was even required to be built into external browsers).

CSS:

Most CSS files are compiled by less, SCSS, sASS, etc., and then filled with browser prefixes via the famous postCSS plugin. Here’s an example:

In the less file we write:



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

The compiled CSS looks 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;
}Copy the code

😓 this efficiency, this completion, how long do you write by hand? I might even miss it. So, whether you’re responsible for your employer’s paycheck, your parents for your life, or you’re responsible for your body, use a compiler to write your CSS, HTML, and JS.

Here’s an example using CSS,

Pug for HTML (formerly jade), Typescript for JS (HAML), coffeeScript for JS, but I’d like to mention that the new versions of JS, ES6 and ES7, are pretty much perfect, syntax modularization and all that, You can then use the famous Babel compiler to compile to a version compatible with popular browsers. Typescript is pretty good for me, but I don’t think it’s necessary to add a team learning cost unless you like it.

Large projects cannot avoid MV* engineering

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

Now popular MV* frames are

  • Angular 2
  • Vue. Js 2.0
  • React
  • React-Native

Note: MV* framework generally refers to MVC, MVP, MVVM and so on.

I personally like the VUe2, and its whole family barrel

These frameworks, inevitably, need compilers, need project directories, need NodeJS.

Koa2 Express, I’m not going to talk about it, if you’re interested in it, but it’s something to learn later

So getting started and engineering your project now is imperative, don’t bother. Of course, this is just the way to go, not the way to go in depth, but there will be a separate article on how to start engineering your project.

The development direction

The front end always has two directions:

  • Interaction to
  • The data to

It’s a very difficult road to cross. It’s also very scarce. In short, choose a road you like and stick to it. Here are some trends in both directions this year.

Interaction to

The big thing in 2016 is undoubtedly VR. Around 2013, Google engineers launched a wave of webGL, but various performance and rendering issues were not completely solved at that time. (I don’t think it’s done yet) but webGL is going to be huge anyway.

Js and Mozilla’s A-frame, especially Aframe, have recently made A big move to cooperate with Threejs to launch webVR. However, I still recommend that you learn webGL before playing webVR.

For those of you who don’t know why webGL hasn’t started, it’s true that a lot of 3d matrix algorithms for spot-point rendering can be confusing at first, but don’t be afraid to try Blender, an open source modeling software for which Threejs has an export plugin. Blen4web charges a fee, but it is also a reference.

The other libraries were either abandoned or suddenly stopped.

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

Tip: Try it on mobile, with the Retina desktop display… WebGL really doesn’t work, let alone the Web, native 3D rendering is hard to do on a Retina display, but you can set the parameters to 1x rendering, just ugly.

By the way, do you think you don’t have to learn about data if you’re interactive? Don’t be naive, should learn or to learn, so I said the road is not easy to go.

The data to

There is no doubt that this is the orthodox line that everyone agrees with, and it is also a very comprehensive direction that has been developed by many predecessors. Various MV* frameworks, various server-side Node middleware, and the big front end absorbs most of the work of the back end. Big data visualization is still very popular. If all goes well, people in this direction will get a promotion and a raise if they learn d3.js.

Off-topic: there is a small program called wechat, we can study as a skill to improve.

The Chrome PWA project can also be viewed as a skill upgrade if you have time.

Add to Homescreen might as well have added to Homescreen. Sometimes it feels like Chrome is out of touch in China.

Professional environment

At this stage the employment environment is actually very suitable for entry front end, cleared Microsoft three cancer browser (Taobao first does not support IE8, well done), even in the case of mobile webKit kernel is not very perfect, you can still write a lot of web effects you want, anyway, the old version of the kernel that part of the client object, It doesn’t bring you any profit at all. It’s better to just give up. Because only the latest technology can bring you benefits and a sense of accomplishment.

Front-end tools also gradually bring convenience to front-end development, although the early deployment is really troublesome, but ask, you do not even have this patience, I really can not see your future.

Then we have to face, there is also a force majeure factor, I am not encouraging you to do anything here, sometimes some blockade, mistakenly blocked some learning materials. This please do not give up, find a way to break the blockade, I will take an example, suppose you want to install node module using NPM. Some friends recommended YARN to me. I tried it myself, but it was also completely blocked.

Here I think we can use NPM curveline. thank you very much taobao forked a NPM. It’s called CNPM, and their website is npm.taobao.org and I’m not going to tell you how to use it.

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

Suppose you have a ladder like the SS. Then you can do some temporary proxy Settings on the command line: MacOS terminal (assuming your ladder port is 1087) :



export http_proxy="http://127.0.0.1:1087"
export https_proxy="http://127.0.0.1:1087"Copy the code

Windows command line (again assuming your port is as follows) :



set http_proxy=http:/ / 127.0.0.1:1080
set https_proxy=http://127.0.0.1:1080Copy the code

Then you can happily $NPM XXXXX… Or the ATOM upgrade package could do the same.

Off topic: If ATOM upgrade package is not successful, use this method then command line



apm install [packagename]Copy the code

Summary: Framework/skills to master

  • Be able to deploy nodeJS environments

    • webpack
    • babel
    • gulp
    • PostCSS plugin
  • CSS: Less, scss
  • HTML: pug, haML (optional)
  • Javascript: ES6, ES7
  • WebComponents (optional)
  • Vue. Js/React (learn the MV* framework anyway)

By the way, there will be hot hotfix, representative works are: Ali hot repair technology, it is said that Ele. me, Tencent also out. I did not pay attention to it, but I personally think apple will not sit idly by. After all, you can modify the APP on the server at any time to bypass the audit. I think this kind of external tricks can be learned but not seriously.

Other:

Angular 2 is eaten by the editor? The Angular 4 team tells me that you have to learn from the beginning again, like ng1 to NG 2. So… Just have fun, really, my project can’t even smooth upgrade, I really can’t play with you.

JQuery is dying? You’re dying! ? Brother, hold on. It will not die, and even if it does, it will be integrated with native support. If you want to transition from jQuery to native support, don’t be afraid:

  • youmightnotneedjquery.com
  • Github.com/oneuijs/Yo….

What about the interaction direction? All you said above is the data direction. AE + BodyMovin (github.com/bodymovin/….) To learn,

SVG is indispensable,

Sketch is an artifact,

WebGL is a matter of opinion, but since the second and third quarters of 2016, the tech giants have been accumulating technology, you know. But sincerity is not required.

And then you learn what the data is.

IKcamp’s original new book “Mobile Web Front-end Efficient Development Combat” has been sold on Amazon, JD.com and Dangdang.

>> Hujiang Web Front-end Shanghai team recruiting [Web front-end architect], interested candidates resume to: [email protected] <<

IKcamp website: www.ikcamp.com