2022，如何优雅学习前端开发？

前端发展史及学习方法论

豆豆的小说《遥远的救世主》中提到：“有道无术，术尚可求，有术无道，止于术”，深以为然。道是方向，术是法则；认清事物的本源、把握事物之规律，有助于后续更好掌握知识、技能，从而解决需求和问题。故而，本篇分享，主要围绕学习方向、如何学习等方面进行。托尔斯泰曾说：“多么伟大的作家，也不过就是在书写他个人的片面而已”，意识流派相关（技术）分享亦是如此，望朋友们带着思考，辩证看待，吸取觉得有用部分即可。

前端技术可以用来做什么？

原本并无前端，写的人多了，也便有了这前端；而如今，它或也被唤为：大前端。前端起源初衷，原本只是方便科学家看文档、传论文，而诞生的静态网页（1991）。那么，前端技术现而今可以用来做什么？时至今日，历经近 30 年巨变，前端技术栈，可以涉及的领域越来愈多：

1. 移动端兴起，所带来的移动端领域（Web App）；
2. 与原生端共同协作的混合型应用（Hybrid App ）;
3. 由 React Native 等引领起来的原生移动应用；
4. 由 nw.js、 Electron 等流行起来的原生桌面应用；
5. 由小程序， 快应用 等所带来的即点即用型轻应用；
6. 其他如 TV、VR、IOT、 可视化 、人机交互等领域；
7. 在人工智能、5G 等新技术的引领下，前端未来可期…..

前端开发，发展简史

1. 蛮荒时代： 1991～1994，方便科学家看文档、传论文，而诞生的静态网页；前后端开发一体，前端代码是后端代码的一部分：后端收到浏览器的请求 => 发送静态页面 => 发送到浏览器。 （ Document ）。
2. 石器时代： 1994～2006，从静态走向动态，94 年可以看作前端历史的起点； Tim Berners-Lee 创建了 W3C， HåkonWium Lie 提出 CSS，为动态 web 网页设计的服务端脚本 PHP 诞生；
3. 铁器时代： 2006 ～ 2009， 从后端走向前端；Ajax 为大众所接受； 0 6 年 John Resig 发布了 jQuery，主要用于操作 DOM，其优雅的语法、符合直觉的事件驱动型的编程思维使其极易上手，因此很快风靡全球（MVC）；
4. 工业时代： 2009 ～ 从前端走向全端；伴随着信息时代、大数据时代的到来，jQuery 在大量的数据操作中的弊端体现出来了，它在对 DOM 进行大量的操作中，会导致页面的加载缓慢等问题，此时，前端开发人员逐渐觉得力不从心….. 由此，也开启了前端模块化、工业化进程（MVVM）。

近十年前端发展大事件

1. 2008 年，谷歌 V8 引擎发布，拉开终结微软 IE 时代序幕；
2. 2009 年，Ryan Dahl 发布 Node.js ；
3. 2009 年， AngularJS 诞生；
4. 2011 年 React 诞生；
5. 2014 年 Vue.js 诞生；
6. 2014 年 HTML5 标准制定；
7. 2015 年 6 月 ES6 正式发布；
8. 2015 年 Google 提出 PWA；
9. 2017 年 小程序正式上线；
10. 2018 年 3 月， 快应用 及联盟诞生；
11. 2018 年底， Flutter 发布第一个稳定版；
12. 2020 年 5 月 Deno 正式发布；

前端发展历史上大事件(浏览器)

1. 1991 年，第一个网页浏览器 WorldWideWeb 浏览器发布（Nexus）；
2. 1992 年， NCSA 研发出知名浏览器：Mosaic，可在窗口浏览网页；
3. 1994 年，Netscape 成立，发布第一款商业浏览器 Netscape Navigator；
4. 1995 年，微软针对 Netscape 发布了 IE，第一场浏览器之战爆发；
5. 1998 年，随着同 IE 征战的失利，Netscape 浏览器走向开源；
6. 2002 年，借助操作系统的捆绑优势，IE 赢得第一场浏览器之战；
7. 2003 年，苹果 Safari 浏览器登场，推出自己的 Webkit 引擎；
8. 2004 年，Firefox 1.0（前身 Mozilla，Netscape） 推出，引发第二轮大战；
9. 2006 年，时隔六年，微软匆匆推出 IE7 应战，徒劳无功；
10. 2008 年，Google 携 Chrome 参战，为其后来主导江山，拉开序幕；

额外可参考链接：

• A Brief History of Web Browsers and How They Work
• 浏览器 user-agent 简史

当今浏览器现状

以人为镜，可以明得失；以史为镜，可以知兴替。截止目前， Chrome 浏览器所占份额，在 70% 左右（实际上，如果按 v8 引擎来算，远比这个高很多）；了解前端这 20 余年发展历史，可以让你更好地把控这份工作。至少，你会明白，现在从事这项工作，相对是更幸福的，你无需再为兼容 IE 而头疼不已；工具的进化，让你能更「便捷」开展这项工作；时代的发展让（大）前端开发者，越发显得重要，再无需背负”切图仔”之名。

当然，在新的时代，伴随新老更替，在摒弃兼容那些陈旧的同时，也会迎来各种「新的挑战」；比方说，更多设备（IOT、穿戴设备、VR）将会基于不同应用形态，运行基于「前端技术栈」所编写的产品；就目前而言，除了运行在浏览器外，微信小程序、快应用、桌面应用、 穿戴设备，基于前端技术栈产品，已渗透颇多。

Web 前端学习方法论

学习方法

多阅读，多编码，多改进；勤于总结，保持激情 & 好奇 & 专注（孰能生巧）。

把握原则

1. 提升搜商：相比于情商和智商，搜商更是不能或缺（Google）；
2. 注重基础：前端知识点多且杂，更新又快，夯实基础，方能快速迎新；
3. 精益求精：遇到问题，通过搜索等，一定要弄明白为止，且举一反三；
4. 二八原则：“学以致用”，不必执着于快速掌握所有，时间有限，分优先级；
5. 立足于己：找到适合自己的方法论，系统性建立属于自己知识体系；
6. 重视效率：大时代裹挟之下：要够快；优化自己的工作流、机制、习惯；
7. 放眼团队：从业务和工程角度，思考前端团队亟需提升的点及发展需要；
8. 寓学于乐：须知“飘风不终朝（zhāo），骤雨不终日”，当懂得「劳逸结合」；

可参考链接

• 20 Google Search Tips to Use Google More Efficiently
• 如何更好地运用 Google Chrome
• How To Ask Questions The Smart Way | 提问的智慧
• The Book Of Secret Knowledge
• 与时俱进版前端资源教程 | Github
• Roadmap to becoming a web developer in 2019 | Github

如何开始学习前端？

学习方向：从前面的历史中，我们可以了解到，一些中间性产物如 IE 浏览器、DreamWeaver、以及 jQuery，Backbone.js 等，已然完成了其历史使命；而我们所要学习的，除了基础知识技能（&必要工具）外，即过度至而今流行技术。如在工作中遇到历史遗留产物，可秉承“「学以致用」”的原则，再去了解。

学习起点：如今的前端，涉及场景已非常之多；其所牵扯的技术栈，更是多不可数；浏览器、编辑器、框架、构建、发布、网络、调试、测试、模块化、优化、工程化、后台…… 乃至近几年陆续流行开来的各类小程序、快应用等，万变不离其宗，都是围绕前端三剑客： HTML，CSS，JavaScript 而扩展开来的存在。其中： HTML 为骨架，CSS 为外貌，JavaScript 为交互。

循序渐进：在后面的诸多课程中，都是以这三项基础而开展。或编写、或框架、或调试、或编译、或工程化。而我们所要完成的大作业，也是跟这三剑客息息相关。可喜的是，前端入门，堪称是最为简单的了：用任何编译工具，新建立一个文件（即便是写一个 index.txt） ，写入些内容后将其保存为 index.html (也可以是 htm)，用浏览器打开，就可以看到所呈现出的简单页面。

前端开发需要学习哪些？

早年，在一篇博文 如何写一手漂亮的 Vue 中，有写几句随言：

身在程序的江湖，如你是一位即将出征武士，对决于浩瀚无尽的需求大军；那么你不仅需要一副好的体格，还需要一身技艺：而这 软件工程学(抑或加算法)就好比内功（查克拉）；而所使用的 各家语言，则好如武学招式（独孤九剑？）；那加以利用的各种工具，当如随身利器（小李飞刀？）；那属于自己一套极致开发流程，便是轻功（凌波微步？）……如是斯言，那么作为开发者的你，几技傍身耶？

如今，多年过去，对其中阐述的观点，依旧认可。如果将编程开发工作中，需要用到的「软硬技能」，对标成行走江湖的「文治武功」， 以我目前的思考看来，至少需要：基本功、轻功、内功、谋略策略等。

基本功

万丈高楼平地起，扎实的基本功，或可让以后的精修之路，能更加快捷。就这些年经历来看，最重要的基本功当数「学习能力」（自学）；这么谈颇有些抽象，可将其拆分为：问题搜索能力、文档阅读能力、感知分析能力、逻辑思维能力、问题抽象能力等等。这些能力，皆非朝夕可至，需要长期坚持正循环：「学习、运用、改进」。好如肠胃的消化能力，即便通过常年修理那，已经具备，但仍需勤加养护，否则就会导致反噬。如何修炼「自学习能力」，每个人都有自己的方法，在此就不多赘谈。

“首先得是一位程序员，然后才是一位「前端程序员」”。诸如计算机原理、数据结构、网络等大学时代所学的基础知识，也该属于必备基本功。于前端开发而言，额外需要具备的基本功是：

Web 前端三剑客：Front-end web development is the practice of converting data to graphical interface for user to view and interact with data through digital interaction using HTML, CSS and JavaScript  (前端 Web 开发，是将数据转换为图形界面的实践，供用户使用 HTML，CSS 和 JavaScript 通过数字交互查看数据并与之交互)。——维基百科。

HTML(5) ：（超文本标记语言 —— HyperText Markup Language）是构成 Web 世界的基石。

JavaScript(6) ：JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

CSS(3) ：层叠样式表（Cascading Style Sheets）是一种用来表现 HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

温馨提示：良好的基本功，至少需要勤奋好学、端正心态、持之以恒。

招式

在掌握了武学基本功之后，与人切磋，就好比是要解决「各类需求」，合乎时宜的招数/套路（如独孤九剑），显得很重要。Web 网页开发，只借助 Web 前端三剑客，当然可以完成，可在如今时代，势必是低效的选择。选择合适「框架」，诸如 React 、 Vue.js ，来提升开发效率，则为更为明智的选择。

• 前端：ES6、 TypeScript 、 Vue.js ｜ React | Svelte | AngularJS 、Webpack ｜ Vite .....
• 后端：Node.js(Koa2) ｜ Python 、Nginx、MySQL | MongoDb 、 Redis .....

兵器

工欲善其事，必先利其器。「工具」的重要性，实在无须多言；它，从生到死，这期间的每时每刻，它几乎都陪伴着你我。在编程开发中，配备适合自己的工具，犹如上阵杀敌携带的「兵器」，从长期效果看，大有「失之毫厘差之千里」之势；就自己而言，使用 MacOS 开发，远比基于 Windows 系统要高效，而且心情、心境也会好很多。对于工具选取，建议认真对待。前端开发中，所常用工具粗列有：

• 代码编辑器： VsCode ｜ SublimeText3 ｜ Atom、Vim .....
• 代码规范： Prettier 、Eslint、 Airbnb ......
• 代码提交： Git 、 iTerm2 、Husky、lint-staged、pre-commit、 Gitmoji ......
• 软件应用： Chrome 、 Docker 、 XMind 、 Fig 、 Obsidian ......
• 在线服务： Github 、 Gitlab 、 Jenkins 、CI/CD、 Sentry .....
• 硬件工具：Mac、趁手键盘、人体工学座椅、防噪音耳机......

轻功

国漫《秦时明月》中，白凤有句台词，非常喜欢：“轻功不代表武功，但速度决定了你我的距离”。在软件开发中，智能化、自动化 趋势越发明显，作为程序员如不能尽快适应，其所面临的窘境可想而知；势必会在科技的浪潮中捉襟见肘；所以这更加要求从业者能快准稳的去解决需求，同时保持知识技能的不断 更新。

而这 快 字，自然是业务技能熟练度多半取决定性作用，但如果能简化、优化的工作流机制，势必锦上添花。而这个话题，所涉及的点线面，非一言可蔽之；这需要在渐进的学习探索中，不断去变化更新。但至少一个当前的准则是：即便不能全自动，至少也须半自动化。

当前阶段，所能给出的建议是：摒除盲忙，予勤于思；善于去发现效率问题，利用抽象思维，剥离精确性部分，借助已有工具或代码脚本，来代替人工手动处理，从而提升整理效率，并形成复用；再之后，坚持、反复坚持。

内功

金庸先生在《倚天屠龙记》中写道：他强由他强，清风拂山岗；他横由他横，明月照大江。他自狠来他自恶，我自一口真气足。在编程开发中，亦是同理；拥有扎实功底，掌握「核心原理」，方能在不断变迁的浪潮中，快速掌握精髓，紧跟时代步伐，从而利于不败之地。

何为编程内功？编程通用性知识，如算法、数据结构、重构、性能优化、面向对象编程、函数式编程等，当然可算为内功。但，可以更宽泛去看，任何工具或框架，在能够熟练使用基础上，深层次 掌握其设计、优劣，这便也是在修炼内功。就拿汽车而言，会开只是掌握了这个代步工具的玩儿法；能清楚知晓其构造，坏了可修，有部件能组装，这个阶段才算是增添了份「技能」。

内功修炼，非朝夕可至。在上述方向上的精修，实际就是内功的提炼，尤其在解决所遇到些问题时，这是自我提升的良机。编程通用性知识，如函数式编程、面向对象编程、设计模式，也可以逐步学习深入；此外，抽空建议读一读《代码大全》、《重构 · 改善既有代码的设计》等著作。

谋略策略

《孙子兵法·谋攻篇》中写道：上兵伐谋，其次伐交，其次伐兵，其下攻城。在编程开发领域，尤其明显── 必要时，再编写必要的代码。程序员，不该只是需求的实现者；更须参与到产品设计阶段，贡献自己所知、所学，以促进产品更有可行性、良好体验。即便到了实现阶段，也该先「三思（设计）后行（编码）」。Elon Musk 在经历生产系统过程中的惨痛教训后，总结五步工作法，与君共勉：

优秀工程师犯的最大错误，就是持续优化一个不该存在的东西。所以我要求所有人走完基于第一性原理的流程，第一步是约束和优化需求，让它不繁琐；第二步是删除冗余的零件或工艺步骤；如果你没有把你删除的东西的 10% 又加回来，那意味着还可以继续删除；第三步是简化和优化的迭代；第四步是加快生产速度，第五步是实现自动化；因为我也经常犯这种顺序性的错误，所以我经常告诫自己这才是正确的顺序。—— Elon Musk

概括性来讲即为：验证你的需求、最少的流程、简化和优化、加速迭代、自动化。对于工作中遇到的诉求，或者接下来所要完成的「大作业」，建议参考黄金圈理论（The Golden Circle）：在关注事物之时，更多关注背后的 WHY， 而不要只看到外部的 WHAT；并构建持续的迭代循环（Why => How => What），以此驱动：做正确的事 & 正确的做事。当然，真正做到这些，需要涉及到敏捷思维、产品思维、沟通技巧、项目架构等，可循序渐进、次第体悟、不断更善。

学习参考资料

• Awesome-Mac ：收集了各种类别的出色 macOS 软件，可选取适合自己，以提升工作效率；
• Nice Front-End Tutorial ：与时俱进版前端资源，教程和意见，可以查找些学习方向、资料；
• 现代 JavaScript 教程：以最新的 JS 标准为基准。通过简单但足够详细的内容，为你讲解从基础到高阶的 JS 相关知识；
• ECMAScript 6 入门教程 ：开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性；
• HTML 初学者教程 ：HTML（超文本标记语言）是构成 Web 世界的砖瓦，它定义了网页内容的含义和结构；
• React ：用于构建用户界面的主流  JavaScript  库，革命性创新，设计独特、性能出众，简单易用；
• Vue3 ：一款友好的、多用途且高性能的渐进式 JavaScript 框架，灵活、高效、易用、成熟；
• Svelte ：一种构建 Web 应用程序的新方法；将浏览器中完成大部分工作，转移到构建应用程序时的编译步骤；
• Webpack：是一个用于现代 JavaScript 应用程序的静态模块打包工具，能够转换、捆绑或构建几乎任何资源。
• Vite：一个基于浏览器原生 ES imports 的开发服务器（下一代 Web 前端构建工具）；
• Refactoring.Guru ：免费、在线学习代码「重构」和「设计模式」的网站，强烈推荐收藏 & 阅读；
• Clean Code JavaScript：🛁 Clean Code concepts adapted for JavaScript.
• Front-End-Checklist ：The perfect Front-End Checklist for modern websites and meticulous developers.
• Frontend Developer Roadmap：Step by step guide to becoming a modern frontend developer in 2022；
• JavaScript The Right Way ：旨在向新开发人员介绍 JavaScript，并帮助有经验的开发人员更多地了解其最佳实践；
• 前端精读 weekly：前端精读周刊（Github 开源项目，20k Star）。帮你理解最前沿、实用的技术。

大作业

题目：做一款「代办清单/To Do List」类 Web 应用；具体交互设计、UI 设计不限，可参考优秀 Web 或原生应用。
目的：“学以致用”，旨在训练各位学习能力（包含：如何 搜索、提问、使用框架、工具、及发现、解决未知问题）和思维能力（包含产品思维、敏捷思维、逻辑思维等）。
时间：直至本次培训结束；有效时间，大致三个周。
技术栈：不限；框架可以是 React、Vue.js 或 Web Components；构建工具可选 Vite、Webpack 或 rollup.js。

备注：写于 2022/07/10 ~ 2022/07/21，〔深圳福田〕；首发于最新基于 Wiki.js 搭建的网站：前端异空间｜ 清风明月阁。

您可能感兴趣的文章

• 微话搭建优质 Web 应用其二：AMP 篇
• 2022，值得学习系列之：函数式编程
• 如何防范 CSRF 跨站请求伪造？；
• H5 拉起微信小程序流程解析；
• Web 开发中，较有用的一些 API 分享；
• 腾讯云服务器使用感受，及折腾笔记；
• 如何基于 npm 在安装时为依赖重命名？；
• 如何为 nginx 配置多个域名服务？；
• 如何基于 Flarum 搭建一个优雅简洁论坛？；
• Linux 系统如何设置开机启动脚本？；
• 如何将 Flarum 论坛内容，主动推送至百度；