I heard that you want to write front-end in 2017?

Author: Jay (Hujiang Development Engineer)
This article is an original article, please indicate the author and source for reprinting

I'm sorry, I didn't rush to publish articles like other public accounts. At this time every year, there is always a big wave of front-end forecasts this year, and technical framework forecasts. I am writing this article this time for people who want to step into the front-end industry this year. Whether you are wandering at the door or have already stepped into this unknown area, you can refer to the experience of the forerunners. .

Here's a rough preview first:

• project engineering
• Direction of development
• professional environment
• Summarize the framework/skills to be mastered

Summary before:

• The front-end of 2017 is not so much cruel, but more standardized. In the past two years, after a few months of various trainings, it will come out with random offers of tens of thousands, and tens of thousands of newbies will be eliminated from the market.
• Front-end development tools/compilation tools are gradually taking shape. Although they are not as complete as the top programming languages ​​such as object-c, java, C+, etc., they have a complete IDE environment. The concept of engineering modularity is beginning to take root, and those who still write raw HTML CSS Javascript code these days are either small projects or newbies.
• The 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 emphasis here is on the web front-end because many iOS and Android developers have joined the term “big front-end”. Mainly because of the emergence of React isomorphism, a lot of them started to mix together.

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

• Antique: PS Cut Export
• Novice Xiaobai: Adobe Dreamweaver to write code
• Lazy: UltraEdit, notepad++ …

Maybe after you are proficient, you can just find something you can type and start writing code, but I have met a front-end senior who has many years of experience, just because he is lazy to open the editor, handwritten a piece of code without checking, just directly Commit, and then accidentally type the wrong character, causing the whole project to be almost unfinished.  A truly powerful person should be very cautious at all times. Please make good use of the IDE's error-checking and error-correcting functions.

Different from the past, if you are going to start web front-end development this year (hereinafter referred to as front-end), then at least you don’t have to toss too much browser compatibility, but it’s not that you don’t need to care at all, but the development environment is not as good as before. There are many pits, because of the emergence of various compilers.

前端面对的国内最严峻的挑战是：

落后的浏览器版本迭代。
我拿到过国内某500强手机企业的手机，我一看自带webkit内核，居然是2003 的 Releases 版本 webkit. 我当时是比较震惊的，毕竟安卓内核也是 4.x, 我至今不知道他们是如何做到把一个那么旧的浏览器内核塞进一个比较新的安卓系统的，也不知道这么干是几个意思，当然即使是高通soc基带，要升级一下系统也是登天还难，更别说其它soc基带。

安卓版微信在截稿之前是大概Chrome35的版本（最新是Chrome55） 并且持续了1年不变，据说是为了稳定。

UC，百度，等套壳浏览器大行其道，但它们调用的只是系统的浏览器内核，你别跟我说优化了加载速度什么东西，加载速度是网络状态、系统硬件决定的，跟你一个套壳浏览器有半毛钱关系？所以我不知道它们几十兆容量到底写了什么东西，细思极恐。

总之，在桌面时代，我们面对的是IE6，7，8这个毒瘤， 在移动时代我们面对的是安卓这个毒瘤（限国内）

推荐三款编辑器:

• ATOM 目前最热门的编辑器
• Sublime text 良心编辑器，虽然是收费的，但不强制，偶尔提醒而已
• VSCode 基础插件完善但第三方插件更新缓慢（@Jay，－。　－　现在很多插件了，好不好～）

工欲善其事，必先利其器。

前端框架的高速发展，意味着各种插件的不断快速迭代，那么Dreamweaver这种半封闭式的大型工具，虽然单方面很强大，但明显版本更新跟不上社区更新的脚步，即使我装了最新的2017版本体验了一下，我也觉得它无法胜任这个时代了

项目工程化

避免毫无意义的报错

老实说，虽然前端开发工程化的概念终于开始普及，是一件好事，但事实上还是属于初级阶段，对入门新手并不友好。还不能像xcode一样，直接建立一个工程，然后配置，然后就一条龙写代码搞定，虽然 macOS 平台有个CodeKit已经做得非常好了，但由于更新力度跟不上各种框架发展的速度，所以，也只是能参考。

现在写前端，你起码要建一个本地运行环境（localhost） 之类的。这是非常非常基础的东西， 请不要再像以前那样，双击HTML去预览你写的代码，有个问题我在一些群里回答新手不止上百次： XXXXX is not allowed by Access-Control-Allow-Origin, 基本上99% 就是直接双击HTML导致的（剩下1%是http跨域之类的）

既然都要建立 localhost 了那么部署 IIS , os server, 之类的，都是非常麻烦的一件事至少我觉得是。 并且还涉及到一些付费软件之类的，成本上升不少。

得益于nodejs的发展，现在 Browsersync , webpack dev server都能快速的部署起一个工程目录，前提是你装了node。

前端不再直接编写CSS，HTML，JS

虽然这个小标题写得有点夸张，但是一个趋势。
浏览器运行铁三角：css html js，这些必须文件，如果现有浏览器保持不变的话，那么以后的工程师，奖越来越少直接编写这些文件， 转而通过 编译工具，选择一款自己喜爱的新兴语言去编写，然后编译成浏览器可以认识的铁三角文件，当然不排除以后浏览器可以直接运行 less、scss、ts 等文件，这都是有可能的。

最有名的例子就是 jQuery 的语法被ES2015 甚至被新时代的浏览器吸收并内置原生支持了（以前甚至传出浏览器要内置jQuery）

CSS：

现在大部分都是通过 less、scss、sass 等去编译成普通css文件
然后通过著名的postCSS插件，补全各种浏览器前缀。
举个例子：

在less文件我们这么写：

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

编译出来的css是这样：

.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;
}