听说2017你想写前端？

发布时间：2025-11-05 12:18:06 来源：云智核 作者：应用开发

不好意思，听说没有像其他公众号一样赶着发文章，想写每年到这个时候总有一大波什么今年前端预测，前端技术框架预测什么的听说。我这次写这篇文针对的想写对象，是前端想在今年踏入前端这行的人们，不管你现在是听说徘徊在门口，还是想写已经半只脚踏入这片未知领域，都可以参考一下先行者的前端经验。

先来个大概预览：

小结放在前：

假设我今年要入WEB前端开发的坑

这里强调web前端是因为，现在很多iOS，安卓开发加入大前端的这个称呼。主要是因为React同构的出现吧，很多开始混合在一起了。

首先我们来回顾一下我们老同学印象中的前端：

或许你精通之后随便找个能敲字的东西就可以开始写代码，但是我遇到过一个有着多年丰富经验的前端老前辈，就是因为懒惰打开编辑器，手写了一段代码也没有检查，就直接提交，然后不小心敲错字符，导致整个项目差点烂尾的事情。真正厉害的人，任何时候都应该是非常谨慎的。请善用IDE的查错纠错功能。亿华云计算

跟以往不同，如果你今年要开始web前端的开发（下面都简称前端），那么至少你是不用去折腾太多的浏览器兼容，但并不是完全不需要去关心，只是开发环境不像以前那么多坑，因为各种编译器的出现。

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

落后的浏览器版本迭代。

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

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

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

推荐两款编辑器:

前端框架的高速发展，意味着各种插件的不断快速迭代，那么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

虽然这个小标题写得有点夸张，但是一个趋势。

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

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

在less文件我们这么写：

编译出来的css是这样：

这效率，这补全，你手写要写多久？ 搞不好还写漏。 所以，无论是出于对老板给你的工资负责， 你父母给你生命负责，还是你自己对你的身体负责，都请采用编译工具去书写你的css，html，js。

上面是用css做例子，

还有针对 HTML 的  pug (以前叫jade)， HAML

针对JS的 typescript， coffeeScript

不过这里js我要特别说一下， 新版本的ES6，ES7，其实已经非常完美了，

从 Ajax 的兴起， requirejs 的新兴思维模式一些专用术语就不逼逼了

现在流行的 MV* 框架有

注：MV* 框架一般指 MVC、MVP、MVVM 这些，具体什么意思，其实懂了也没啥意义。

我个人看好 vue2，还有它的全家桶

这些框架，无法避免需要编译器，需要工程目录，需要nodejs。

Koa2, Express 我就不说了，有兴趣的人自己去研究但也是后期要学的

所以现在入门，工程化你的项目，势在必行，别嫌麻烦。当然这里只指出路子，并不进行深入介绍，会在以后单独一篇介绍如何开始工程化你的项目。

发展方向

前端一直有2个方向：

不黑不偏，交互向是非常难走的一条路。也是非常缺的。

交互向

16年大热的东西，无疑就是VR，大概在 2013年的时候，Google的工程师热推过一波webGL，但是各种性能跟渲染问题那时候没有完全搞定。（其实我觉得现在也没搞定）

就目前来说比较能继续跟下去的就是

Three.js还有 Mozilla 搞的A-frame,

特别aframe最近动作很大，都配合 threejs 搞起webVR

很多人不知道怎么没开始webGL，确实一大堆三维矩阵算法定点渲染一开始就能把人看晕，但是别怕，试试看 blender 这款开源建模软件， threejs 也是有针对这款软件的导出插件。 blen4web 虽然收费，但也是可以参考。

其它的库要么就弃，要么就突然没下文了。

当然技能与财力突出的朋友可以去尝试 unity3D

小提示：尽量在手机上尝试， 现在的 Retina 桌面显示器…webGL真心带不动，别说web了，原生的3D渲染在Retina显示器上都很难，不过可以设置参数1倍渲染，只是丑了点。

顺带说一句，你以为交互向的，就不用学数据向的东西？ 不要天真，该学的还是要去学，所以我说路不好走。

数据向

毫无疑问，这是应该算是大家都认同的正统路线，也是发展得非常全面的一个方向，路已经有很多前辈踏平了。各种 MV* 框架， 各种服务端node中间件，大前端一下子吞并了本来后端要干的大部分工作。

前后端分离开发势不可挡，大数据可视化依旧是非常热门

题外话：有个叫微信小程序的东西，大家可以作为技能提升去研究研究。

Chrome PWA 项目其实大家有时间也可以作为技能提升去看看。

作者个人观点：搞那么多事，还不如做好 Add to homescreen 的功能。有时候真感概Chrome在国内真不接地气。

职业环境

现阶段就业环境其实非常合适入门前端，扫清了微软三大毒瘤 浏览器（淘宝率先不支持IE8 ，干得漂亮）， 即使在移动端webkit内核不是很完美的情况下，你依旧可以书写出很多你要的web效果，反正老版本的内核的那部分客户对象，根本不能给你带来任何利润，不如直接放弃。因为只有最新技术才能给你带来利益，成就感。

前端各种工具也渐渐给前端开发带来便利，虽然前期部署起来确实麻烦，但试问一下，你连这点耐心都没有，我实在看不到你的未来在哪。

然后我们要面对的，也是一个不可抗力因素，我这里不是怂恿你们干什么事，有时候一些封锁，错误的封掉了一些学习资料。这个请自己务必不要放弃，找方法突破封锁，我就举个例子，假设你要用 npm 安装 node 模块。那么首要面对的问题就是某些不可抗力的封锁，还有运营商的QoS限制，有些朋友向我推荐 yarn， 我亲身试过，也是被封得一塌糊涂。

这里我觉得可以曲线用npm, 非常感谢淘宝 fork 了一份 npm。 称之为 cnpm， 他们的网址是 npm.taobao.org  具体使用方法我不多讲自己看。

然而有时候这并不能满足我们的需求，例如命令行下的一些操作。

假设你有 SS 这种梯子。

那么你可以在命令行下做一些临时的 proxy 设置：

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

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

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

总结:掌握的框架 / 技能

对了还有即将大热的 hotfix， 代表作有：阿里热修复技术，据说饿了么，腾讯也出了。没去关注，但我个人觉得这个 apple 不会坐视不理的，毕竟你可以随时服务端修改APP绕过审核，这种外道招数我觉得可以学学但不要认真。

其它：

Angular 2 被小编你吃了？Angular 3 开发组告诉我，你又得像 ng1 转 ng 2 一样， 从头学一次。 so…你们玩得开心就好，真的，我的项目连平滑升级都做不到，我真心没办法陪你们玩。

jQuery 要死了？ 要死了啊！？哥，稳住。不会死，即使死了，也是融入到原生支持，如果你要从jQuery过度到原生，叔叔推荐网址你去学，别怕：

说好的交互向呢？你上面说的都是数据向。AE + bodymovin（ https://github.com/bodymovin/bodymovin ） 去学，

svg不可少，

sketch 是神器，

webGL 见仁见智，但是自从2016年第二、三季度，各大科技巨头公司都在技术积累，你懂的。但真心不强求。

然后就是把数据向的也学了。

相关文章