关于大前端的思考

[iloveyou11]

首先，作为一名前端人，从最开始的"前端三剑客"html、css、js开始看起，一遍遍地啃红宝书，再到接触jq，开发一些原生js应用，后来逐渐接触Vue、React等新型前端框架，还要学习node、js，逐渐接触前端工程化（项目自动化构建，如webpack，nginx、持续集成、版本控制），再到学习小程序开发、云开发模式、多端开发框架，再到学习设计模式、前端安全、性能优化等等，真可谓"路漫漫其修远兮"。因为不是科班出身，还要不停巩固自己的计算机基础知识、数据结构与算法，反复去培养自己的编程思维。做过许多大大小小的项目，经历过各种各样的坑，也是一路不停地学习、不停地总结。目前对于前端框架的设计原理、源码剖析、代码设计思想等方面非常感兴趣，也研究过vue、react等部分源码，越来越觉得多读、多分析好的框架源码是对自己一个很好的提升。目前仍然认为自己在这个方向不够深入，也是在不断地探索“大前端”之路，如何在未来能够看得更深、走得更远。

"不忘初心，方得始终。"想想自己当初是如何踏上这条路的，那时候只是觉得前端有着无限的创造力，可以自己设计精美的拥有各种特效的网站，可以自己做一些简单方便的应用，而且入门简单，也好找工作……但是现在想想，入了这个行，就很难跳出去，在学习的过程中，会愈发地感觉到前端远比自己想象中的要复杂、要求更高，而且新知识、新技术会层出不穷地出现，不断地挑战着前端人的思考能力、学习能力和吸收能力。但是这个过程也勾起了我极大的兴趣，想探索得越来越深，关注各种前端技术，跟上快速变化的节奏，去创造去沉淀。

"纵使疾风起，人生不言弃。"现在可谓是互联网寒冬时代，正是入门门槛低，导致了加入互联网行业的人越来越多，给我们的压力会越来越大。也许哪天我们还在公司上班，第二天被突然宣布部门解散也不足为奇。因此我们必须要必备危机意识，如何在这场浪潮之中仍然保证自己的竞争力？保持学习、学会思考，学会对自己的人生作出清晰的规划，特别是软件行业，给人的成长也是飞速的。

究竟什么是大前端？

“大前端”是最近起来的概念。和传统的前端相比，“大前端”有两个方面的扩展。一个是端的多样性，比如新增了iOS，Android，小程序，公众号等等。另外一个是往后端扩展，比如Node.js的兴起，或许写后端服务没有Java成熟，写BFF还是可以胜任的。“大前端”是相对于传统的前端，iOS，Android，H5等独立小团队而言的。从基础服务+业务支持两个方面，促进团队的融合。在架构，工具链，组件化等几个方面提高复用，提升效率。——出自《大前端架构思考与选择》

由上图可见，前端需要和如此多的工种打交道，也不断要求着需要具备一些其他领域的基础，至少能让沟通更加高效一些。也许你会对UI设计、后台DB、产品设计、测试、全栈领域感兴趣，在未来走上其他的职业道路也是有可能的。也有越来越多的前端人开始往全栈的方向发展，希望自己能够独自开发整个项目，也开始往项目架构等方向深入。在未来，自己在前端这个领域走了很久之后，也许会迎来新的挑战，如何突破自己呢？我们可以选择自己感兴趣的方向进行深入学习，如：

1. 全栈: 前后端开发，Node / 数据库/ Nginx / 反向代理 / 负载均衡 / PM2 / Docker 等服务端或者运维知识
2. 跨平台: Hybrid / Flutter / React Native / Swift 等
3. 视觉游戏: WebGL / 动画 / Three.js / Canvas / 游戏引擎 / VR / AR 等
4. 底层框架: 浏览器引擎 / 框架底层 / 算法 等
5. 人工智能: 机器学习 / 计算机视觉 / 前端智能化 等

之前面试时和技术大牛们交流了很多，吸收了很多的经验，故总结一下：

前端开发者必须对前端基础技能足够熟悉，了解原理和细节，基于js往上衍生，如浏览器端的js如何开发、node端的js如何来开发，并且关注研发效率、质量、性能、错误监控等等；

能够做浏览器端的开发，能够做服务器端的开发，前端要和很多的工种打交道，可以看看在其他领域我们哪些可以和它相关联的一些能力去了解和学习，可以让视野更加全面；

写代码三到五年，即将会遇到一个瓶颈：需求我都能做，我的成就感在哪里？这时应该转换一个思维：是否有更高程度的抽象，更自动化的构建，持续不断地迭代我们的生产工具和生产方式。

做一个自己的产品，做一个公众号或小程序，把所有的想法（包括技术的、或者关于产品)，在上面不断地迭代，把这个产品打磨得越来越好，让自己的技术能够在一个面或一个点上不断地提升。比如追求网站的速度（浏览器端做缓存、运行机制等等性能优化），每个人都需要打磨一个东西，到一个阶段让自己的技术不断地提升，你对技术上的思考也会随着这个产品的不断完善变得更深入。

建议：

1. 在技术上js这条路上做得足够的深，对原理掌握得足够清楚，多了解周边的技能
2. 做一个自己的产品，长年累月地去专注去打磨它改进它，加入你技术的想法

看一个技术领域如同看企业发展，马化腾回忆微信成长发展过程时说：被别人干掉不如被自己干掉，被别人革命不如革自己的命。任何技术都像企业一样有盛衰荣辱，Javascript作为一门编程语言，前端作为一个技术领域，之所以有生命力，是源自于这个领域的从业者不断突破，不断创新，不断革自己的命。
因为做浏览器，对行业发展变化属于鸭先知，移动端带来的寒意和前端技术全面退守中后台，共同释放着前端技术应用场景缩小的信号。前端技术却顽强的创新和反击，从RN和Weex带来的FE-Native混合应用开始，PWA和Hight Level Web API对Web容器性能体验优化，TypeScript带来的强类型和大型项目代码组织能力，小程序在私域流量中的发力，Node.js带来服务能力和工程能力的升级，移动端APP带来场景缩小的冲击，被前端技术自身变革发展所缓解。所谓天晴修屋顶，未来技术发展趋势和脉络如何？给前端技术带来的冲击和机遇是什么？ ——出自《掘金》

分享一些学习思维和方法:

【学习思维】
入门：

1. 兴趣是最好的老师，自律才能给你自由
2. 量变到质变：从基础开始，技术需要不断沉淀
3. 经常总结和分享

进阶：

1. 知识是无边界的，术业有专攻，往自己感兴趣的方向深挖
2. 从简单地做事，到对业务对需求有深层次的思考
3. 与同行业、同龄人对比，补足自己的不足

高阶：

1. 深入一到两个领域，能够有独特的见解以及自己的成果
2. 勇于承担与挑战，合理分配自己的时间
3. 参加交流会/技术分享大会，了解最新的知识架构

【学习方法】

初级：

1. 视频教程：慕课网（课程优质）、大B站（说实话，干货还不少）、网易云课堂，还有一些国外优质的网站，如coursera、udacity等
2. 文档教程：W3CSchool、菜鸟教程、MDN（权威手册）、多看官方文档（学习每一个新的技术栈，入门最好的方式是通过它的文档学习，可以系统的过一遍文档，手敲它每一个示例）
3. 书籍：经典书籍阅读，如js红宝书
4. 编码：一定要多写代码！！！每个知识点都写代码验证，并且能够通过项目驱动进行学习，在开发和维护项目的过程中总结经验
5. 个人博客：总结和沉淀，把学习的内容用文字的形式记录下来，整理成文，并按学习的技术方向做归类
6. 多看优质博客：推荐掘金、segmentFault、慕课网手记、CSDN、InfoQ 等中文社区，利用碎片化时间看一些高质量文章学习

中高级：

1. 书籍：找到经典书籍阅读，适当做一些学习笔记
2. 视频: 这个阶段可以深入看一些进阶类的项目开发、前端原理剖析与实现、前端架构方面的视频课程
3. 文档: 可以尝试去看一下英文文档，因为英文文档更新迭代快，有利于第一时间掌握更新动态，况且有些中文文档翻译得不够准确
4. 社区: StackOverflow、HackerNews，慕课网手记、掘金等，除了利用碎片化时间看一些高质量文章学习，也可以往上面发布一些优质文章
5. github: 关注 trending，参与开源社区的共建，并尝试自己造一些轮子
6. 个人博客深入: 坚持写博客的习惯，把工作中深入学习到的一些非敏感知识记录下来并发布，而不仅仅去发布一些基础知识的学习了
7. 原理深入: 研究常用框架背后的原理实现，不仅仅是运行时的 MVVM 框架，还可以是编译时的 webpack，能自己开发和封装框架
8. 技术视野: 除了自己工作中的使用的技术栈之外，也要了解同类其它优秀的开源技术栈，从多个维度（feature 完整性、文档、上手难度、维护力度、生态等）去做对比
9. 深入发展: 从兴趣入手，定向深入发展（算法、全栈、底层原理、视觉、人工智能等）
10. 技术交流: 着眼中国与世界，多参加技术交流会，了解国内外先进技术和前端发展趋势

---

前端知识体系整理

高级前端知识体系

初/中级前端知识体系