[转载]听说2017你想写前端？

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

先来个大概预览：

  • 项目工程化
  • 发展方向
  • 职业环境
  • 总结要掌握的框架／技能

小结放在前：

  • 2017的前端与其说更残酷，不如说更规范化，前两年各种培训了几个月就出来随口开价上万,几万的新手将被市场淘汰。
  • 前端开发工具／编译工具 逐渐成型，虽然比不上object-c, java, C+ 等排名靠前编程语言有完善的IDE环境，但是。工程化模块化的概念开始深入人心，这年头还编写原始HTML CSS Javascript 代码的，要么就是小项目，要么就是新手。
  • 前端的工作更具有挑战性，方向更多样化

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

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

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

  • 老古董： PS切图导出
  • 新手小白:  Adobe Dreamweaver 写代码
  • 懒人: UltraEdit, notepad++ …

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

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

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

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

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

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

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

推荐两款编辑器:

  • ATOM 目前最热门的编辑器
  • Sublime text 良心编辑器，虽然是收费的，但不强制，偶尔提醒而已
  • vscode 基础插件完善但第三方插件更新缓慢
工欲善其事，必先利其器。

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

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

上面是用css做例子，

还有针对 HTML 的  pug (以前叫jade)， HAML
针对JS的 typescript， coffeeScript
不过这里js我要特别说一下， 新版本的ES6，ES7，其实已经非常完美了，
语法模块化什么的应有尽有， 然后通过著名的 Babel 编译器，编译成现在流行浏览器兼容的版本即可，虽然typescript我觉得蛮不错的，但个人觉得这个就没必要增加团队学习成本了，除非你个人爱好。

大型项目无法避免 MV* 工程

从 Ajax 的兴起， requirejs 的新兴思维模式一些专用术语就不逼逼了
随着前端的发展，nodejs 的成熟，前后端分离势在必行，那么前端项目越来越复杂，一个健壮清晰的模块体系非常重要，不然随时会把自己做蒙。

现在流行的 MV* 框架有

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

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

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

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

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

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

发展方向

前端一直有2个方向：

  • 交互向
  • 数据向

不黑不偏，交互向是非常难走的一条路。也是非常缺的。
总之，选择一条你喜欢的路，并坚持走下去就对了。这里说说这两个方向今年的一些趋势吧。

交互向

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

就目前来说比较能继续跟下去的就是
Three.js还有 Mozilla 搞的A-frame,
特别aframe最近动作很大，都配合 threejs 搞起webVR
但是我在这里还是建议大家先学webGL再玩webVR.

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

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

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

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

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

数据向

毫无疑问，这是应该算是大家都认同的正统路线，也是发展得非常全面的一个方向，路已经有很多前辈踏平了。各种 MV* 框架， 各种服务端node中间件，大前端一下子吞并了本来后端要干的大部分工作。
前后端分离开发势不可挡，大数据可视化依旧是非常热门
如果一切顺利的话，这个方向的人学一下D3.js会利好升职加薪。

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

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

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

职业环境

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

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

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

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

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

假设你有 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:1080set https_proxy=http://127.0.0.1:1080

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

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

apm install [packagename]

总结:掌握的框架 / 技能

  • 要会部署nodejs环境
    • webpack
    • babel
    • gulp
    • postCSS的插件
  • CSS:Less, scss
  • HTML:pug, haml (可选)
  • Javascript: ES6, ES7
  • WebComponents (可选)
  • Vue.js / React (反正掌握一款MV* 框架是必要的)

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

其它：

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

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

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

svg不可少，

sketch 是神器，

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

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

无论你走哪个方向请记住
勿忘初心

原文链接此处

时间： 2024-10-29 01:17:09

[转载]听说2017你想写前端？的相关文章

javascript功能插件大集合，写前端的亲们记得收藏

导读:GitHub 上有一个 Awesome – XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模板引擎.数据可视化.时间轴.编辑器等等. 伯乐在线已在 GitHub 上发起「JavaScript 资源大全中文版」的整理.欢迎扩散.欢迎加入. https://github.com/jobbole/awesome-javascript-cn js包下载地址:http:

自己写前端页面

由于公司人员配置的原因,不得已要自己制作页面了.对于大多数后端技术员来讲,自己写前端页面是件很痛苦的事情,但是没办法,只能是硬着头皮上了,虽然之 前也有接触一些css,除了css3的一些属性,其他的基本都知道,并了解使用,可从始至终除了拼凑一些后台页面以外,就没有真正完整的做过几个前端页面. 然后就着我所知道的那些标签跟css属性写起了页面.首先,我所知道的div+css布局: 1.    页面的左边跟右边要留白,不然分辨率一变,页面就没用了(定宽),我写的是1200px作为可视区. 2.  

写自己想写的还是读者想看的？这是个问题

头条号作者经常遇到这样的问题,自己想写的内容读者不喜欢看,读者喜欢看的内容又不想写,那么到底应该写什么呢?当人生面对重大抉择的时候,你只需问问自己想要成为怎样的人.同理,写什么内容你只需问问自己想要成为怎样的自媒体. 自从开通头条号以来,小编9SiR每天坚持写一篇800字左右的原创文章,这已经坚持了50天了,几乎相当于我高中三年写的作文总数,对于一个理工男来说,这简直就是一个奇迹. 开通头条号之前经常没事就刷今日头条,发现很多文章写得也不怎么样,甚至有的还出现逻辑颠倒和语病等低级错误,然而阅读量

献给即将想从事前端工作的你们

时间过得很快,出来实习工作快两个月了,在这里,想跟大家分享自己的一些体会与经验. 还没出来工作之前,在学校就一直很想能快点出来工作,总以为工作能多学到很多在学校里学不到的东西.也确实如此,工作是可以学到很多,但我还是很想跟那些要从事IT的你们说,还没工作之前还是多学点东西,把基础打好.不要总想着出来工作后再学,到时你们会发现其实真的很吃力,压力会很大,公司是做事的地方,它每天都有你要完成的任务,每天有一定的工作量,也不要总想着工作中有人会一步步教你怎么做,上司可能只会跟你说一下大概的思路,他想你

从学校走出来总想写点什么

从学校搬出来已经有一周了,今天休息,居然自己一觉起来就是10点钟,颇有在学校的味道,洗漱完毕后出去买菜,然后收拾一下开始自己的午餐,下午基本上就是玩自己的电脑,上网看电影,吃了晚饭后,其实从搬出来的第一天起,自己总想写点什么,打开word文档后却有不知道写些什么,可能是今天太闲了,哪怕是记流水账,还是想在这段适应期中记录下自己的状态. 看着本科线已经出来了,明知道今时不同往日,还是忍不住拿自己四年前的分数和这次的分数线作比较,查成绩,填志愿,新生报到一幕幕再次浮现脑海.其实我很特别,四年的大学时

1.想写一些关于c++的东西了，就作为个开篇吧

又再一次重拾c++,想写一些东西,给自己看看,不想再看一些隐晦翻译的外国书籍了,就从一本好读的书开始写一写. 就这本吧, <我的第一本C++书>> 来写一写自己的东西.

一点都不想写今天的总结呀

acenodie 于 2015/3/30 20:43 修改 ? ? 今天多好的一天呀,上午就三节课,其他的时间都没有课,早上起来干了什么呢,让我想一想,8点起的床,然后洗刷刷:接着应该是在网上随便看了些什么东西,玩了会手机,真是完全不记得了呀,时间就是这么流逝浪费的呢!反正九点多的时候就出去了,上课,后三节: ? ? 课是网络工程实验课,本来听着名字是多好的课呀,哎,可惜我们学校的实验环境太差,华三的交换机路由器没几台是好的,叫我们怎么做实验呀!老师也是极度不负责任,自己也不够直觉,三节课无聊得

2014-5-27 今天我想写一写“思杨是个小吃货”

今天我想写一写"思杨是个小吃货" 哈哈,和宝宝在一起总是很开心,很愉快.虽然我的能量和他的不在一个Level上.人家是啥时候都精力旺盛而且不知疲惫. 昨天奶奶炒了个西葫芦,思杨指着其中一片说 给我这个. 我就随便给他夹了个小点的.他就嘟着嘴不吃,而且哭个嗓子说这个,这个... 哈哈,经奶奶提醒我才明白,他的手指的是一片大的,他要那个大点的.我给他的太小了.于是,我夹大的给他,他开心了 哈哈. 其实爸爸是觉得小的入味. 最近好像有个苗苗小朋友去家里玩.思杨老实说这是我的,那是我的.哎 ,

我想写一个Linux下的C++程序库--记我的C++库设计历程：设计一个TCP服务程序

我想写一个Linux下的C++程序库,实现一些常用的功能. 我首先想到的就是实现一个TCP监听程序.该程序应该具有哪些功能呢? 1: 启动/停止监听 2: 有客户端连接时,通知调用者 3: 与客户端断开时,通知调用者 4: 有消息到达时,通知调用者 5: 尽量避免程序退出时有没有close的socket. 该程序的大体接口及结构主要用一个类表示,内容如下: #pragma once #include <functional> namespace Hi { /* * @ brief TCP监听会