经验分享：如何系统学习 Web 前端技术？

本文作者：曾亮。晟暄科技 CEO ，HTML5 & Node.js 技术讲师. Javascript前后端全栈开发人员 DDD／CQRS 设计师 对 Node.js 和 HTML5 有多年开发经验。独立研发 Node.js 版的 CQRS framework , 国内为数不多的顶级领域驱动设计专家。                                                                                                                                                                                                                                                                                                               同时，曾亮老师在CSDN学院开设《前端特训营》，通过4个月的从零实战，掌握前端核心技术，成为前端工程师。目标是：将学员培养有核心竞争力的前端开发者。点我查看技术图谱。

这篇文章主要是面向小白用户的，如果你有些基础，当然也建议你看看，尤其是最后一个主题，或许你能得到一些启发。本文的观点，纯属个人自以为是的想法，不是真理，仅供参考。

抛开具体技术细节，先主要谈谈程序员如何更高效的，有选择的学习技术。我能体会到选择的轻松和乐趣，体会到身为技术人员和人类的平衡感。字里行间中，我要表达的是一种放弃与选择的哲学，能品到这一点，我就很高兴。

 

人生苦短 我们需要一个基线

 

古代小说里，高手如云，人们为了生存，要掌握一套保命武功。其中，我最喜欢的是轻功，毕竟三十六计走为上策（狡诈的一笑）。说到底，武功和技术一样，都是为了生存。

 

问题是，现实一点来说，一个武者，很难掌握所有的武功秘籍，因为臣妾做不到啊；所以如果有一种武功，能够远攻和近攻，能逃跑能单挑，那就极好了。

 

玩“农药”也一样，我发现英雄们各有优缺点，但你又不可能什么英雄都练，因为臣妾也做不到啊，毕竟上场时就一个英雄，所以就需要选择，我选择的是吕布和赵云，他俩在游戏故事设定中是情敌，其实貂蝉喜欢的是赵云，我之所以选这两个情敌成为基友，是因为符文一样，这点很重要，五级符文真mde难攒，吕布和赵云战斗力都很棒，我基本就练这两个，现在的级别是永久钻石，虽然不是最厉害的，但在王者的世界，确有一席之地。

 

技术也是一样，我通过一套技术，每天用这套技术开发，不断磨练，好过啥都学，啥都不深入，因为之所以深入，是因为你不断去用，很多时候，一个技术名出来，就买书学，其实很傻很天真，因为技术是手段，目的是解决开发问题，如果用不上，就毫无意义。

 

回过头来，我们发现“农药”中选英雄，和选自己的技术体系是一样的。我们狭义的目的，是想通过一种技术（手段），能够开发尽可能多的应用程序。

 

那么如果有这种技术，最好满足以下几个特点：开源，前后端全栈式开发，前后端代码可以共享，最好在有生之年不被淘汰的，最重要的是好就业的。

 

符合这些特点的技术，当属 Web 技术了，下个主题让我们探讨，它为什么符合。另外需要说明的是，这里说的 Web 技术，是我进一步浓缩的技术体系，因为广义上的 Web 技术，其实涵盖的面太广了，我们需要进一步，抽离出更符合这些特性的具体技术，形成一套便于开发的 Web  技术。所以，下面讲的是狭隘的 Web 技术。

 

 

Web 全栈式开发

 

HTML5 与 Node.js 技术，可以让程序员做到 Web 全栈式开发。这套技术是标准的、开源的。

 

HTML5 大家都听过，百度就可以知道它的定义啊，历史啊等一些信息，所以，这里不再赘述。HTML5 是标准化的技术，Node.js 是开源技术，所以完全免费，随便用。另外，当你进入到 npmjs.com 网站，会发现无数 Node.js 第三方库，最重要的，这都是免费的，开源的，这为我们的项目开发提供了一个强大的、免费的开发团队！你可以直接用别人的开发成果！

 

这套技术不会被淘汰

 

学习是有成本的，时间是宝贵的，因为生命宝贵；人都是想用更多时间陪陪家人，陪陪女朋友和基友，也喜欢玩玩“农药”，去迪士尼当回小孩儿；如果你爱技术胜于当人的乐趣，那么恭喜你！至少我们不太喜欢，学个一溜十三招，最后学的东东淘汰了或过时了。

 

HTML5 技术是标准的，我们用到的浏览器都支持他，所以在可预见的未来不会被淘汰。而 Node.js 是开源的，不受一个公司的控制，却受到各个大咖公司的赞助和支持，包括微软、因特尔、IBM … 具体参看 https://nodejs.org/en/foundation/members/  所以 Node.js 在可预见的未来，也不会被淘汰。

 

所以学习 HTML5 and Node.js 技术可长久有效。

 

这套技术可前后端全栈式开发

 

我们所说的 HTML5 和 Node.js ，是前后端技术的代名词，因为围绕它们的，是非常庞大的生态圈。这个我们会在下一主题中说明。

 

一个软件可以分为前端和后端，比如一个 App 分为客户端和服务器端程序。通过 HTML5 技术可以开发客户端程序，服务器端程序可以用 Node.js 开发。

 

那么，为什么 HTML5 要与 Node.js 构成前后端全栈技术呢？ 而不能是 html5 ＋ php 或其它呢？也不是不能，而是前者更有优势。

 

浏览器程序是采用 Javascript 语言编写的，而服务器端的 Node.js 程序，也是用 Javascript 语言编写的，所以前后端可以统一使用一种编程语言开发。这样前后端的很多库，都可以共享，既可以运行前端，又可以运行后端，提高了开发效率。

 

学好这套技术好就业

 

上面说了一些，这套技术的优势所在，那么为什么说，学好这套技术好就业呢？要回答这个问题，还需更进一步说明，使用这套技术到底能干什么。

 

我们掌握这套技术后，可以开发全端程序，比如 iPhone Android 的 APP ，可以开发 Web 程序，可以开发桌面应用程序，甚至可以开发物联网程序等等，更重要的是它节省了开发成本，提高了开发效率。

 

节省开发成本，是因为雇佣一个程序员，可以同时开发前后端，工资要比两个人少，而且由于 Node.js 本身的特点，可以节省公司服务器，这也是 paypal 之所以用 Node.js 技术重写系统的原因。

 

而提高开发效率，是因为使用这套技术，可以写一套程序，运行在  Android iPhone  PC  和 服务器端，当然这样说有些夸张，多少会更改一些，但基本上做到了，一次编写到处运行。

 

再有，Web 前端肯定要用到  HTML5 技术，后端可能会用到其他技术，但即便后端程序不用 Node.js 开发，或多或少都要用到 Node.js ，因为围绕它诞生的一些工具，在开发中必然会用到的，比如 Webpack ，Gulp等 Node.js 相关技术。

 

综上所述，这套技术对于公司来说，百利而无一害，所以掌握这套技术很好就业。目前我在CSDN学院开设前端特训营，目标是：将学员培养有核心竞争力的前端开发者。从、你们可以点击进去查看里面需要的技术知识点和前端就业薪资。传送门点我吧！

Web 前端技术知识体系

 

前面讲了两点。第一点，说明人精力有限，有空要多陪陪基友和女友，所以我们要选择一套全栈式开发技术，帮助我们轻松开发应用程序，这就是 HTML5 + Node.js 技术体系。第二点，吹了半天，来说明这套技术多多好。

 

那么，HTML5 和 Node.js 就是两种技术吗？当然不是了，衍生出的技术好多好多。HTML5 是什么，你 google 吧，我这里不粘贴了，可好？ 如果你说：google 臣妾做不到，那就百度吧。

 

Web 前端程序，实际上运行环境就是浏览器，现代浏览器已经是一个平台了，提供了很多 API ，我们叫做 Web API。编写一个 Web 前端程序，需要用到的技术有 HTML5 / CSS3 / Javascript 。而 HTML5 往往是这些技术的总称。

 

那么，用这三个技术确实能写出程序来了，但是从头自己些也是很慢的，可以用很多工具库和框架，帮助我们快速开发。

 

前端技术库

 

比较火的技术包括：  JQuery , Angular2 , React , Redux , Vue.js 等，这些工具库各有千秋，比如，比较小的程序，用  JQuery 就可以搞定了，如果比较复杂的，可以用 React ，Angular2 或 Vue.js 库。

 

开发  Android 、iPhone 和桌面程序

 

上面介绍的部分前端技术，可以写出程序来，但只能运行在浏览器中，我们也可以用打包工具，让开发好的程序，运行在 Android iPhone 和 电脑上。

 

PhoneGap 和 React-Native  就可以用我们已知的技术，来开发Android 和 iPhone 程序，而用 electron 就可以把程序打包成 PC 电脑桌面程序。

 

掌握以上技术，就让我们可以开发各种客户端程序了。

 

服务器端技术

 

那么，服务器端程序用 Node.js 就可以了吗？ 你当然可以从头写服务器端程序，最好是用现成的框架。比如 Express koajs 等框架，来编写 Web 服务器端程序。

 

数据库也是需要的，要不数据就没法持久化和查询了，我推荐用 mongodb 数据库，采用 mongoosejs 库来写 Node.js 的数据库程序，因为  mongodb 数据库的文档结构，和 javasript 的 json 是很类似的，另外 mongodb shell 用的也是 javascript 语言。

 

单元测试

 

到目前为止，前后端程序所需技术，都够用了。那么，还有一个问题，就是测试！ 程序开发后，再整体测试，会出现很多幽灵bug，也就是很难找到问题根源bug。所以，最好是单元测试，就是写点代码就测试一下，遇到问题及时解决，而不是 bugs 攒多了到最后无法解决。这方面的单元测试工具也有很多，推荐 Node.js 后端程序用 mocha 做单元测试，前端用 jasmine + karma 做单元测试，因为karma 可以让我们在终端就能看到多个浏览器测试结果，而不是各种浏览器，挨着个的刷新看结果，前端浏览器测试最麻烦，因为有兼容问题，所以用 karma 大大提高了我们测试效率。

 

打包工具

 

像 Webpack , gulp 等技术也是需要掌握的，可以帮助我们自动打包程序。

 

 

Web 前端技术学习路线图

 

上面说了这么多，到底如何一步步掌握这些技术呢？ 下面推荐一个学习路线图，希望对初学者有帮助。

 

Javascript 语言：全栈开发中，用的编程语言就是 javascript

 

HTML5 标签和 DOM：这是前端最核心技术，为之后学习各种开发框架，打下坚实基础。

 

CSS3：学习通过 css 开发网页和各种可视 UI 组件。

 

SASS：利用 sass 语言，开发复杂的页面 css

 

Node.js：掌握Node.js 核心 API ，具备后端开发能力。

 

Express 5.x 框架：掌握 Express 框架，从而具备快速开发后端程序的能力。

 

socket.io 库：让前后端通过 websocket协议通信，是web 开发游戏、聊天等程序必备技术。

 

Mongoose 框架：可以让程序具备文档数据储存能力

 

Git 命令与 github：可以对项目进行版本管理，从而能团队开发项目。

 

Gulp 构建工具实战：通过 gulp 工具，灵活对项目进行构建。

 

Webpack：可以用和 Node.js 后端模块化方式，开发前端程序，从而能开发大型系统。

 

Jasmine & Karma：可以利用 Jasmine & Karma 轻松实现，多种浏览器同时进行单元测试，而不必切换界面。

 

前端相关框架：JQuery ／ Bootstrap ／ Vue.js ／React ／ Angular通过框架帮我我们快速开发程序

 

移动端与桌面程序开发工具：phonegap ／ react-native / electron / 微信小程序开发，这套工具，基本上只是打包工具，和提供了一些特定平台 API ，开发还是使用之前的 Web 技术。

 

如果通过这套学习路线图学完，那么就业是毫无压力的，但是做为有志向的码奴，我们还需要展望未来和扩展眼界。想要详细查看学习知识点的，点我查看吧！传送门在此。

 

一提到扩展眼界，有些人就会，疯狂的拿来一本永远不用技术的书，啃起来，比如你是用 html5 写前端界面的，永远用不上 QT 写界面，你买本 QT 津津有味的学起来，如果你感觉不错，那就学吧。

 

其实，我们学任何技术，都要讲究是否有用，技术本身是冰冷的，如果没有价值，或用不上就不必学，除非你理论计算机学家，这个职位我编出来的，不造有没有这个岗位。

 

废话不多说了，我们来扩展一下有用的眼界，展望一下有用的未来！

 

扩展眼界与未来展望

 

前文提到的，说实话也只是冰山一角，这个一角也确实能开发，几乎所有的应用程序了，但是冰山的下半部分，却让我们更加神往！ 虽然技术是冰冷的，但做为活力四射的技术，还是会感受到一丝震撼人心的灵光！下面我挑两个高端技术，来分享一下。

 

CQRS framework 我一手带大的孩子

 

Web 前端开发人员，记住你们只是前端！ 不要越界好不好！你们没这个本事！

 

但遗憾的是，本文的标题 “如何学习 Web 前端技术？” 真的只是谦虚说法，谁说我们不能开发后端程序了？！

 

Node.js 为后端开发提供了基石，望着老牌技术的一些框架啊，数据分析相关的框架啊，给人的感觉 Node.js 还很年轻，开发一些简单的 Web CURD 程序就得了。但是，这些并不正确，随着 Node.js 本身能量，和各种第三方库让 Node.js 可以开发微服务，大型系统，比如 paypal 系统就是用 Node.js 写的，难道不够强大吗？

 

后端是个笼统的概念，如果后端只是 Web 服务器端，那么 Node.js 开发是没问题的，那么为什么给人的感觉，后端好像很牛逼呢？因为后端指的是支持高并发访问、大型系统、复杂系统。

 

也就是系统很庞大，用一般的 CURD 简单开发模式，无法胜任这种复杂性。那么，这个其实和技术无关；而是，是否有应对开发复杂系统的框架。

 

CQRS https://github.com/liangzeng/cqrs 是 DDD 领域驱动设计理论的落地框架，我为 Node.js 开发了 CQRS framework ， 从而可以让 Node.js 具备开发超大型系统的能力，当然它不只限于此！

 

来来来，让我们“吹”一下吧！

 

Node.js CQRS 框架，适合于开发大中小程序，也很适合开发微服务，它具有横向无限扩展机制，可以利用多cpu和多服务器分布式性能，具备事件驱动、saga长故事、saga回轮、actor模式、事件回溯。在未来，也将运行在浏览器，可替代 redux 和其他数据管理框架，将统一管理业务数据，通过 cqrs framework 强大的兼容性和 js 的简单性相结合，实现无所不在的开发便利。

 

最近，Node.js CQRS 框架增加了 DCI 特性，从而完成 CQRS + DDD + Actor + DCI 的有机整合，为开发大 中小 项目提供强大的核心支持，分布式／微服务，或普通的 react 应用 （cqrs将代替类redux框架，提供更完善、更可靠和更强悍的技术支持），将在一开始，给程序员一种可控性，而不是一盘散沙，无论多大规模的项目，可控性、可扩展性、无限横向扩展性，都是成功项目的必备。

 

这是一个很大的话题，先吹到这里。

 

WebAssembly

 

WebAssembly 是浏览器和 Node.js 环境下，新加入的程序格式，简单来说，就是让运行效率接近原生程序。未来的新开发应用软件，基本上采用 HTML5 + Node.js 前后端全栈来开发，因为开发效率高，而程序中的一些需要高繁运算部分，采用 Javascript/Typescript 开发后转换为字节码，但不应把整个项目转换为字节码二进制，那是很傻的。不准确的说 95%＋的动态JS代码加 <5% JS/TS转为wasm二进制的字节码，构成了完整的程序。

 

大家可以参看 https://github.com/AssemblyScript/assemblyscript 

 

先说这些吧，还有很多要说的，不过留到下次吧。希望本文对你有些启发！

最后，做一个小小的推荐。十年一变，从2016 年开始，Web前端工程师开始大放异彩，人才需求重返巅峰。

本文作者曾亮老师，在CSDN出品4个月从零成长为前端工程师计划。目的是：将学员培养有核心竞争力的前端开发者。

成长阶段：

• 第一阶段：Web 全栈核心技术实战（1～6周）

• 第二阶段：Node.js 技术与开发工具实战 (7~10周)

• 第三阶段：前端框架实战（11～15周）

• 第四阶段：移动端与桌面程序开发（16～19周）

• 第五阶段：毕业项目实战

课程特色：

• 从零实战，学习路径分明，独家体系大纲，有多名助教随时答疑，不再困扰遇到的技术问题。在线学习+直播形式，无需脱产。

  
  

• 有专人（助教）来跟踪你的学习进度，并根据你的编程基础来制定专属学习计划，保证不掉队。讲师有着深厚的经验，产、学、研结合紧密。

不再多说，

这是天堂。

这是地狱。

我们就在这里等你，少年，约么？

报名点我

和前端顾问聊一聊！（微信号：CSDN06）