听说2017你想写前端?

127

作者:Jay(沪江开发工程师)
本文为原创文章,转载请注明作者及出处

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

先来个大概预览:

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

小结放在前:

  • 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 基础插件完善但第三方插件更新缓慢(@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;
}

? 这效率,这补全,你手写要写多久? 搞不好还写漏。 所以,无论是出于对老板给你的工资负责, 你父母给你生命负责,还是你自己对你的身体负责,都请采用编译工具去书写你的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:1080
set 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 4 开发组告诉我,你又得像 ng1 转 ng 2 一样, 从头学一次。 so…你们玩得开心就好,真的,我的项目连平滑升级都做不到,我真心没办法陪你们玩。

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

说好的交互向呢?你上面说的都是数据向。
AE + bodymovin( https://github.com/bodymovin/... ) 去学,

svg不可少,

sketch 是神器,

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

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

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

>> 沪江Web前端上海团队招聘【Web前端架构师】,有意者简历至:zhouyao@hujiang.com <<

iKcamp官网:http://www.ikcamp.com


如果觉得我的文章对你有用,请随意赞赏
已赞赏

你可能感兴趣的

92 条评论
oceania · 2017年09月12日

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

你确定这真是开发组告诉你的?~.~

+15 回复

阿木木 · 2017年09月05日

感觉在误导新人。新人看了心里一定大呼过瘾,草草草这么多高大上没用过,前端真尼玛好玩!
刚自学的一定要学好javascript css html啊!
不然面试都不过哪来的react webpack。

+13 回复

1

@阿木木 现实如此,并没误导。

iKcamp 作者 · 2017年09月05日
1

@iKcamp 感觉说不上误导(站队作者),但也并没有感觉到“入门”的概念(站队阿木木)。这篇文章感觉就是“针对想在今年踏入前端这行的人们,所做的今年前端预测,技术框架预测”。
如作者所说:每年到这个时候总有一大波什么今年前端预测,技术框架预测什么的。我这次写这篇文针对的对象,是想在今年踏入前端这行的人们。

狼骑舞者 · 2017年09月05日
2

@狼骑舞者 看对新人是怎么定义的。我认为这篇文章给大三大四已经在公司实习过,知道切图静态交互组件化是个啥,知道前端是个啥的人看,合适。对于今年刚知道前端这个名词的人,不学好js盲目追技术,可是自掘坟墓。

阿木木 · 2017年09月06日
color_cat · 2017年09月06日

看都不看一下就黑ng2,小白文就算了还要无脑喷……

+10 回复

嘻倪孢 · 2017年09月04日

webgl应该算一个高新方向,就是有点麻烦,还是挺有前途的

+7 回复

0

感觉就业面窄,除了淘宝、百度之类的大公司有招一些专门研究这个方向的前端以外,感觉有搞WebGL的公司很少,何况BAT招的前端也不是全弄这个的。

tsingfunlee · 2017年09月06日
1

@tsingfunlee 看现在是这样的,但是考虑时代的发展的话,还是很有发展。就算在web中应用不是很广泛,你在学习opengl中的知识的时候也可以运用到其他项目中。其实在一些中型公司也在招了,我在重庆,我就遇见一个招webgl的,只有快人一步,才有吃得,这个具体如何考虑,看自己的发展情况。毕竟webvr之类的都要基于webgl的一些知识

嘻倪孢 · 2017年09月06日
0

不好学呀~

pingan8787 · 2017年09月07日
ChenShao · 2017年09月06日

半年前想入门前端,后来因为项目忙(也有可能是因为懒),没有入坑。半年后再来看前端,觉得半年前没有入坑是对的,因为又有好多新东西,新版本出现了。。。
我现在也还不想入前端,
一是公司用不到,没实践机会学不深
二是总想着前端跟后端一样稳定之后再入坑,不过这一天应该还要等很久很久很久。。。

+7 回复

10

有兴趣就好~

iKcamp 作者 · 2017年09月06日
风雪夜归人 · 2017年09月04日

这篇文章对我来说,简直醍醐灌顶。自以为HTML,CSS,JavaScript,jQuery学的不错,正要准备学node时,读了这篇文章,感觉自己学了个假前端 ?

+6 回复

6

%》——《%

iKcamp 作者 · 2017年09月04日
3

还可以看看这篇文章:https://segmentfault.com/a/11...

iKcamp 作者 · 2017年09月04日
2

@风雪夜归人 并不冲突… node是拓展了js的能力,我们公司只用jq,但是我们前端一样用node的协助开发。

ci0n · 2017年09月04日
Galence · 2017年09月05日

前端就是个大坑。要学的东西太多,技术迭代太快。后面入坑的要注意,如果你没有准备好一直不断的学习新技术,那么,不如去学一门后端语言混饭吃。

+6 回复

2

@Galence 啊哈,做自己喜欢的,长期来看准没错。

iKcamp 作者 · 2017年09月05日
1

真真的大实话,迭代太快了,感觉就是一个位子没坐热就换一个,都是凉的,唉

CobraJ · 2017年09月05日
2

哈哈,就是。前端就像赛车,转弯都来不及,只能玩漂移。一漂起来就不知道什么时候能停下来了。

小舞丶 · 2017年09月05日
lovnie · 2017年09月05日

昨天收到的作者的这边书,虽然东西挺多,但很多都是简单介绍了一些,没具体深入。还有封面上有vue,里面没vue。

+6 回复

3

9.3 基于Vue.js的开发方式 372
9.3.1 实战演练:开发一个简单的备忘录应用(Vue.js 2.0) 372
9.3.2 管理应用的状态及实现组件间的通信 375
9.3.3 添加动画效果 379

iKcamp 作者 · 2017年09月05日
0

书籍偏入门为主,适合作为初阶学习。

iKcamp 作者 · 2017年09月05日
2

不好意思 没仔细看目录 还没看到 书的内容和例子都很不错 ,解决了我很多之前的疑惑,感谢恢复。

lovnie · 2017年09月05日
一个宇航员 · 2017年10月13日

编辑器用idea或者webstorm不就好了么

+6 回复

帕奇式 · 2017年09月04日

可以详细说说交互向前端的知识面吗?

+5 回复

1

@帕奇式 帮你反馈给作者。

iKcamp 作者 · 2017年09月04日
1

可以看看这篇文章:https://segmentfault.com/a/11...

iKcamp 作者 · 2017年09月04日
calx · 2017年09月04日

浮躁的前端世界

+5 回复

0

确实, 做前端一年零两个月, 从gulp到browserify到webpack, 从vue到react, 前端发展太快了, 没有一点尘埃落定的感觉.

hymin · 2017年09月05日
Mr_undefined · 2017年09月05日

作为一个刚刚着手自学前端的孩子,我觉得这样的前端学着很爽很刺激……

+5 回复

wumoxi · 2017年09月05日

WebStorm表示不服,作者你怎么看?

+5 回复

1

@warnerwu 个人偏好VSCode,您怎么看?( ↷ ㉨ ↷)

iKcamp 作者 · 2017年09月05日
4

webstorm同表示不服哈哈哈哈哈哈

mmqic · 2017年09月05日
1

@iKcamp 乐观的来说比sublime好些,但相对WebStorm还是有些蹩脚

wumoxi · 2017年09月05日
敖天羽 · 2017年09月05日

还是后端好玩

+5 回复

0

哈哈,活捉野生天哥

Knight_Young · 2017年09月05日
贾顺名 · 2017年09月04日

两款编辑器??

document.querySelectorAll('#articleHeader4+ul>li').length === 3

+4 回复

3

恩?

iKcamp 作者 · 2017年09月04日
0

@iKcamp 他说文章写推荐两款编辑器,但是给出了三款

硪对沵始终如⒈ · 2017年09月04日
1

@硪对沵始终如⒈ 啊哈,笔误,我个人比较喜欢VS Code。

iKcamp 作者 · 2017年09月04日
西元前 · 2017年09月04日

对于自学前端的我来说,给了一定方向…

+4 回复

5

还可以看看这篇文章:https://segmentfault.com/a/11...

iKcamp 作者 · 2017年09月04日
0

@iKcamp 谢谢分享!

西元前 · 2017年09月23日
acdseen · 2017年09月05日

我觉得webstorm挺好用的啊 自动构建localhost 还有node.js的快捷运行

+4 回复

1

@acdseen 试试VSCode,你想要的都有。

iKcamp 作者 · 2017年09月05日
cococe · 2017年09月05日

前端不再直接编写CSS,HTML,JS?这个太绝对了。
有点误导新人,感觉从基本的html,css,js开始学,还是非常有必要的,框架只是辅助。
前端还是要注重编程思维的训练。

最近看过一篇文章我认为有部分写的很不错:

使用jQuery不少人容易写出面条式的代码,但是写代码的风格我觉得和框架没关系,关键还在于你的编码素质,就像你用了React写class,你就可以说你就是面向对象了?不见得,我在《JS与面向对象》这篇文章提到,写class并不代表你就是面向对象,面向对象是一种思想而不是你代码的组织形式。一旦你离开了React的框架,是不是又要回到面条式代码的风格了?如果是的话那就说明你并没有没有掌握面向对象的思想。不过,React等框架能够方便地组件化,这点是不可否认的。

https://fed.renren.com/2017/0...

推荐几本书吧:
1.css权威指南
2.JavaScript高级程序设计
3.你不知道的JavaScript
4.深入理解es6
5.javascript设计模式与开发实践
6.代码整洁之道

+4 回复

1

@cococe 看了这么多评论,觉得还是这条较为中肯。讲真,这篇文章的调调,确实有误导入门者的嫌疑。程序开发的外部形态千变万化,始终不变的还是成熟的编程思想,前者是形,后者是神。

虫样熊 · 2017年11月15日
0

@cococe 话说推荐的第一本书是不是JS权威指南?

samsara0511 · 2018年01月13日
0
cococe · 2018年01月18日
牛奶老哥哥喽 · 2017年09月05日

这是原创?怎么前面我好像在哪看到过?

+4 回复

2

我们在其他社区之前有发布,感谢支持~

iKcamp 作者 · 2017年09月05日
杨亮 · 2017年09月04日

总结的很好,谢谢大神!

+3 回复

0

感谢支持!

iKcamp 作者 · 2017年09月04日
载入中...