前端技术学习路径的一点感想
前言
之前不经意看到这篇文章,那么就整理之后给大家分享一下,本文主要说明前端学习的过程和路径。
路漫漫其修远兮,吾将上下而求索~~
正文
明确你的意愿
其实不管是前端还是后端,首先要清楚,自己是想从事业务型的技术工作,还是 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 引擎
共同进步
如有错误,欢迎在下方评论区指正。