特别声明：此篇文章内容来源于@Kamran Ahmed的《Modern Frontend Developer in 2018》一文。著作权归作者所有。
首先，你必须要学习一些基础知识，包括HTML、CSS和JavaScript的语法知识。
- HTML
HTML是网页的结构，就好像人类的骨骼系统，有了它你才能站起来。你必须学习HTML的语法和有关的所有知识，你最好将目光聚焦在以下几点:
- 基础知识和如何写出语义化的HTML
- 清楚如何将页面分成多个部分以及组织恰当的DOM结构
任务：当你在学习HTML基础时，至少要做5个页面。建议你模仿一些网站。比如github的主页或者推特的登陆页面。你必须要设计良好的页面结构，这或许是非常丑陋的，但是你必须将你主要的注意力放在这里。
- CSS
在掌握了基础的HTML之后，是时候向网页添加一些样式让它看上去更漂亮了。CSS就是用于美化你的网页的绝佳利器。
- 第一件事就是学习CSS的语法并熟练掌握一些常用的属性
- 学习盒子模型和如何通过Flexbox和Grid进行布局
- 做完上述两件事情后，尝试用媒体查询把页面做成响应式的
任务：在你掌握CSS的基础后，你需要做的下一件事情就是用CSS装饰你学习HTML时做的页面。比如你写了推特的登陆页面，你可以用CSS还原成推特的真实页面，把你写的5个HTML都利用上吧。
- JavaScript
JavaScript可以让你的网页具有交互性，比如你浏览网页经常看到的那些滑块、弹出框还有通知栏，它们不需要刷新网页就能跳出来，它们全都是由JavaScript弄出来的。
- 学习基础语法和JavaScript的基本结构
- 学习如何操作DOM，比如如何清除页面的元素、往页面添加元素和应用CSS样式等等
- 理解一些概念，比如闭包、声明提升和事件冒泡等等
- 学习如何利用XHR或者Ajax发起HTTP请求，Ajax就是让你无需刷新网页就可以进行交互的工具
- 学完上面的知识，你下一步应该要去学习ES6+的一些新特性，ES6是JavaScript的一个版本，里面包含了很多令人兴奋的新特性，比如类、不同的声明变量方式、操作数组的新方法、字符级联等等。你可以在网上找到很多关于ES6的文章，他们会使用Babel将新版本的JavaScript代码转化为旧版本以适应一些老版的浏览器。我们在后面还会提到ES6。
现在你应该感觉到一点紧张了吧？不妨回顾一下，以上这些都是你学到的最重要的知识。
应该继续使用JQuery吗？
过去有一段时间，每一个网页开发者都为JQuery而狂热。因为JQuery是一个功能十分强大的库，它封装了一系列Javascript操作，使用起来十分方便而且兼容性极强。但是，到了今天，虽然仍然还有很多人在使用JQuery，但很多的新项目都放弃使用JQuery了。事实上，JQuery十分简单，你不用特意去学习它，但了解一些JQuery的知识会对你帮助很大。
实践
我说过很多次了，但我必须再强调一次，知识来源于实践。只是看书或者看一些视频你可能觉得理解了，但这些都很快会从你的脑袋中消失如果你没有用之于实践，所以，你要尽可能的多尝试，将你脑袋中的东西变成代码。
做一些响应式的网页并利用JavaScript增加交互性，你可以复制现有的你觉得很有趣的网站。
完成上面的工作后，你已经可以去了解真实的企业开发过程了。你可以去github上面找一些项目，然后自己开源几个项目，下面是一些建议：
- 把UI做好，提高设计水平并且全部做成响应式
- 认真回答每个你力所能及的issue
- 重构你认为可以改进的项目
要使用Github，我推荐你先去学习一下git，git对你帮助将会非常大。
包管理器
在此之前，如果你有用过一些外部的库，比如一些插件或者外部小组件，你可能都是手动下载这些JavaScript和CSS文件然后把它们放进你的项目目录中。当这些库更新的时候，你不得不去下载新的版本然后再次放进你的项目替换掉原来的，这非常的麻烦。包管理器可以帮助我们解决这个问题，它可以将外部的文件引进你的项目，所以你不需要担心上述的问题。目前比较受欢迎的两个包管理器是yarn和npm，它们两个非常相似，只需要安装启动，你可以任意选择一个去学习。
当你对包管理器有一些初步的了解后，你可以尝试去安装一些外部库到你前面制作的网页上，这些实践会对你的学习有很大的帮助。
CSS预处理器
预处理器提供了CSS本身并不具备的功能，比如变量、宏和mixin等等。现在有很多种CSS预处理器，Sass、Less...,如果让我选择，我会优先考虑Sass,但最近PostCSS风头正盛，它是作用于CSS的“Babel”，值得我们关注。不过我会建议你先学习Sass，如果你还有更多时间，可以尝试去了解一下PostCSS。
CSS框架
你不用特意去学习一门CSS框架，但如果你有需要的话，现在比较好用的CSS框架有Bootstrap、Materialize和Bulma，我会推荐优先Bootstrap。
CSS架构
随着你的项目越来越大，你的CSS文件也将会变得越来越混乱、臃肿。是时候去学习如何组织你的CSS以提高其扩展和可复用的能力了。目前能够帮助你完成这个目标的有 OOCSS、SMACSS、 SUITCSS、 Atomic 和
BEM,我个人比较钟意BEM。
构建工具
工具可以帮助你构建、打包和生成JavaScript应用 。目前主要有代码检测，自动化和打包的工具。
关于自动化来说，有很多种选择，包括npm scripts、gulp、grunt 》...,但是在现在，webpack毫无疑问是你的首选。webpack具有gulp绝大部分的功能，利用webpack就可以完成你的自动构建环境。
有很多工具可以帮助你完成代码检测的工具，有ESLint、JSLint、 JSHint 和JSCS，目前ESLing是最受欢迎的。
关于代码打包工具，你的选择也很多，包括 Parcel、Webpack、 Rollup、Browserify等。毫无疑问我会推荐webpack。
实践时间—创造
恭喜你，你已经可以成为75%的现代前端工程师了。现在你要做的就是继续前进，你有必要去做一些项目，依靠目前为止你学习到的东西。你可以用JavaScript和Sass创造几个库，然后利用babel编译Sass和es6代码。完成上述这些工作后，别忘了把你的成果发到github和npm上。
选择一门框架
按照以前规律，我会把这个放到学完基础知识之后，但我选择放到当你学完Sass和构建工具的后面，因为缺少了上面的知识先学框架，可能会把你逼疯。
关于javascript框架，目前比较流行的有React、Vue和Angular。最近React的呼声很高，但是不需要紧张，选择上面三者之一都没问题。但就我个人而言，我会推荐React和Angular多一点。简要说明一下，作为一个新手，你可能会觉得Angular相对来说比较容易一点，因为它包含了大部分你需要的功能，路由、懒加载、HTTP拦截、依赖注入、CSS组件构建等等，你不需要引入任何外部的库就可以使用这些功能。但是React有的优势是，Facebook一直致力于改进发展React。最重要的，不要因为名气而选择一门框架，你应该综合比较，选择目前最匹配你的需求的一款。
当你确定要选择哪一门框架后，你就去学习对应的知识了。如果你选择的是React,你需要去学习Redux或者Mobx用于状态管理，具体选择那一个根据你的应用的大小。Mobx适用于小型或中等的应用，Redux就比较多用于大型的可伸缩的应用。你甚至不需要学习这些，根据React原生的状态管理就可以完成你的工作。
如果你决定要使用Angular，你需要去学习TypeScript（原生也可以，但Angular首推TypeScript），你还需要学习RX.js，它非常强大，甚至支持函数式编程。
如果你的选择是Vue.js，你可能需要学习Vuex，它和Redux非常像。
需要关注的是，Redux，Mobx和Rx.js的使用并不局限于这些框架，你可以在你的原生js中使用。最后，如果你选择的是Angular的，必须确保是Angular 2+而不是Angular 1+。
实践时间
现在你已经知道所有有关构建JavaScript应用的知识了，是时候展示真正的技术了。你需要做一款应用，相信你可以找到很多创意。做完之后，先别急着高兴，再回头看一下代码，有哪一些是可以改进的？比如交互时间、页面相应速度等等...
测试
有很多工具可以帮你完成特定的测试任务，我通常会结合使用Jest、Karma、Mocha和Enzyme。在你使用这些工具之前，你最好先了解它们其中的差异，弄清楚可以选择的选项然后选择最适合你的。An Overview of JavaScript Testing in 2018
静态类型检查器
静态类型检查器可以帮助你对Javascript进行类型检查，你只需要很短的时间就能掌握这方面的知识，它会对你的工作帮助非常大。在这方面，TypeScript和Flow是比较好的选择，我个人比较喜欢TypeScript，但Flow也不错。
服务端渲染
到现在，你掌握的知识已经让你能够胜任任何一份前端工程师的工作了，但不要停止你的脚步。
你需要去了解你选择的框架是如何进行服务端渲染的，它们有很大的不同。比如你选择的是React，对应的就是Next.js和After.js,Angular 对应的是Universal，Vue对应的是Nuxt.js。
结尾
或许还有什么是我忘了写的，但我想说最重要的是尽可能多的敲代码，你需要不断地实践。一开始这可能会很辛苦，你可能会觉得很难掌握，但这是正常的，你会变得越来越好。最后是别忘了，当你陷入困境时，积极地去寻求帮助，你会发现很多人都乐意帮助你解决难题，至少我是其中的一个，加油！
网友评论