我们可以把学习路线比作游戏中的段位上分,在不同的分段都有自己的定位和要锻炼的事情:
青铜—从零开始小学生:怀着满腔的热血,看到了这一个行业的希望和未来,准备开始学习 Web 开发知识。
- 先通过 w3cschool 等免费学习资源把 HTML、CSS 和 JavaScript 的基本操作学会了
- 写一个简单的表白页面送给你的女/男朋友,展示一下自己努力的成果,如果没有就当我没说
白银 —懵懵懂懂初学者:懂得如何使用 HTML、CSS 和 JavaScript 三大件来实现基本页面开发功能
- 选择一个可以覆盖多种场景、可以随自己意愿调整难度的项目尝试实现,如博客系统、记账本、Markdown 编辑器等
- 从 React 和 Vue 这两个框架中选择一个进行学习
黄金—轻车熟路新玩家:懂得使用框架来实现上面所举例项目
- 学习 Redux、Vuex 或者 MobX 等状态管理工具,并将他们使用到前面的项目中
- 思考状态管理工具为你的项目带来了什么好处
铂金 V—初出茅庐新司机: 懂得如何使用脚手架创建项目,并且能将代码结构根据模块化的思想进行安排
- 学习 TypeScript,对前面的项目进行重写,注重对数据结构和类型的控制
- 学习 Node.js,试着配合数据库实现一个比博客系统更为复杂的 CMS(内容管理系统),如 图书馆管理系统、仓库管理系统
铂金 I—基本上手好司机:如果是懂得如何利用 Node.js 或 TypeScript 编写业务代码的
- 思考在前面使用框架开发的项目中,有哪些代码是重复冗余的,有哪些逻辑是可以在多个组件之间共用的
- 学习利用 ES2015 或更新的 JavaScript 标准,逐步替换使用框架所编写的代码
钻石 V—淡定自然老司机:如果是对逻辑抽象、模块封装有了一定的理解和经验的
- 思考如何使用纯 JavaScript 对业务组件中的非渲染、非 DOM 相关代码进行抽象
- 引入单元测试工具,对纯逻辑代码进行测试,争取覆盖率达到 80% 以上
钻石 I—赛道新手初学者:如果上面的条件你都已经满足了
- 思考不同的代码哲学(OO、FP 等)、不同的代码结构(MVC、MVVM 等)的区别
- 思考不同的框架之间设计的初衷,思考不同的编程语言中对同一类问题不同解法的区别
到这里我划了一条从 0 到高级前端工程师级别的纯技术路线。相信有不少有经验的同学会发现中间我省略了不少内容,但也不难发现路线中从前半段的“学习”逐步变成后半段的“思考”。优秀的工程师除了需要有在纯技术领域的沉淀以外,还需要更多对技术、团队、ROI(投资回报率)的思考,当然这依然不足以支撑我们平稳地渡过“程序员 35 岁危机”,前面的路还有很长,钻石往上还有王者呢,谁说程序员就是青春饭碗的?
回想起很多年前我也跟你一样是一个完全的新手,从 0 开始慢慢自学摸索 Web 开发,甚至后来我也没有进入科班学习计算机,那么来听听我作为一个“前人”是如何完全靠自学至今的故事吧。
我是一个完全从自学开始的前端工程师,想起来第一次接触前端就是初中那会特别流行合租 VPS 然后注册一个 .tk 的免费域名。而作为一个刚入门 Web 开发不久的小屁孩来说,用这种方式一探“大人的世界”属实让人兴奋。而当时最流行的博客管理软件就是用 PHP 写的 WordPress,作为一个十分成熟的 CMS 软件来说 WordPress 当时就有了非常丰富的社区资源,比如主题、模板、插件等等。
而作为一个十分注重个性化的小屁孩来说,当然是要自己做一个主题的啊!于是我就从此踏上了 Web 开发的不归路,在此之前我所接触的都是 Visual Basic 这样的 Native 的语言。
以 WordPress 主题作为切入点,我开始学习 PHP 用于调用 WordPress 的 API 并输出内容、学习 HTML 用于写主题的模板、学习 CSS 用于“装潢”我的博客、学习 jQuery 用于实现页面动态效果。是的,那个时候基本上大部分人接触的是 jQuery 而不是 JavaScript,一个 $ 函数就可以完成非常多的效果这让我第一次感受到了“框架”所带来的价值。于是便一步一步地发生了以下事情(不一定完全对,毕竟时间过太久了):
1、我发现页面上的一些样式效果无法在 IE 浏览器上正常显示,于是我就开始到网上学习 CSS 在 IE 的各种特殊处理,包括 reset.css、normalize.css 等工具的使用;
2、每次点击链接都要刷新页面,在那个网速不怎么好的年代体验非常糟糕,于是乎就开始研究怎么用 jQuery/JavaScript 实现不需要刷新页面的情况下切换页面的内容;通过查看文档发现浏览器支持一种叫做 XMLHTTPRequest 的技术,可以让我们不需要通过跳转的方式从服务器获取到信息,从这里开始了解到 HTML、XML 和 JSON 三种不同格式的区别;
- 第一次知道了可以通过服务器传递 JSON 格式的纯数据,然后前端通过 JavaScript 对数据进行解析,并且结合前端的模板引擎渲染成完整的 HTML;
- 从这里又可以学习到如何通过 URL 中的 path、query、hash 以及 POST 和 PUT 请求正文等信息向服务器传递信息,服务器通过这些信息动态地对各种数据进行处理并返回结果;
- SPA(Single Page Application)开发习惯初见雏形;
这样我就来到了“白银”阶段了。
接触 Node.js
当我正在愉快地设计着 WordPress 的自定义主题时,偶然间我在某前端网站上了解到了一个新的技术 —— Node.js。与它的相遇改变了我以后的学习路径,影响至今。
2009 年 Ryan Dahl 发布了一个基于 Chrome JavaScript V8 引擎开发的程序运行环境 Node.js,它允许开发者在除了浏览器以外的地方运行 JavaScript 语言,并且提供一些标准库允许 JavaScript 脚本启动进行启动一个 HTTP 服务端应用这种以前在浏览器无法完成的事情。
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello Worldn');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
这一份代码是 2010 年写在 Node.js 官网的一段实例代码,机缘巧合之下我被这么一段简单的代码深深地吸引住了,虽然当时安装它仍需要从 GitHub 上克隆整个项目代码到本地并依次运行以下指令:
$ ./configure
$ make
$ make install
这一次编译就得花上至少十分钟,但完成安装后运行上面的一段代码,并在浏览器中打开 http://127.0.0.1:8124/,然后在浏览器上看到 Hello World 字样时仿佛新世界的门打开了。因为当时我所接触过的服务端程序只有 PHP,而 PHP 本质上就是一个模板引擎,它并不能很直观地处理请求本身而是借助 CGI 进行响应。能做更多的事情,这件事情对刚学习编程不久的新手来说是具有很大诱惑力的。
从这里开始,Node.js 配合 npm 便开始了长达 10 年的快速发展。从纯服务端应用开发,到开发工具、工程工具,再到如今的 FaaS(Function as a Service,Serverless)开发方式。Node.js 已经成为 Web 工程师不可或缺的一项技能,不管是用来开发服务端应用还是开发工具类应用,甚至是使用 Electron 开发桌面端应用还是配合 React Native 开发移动端 App,Node.js 能让前端工程师了解更多系统级别的概念,如网络、I/O、内存、文件系统等等,这些很多都是原本在浏览器端上看不到的。而学习这些知识对你理解前端开发背后的一些原理有非常好的价值,就跟学习算法一样。
如果大家想从事前端不知道怎么入门的,可以在留言区评论“学习”我把我多年的经验分享给大家,还有一些学习资料(点赞+转发)