2018前端工程师成长路线图

成为前端工程师,第一步应该是学习HTML/CSS/JavaScript,这是基础。

1. HTML

HTML用于定义网页的结构。你的第一步是学习HTML的语法,学会如何把页面拆分为多个部分。

任务: 至少撸5个纯HTML页面,你可以实现任意网站的页面,比如GitHub的profile页面或者Twitter的登陆页面。纯HTML会有点丑,但是不用担心,专注于网页的结构。

2. CSS

CSS,全称Cascading stylesheets,是用来美化HTML页面的

学习CSS语法,并且熟悉CSS的常用属性。

学习Box Model,学会使用Grid和Flexbox布局。

学会使用Media Queries来实现响应式布局。

任务: 使用CSS美化第1步中实现的HTML页面。如果你实现的HTML是GitHub的profile页面,那你现在就可以使用CSS让它看起来更像实际页面。

3. JavaScript

JavaScript为静态页面添加交互性。比如网站的所有弹框、提醒,以及更新页面的部分内容,都是由JavaScript实现的。

学习JavaScript的基本语法。

学习如何使用JavaScript操作DOM元素。比如,如何删除、添加页面元素等。

理解作用域、闭包、变量提升等JavaScript难点。

学习使用XHR和Ajax发起HTTP请求。

学习JavaScript最新标准ES6。

是否需要学习JQuery? No!

很久以前,大家热爱JQuery,因为它封装了JavaScript的接口,让我们可以不用考虑浏览器兼容性。但是,JQuery的时代已经过去了,新的项目已经很少用它了。因此,你不需要学习JQuery了!。要知道,GitHub已经完全移除jQuery了!但是,仍然有人在使用JQuery,它很简单,了解一下就好了。

4. 使用HTTM/CSS/JavaScript写一个网

学习编程的最站佳方式是敲代码。既然你已经学会了HTTM/CSS/JavaScript,那你就可以写一个简单的网站了,比如个人博客。记住,你可以去复制他人的代码,但是你需要尽量使用你所学到的所有知识点。前端工程师都应该有个人网站,至少有个静态网站!

5. 包管理器

如果你不使用包管理工具的话,当你需要使用第三方插件时,需要手动下载JavaScript或者CSS文件,将它们放进你的项目;这些插件更新时,你又得重新下载文件,这非常麻烦。

如果你使用包管理工具,比如npm或者yarn时,一切就方便很多了。它们可以帮助第管理所有第三方库,更新也很方便。另外,NPM和YARN基本没什么区别,你可以选择任意一个。

6. 使用NPM或者YARN模块

不要重复造轮子,第三方模块极大丰富了前端开发的生态系统,我们应该学会好好利用。你可以为第4步中开发的网站添加一些第三方模块,比如使用moment处理时间,使用echarts画图表。

7. CSS预处理器

CSS预处理器,例如Sass,Less和Stylus,可以增强CSS的功能,比如支持变量、计算以及函数等。如果让我选择的话,我会选择Sass。最近,PostCSS开始变得流行起来,它确实还不错,相当于CSS的Bable。你可以单独使用PostCSS或者基于Sass使用。我建议你先学习Sass,有时间再了解一下PostCSS。

8. CSS框架

目前,最流行的CSS框架是Bootstrap、Materialize和Bulma。如果非要选一个最流行的,那我觉得是Bootstrap。

9. CSS规范

对于大型前端项目,CSS会变得非常混乱,难以维护,需要使用规范。我们有多种方式来组织CSS,比如OOCSS、SMACSS、SUITCSS、Atomic和BEM。你应该了解一下它们之间的不同,个人更加偏好BEM。

10. 构建工具

构建工具指的是开发前端项目用到的代码校验工具(linter)任务管理工具(task runner)打包工具(bundlers)

代码校验工具有ESLint、JSLint、JSHint和JSCS。目前ESLint是最受欢迎的。

任务管理工具有npm script、gulp和Grunt等。现在,webpack可以完成任务管理工具的大部分工作,因此我们可以结合npm script和webpack一起使用就好了。

打包工具有Webpack、Rollup、Browserify。我推荐大家使用Webpack。Rollup也很常见,不过通常用于打包第三方库。

11. 开发一个NPM模块

恭喜!你已经是个75%的前端工程师了!现在,你要做的事情是开发一个真正有用的东西。比如,你可以写一个NPM模块,把它开源到GitHub并发布到NPM。编程过程中难免遇到一些问题,需要自己造一些轮子,你要做的就是把轮子造好一点,发布出来就好了。优秀的工程师不仅要参与开源项目,还应该创造并维护自己的开源项目,哪怕是一个小小的工具。还是那句话,不要去花钱买项目,那是骗自己玩的。

12. 前端框架

在其他人的学习计划中,会把前端框架放在HTML/CSS/JavaScript之后。但是,我觉得你需要先了解一下Sass、构建工具和包管理工具,这些在框架中都会用到,如果你知道他们,大概会被吓到…

目前,最流行的前端框架有React、Vue和Angular,你可以选择任意一个,都没啥毛病。如果是我的话,我会选择React或者Angular。

如果你是初学者,你也许会发现Angular更简单,它把所有需要的东西都给你弄好了,比如路由功能(支持懒加载)、HTTP客户端(支持拦截器)、依赖注入等,这样你就不需要去使用第三方库了。对于React,你就需要使用很多第三方库。两者各有优劣吧。

框架对比是个很大的话题,这里我就不多说了。我们可以简单对比一下Angular和React的学习曲线:

如果你选择了一个框架,意味着你必须学习一些特定的技术。对于React,你需要学习Redux或者Mobx来进行状态管理。至于选择Redux还是Mobx,取决于应用的大小。Mobx适合中小型应用,而Redux适于大型项目。对于Angular,你需要学习TypeScript和Rx.js。而对于Vue.js,你需要学习Vuex,相当于Redux。

13. 使用框架开发一个网站

现在,你已经掌握了现代前端开发所需要的所有技术。那就使用你选择的框架开发一个应用吧!当然,现在前端项目基本上都是框架开发的…

当你开发完之后,学习一下如何衡量和优化性能,比如你可以关注一下Interactivity Time, Page Speed Index和Lighthouse Score。

14. 测试

对于前端测试,有很多不同的工具,比如Jest、Mocha、Karma和Enzyme,在你学习测试工具之前,请先理解测试的价值,并了解一下测试的分类。

15. 静态类型检查

为JavaScript添加静态类型检查,可以让代码更加严谨,避免很多错误。你只要学习数个小时,就可以一直受益。TypeScript和Flow是两种不同的JavaScript静态类型检查技术。

TypeScript重新制定一套支持类型检查的语言,编译为JavaScript代码来运行。

Flow是一种静态类型检查工具,可以在编码时检查到类型错误并做出提示。

因此,TypeScript更强大,难度更大,尤其是重构成本很高;而Flow功能和使用都很简单,基本上基本上够用。你可以根据需要进行选择。

16. 服务端渲染

服务端渲染,即Server Side Rendering,又称为后端渲染。其实就是服务端先把HTML页面填充数据之后,再返回给前端。这样做可以提升首屏性能,有助于SEO,减少客户端用电。

对于不同的前端框架,有不同的服务端渲染技术。

但是,是否采用服务端渲染其实还有争议,了解一下可以React有Next.js和After.js,Angular有Universal,Vue.js有Nuxt.js。,是否根据需要决定是否使用。

17. 其他技术

作为一个专业的前端工程师,学习一下canvas、HTML5、SVG、Source Map、函数式编程、TC39等技术还是非常有必要的!

在这里给大家分享一下,我是一名5年前端工程师,自己根据这几年从事前端的经验,整理一套系统的前端教程(基础+案例+工具),跟大家分享下我的成果,进群:731771211,群里不停更新最新的教程和学习方法(进群送web前端系统学习路线,详细的前端项目实战教学视频),有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。点击:加入

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

图片转文字居然这么简单,多亏了这几个神器!

我们经常会用手机拍摄、截屏了一大堆图片,领导的PPT、客户的名片、各种文案海报等等…… 想着有空后把资料整理成文字稿,但是一想到要在电脑上把文字打出来,巨大的工...

4K10
来自专栏学海无涯

Python爬虫之初体验

Python爬虫,一般用于抓取特定的内容,最近想学学,通过网络抓取自己想要的内容,于是乎学习了一下Python,用一个小案例来纪念一下学习的成果。 案例程序主要...

4067
来自专栏程序员互动联盟

你所不知道的html5与html中的那些事(三)

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

2976
来自专栏我有一个梦想

UE4新手编程之创建C++项目

 虚幻4中常用的按键和快捷键 虚幻4中有一些按键和快捷键很常用,牢记它们并运动到实际的项目开发中,将会大大地提高你的工作效率和使得工作更简便快捷。下面将列举它们...

2516
来自专栏阮一峰的网络日志

也许,DOM 不是答案

有一个词"手机网站"(mobile web),指供手机浏览的网站,但它是不存在的。 人们提到"移动互联网"的时候,其实专指另外一样东西:手机App。 ? 一、W...

3355
来自专栏我和未来有约会

令人激动的silverlight 3行为(behavior)效果

令人激动的silverlight 3行为(behaviors)效果 Mix09大会带来了很多的惊喜。 看完了http://videos.visitmix.com...

2975
来自专栏分布式系统和大数据处理

Web标准中的常见问题

大概在2004年的时候,Web标准的概念藉由一本名为《网站重构》的书开始被国内人所了解。随后的几年中,其更少的代码量、更好的搜索引擎友好性、更好的浏览器兼容性使...

1105
来自专栏不止是前端

Vue:基于Vue2的饿了么实战总结

3897
来自专栏FreeBuf

Chrome XSS审计之SVG标签绕过

在一年前,在我的私人Twitter账户 brutal secret ,我分享了一个有趣的方法来通过审计绕过chrome 的xss过滤器。我们将从黑盒测试的角度...

3375
来自专栏ml

JavaWeb学习之环境搭建

 1. HTML(Hyper Text Markup Language) , 超文本标记语言。 HTML文件的后缀名一般是: .htm , .html 表单(f...

2823

扫码关注云+社区

领取腾讯云代金券