当二十年前,前端领域刚刚出现甚至还不叫前端之时,那会儿的网站开发人员的工作主要是用 Flash 做动画、用 Dreamweaver “可视化编写”网页、用 Firework 切图,所以很长一段时间,业内从业人员俗称或自嘲为“切图仔”。
2010 年 Backbone、Angular等前端 JavaScript 框架的相继出现,让前端开发人员逐渐有了底气:
早早地,Node-WebKit(现名为 NW.js) 和 Electron 已在桌面端攻城掠地多时,早有像 Atom 编辑器这样由 Github 社区开发维护并广受好评的成功开源项目。
而后 Facebook 的 React Native 把矛头和目标直指 Android 和 iOS 开发领域,其愿景不可谓不宏大。
至此,前端领域在短短的四五年间,可谓变幻莫测、生机勃勃,也不免显得稚气未脱,远未成熟...
步入 2016 年,ECMAScript 标准将继续深化,JavaScript 新版本将每年如约而至...而此时此刻,却越发猜不透前端的走向了...
所谓前端,其实就是设计师开始用 Dreamweaver 玩可视化编程了。接着通过 Ajax,前端工作突然可以与服务器进行数据交互了,有了一点独立的苗头,可绝大部分前端工作也还是由后端工程师承担。
2006 年 jQuery 的出现以及接下来几年 jQuery 社区的火爆,让前端工程师能高效完成兼容各大浏览器的页面交互效果的工作。
渐渐地,也就有一些走在前列的“闲人”开始“谋划着”要前端工程师承担更多的职责(也有可能是这帮人不喜欢什么事情都依赖后端工程师)。慢慢地,前端工程师有 Node.js 可以把玩了,从此再也不需要依靠后端工程师的协助,便可独自一人完成一整个项目和产品的开发、测试、上线、运维,从此也就必须了解业务逻辑、了解服务、了解路由、了解网络、了解服务器、了解跨平台开发、了解 App 开发...
斯以为此法更为妥当。终。
其实不管是前端还是后端,首先要清楚,自己是想从事业务型的技术工作,还是 Research 型的技术工作。
前者可以理解为:互联网公司的程序员。业务型的前端工程师,最大的一个特点是:从客户需求出发,去真真正正地做出一个产品来,交付客户,让客户满意,并对客户产生实际的价值,这也是大部分互联网技术从业人员的工作内容。业务型的技术人员使用的技术往往不是最新的前沿技术,而是经过验证的效益更高的技术,用最小化的成本来服务客户。这需要不停地实践与实战,以便更快、更高效地实现客户需求的满足。
后者可以理解为:行业的科学家。这种角色时常走在行业的前面,去带领互联网公司,甚至是技术行业,探索更先进的技术、挖掘更有价值的数据、构建服务大众的基础设施平台等……
目前,绝大部分互联网技术人员都从事着业务型的技术工作,少部分极其优秀的技术人员可以从事 Research 型的技术工作。文章一开始就强调要了解清楚自己想从事的是哪个类型的技术工作,目的是树立一个终极目标。而要从事 Research 型的技术工作,首先必定是需要多年的业务型技术工作的经验积累的。
其实大部分的编程活动,都是对“业务逻辑”的理解,然后用代码拼凑出产品和服务,这里面涉及到多深的数学知识?我看不多……
编程的总体思路就像是写书。写书前,你已经识字了,这是你的基础,你还会运用积累下来的一些表达技巧,让你的书更加吸引人,实现更高的销量。写书前,你已经知道了很多前人规划好的、约定俗成的东西了,而你要做的是,利用这些约定俗成的东西,去写一本自己的书。这本书可以参考前人的书,也可以参考已有的论文。
而前端从诞生至今,一直未能跳脱 HTML、CSS、JavaScript 这三门“语言”。自然地,入门指南当然围绕三者讲起:
以上是编写静态页面的基础,重点是多实践。
即使如此,还是阻挡不了大部分前端开发人员使用它的热情。毕竟它能帮助我们快速实现页面响应式布局、快速编写出可交互的页面。
我的建议:觉得 HTML、CSS 基础了解得差不多了,我主张先学习 Bootstrap,重点是学会 Bootstrap 的栅格系统及其原理,了解响应式网页设计是如何实现的,能够用 Bootstrap 拼出一套管理后台界面。
Bootstrap 的进阶用法就是:自行定制 Bootstrap。虽然已有 Bootswatch 这样的第三方 Bootstrap 主题能满足大部分一般需求,但总有些时候需要自定义样式。而在使用 Bootstrap 的过程中,修改 Bootstrap 默认主题的最佳方式不是覆盖默认设置,而是自定义主题后构建出自己的 Bootstrap 主题。
由于上面提到的缘由,对于 JavaScript,我主张是边用边学。当然首先是要已经看过 W3School 的 JavaScript 文字教程,了解 JavaScript 在浏览器中的能力(操作 DOM、BOM,知道 AJAX 是什么),并知道它拥有什么样的 API,什么效果能实现,什么效果不能实现。当 JavaScript 用于编写程序逻辑时,要知道需要用到什么语法、内置方法、内置 API。再后来,是了解 HTML5 中
以上算是接触并使用 JavaScript,还没进入大量实战阶段。
而基本上,一定要做的一件事是:学习 jQuery、Zepto.js(人称移动端的 jQuery)。两者的实现极其相像,可以只学 jQuery,Zepto 基本就无师自通了。
jQuery 和 Zepto.js 之于 JavaScript,就像 Bootstrap 之于 HTML 和 CSS。都是为了简化代码、更高效地完成业务而开发的 JavaScript 类库。它们封装了很多原生 JavaScript 的语法和方法,使之编写代码时更方便,同时保证对旧版浏览器的兼容性。
对于两者,建议:了解如何使用 jQuery 操作 DOM、常用的数据处理方法(数组项如何增删查改、对象如何访问及选取、方法如何调用、JSON 数据如何处理及使用)。
工具包括但不限于:
包括但不限于(由于本人远不及这个层次,下面的罗列可能不正确):
2010 年 Backbone、Angular等前端 JavaScript 框架的相继出现,让前端开发人员逐渐有了底气:
因为他们也可以借助程序设计领域由来已久的 MVC、MVVM 来构建有可靠范式支撑的 SPA(Single Page Application,单页应用) 了。而 2009 年出现、2011 年后不温不火的 Node.js 把 JavaScript 直接从浏览器端带入到服务器端,继而 npm 社区方兴未艾,进而出现 React、Polymer 等推动 W3C 规范或多方互相影响、借鉴、学习的“新概念”前端 JavaScript 框架,让从业人员意识到:
前端领域也可以实现组件化,反推规范的制定。而与此同时,前端工程化也告别了刀耕火种之状态,一同步入了初级阶段。
早早地,Node-WebKit(现名为 NW.js) 和 Electron 已在桌面端攻城掠地多时,早有像 Atom 编辑器这样由 Github 社区开发维护并广受好评的成功开源项目。
而后 Facebook 的 React Native 把矛头和目标直指 Android 和 iOS 开发领域,其愿景不可谓不宏大。
React Native 引入虚拟 DOM 的概念,借助中间的抽象层,理论上可以横跨所有平台,支持使用 HTML、 CSS、 JavaScript 构建跨平台产品和应用,大大加速开发效率,减少开发周期。期间,不乏像 Meteor、MEAN 这样的全栈平台和框架大展身手...
至此,前端领域在短短的四五年间,可谓变幻莫测、生机勃勃,也不免显得稚气未脱,远未成熟...
步入 2016 年,ECMAScript 标准将继续深化,JavaScript 新版本将每年如约而至...而此时此刻,却越发猜不透前端的走向了...
然而,就此打住
AJAX 还未普及之时,“前端”作为 View 层(视图层),仅仅只承担了展示页面效果的工作,往往由后端工程师一并完成,或者说本来就没有前端工程师的职位。所谓前端,其实就是设计师开始用 Dreamweaver 玩可视化编程了。接着通过 Ajax,前端工作突然可以与服务器进行数据交互了,有了一点独立的苗头,可绝大部分前端工作也还是由后端工程师承担。
2006 年 jQuery 的出现以及接下来几年 jQuery 社区的火爆,让前端工程师能高效完成兼容各大浏览器的页面交互效果的工作。
渐渐地,也就有一些走在前列的“闲人”开始“谋划着”要前端工程师承担更多的职责(也有可能是这帮人不喜欢什么事情都依赖后端工程师)。慢慢地,前端工程师有 Node.js 可以把玩了,从此再也不需要依靠后端工程师的协助,便可独自一人完成一整个项目和产品的开发、测试、上线、运维,从此也就必须了解业务逻辑、了解服务、了解路由、了解网络、了解服务器、了解跨平台开发、了解 App 开发...
要点来了
说了这么多,要点其实很简单,可以理解为:- 有人不希望总是依赖后端工程师,想要 JavaScript 跨平台,于是搞出了 Node.js
- 开发者的智慧和力量,将 npm 社区推向前所未有的高度
- 前端工程师借助这一趋势,只要熟悉 JavaScript 便可一展身手,构建属于自己的产品,不需要后端工程师的协助
现阶段,绝大多数前端工程师在成为前端工程师之前,都是有经验的后端工程师,这些人自然很容易接受新型“前端工程师”所需要承担的职责,因为本来前端就是从后端分离出来的工种和业务,他们大体都清楚后端领域的基础知识,以及有一定的后端实战开发经验。BTW,我就是后者,所以深有感触。
然而,这可为难了很多从设计师转行的前端工程师以及零基础学员,因为他们一般都是从 View 层,也就是产品的设计与实现(俗称“切图”)开始步入前端的,让他们突然接受业务、数据、网络、服务这些层级,我想一开始多多少少也会迷茫和摸不着头脑罢。
结论
最后,总结一下我自学前端近 20 个月、反观之前的自学历程后,生发的感慨以及自认为合适的自学路径:如果你的梦想是不借助后端工程师,自行研发一款产品(不可否认,这是我的梦想之一),我建议一开始就想好自己想做什么产品,直接从事后端工程师的工作,也就是学习数据交互、数据库、路由、网络等基础知识,或者是直接学习 Node.js 开发。自学这个之后,你便可以做出可用的功能。永远记住:不要为了学习编程语言而学习编程语言。一切从需求和产品出发,需要什么,补足什么。
那么接下来的事情就是:产品交互和产品颜值了。此时再自学 HTML 和 CSS,从界面设计与实现的角度切入前端开发,无论是借助 CSS 框架还是 JavaScript 框架实现 View 层的快速设计与开发,那是极极好之事。
至于交互设计,我想只能靠多把玩优秀的产品,从中领悟了,靠的是感性认知和天赋啦。再之后,如果有意抛弃后端,则可以深入学习 Node.js,将后端之所学,在 Node.js 上一一寻找对应。
斯以为此法更为妥当。终。
引用
概念
- AJAX: https://zh.wikipedia.org/zh-cn/AJAX
- MVC: https://zh.wikipedia.org/zh-cn/MVC
- MVVM: http://baike.baidu.com/view/3507915.htm
JavaScript 类库
- jQuery: http://jquery.com
JavaScript 框架
- Backbone: http://backbonejs.org
- Angular.js: https://angular.io
- React: http://facebook.github.io/react
- React Native: https://facebook.github.io/react-native
- Polymer: https://www.polymer-project.org
跨平台框架
- NW.js: http://nwjs.io
- Node.js: https://nodejs.org
- Electron: http://electron.atom.io
全栈框架和平台
- MEAN: http://mean.io
- Meteor: https://www.meteor.com
JavaScript 规范
- ECMAScript: https://zh.wikipedia.org/zh-cn/ECMAScript
其实不管是前端还是后端,首先要清楚,自己是想从事业务型的技术工作,还是 Research 型的技术工作。
前者可以理解为:互联网公司的程序员。业务型的前端工程师,最大的一个特点是:从客户需求出发,去真真正正地做出一个产品来,交付客户,让客户满意,并对客户产生实际的价值,这也是大部分互联网技术从业人员的工作内容。业务型的技术人员使用的技术往往不是最新的前沿技术,而是经过验证的效益更高的技术,用最小化的成本来服务客户。这需要不停地实践与实战,以便更快、更高效地实现客户需求的满足。
后者可以理解为:行业的科学家。这种角色时常走在行业的前面,去带领互联网公司,甚至是技术行业,探索更先进的技术、挖掘更有价值的数据、构建服务大众的基础设施平台等……
目前,绝大部分互联网技术人员都从事着业务型的技术工作,少部分极其优秀的技术人员可以从事 Research 型的技术工作。文章一开始就强调要了解清楚自己想从事的是哪个类型的技术工作,目的是树立一个终极目标。而要从事 Research 型的技术工作,首先必定是需要多年的业务型技术工作的经验积累的。
补充一个题外话
很多没有接触过编程的人都以为编程很难,要具备很高的数学能力,是因为他们往往都把“编程”这个活动理解为从事 Research 型的技术工作了。这是他们的一大误区。其实大部分的编程活动,都是对“业务逻辑”的理解,然后用代码拼凑出产品和服务,这里面涉及到多深的数学知识?我看不多……
编程的总体思路就像是写书。写书前,你已经识字了,这是你的基础,你还会运用积累下来的一些表达技巧,让你的书更加吸引人,实现更高的销量。写书前,你已经知道了很多前人规划好的、约定俗成的东西了,而你要做的是,利用这些约定俗成的东西,去写一本自己的书。这本书可以参考前人的书,也可以参考已有的论文。
编程,往往是一个创造过程,而不是一个发明过程。
前端入门指南口语版
前端作为一个新兴工种和职业,它一直未能有幸像 Java、C 等后端语言一样,进入高校,成为一门课程。这就导致几乎所有的前端工程师,要么是从后端工程师转型而来,要么从设计师转行而来,都靠自学成才。而我也发现,校内极少人从事前端开发,大部分人都走后端和客户端路线。而前端从诞生至今,一直未能跳脱 HTML、CSS、JavaScript 这三门“语言”。自然地,入门指南当然围绕三者讲起:
HTML、HTML5
记住至少 90% 的 HTML 标签及其语义,重点是header
、footer
、article
、main
、section
、nav
、aside
这种语义特别明显的用于布局的标签。CSS、CSS3
记住至少 90% 的 CSS 属性与写法,重点是盒模型(margin
、padding
、border
、box-sizing
)、页面布局相关(position
的用法、淘宝的双飞翼布局)、页面渲染相关(背景、阴影、字体样式等)……以上是编写静态页面的基础,重点是多实践。
Bootstrap
CSS 框架 Bootstrap 应该是大部分前端工程师绕不过的一个点。它流行到以至于现在有些前端开发人员都刻意避免使用 Bootstrap 来防止页面撞脸了。即使如此,还是阻挡不了大部分前端开发人员使用它的热情。毕竟它能帮助我们快速实现页面响应式布局、快速编写出可交互的页面。
我的建议:觉得 HTML、CSS 基础了解得差不多了,我主张先学习 Bootstrap,重点是学会 Bootstrap 的栅格系统及其原理,了解响应式网页设计是如何实现的,能够用 Bootstrap 拼出一套管理后台界面。
Bootstrap 的进阶用法就是:自行定制 Bootstrap。虽然已有 Bootswatch 这样的第三方 Bootstrap 主题能满足大部分一般需求,但总有些时候需要自定义样式。而在使用 Bootstrap 的过程中,修改 Bootstrap 默认主题的最佳方式不是覆盖默认设置,而是自定义主题后构建出自己的 Bootstrap 主题。
关于定制 Bootstrap 主题,官网上有一个现成的网页。而如果要在自己的电脑定制,需要掌握LESS
或者Sass
(两者都是 CSS 编译器,为编写 CSS 引入了编程语言的变量、复用等特性)。
JavaScript
我个人是从设计师转型而来的前端工程师,所以偏重页面的设计、对设计稿的还原程度、更好的页面语义和页面布局、SEO 等,对 JavaScript 的了解并不深。这样的角色,在腾讯的岗位叫 UI 开发或网页重构。小公司的话,不分前端工程师、网页重构工程师、UI 开发工程师。所以遇到以编写 JavaScript 为己任的前端开发工程师,我的 OS 是这样的:没想到你是这种前端工程师。哈哈,开个玩笑。回到正题上来:
由于上面提到的缘由,对于 JavaScript,我主张是边用边学。当然首先是要已经看过 W3School 的 JavaScript 文字教程,了解 JavaScript 在浏览器中的能力(操作 DOM、BOM,知道 AJAX 是什么),并知道它拥有什么样的 API,什么效果能实现,什么效果不能实现。当 JavaScript 用于编写程序逻辑时,要知道需要用到什么语法、内置方法、内置 API。再后来,是了解 HTML5 中
WebSQL
、Web Storage
(Local Storage 和 Session Storage)、应用缓存
(Application Cache)、Cookie
是怎么回事,能实现什么功能。以上算是接触并使用 JavaScript,还没进入大量实战阶段。
jQuery 与 Zepto.js
我的主张是,JavaScript 一开始并不需要学得太深。对于业务型的前端工程师,完成上面提到的 JavaScript 部分,基本就够用了。而基本上,一定要做的一件事是:学习 jQuery、Zepto.js(人称移动端的 jQuery)。两者的实现极其相像,可以只学 jQuery,Zepto 基本就无师自通了。
jQuery 和 Zepto.js 之于 JavaScript,就像 Bootstrap 之于 HTML 和 CSS。都是为了简化代码、更高效地完成业务而开发的 JavaScript 类库。它们封装了很多原生 JavaScript 的语法和方法,使之编写代码时更方便,同时保证对旧版浏览器的兼容性。
对于两者,建议:了解如何使用 jQuery 操作 DOM、常用的数据处理方法(数组项如何增删查改、对象如何访问及选取、方法如何调用、JSON 数据如何处理及使用)。
所谓中级前端工程师
所谓中级前端工程师的范畴:学会使用前端工具。工具包括但不限于:
- Sublime Text、Atom 等代码编辑器(认真记住各种快捷键,好好阅读各大编辑器的插件使用说明)。
- 方便前端开发的利器:浏览器自动刷新 Browser-sync、调试工具 Chrome 控制台、Fiddler 和 Weinre、模拟请求 Postman、图片压缩 iSparta……
- Node.js 平台下的 NPM(一个集合了几乎所有优秀前端开源项目的社区,用来管理项目中用到的开源技术、资源、插件等)
- CSS 预处理器与后处理器:Autoprefixer、PostCSS(一个庞大的社区,提供各种 CSS 处理能力的插件)。
由于各大浏览器对标准 CSS 的支持情况不一样,都或多或少地拥有带自身特殊前缀的私有 CSS 属性,例如
-webkit-border-radius
这个私有 CSS 属性是Webkit
内核的浏览器所支持的写法。
以前没有 CSS 预处理器与后处理器时,往往需要前端开发人员手写带有各种特殊前缀的私有 CSS 属性。有了这些处理器之后,只需要写标准的 CSS,如border-radius
,再用这些处理器处理一下 CSS,就能自动补齐浏览器私有 CSS 属性,实现前端页面的最大化兼容性,例如兼容 IE9、IE8 等等……
当然,这个栗子只是众多 CSS 预处理器与后处理器最简单的一个应用而已,还有更多高阶属性与使用技巧。
- JavaScript 编译器:之所以 JavaScript 有编译器,是因为自从 2015
年,JavaScript 的标准制定组织 ECMAScript 委员会决定今后每年都推出新版的 ECMAScript 标准,也就是新版的
JavaScript。而又因为各大浏览器的开发进度不同,对新标准的实现还没完全跟进,而一些喜欢追新的前端开发人员又想早早地开始使用新版的
JavaScript,所以就出现了
Babel
这样的 JavaScript 编译器。
Babel 的主要功能是将新版 JavaScript 编译成旧版 JavaScript,使得前端工程师既可以编写最新版的 JavaScript,而前端页面也可以完美兼容各大浏览器。
- 前端开发构建工具:Gulp。前两年还流行 Grunt,这两年流行 Gulp,所以直接学习并使用 Gulp吧。
Gulp 的最大一个用处是:打通开发过程中的工作流程。例如开发过程中,自动刷新浏览器、将 SCSS 编译成 CSS、将新版 JavaScript 编译成各大浏览器支持的旧版 JavaScript、项目开发完毕后的性能优化:压缩图片、CSS、JavaScript 等静态资源、合并雪碧图,把项目源码上传服务器等。
其实每个小操作都有工具能完成,而像 Gulp 这样的构建工具的作用是:将所有分散的小操作和小流程,通过 Gulp 平台上的插件,集合成一条龙服务,一次编写前端 Workflow,就可以免去很多分散精力的小操作,实现开发流程自动化。
上面提到的 CSS 处理器、JavaScript 编译器,都有 Gulp 插件,例如gulp-autoprefixer
、gulp-cssnano
、gulp-image
……
- JavaScript 前端框架:Vue.js、Angular.js、React、React Native……
JavaScript 前端框架的主要作用是,让前端工程师也能像后端工程师一样,以一个已经验证有效的开发范式来支撑项目,降低耦合度,提高项目可靠性和可维护性。
一点补充
由于前端刚从刀耕火种的时代,步入前端工程化的初级阶段,此时会出现大量的工具,例如Grunt
还没开始用,Gulp
就来了,Gulp 还没领略其精粹,Webpack
又款款而至。迷恋工具,每每追新,必然不是前端工程师的修养。对于工具,我们强调使用场景。在什么情况下,需要使用什么工具,帮助提高效率,才应该是前端工程师所要关注的重点。所谓高级前端工程师
所谓高级前端工程师的范畴:深入 JavaScript 底层、深入浏览器底层。包括但不限于(由于本人远不及这个层次,下面的罗列可能不正确):
- 玩转 SVG 绘图、Canvas 绘图
- 页面性能调优
- 玩转 Web Socket、Web Worker
- 自行开发 JavaScript 插件、工具、框架等
- 玩转 Chrome V8 引擎