如何成为一名前端工程师?

How to become a front-end engineer?

Posted by Mickey on July 18, 2017

笔者的编程之路其实也不是一帆风顺,大学前三年为了获得学院的保研名称,真的可以说是一门心思放在了学习上,导致 理论知识和实践能力完全脱节,顶多平时刷刷leetcode,其他的一窍不通,在大三下学期的时候,笔者去面试了一发阿里 的暑期实习,结果可想而知,被虐的非常惨,然后的几个月时间内,非常的迷茫,不知道自己喜欢啥,也不知道以后能够 做什么,做过JAVAEE,写过android,做过测试开发,然后在一个契机下,接触了前端,瞬间被吸引,直到现在
上面说这么多,其实就是告诉大家,迷茫是很正常的,要勇于尝试各种新东西,才能发现自己真正的兴趣所在
也是踩过了不少坑,不过有着身边许多的前端小伙伴的鼓励,还是一步一个脚印的向前走着

接下来就说说自己的学习建议吧,一个小教程,也是自己走过的流程,仅供参考哈

————

背景篇

在这个时代学习新东西,一定要善于使用 Stackoverflow/Google 等搜索引擎…网络上的资源非常丰富,自学能力也尤为重要,尤其是对于学习技术! 如果你和我说我为啥访问不了这些网站哇,~~~一个不会翻墙的程序员不是一个好的程序员哟~~~



入门篇(HTML/CSS/JavaScript)

说起学前端的初衷,大概还是因为各种华丽的网页特效/交互太过吸引人,这种感觉大概就是:“哇,我的设计可以做成网页访问了呢!”
好在,“展示”对于前端技术来说反而是最简单的部分。所以,放下你对“编程”两个字的恐惧,从“称不上是编程语言”的 HTML/CSS 开始,先做点有成就感的东西出来吧!

对于像我一样的程序员来说,最有成就感的一定是编写出“可以看到的美好的东西”,而 HTML/CSS 正是用来干这个的,HTML 就是一堆非常简单的标签,而 CSS 无非就是把你画画的流程用英语按一定的格式写出来而已:

<p> I am a byr! </p>

<style>
p { color: red;}
</style>

是不是非常容易!
接下来,你就需要开始自学啦,比如常用 HTML 标签的意思,各种 HTML 标签的使用场景,各种 CSS 的属性,还有 CSS 的盒模型、优先级、选择器……
在大致弄懂HTML和CSS是做什么的时候,你可能会发问,这种死气沉沉的网站不是我想要的,这时,你就可以开始学习JavaScript的用法了
简单来说,JavaScript是实现用户与网页交互功能的语言,比如你点击一个button,对应发生的处理事件都是用JavaScript实现哒~


这里推荐一些基本的前端学习资料吧:

  • w3school 在线教程 (中文,一个很 Low 但是又很好的入门学习网站)
  • 慕课网 在线教程 (中文,另外一个很 Low 但是又很好的入门学习网站)
  • CSS权威指南 (较为详细的介绍了CSS的基本用法,可以在网上搜到影印版)
  • JavaScript高级程序设计 (非常全面的介绍了JavaScript,前端神书,建议每个做前端的同学都入手一本)
  • 百度前端技术学院 (是一个code练习网站,分章节实现小功能,没有框架负担,依靠HTML/CSS/JavaScript就能够实现,推荐去做一做,能够巩固基础)


这个阶段的练习主要是“临摹”:用代码画出你想画的网站,越多越好。

如果完成的好,这个阶段过后你大概就可以写出一些简单又好看的“静态网页”了,比如这个作品集:2016ife - 白皓的作业集



入门篇(BootStrap/jQuery)

童鞋们如果完全走完了上面的步骤,那么恭喜你,你已经能够独立编写大多数页面了,是不是很开心=v=
这时候,你可能会觉得自己设计的样式不是很好看,也不支持响应式,或者你发现你用了很大篇幅的代码才能实现用户与页面的交互功能
那么,是时候学习一发BootStrap和jQuery了

举个小栗子:选中id为awesome的元素
JavaScript

document.getElementById('awesome')


jQuery

$('#awesome')


可以看到,jQuery能够大大减少你的代码量,不仅如此,jQuery还封装了许多有用的函数(毕竟是存活了10年的库2333)
至于BootStrap,这是世界上最知名的前端 UI 框架之一,提供了大量 CSS 样式与 jQuery 插件。它非常容易学习并且中英文教程都非常健全,你并不需要理解它背后的工作原理就能很好的使用它,让你快速达到“可以建站的水平”。有余力的话,你不但可以学习如何使用它,还可以学习它背后的设计思想。

这里同样推荐一些学习资料吧:

  • w3school 在线教程 (嗯,又是它,在初学阶段,w3c是真的很好用~)
  • 锋利的jQuery (个人认为写的非常好的一本jQuery的书籍,篇幅不长,内容详细,可以在网上搜到影印版)
  • BootStrap 网站 (详细的介绍了BS的用法,网站上也包含丰富的模版,扁平化极致的框架)





进阶篇(Vue/React/Angular)

掌握BS和jQuery的用法之后,你就能编写绝大多数的网站了(不考虑方便管理,效率什么的),笔者也曾经一度以为这就是特斯拉前端攻城狮的最终奥义,然而, 多逛逛知乎,你会发现MVVM的概念被经常提起,再逛逛github,你又发现Vue,React等框架的demo小项目多的令人发指,嗯,这个时候你就会从春秋大梦中醒来,一把辛酸泪==,前端远远比你知道的复杂,所以前端小伙伴吧永远保持一颗学习的心吧2333
扯远啦扯远啦,Vue,React都是很优秀的前端MVVM框架,能够编写单页页面,能够使用gulp,webpack构建,能够使用npm管理node包……嗯,就是有这么多神奇的操作,小伙伴吧请继续学习吧
Angular笔者不是很了解,因为大而全,笔者不是很喜欢一锅煮的感觉,Vue和React我都有了解,这两个框架的文档和插件都非常多,也各自都有大厂家在用,社区欣欣向荣,大家可以选择性的进行学习

这里同样推荐一些学习资料吧:





入行篇

如果你能完成上述所有的学习,你已经是一名非常出色的前端学徒了!对于只是想要丰富技能的设计师或者产品经理来说,接下来的内容可能会让你感到不适 ;(
但如果你铁了心想要真正入行进入大公司从事专职前端开发的工作,那么你可以接着往下看:

近几年的前端技术发展迅猛,前端工程师早已不是切切图写写页面做点特效就完事的职位,你需要具备相当完善的工程师素质与计算机知识,成为一名真正的工程师。

你需要非常了解 JavaScript 这门语言,包括 闭包、IIFE、this、prototype 及一些底层实现(ES、VO、AO)、熟悉常用的设计模式与 JavaScript 范式(比如实现类与私有属性)。另外,新的 ES6 已经问世,包括 class, module, arrow function 等等

你需要非常了解前端常用的网络及后端知识,包括 Ajax、JSON、HTTP 请求、GET/POST 差异、RESTful、URL hash/query、webSocket、常用的跨域方式(JSONP/CORS、HTTP 强缓存/协商缓存,以及如何利用 CDN 、静态网站/动态网站区别、服务器端渲染/前端渲染区别等等

你需要学习使用进阶的 CSS,包括熟悉 CSS 3,使用 Scss/Less 等编译到 CSS 的语言,使用 autoprefixer 等 PostCSS 工具,了解 CSS 在 Scope/Namespace 上的缺陷,你还可以学习 CSS Modules、CSS in JS 这些有趣的新玩意

你需要非常了解前端的模块化规范,可能在你学习到这里的时候,Require.js/AMD 已经再见了,但是 CommonJS 与 ES6 Modules 你必须要了解。

你需要熟悉 Git 与 Shell 的使用,包括基于 git 的版本管理、分支管理与团队协作,包括简单的 Linux/Unix 命令、你要知道大部分程序员的工作可以通过 shell 更快更酷的完成,并且很多“软件”只能通过 shell 来使用。你还可以把你的代码放到 github 上与人分享,并且学习 github 上其他优秀的开源代码

你需要熟悉并且习惯使用 Node,包括了解 npm、使用 Grunt/Gulp/Browserify/Webpack 优化你的工作流、对你的代码进行打包、混淆、压缩、发布,你还可以使用 Express/Koa 配合 MongoDB/Redis 涉足到后端领域,或者尝试用 Node 做后端渲染优化你的首屏体验

你需要了解各种 HTML 5 的新 API,包括 <video>/<audio>,包括 Canvas,webGL、File API、App Cache、localStorage、IndexedDB、Drag & Drop、更高级的 DOM API、Fetch API 等等

你需要学习 JavaScript 的单线程与异步编程方法,因为它们非常非常常用、包括 setTimeout/setInterval,回调与回调地狱、事件与event loop、还有 Promise 甚至 Async/Await

你需要非常了解浏览器,包括主流浏览器的名称、内核与差异、包括私有属性与 -webkit- 等厂商前缀,你需要学习如何使用 Chrome DevTool,你需要了解浏览器渲染的 reflow/repaint 来避免 Jank 并进行有针对性的性能优化

你需要专门学习 Mobile Web,因为移动互联网是趋势。包括 viewport、CSS pixel、 touch 事件、iOS/Android 浏览器的差异与兼容、移动端的性能优化、300ms delay 等等…你还需要知道 Hybrid 是什么,包括 Cordova/Phonegap,更复杂的比如和 iOS/Android 通信的机制,比如 URI Scheme 或者 JS Bridge

你需要学习一些非常火热的前端框架/库,他们不但能帮助你更快的进行开发、更重要的是他们背后所蕴含的思想。包括 Backbone、Angular、Vue、React、Polymer 等等、了解它们背后的双向数据绑定、单向数据流、MVC/MVVM/Flux 思想、Web Component 与组件化等等

你需要学习如何构建 web 单页应用,这是 web 的未来,包括利用 history API 或者 hash 实现路由,包括基于 Ajax + 模版引擎或者其他技术的前端渲染、包括组织较为复杂的软件设计等等

我还建议你学习更多的计算机知识,它们能对你的代码能起到潜移默化的作用,包括简单的计算机体系结构、更广泛的编程知识(面向对象/函数式等)、栈、堆、数组、队列、哈希表、树、图等数据结构、时间复杂度与空间复杂度以及简单的算法等等

你需要了解业内的大神并阅读它们的博客/知乎/微博,比如 @尤雨溪@贺师俊@张云龙@徐飞@张克军@玉伯@拔赤@寸志@题叶@郭达峰 等等等等,很多思想和新东西只有从他们身上才能学到。我还推荐你多参加技术交流会,多认识一些可以一起学习的小伙伴,你们可以互相交流并且一起成长

你需要具备很强的自学能力、对技术有热情并且不断跟进。因为 JavaScript/前端的社区非常非常活跃,有太多的新东西需要你自己来发现与学习:比如 Universal JavaScript、Isomorphic JavaScript、前端测试、HTML5 页游、WebRTC、WebSocket、CSS 4、SVG、HTTP/2、ES 7、React Native、Babel、TypeScript、Electron 等等等等…


虽然一下扯得有点多,但这些确实就是你未来将会遇到的。你并不需要全部掌握它们,但是却多多益善;你也可以专精在某几个方面,这已经足以让你成为非常专业的前端工程师。


致谢
本文参考黄玄大大的「知乎」设计师如何学习前端?