前端的路应该怎么走
2 年前
我很感兴趣在知乎上提以下问题的朋友们的心态到底是怎样的：怎么学习前端
求推荐书籍
现在流行的框架到底应该用哪个
怎样成为前端大神
想要进入前端职业，有什么要注意的么
做前端需要掌握什么
......
种种这样的问题让我开始思考我在几年前是怎么开始迈入前端这个行业的。
2012年北航本科毕业之后，由于各种机缘巧合外加一点好运气来到了Carnegie Mellon读Music Technology的Master。之前本科期间由于大部分应该用来学习的时间都花在了弹琴，排练，演出，和录音中，所以当时是想着在这Master的两年中能够做出一些在我弹琴和录音的过程中能用到的跟声音以及音乐有关的效果器和插件。
由于当时真的对编程可以算的上是一无所知，再加上Carnegie Mellon里这种全名Computer Science的气氛（绝不夸张，虽然Carnegie Mellon的音乐器乐相关专业也小有名气，你随时随处可以见到钢琴专业的孩子们抱着电脑在图书馆里写python和java)，我的导师强行要求我上了基本上所有Computer Science本科的基础课，我开始了在各种Coding中的摸爬滚打。
无知便会问出很多可笑但并不可耻的问题。当时学完Java后觉得，在作业中我们总是在写各种class，各种loop，各种各种，但是到底怎么样把这一行一行的代码以App的形式呈现给其他人？在获取这个答案的途径中我的导师给了我自认为最满意的答案：当时我们专业有个自己的网站，很丑，我开始写HTML，CSS，JS，开始在网站上更新我们专业的各种信息。这时候才觉得，原来我们写的这些一行行别人看不懂的东西是这样呈献给别人的。
正式进入前端是因为Web Audio API的初稿发布。我是带着写效果器和插件的目标来的，让后Web Audio API又是声称能在浏览器里做复杂的声音处理运算和合成。在一个学期的每天10小时包括周末的Coding生活结束后，开始上DSP的课以及研究Web Audio API。一段时间后想要做一个网页版的鼓机，发现不管怎么写CSS都不能把你想要的东西放在想要的位置。这时候才意识到应该去系统的去看看HTML和CSS的基础，同时开始坚持每天一个小project。比如今天我看了HTML的form，那我今天就做个用户注册提交的页面。当这些小project的数量积攒到100多个的时候突然发现，自己貌似已经上路了。
写到这里应该停止了，这就是我全部的‘开始’迈入前端的经历，总结一下经验其实都是耳熟能详的大道理，但是说真的能做到这些大道理的人并没有那么多：
阅读 ---> 理解 ---> 记忆 ---> 动手 ---> 复习，个人觉得学什么东西都是这么一个过程。先不要说那些以前上小学时老师常说的读一百遍不如写一遍什么的名句，那些想要进入前端但还没有开始阅读，还停留在问大家阅读什么的状态下的朋友们，你们还有很长的路要走。
我理解我们应该花一定的时间来选择阅读’对‘的东西，但是现在关于前端入门我们不是已经有很多’对‘的东西来看么：w3c基础教程，eloquent, The Good Part等等。我们还在等些什么？
前端背书是没用的，我也不建议在动手的时候打开chrome dev console来看什么网页的结构。
引用当时在Facebook面试中HR给我邮件中的一句话：The primary technical focus of these interviews will be JavaScript, HTML, and CSS, but at Facebook we are software engineers first, and web specialists second. This means that there may be a sufficient amount of focus on general computer science concepts like algorithms, design patterns, data structures, etc. (翻译: 技术面试的主要会集中在JS, HTML和CSS. 但是在Facebook, 我们首先应该是一个软件工程师, 其次才是web的专业人员, 这意味着相当大的一部分面试会涉及到cs的知识比如算法, 设计模式和数据结构等等.) ---- 写给那些觉得前端容易或者觉得前端=高薪低能的朋友们
前端的世界是每天都在变化的，跟上节奏才能让你保持竞争力
以上的内容全是自己的一些吐槽和感慨，以下是所谓的干货，根据个人经验，到底怎样跨入前端这个大门并且做一个有竞争力的好前端。我喜欢干货。
一些涉及到的很多内容都是英文版的，我不太确定这些都有没有相应的中文版，但是阅读这些的英文能力也是蛮重要的。
入门
前端入门无非就是HTML+CSS+JS。你可以按照HTML ---> CSS ---> JS的顺序来学习，也可以同时进行，毕竟很多东西都是相关的。
HTML+CSS
W3CSchool，或
https://www.codeschool.com/**，或
随便一个在线课程。（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）
JS
Eloquent JavaScript**, 和
getify/You-Dont-Know-JS: A book series on JavaScript. @YDKJS on twitter.**, 和
JavaScript: The Good Parts，和
ES6: Understanding ECMAScript 6**
提高
对于已经对HTML, CSS, JS有一定程度了解的朋友们，以下清单能够帮助你们找到一份相关的工作，更好的理解前端，和提高你们工作的效率。以下只列出知识点，关于应该学什么怎么学请自行搜索。我相信一个在前端的学习路上并不是很多人都有一个所谓的导师来告诉你今天应该做什么明天应该做什么，自己发现问题找到方法解决问题也是必备的技能之一，所谓的伸手党绝对不会有什么太高的造诣。声明一点，不是掌握所有你才能找一份好的前端工作才能在前端有所发展，但是掌握所有你才能算是一个称职的前端。
Node
前端并不一定要用Node来写server，但是现在Node已经渗入到前端开发的各个领域和过程，它给许多用于前端开发的工具提供了一个强有力的平台。在这里尤其要强调的是你必须要了解stream，fileSystem以及socket的相关的内容。
RestFul/Express.js/Sail.js/Request.js/****Promise
如果你需要动手写Node的Server。另外，如果你不想因为各种各样的callback而视力下降，请用Promise。
ORM
如果你的node server需要进行数据库的相关处理，请用ORM。强力推荐Waterline.js和Bookshelf.js。
React/Angular/Meteor/Vue
这些所谓的前端框架个人觉得讨论谁更好谁更差是没有太大意义的，我不觉得在很多日常前端的工作里会触及到这些框架的‘极限’。另外关于哪个框架的设计更方便更好用的这种问题也是见仁见智的。世界上没有最好的东西，只有你熟悉的东西。如果实在不知道怎么选择，那就开始React吧，你所投入的时间绝对不会是没有意义的。如果你选择了React，请用Flux和immutable。Redux和Nuclear.js都是不错的选择。
Grunt/Gulp/Webpack
老牌的Grunt似乎最近被Gulp和Webpack抢了很多的风头。还是那句话，世界上没有最好的东西，只有你熟悉的东西。自行搜索然后选择一个吧:)
Babel
越来越多的前端库和框架已经被改写成ES6了，相信ES6全面取代ES5只是时间问题了。既然知道了未来的语言，为什么不早点开始呢？
Less/Sass
不知道现在还有多少人在写pure css。
Bootstrap/Foundation/Semantic UI/各种Material
别的不说，毕竟那些Grid System和各种Helper可以帮助你不用在Layout和Responsive上花太多时间。
Mocha + Chai
越来越正规的前端开发，怎么能少了测试呢？
jQuery/Moment/Underscore/Lodash
节省时间利器
暂时能想到这么多，待更新。
通用技能
虽说前端可能跟传统意义上的开发比如说Java和C有着各种各样的区别，但其本质还是开发。写前端的叫front end software engineer，写后台的叫backend software engineer，同样都是software engineer，所以也要求前端开发者必须拥有software engineer的通用技能。
数据结构/算法/设计模式
对对对，我理解有些朋友说这些东西可能做一辈子前端都不会用到，可是这取决于您所谓的前端到底在做什么不是么？写个个人博客，做个HTML5游戏是不会用到。可是，在Facebook开发React的那些人是不是也应该叫做前端开发者呢？React中引以为豪的Virtual DOM你以为是一个个Array而组成的么？再退一步说，我不知道国内现在BAT在面试前端的时候会问些什么，但是湾区硅谷大小公司不把Leetcode上的数据结构和算法刷的滚瓜烂熟是不可能拿到前端这个工作的。
版本管理：Git/SVN
不多说了
Linux环境
老板：网站崩了，你去http://production-1-web.com**里看看log是因为什么。
我：啊。。。。。！？
正确表达式
PM：用户注册是密码的要求是：长度不能小于8个字符，至少一个大写一个数字一个特殊字符
我：
if (password.length >= 8) { if (#($*&%@ *$((........
得心应手的开发工具
不要求你必须是Vim大神，但是你有一个用的习惯的Editor或者IDE不过分吧？
写作/快速学习/阅读/沟通
写邮件，写文档，快速熟悉一门新语言，一个新技术，阅读代码，阅读文档，与同事，老板，其他开发者的沟通...
最近看到一个很有意思的问题：
[全栈工程师是不是前端的一个趋势？]
个人觉得，不是用node写个server就能称得上是全栈。backend的东西多了去了。会从数据库里取数据，写个server通过restful做几个endpoints就自称全栈你让人家做backend的怎么想。另外，所谓的那些全栈技能是现在做前端的标准要求好么。我们公司面前端什么node相关的streaming, ORM, security, authentication都是必答题好么。没有几个人能达到真正的全栈。所以，“所谓”的全栈可能是趋势，但全栈不是趋势。
希望大家在前端的路上都能走的开心。
网友评论