双十二大前端工程师读书清单

本文最早为双十一而作,原标题“双 11 大前端工程师读书清单”,以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流,现免费分享到这里,不足之处欢迎指教,也可以在我的 GitChat 读者圈中进行提问,原文如下。


发布完本次 Chat 预告后,捕捉到了一个友善的吐槽:“读书清单也要收费?”。的确,只是一个列表的话,你完全不必点进来,我也不必在这里大费周折的推荐给你。但你还是看到这篇文章了,因为你懂什么是博客,你也能理解知识付费对作者的自发性要求;更或许你认识我,看过我的《如何写一篇优质的博客》而愿意相信本文的质量——无论哪种,感谢你的到来,开始干货吧。

本场 Chat 将尝试建立「双 11 期间,大前端领域有趣的买书荐书交流区」,并围绕以下书籍主题进行详细探讨:

  1. 从软件工程到大前端开发
  2. HTML、CSS 荐书品书
  3. JavaScript 荐书品书
  4. 计算机网络荐书品书
  5. Node.JS 荐书品书
  6. 软件工程荐书品书
  7. 尝试构建大前端知识体系

同时,本场 Chat 的读者圈也将长期维护,一起与前端领域的大牛们进行激烈的思维碰撞,在交流中绘制出我们专属的书籍成长之路。

从软件工程到大前端开发

这次我们依旧从软件工程说起。从软件危机的诞生到现在,行业领头的软件工程师们给我们描绘了这么一幅专业技能培养方案:

对于没有了解过软件开发的学生,学的第一门是《计算机导论与程序设计基础》。导论部分论述了计算机发展史、计算机基本组成和计算机网络等概念,后期的分科都离不开这个大范围;程序设计基础部分通过快速了解 Python 语法,完成能写出最简洁的输入输出、分支/循环结构的阶段性目标。

接下来详细学习的是面向过程的代表,C 语言。通过重温 Python 中遇到的输入输出流、分支循环结构,再引入程序编译链接原理、指针/链接等在 C 语言中独特的数据类型和数据结构,让我们打下坚实的编程基础 [1]。

[1]:在这个阶段,我们或多或少会经历的挫折有:

  1. 安装各种集成开发环境;
  2. 安装 Linux 虚拟机/双系统;
  3. 调试各种 C 语言 Bug,经常怀疑是程序错了而不是你错了;

只要耐心一点,以上的经历对我们编程习性的养成都很有帮助。

第一年很快的过去后,大二和大三阶段的课程各个掷地有声——数据结构、算法设计、数据库原理、操作系统、计算机网络,内容量的安排上足以让我们有能力去企业进行实习。

可是,这和大前端开发有什么关系?

在整个软件工程的专业培养方案里,并没有任何局限于 Web 开发领域的踪迹,更没有局限于前端开发。况且,前端开发被业界重视的时间并不是很长 [2]。因此隶属于软件开发一个分支的前端开发,急需大量对计算机体系有充足了解的人才的加入。为了不被“学前端人很多”现象造成的泡沫冲击,我们就得拿起计算机科学素养来抵抗。

[2]:使用 XMLHTTPRequest 技术的 Ajax 划分出了一个前后端分离的时代,从此业务逻辑的处理逐步向客户端转移,服务端更多的提供数据接口。

HTML、CSS 荐书品书(3+ 本)

《 Head First HTML 与 CSS(第二版) 》

中文版出版时间:2013-09

前端开发走在用户交互体验变革的最前沿,我们所见的一切实体都可以被素描,被构建。锻炼我们视觉的敏锐性、发现瑕疵并提出自己的设计方案,成为了视觉工程师的独特魅力。前端工程师与视觉工程师有很大的交集之处。

本书使用了丰富的图片和渐进的过程,化繁为简,将我们带入了 Web 开发领域。同时,这本书每一页的排版布局都很精彩,看完本书,我们在布局设计中也将会有源源不断灵感——这也是在众多“Head First” 系列的编程书籍下,只推荐这本书的原因所在。

通过推荐本书,我们还可以感悟到:

  • 排版印刷行业、视觉设计领域与前端开发密不可分。
  • 化繁为简的思想,可以落实到我们写作上,也更可以吸收进日常的代码设计之中。

其它相关书籍,可以类比:

  1. 《 HTML & CSS设计与构建网站 》
  2. 《 HTML5与CSS3权威指南(第3版) 》

《 CSS 权威指南(第三版)》

中文版出版时间:2008-01

CSS 更多的是门艺术,而非科学,需要我们在大量实践之中感受真知。至于更好的实践,我们可以通过这本权威指南进行一场细致入微的了解。从选择器、层叠/继承、文字/字体到盒模型、表格布局,本书讲述的 CSS 知识并不落伍,是了解 CSS3 之前版本的最佳手册。

通过推荐本书,我们还可以感悟到:

  • 前端新手要多读 W3C 官方的 CSS 手册,能做到的人并不多。

其它相关书籍,可以类比:

  1. 《 精通 CSS:高级 Web 标准解决方案 》
  2. 《 超越 CSS:Web 设计艺术精髓 》

《 响应式 Web 设计:HTML5 与 CSS3 实战(第二版)》

中文版出版时间:2017-02

各种分辨率终端的普及,对我们的网页适应性提出了更高的要求。也因此 HTML5 标准的新特性和语义化、CSS3 标准的自带动画、新式布局、响应式图片、媒体查询等概念呼之即出。

通过对这本讲解响应式 Web 设计书籍的边看边敲,我们用代码实现响应式设计的能力将有很大的提高。这也再次应证了最初的那句话,前端开发走在用户交互体验变革的最前沿,“响应式”功不可没。

通过推荐本书,我们还可以感悟到:

  • 时代对技术提出了新要求,新技术又促进了时代的飞速发展。
  • 学好 CSS 基础的下一步,就是将自己曾经的页面重构成响应式的。

其它相关书籍,可以类比:

  1. 《 学习响应式设计 》
  2. 《 响应式 Web 》

JavaScript 荐书品书(6+ 本)

《 JavaScript 权威指南(第六版)》

中文版出版时间:2012-04

如果说我们想打好 JavaScript 基础,没有什么其他书籍可以比的过这本《 JavaScript 权威指南》了:一千页的厚度,一百四的原价,每一节都舍不得错过。

这本权威指南的章节安排分为两大部分:“JavaScript 语言核心”和“客户端 JavaScript”。正如学习编译原理要从词法开始分析,前半部分从 JavaScript 的词法结构开始讲起。紧接着有基本数据类型、对象、数组、函数、类与模块、正则表达式等章节,涵盖了基础语法的绝大部分。

通过推荐本书,我们还可以感悟到:

“权威指南”是重磅级的存在,只看不敲没有用,只敲不想也无意义,逐章而破,反复重温。

其它相关书籍,可以类比:

  • 《 JavaScript 高级程序设计(第3版) 》

《 JavaScript 语言精粹(修订版)》

中文版出版时间:2012-09

总有一本书爱被前端学习者与一千多页的《 JavaScript 权威指南》合影留念。那就是这本《 JavaScript 语言精粹》。在历史背景里,这本书让业界开始重视 JavaScript 这门曾只在浏览器上处理简单任务的脚本语言,堪比人类世界的《 权利法案 》,随着而来的便是现代民主(SPA 单页应用)的普及

由于 JavaScript 最初是 10 天设计出来的,我们更应在学习的过程中时刻“取其精华,去其糟粕”。这本书便成了 ES5 标准及其之前标准的精华手册。同时,书中“铁路图”的引入和 JSHint 的引入向我们提倡了很好的代码规范建议。遗憾的是,JSHint 由于作者推荐的规范没有定制性,逐步被后来的 ESLint 取代。

通过推荐本书,我们还可以感悟到:

  • 一门语言的流行总有其优点所在,缺点也不会例外。掌握更多的编程语言,会让我们对“取其精华,去其糟粕”有更深的理解。
  • 直到现在,ECMAScript3 和 ECMAScript5 标准依然广泛存在,在学习 ECMAScript6 的新特性前,不要忘了重温这些概念。

其它相关书籍,可以类比:

  • 《 你不知道的 JavaScript 》

《 JavaScript 异步编程 》

中文版出版时间:2014-04

IE 浏览器并不是一无是处的,它最早地向开发者提供了 XMLHTTPRequest 接口,并随着谷歌 Gmail 对其惊艳的实现,Ajax 快速普及,并开启了前后分离的新时代。这本书便从 JavaScript 的异步编程讲起,帮助我们设计快速响应的网络应用,而非简单的页面。

仔细看完这本书,如果有人向我们请教关于“如何理解 JavaScript 的单线程机制”“JavaScript 异步编程的解决方案有哪些”的时候,我们便能水到渠成的说出个一二三来。只是不要忘了,技术发展到现在,Ajax 也只是前后分离的一种实现方式,我们还有 Fetch API,我们还有 Node 网络请求模块。

通过推荐本书,我们还可以感悟到:

看来,每当谈到大前端开发,我们的关注点应更多的转在 Web 应用上了。

其它相关书籍,可以类比:

  • 还是本书,必读之作

《 JavaScript 忍者秘籍 》

中文版出版时间:2015-10

讲述 JavaScript 语言相关技术的图书很多,几乎只有这本,做到了对该语言核心部分(函数、闭包和原型)深入、全面的介绍,由 jQuery 库作者编写。使用 JavaScript 的高级 Web 应用开发中,我们还会接触到测试、测试工具、事件处理、错误捕获等初级学者很难遇到的技术。举例来说,或许现状有许多成型的测试框架,但这本书讲述了更多的 JavaScript 测试现状和测试原理。

通过推荐本书,我们还可以感悟到:

初学阶段感觉没太大用处的技术点,或许只是我们还没有遇到使用情景,因此不要松懈。

其它相关书籍,可以类比:

  1. 《 高性能 JavaScript 》
  2. 《 JavaScript 启示录 》
  3. 《 编写可维护的 JavaScript 》
  4. 《 JavaScript 函数式编程 》
  5. 《 学习 JavaScript 数据结构与算法(第2版) 》

《 JavaScript 设计模式 》

中文版出版时间:2013-06

有三本讲述 JavaScript 设计模式的书值得推荐。上图分享的是来自百度资深前端工程师的著作。作者通过情景对话,让JavaScript 设计模式的概念变的如此的有趣,又不失核心概念的深入浅出

目录简洁明了,向我们提供了设计模式的学习路线图,这里作出引用:

  • 第一篇,面向对象编程;
  • 第二篇,创建型设计模式:其中包括六种具体模式;
  • 第三篇,结构型设计模式:其中包括七种具体模式;
  • 第四篇,行为型设计模式:其中包括十一种具体模式;
  • 第五篇,技巧型设计模式:其中包括八种具体模式;
  • 第六篇,架构型设计模式:其中包括六种具体模式。

通过推荐本书,我们还可以感悟到:

除了“化繁为简”外,还有“风趣幽默”可以加入到我们的日常写作与编程之中。

其它相关书籍,可以类比:

  1. 《 JavaScript 设计模式与开发实践 》
  2. 《 JavaScript 设计模式 - 奥斯马尼 》
  3. 《 JavaScript框架设计(第2版) 》

《 深入理解 ES6 》

中文版出版时间:2017-06

开发者们正在积极地为 Web 浏览器以及 NodeJS 这些 JavaScript 宿主环境添加 ECMAScript6 的新功能,这是我们步入 JavaScript 应用开发的不可缺失的一环。块级作用域绑定、解构赋值、迭代器与生成器、Promise 与异步编程、代理与反射,曾因为激进而未做发布的 ECMAScript4 里,原来早都想到了这些概念,现在终得落实。本书由《 JavaScript 高级程序设计 》的作者撰写。

通过推荐本书,我们还可以感悟到:

ECMAScript6+ 更好的支持了前端自动化开发和 JavaScript 应用开发,先从扎实 ECMAScript5 开始学起吧!

其它相关书籍,可以类比:

  • 《 ES6 标准入门(第三版) 》

计算机网络荐书品书(3+ 本)

《 网络是怎样连接的 》

中文版出版时间:2017-01

“在浏览器中输入网址到看到网页内容”过程中,到底发生了什么?”一问经常会被提及,于是有了这本严谨又不失有趣的书,完完整整的讲解了整个过程我们所要了解的技术点。

  • 客户端:Web 浏览器、TCP/IP、网卡驱动、集线器、路由器
  • 服务端:防火墙、缓存服务器、网卡驱动、TCP/IP、Web 服务端程序

如果上面的关键字你不能轻松的说出它们的原理和联络的话,就看看这本这本书吧。

通过推荐本书,我们还可以感悟到:

一个简单的问题,真的可以深挖出一本书来,如果那是由你写出来的话,就更不一样了。

其它相关书籍,可以类比:

  • 《 计算机是怎样跑起来的 》

《 计算机网络(第5版) 》

中文版出版时间:2012-03

网络硬件、网络软件;网络协议、网络安全。理论与工程结合,仔细阅读,足见学者的深厚功底。

通过推荐本书,我们还可以感悟到:

图文生动的书纵然有趣,能通读这类更专业的计算机书籍也是一种实力。

其它相关书籍,可以类比:

  1. 《 计算机网络:自顶向下方法 》
  2. 《 TCP/IP详解 》

《 图解 TCP/IP(第五版) 》

中文版出版时间:2013-07

从理想的 OSI 网络模型到实际的 TCP/IP 模型,每个层级都有很多协议在进行管理。应用层面向我们封装好了底层细节,只需要我们互相通过接口协议来通信。纵使这样,大前端工程师也应掌握好这几个模型的基础。我们常常喜欢简洁的、生动的书来介绍苦涩的概念,那么这本以“图解”命名的网络原理书将十分符合你的口味。

通过推荐本书,我们还可以感悟到:

很多理想的东西落入实际中后常会产生变体,学习的过程中善于抓住重点,变体的原型便会显露的出来。

其它相关书籍,可以类比:

  1. 《 图解服务器端网络架构 》
  2. 《 图解 HTTP 》

Node.JS 荐书品书(3+ 本)

《 深入浅出 NodeJS 》

中文版出版时间:2013-12

JavaScript 从诞生之初就可以运行在服务端上,只是没有很好的展现机会。现在,NodeJS 终于将 JavaScript 在服务端上重新绽放开来。JavaScript 是单线程的,因此我们需要事件机制和异步编程来支持非阻塞模型,这在传统服务端语言里都是很少用到的特性,从而让 NodeJS 如此与众不同。

这本书由国内作者朴灵所注,初版了四年,依然是国内最好的讲述 Node 的书籍。每一章选题鲜明,通过对进程线程、网络协议、内存控制、前端路由的详细讲解,让我们体验了更多的 Linux 和编程之美。

通过推荐本书,我们还可以感悟到:

只有对 Linux 内核机制、服务端编程的深入掌握,才能写出这样棒的大前端书籍来,我们学习的时候千万不要设限自己,前端尤是如此。

其它相关书籍,可以类比:

  1. 《 Node 与 Express 开发 》
  2. 《 精通 Linux 》

《 Node.js 硬实战:115个核心技巧 》

中文版出版时间:2017-01

学习 Node 的时候,我们总容易沉浸在 npm 仓库带来的各种有趣的第三方模块上,Node 核心基础的知识反而被疏忽。这本书既讲述了大量的核心概念,有又很多的代码示例,仔细阅读,能让我们从对 Node 的一无所知到深入浅出,最终编写自己健壮的第三方模块。

通过推荐本书,我们还可以感悟到:

关于讲述实战的书籍要慎重选择,在阅读过程中要注意在大量的代码中抓住重点。

其它相关书籍,可以类比:

  • 《 Node.js 微服务 》

《 SPA 设计与架构:理解单页 Web 应用 》

中文版出版时间:2016-11

掌握好 JavaScript 的核心概念、设计模式、语言标准、模块化开发以及 Node.JS 相关知识后,可以看看这本讲解 SPA (单页面 Web 应用)开发的书。传统服务器端的架构可以分为表现层、服务层、业务层和数据层,向客户端返回渲染后的页面。SPA 架构让我们可以预先下载整个前端框架,渲染、前端路由等功能都能很好的在客户端处理

通过推荐本书,我们还可以感悟到:

SPA 带来的时代,让前后端数据的交流越来越需要注重接口的设计。我们可以用 RESTful 来设计我们的接口;前端在开发时,也可以使用 Mock 等技术来模拟后端还未上线的接口服务;前后端分工将再次高效起来。

其它相关书籍,可以类比:

  • 《 单页 Web 应用: JavaScript 从前端到后端 》

软件工程荐书品书(1+ 本)

《 黑客与画家:硅谷创业之父Paul Graham文集 》

中文版出版时间:2013-02

大前端开发离不开软件工程领域,软件工程又是整个计算机科学体系的一个篇章。在最后的“软件工程荐书品书”章节,我们以这本讲述早期硅谷黑客故事的书籍为引,将我们的目光重新凝聚在整个行业之上。

通过推荐本书,我们还可以感悟到:

或许当我们出生之时,这些故事注定成为了我们的历史。未来是什么,永远没人能确定。在计算机里,我们可以依据一定的科学观,无中生有的创造着我们想象的世界。尤其在 Linux 推动的开源世界下,程序员间跨国际的平等交流前所未有,注定将会被记录在历史之上。

其它相关书籍,可以类比:

  1. 《 一路编程 》
  2. 《 若为自由故 自由软件之父理查德 斯托曼传 》
  3. 《 只是为了好玩:Linux之父林纳斯自传 》
  4. 《 人月神话 》
  5. 《 编程珠玑(第2版) 》
  6. 《 浪潮之巅 》
  7. 《 软件随想录 》
  8. 《 重构——改善既有代码的设计 》
  9. 《 程序员修炼之道:从小工到专家 》
  10. 《 UNIX 编程艺术 》

尝试构建大前端知识体系

很感谢你耐心地看到了这里,本文的书单分享也就到了尾声。细心的你读到这里会发现,每个配书籍封面截图的书籍都不是凭空分享出来的。就像在“JavaScript 荐书品书”章节中,我们主要介绍了六本书——《 JavaScript 权威指南 》、《 JavaScript 语言精粹 》、《 JavaScript 异步编程 》、《 JavaScript 忍者秘籍 》、《 JavaScript 设计模式 》和《 深入理解 ES6 》。这六本书又分别从详细论述、概要凝练、异步开发、重点突破、设计模式和语言标准等角度进行了很好的填充。“其它相关书籍”也告诉我们这六本并不是唯一的选择。编程语言不设限,学习方向不设限,读书更得不设限。这时也就能重新呼应主题,来绘制出我们专属的书籍成长之路。

可见这些书籍是服务于具体知识点的,这些知识点又该以怎样的形式有条理出现在我们的面前呢?以下内容均由笔者整理,是为临稿,目的是开拓视野而不是诺列客观事实,不具有任何官方性质,长期维护在我的 Github仓库中,欢迎探讨。

  • HTML -> HTML5, CSS2.1 -> CSS3 -> SASS
  • JavaScript -> ES3 -> ES5 -> ES6+
  • PWA/SPA 前端 + NodeJS 服务端 + Nginx/Apache 服务器
  • 前端数据层:TypeScript/Flow/PropTypes
  • 应用架构层:MVC/MVP/MVVM
  • 应用状态层:Redux/Mobx/RxJS
  • 路由管理层:History API/Hash
  • 包管理:bower/npm/yarn
  • 模块化:CommonJS/RequireJS/AMD/CMD
  • 组件化:JSX/Class
  • 自动化:Grunt/Gulp/Webpack
  • 脚手架工具:Yoman/creatshare-app-init
  • 接口联调:postman/mock/RESTful
  • 持续集成:TravisCI/Webhook
  • 单元测试:Jasmine/Mocha
  • 移动原生应用:Hybrid/React Native
  • 桌面客户端:Electron