前端视界：我的技术与思考
本文是我前端工作 9 年的总结，从一个比较大的宏观视角，来梳理前端世界观，希望能给大家带来一些帮助。
前言
大家好，因为过年比较忙，也有俩三个礼拜没有写点文章了，趁现在抓住过年的尾巴，还有点时间来梳理下我工作 9 年的一些思考、总结和感悟，也希望我的总结能帮助到一些还从事前端工作的朋友。
下面我会先从比较宏观的角度来梳理前端的世界观：知识体系、框架及生态、应用端分类、业务开发场景、架构设计、企业级工程化、性能优化、软实力、级别划分、前端未来与AI、前端学习方法论等方面总结，也分享下我的个人感悟和专栏系列，同时祝福大家都能找到自己的方向和目标。
前端世界观
前端说起来简单，但是要学深入学精通其实非常难，难度绝不低于后端，希望各位前端也不要妄自菲薄。下面我简述下前端的世界观和体系：
-
知识体系：前端的知识体系其实非常多的，一个优秀的前端绝不是只会基础的
HTML、CSS、JavaScript，或者某个框架及生态，而是需要掌握更多的知识，包括：网络和浏览器、组件库及实用工具、算法和数据结构、设计模式以及相应的服务端知识等。 -
框架及生态：前端目前框架主要就是
React、Vue、Angular三大框架，围绕这三大框架开发了各种组件库、图表库、构建库、路由、状态管理、css预处理器等生态，这些也是我们前端需要了解学习的。 -
应用端分类：前端的复杂度就是体现在应用端，除了我们经常面对的
PC端、H5、小程序、HybridApp、跨平台，还有全景图、3D、Electron桌面应用、数据大屏、H5游戏、AR/VR/可穿戴设备等应用端口，所以前端面临应用端复杂度和兼容性问题，这些往往是后端或者项目经理忽视的。 -
业务开发场景：前端的业务开发场景也非常多，一般小公司和技术实力不强的公司往往主要是开发写
企业官网、H5、小程序、CMS/CRM、数据可视化、SASS/PASS平台等，而大公司和技术实力较强的公司还会开发电子商务APP、第三方服务和插件、低代码/无代码，还有的会涉及开发PWA/物联网/机器人应用、web3.0/区块链、小游戏、AI应用等。 -
架构设计：前端的项目
架构设计也非常重要，一般公司会根据业务场景来选择不同的架构设计，首先要进行基础框架选型、构建工具、对应的代码规范、全局状态、UI框架、封装业务公共组件、监控和日志管理、前端安全，根据需要再进行国际化和本地化、测试框架、微前端框架配置等。 -
企业级工程化：企业级工程化是指在企业级应用开发中，通过使用
软件工程的方法和工具来提高开发效率、质量和可维护性。首先需求阶段需要导入需求文档、规范制度进行文档沉淀，代码开发阶段需要进行基础框架搭建、技术中台封装、自动化测试，代码上线部署阶段需要进行CI/CD 流程和 Web 服务、自动化构建部署等，上线后需要进行性能调优/数据埋点、数据可视化/日志监控、异常预警和上报，生产运维等操作。 -
性能优化：
性能优化是前端开发中非常重要的一环，它直接关系到用户体验和网站的加载速度。一般要先进行优化指标分析，然后针对性的进行项目构建优化，提高开发速度，针对性的进行浏览器渲染优化、网络请求优化、资源优化，有时还需要对某些接口数据优化，同时在代码开发时进行基础框架优化、代码优化/重构、有时也需要进行服务器资源优化（配置nginx、CDN、gzip等），同时需要性能监控，如果项目实在是太老了，还需要进行架构重构。 -
软实力：
软实力是一个开发出了技术技能之外更重要的能力，很多时候能区分这个人在生活中、工作中的能力和职级，打开上升通道。软实力包括个人的学习能力、适应能力、知识储备、文档和知识分享、技术解决能力，针对团队的还有团队协作、项目管理、人员绩效管理能力，还有个人奇技淫巧、创新思维及英语能力能帮助你在团队中脱颖而出。 -
级别划分：级别的理解就非常简单了，从技术角度上来说，分为：
入门、初级、中级、高级、资深、架构、首席架构/技术专家，当然越往上越要了解后端的知识，然后转为全栈，当然从管理的觉度来说，就不是单纯的按照技术能力的觉度了，更会考虑软实力。 -
前端未来与AI：前端的发展日新月异，未来的趋势是：
新兴前端框架与技术、HTTP3/WebAssembly、微前端框架/模块化、边缘计算/实时数据处理、web3.0、全栈前端、AI开发工具及插件、AI自动化测试、AI应用/语音助手、AI智能机器人应用。 -
学习方法论：这个
学习方法论，其实不仅仅是前端学习用到，而且在所有学习时都能用到，分享给大家，希望对大家有所帮助。主要是要有搜索能力，能查找些优质的信息和知识图谱，然后尝试多种学习方式，带着问题针对性学习、最重要的是在遇到困难的时候要坚持不懈/学以致用，为了更好的学习，需要有系统性学习成一个体系，做到这一步，就要善于总结归纳、举一反三，同时持续的深度学习原理和实践。
前端知识体系
前端的知识体系内容非常多，上图只是列举了一部分，如果需要了解更多，需要自己去学习，下面是一些简单介绍：
-
三驾马车：前端三大基础，分别是
HTML、CSS、JavaScript，学完这些就算入门了，可以开发简单的页面和个人网站了。简单的说，HTML是用来描述网页结构的，CSS是用来描述网页样式的，JavaScript是用来描述网页行为的。 -
三大框架：在三驾马车的基础上，如果开发者想要开发企业级应用，那就需要用到框架了，目前比较流行的就是
React、Vue、Angular三大框架，这三大框架都是基于JavaScript的，它们都有自己的生态和社区，也都有自己的优缺点，需要根据项目需求来选择。 -
NodeJS相关构建框架：在学习三大框架时，必然要涉及到代码运行和构建的，这些构建框架就是
NodeJS相关的，必须要掌握，比如Webpack、Vite等，如果要开发组件库和插件就需要了解rollup、grunt、gulp等。 -
组件库：如果我们使用框架去开发，那就要写组件，但也不需要所有组件都自己写，有很多生态以及给我们提供了相应的
组件库。组件库是指一些常用的UI库、图表库、工具库、动画库等，这些组件库可以帮助开发者快速开发企业级应用，提高开发效率。目前比较流行的组件库有Ant Design、Element UI、Vant UI等。 -
浏览器：作为前端开发，必然要和浏览器打交道，所以要了解浏览器的知识，包括：
浏览器组成、渲染原理、事件循环、数据存储、安全机制、性能优化等。 -
网络环境http：用户访问的页面数据大多数都是活的，不是静态的，所以需要了解
http协议及其相关的TCP/IP协议、UDP、CDN、DNS等。 -
实用工具：我们的代码除了用编辑器开发调试运行，在
开发、调试、运行过程中还需要用到一些实用工具，比如：Git、NPM、Chrome及插件、终端、MAC环境配置、FTP上传、MarkDown等。 -
代码部署：在开发过程中，我们的代码需要部署到服务器上，以便用户访问，根据不同的项目需求，我们需要了解的
部署工具和部署知识，比如：CodeReview、虚拟主机、FTP上传、服务器配置、CI/CD、SSH、APP发布等知识。 -
计算机基础知识：如果想要更深入的学习前端和其他语言，需要了解一些计算机基础知识，比如：
计算机组成结构、编程语言、操作系统、编译原理、网络协议、数据库、汇编等。 -
形而上学：在学习前端的过程中，我们需要了解一些
形而上学的知识，比如：设计模式、算法和数据结构、设计原则、软件工程、软件工程实践等。 -
服务端知识：除了前端知识，我们还需要了解一些服务端知识，比如：
常用语言、数据库、Web框架、中间件和工具、其他技术等。
前端框架及生态
前端的框架和生态非常多，上图也只是列举了一部分，如果需要了解更多，需要自己去学习，下面是一些简单介绍：
-
React：
React是目前最流行的前端框架之一，它采用了组件化的开发模式，通过虚拟DOM来优化性能，支持JSX、单向数据流。 -
Vue：
Vue是另一个流行的前端框架，支持组件化、双向数据绑定、响应式系统、渐进式框架。 -
Angular：
Angular是一个全栈框架，它采用了模块化设计，支持依赖注入、双向数据绑定、模板语法。
为了配合这 3 大框架，除了官方推荐的状态管理、路由库、UI组件、工具链和脚手架等，还衍生出非常多的生态，简单举例：
-
工具库：包括
设计数据处理、网络请求封装、日期时间处理、响应式编程库等。 -
CSS预处理器：包括
SASS、LESS、Stylus等。 -
CSS后处理器：包括
PostCSS、Autoprefixer等。 -
代码规范工具：包括
ESLint、Prettier、Stylelint、EditorConfig、Git Hooks等。
前端应用端分类
前端的应用端很广泛，如上图所示，前端的应用端包括：PC网站、H5移动端、小程序、HybridApp、跨平台App、大屏可视化、3D、全景图、Electron桌面应用、H5游戏、AR/VR/可穿戴设备、Web3.0、AIGC，也根据其应用场景、特点和开发要点进行了分栏归类。
前端业务开发场景
前端的业务开发场景特别多，那针对不同的业务场景，在开发过程中需要注意不同的开发重点，技术栈的选型也非常关键，需根据项目大小及性能和开发重点选择合适的技术栈。
-
企业PC官网/宣传网站：使用
Vue、React，注重浏览器兼容性、页面加载速度、SEO优化。 -
响应式H5网站/小程序：使用
H5、CSS3（媒体查询）、Vue，注重适配多屏、优化体验、符合平台规范。 -
CMS/CRM后台管理系统/论坛博客：使用
Vue、React，注重用户体验、表单处理、数据安全、多用户并发支持。 -
电子商务平台/APP：使用
Vue、React、React Native、原生，注重搜索效率、购物车稳定性、支付安全、用户体验优化。 -
SASS/PASS平台：使用
Vue、React，注重多租户数据隔离、资源动态分配、数据安全、平台稳定性。 -
数据可视化：使用
Echarts、D3.js，注重图表准确性、数据交互、性能优化。 -
第三方服务/插件/组件库：使用
JS、API、Rollup，注重兼容性、可复用性、性能优化。 -
低代码/无代码平台：使用
Vue、React、拖拽插件，注重组件丰富性、应用稳定性、配置灵活性。 -
PWA离线应用/物联网/机器人应用：使用
Service Worker、通信协议、ROS，注重离线体验、设备兼容性、控制能力。 -
Web3.0/人工智能AI应用：使用
区块链技术、TensorFlow、PyTorch，注重安全性、模型准确性、隐私保护。 -
小游戏：使用
HTML5、CSS3、Canvas、Cocos Creator、Egret Engine，注重性能优化、用户体验、社交功能、跨平台兼容性。
前端架构设计
前端项目架构设计非常复杂，涉及：基础框架选型、构建工具、代码规范工具、状态管理、UI框架、公共组件封装、国际化、测试框架、监控与日志、前端安全、微前端框架，上图中我已经说明了其相应模块功能的作用、常见框架、工具和措施，以及其在架构设计中的重要性。
前端企业级工程化
前端的企业级工程化是有一定流程的，涉及多个阶段，需要根据项目需求和团队情况进行设计和实施。下面是前端企业级工程化的主要阶段：
-
业务需求阶段：
业务需求导入、制度规范、文档沉淀 -
技术开发阶段：
前端基础框架搭建、技术中台封装、业务需求开发 -
测试联调阶段：
自动化测试、代码构建部署 -
投产阶段：
CI/CD部署、web服务 -
生产运维阶段：
性能调优/数据埋点、数据可视化/日志监控、异常预警/上报、BUG反馈
前端性能优化
如上图所示，前端性能优化的维度和流程很多，具体优化流程如下：
-
评估当前性能：使用
Lighthouse、PageSpeed Insights等工具评估当前性能，确定优化目标。 -
优化关键指标：根据评估结果，优先优化
首屏加载时间、最大内容绘制时间等关键指标。 -
构建优化：通过
代码分割、Tree-shaking、压缩资源等手段优化构建过程。 -
资源优化：优化
图片、字体、视频等资源，减少文件大小和加载时间。 -
网络请求优化：减少
HTTP请求，使用HTTP/2或HTTP/3，实现懒加载。 -
代码优化：
优化代码逻辑，减少冗余代码，提升算法效率。 -
服务器优化：
优化服务器配置，使用CDN加速静态资源。 -
性能监控：部署
性能监控工具，实时监控性能指标，收集用户反馈。 -
持续优化：根据
监控数据和用户反馈，持续优化性能，定期评估优化效果。
前端软实力
如上图所示，前端开发的软实力是指除了技术能力之外，开发者在工作中需要具备的其他重要能力。这些能力对于个人的职业发展、团队协作以及项目成功都至关重要。
前端开发级别划分
前端工程师的级别划分通常根据工作经验、技术能力、项目管理能力及团队协作能力等多个维度进行评估。上图是常见的级别划分方式，也是我比较认可的，根据个人能力划分的层次。
前端未来与AI
如上图所示，前端不会凋零，凋零的只是不学习的老兵，未来前端前端技术将朝着更高效、更智能的方向发展。
-
主流框架如
React、Vue、Angular等将持续更新，集成服务端渲染（SSR）、静态生成（SSG）等功能，简化全栈开发流程。构建工具如Vite、Turbopack将逐渐取代Webpack，显著提升开发体验。 -
TypeScript将成为前端开发的标配，同时WebAssembly（Wasm）将更广泛地融入前端工作流，支持复杂应用。微前端架构和模块化技术将更普及，提高协作效率。 -
全栈框架将进一步普及，前端开发者需掌握更多后端知识。 -
边缘计算和实时数据处理将下沉至更多场景，提升性能。 -
Web3.0技术将逐步完善，去中心化应用（DApp）在前端的集成将成为趋势。 -
AI技术将深度融入前端开发，从智能代码生成到自动化测试，再到个性化用户体验，AI 将成为前端开发的重要助力
前端学习方法论
刚刚说了，前端不会凋零，会凋零的是老兵，这就需要我们不断的学习努力，跟上时代的步伐。因此，我总结了一些学习方法论，希望能帮助大家在学习中更加高效、更加深入。
工欲善其事，必先利其器，我们先要找到优质的学习资料和知识图谱，做我们的导师，然后尝试多种方法去学习，最好带着问题去学习，能让自己记忆更深刻。同时也要坚持不懈，学以致用，不能三天打鱼，两天晒网，要深度的系统性学习。最后做到总结归纳、举一反三，深度学习原理。
我的未来道路
在写这篇文章的时候，我刚好春节前被裁失业了，我的前端职业生涯道路可以说是遇到了一个小坎儿，我也在不断的学习中，希望我能在未来的道路上走的更远。
最近这一年多的时间里，我对前端、社会和就业、生活都有了一些新的感悟和思考，也有了一些新的计划和目标。
之前我也写过文章，阐明了我未来前端之路，人到中年，更多的是被改变，但也正是这个改变说不定能让自己脱胎换骨，让自己的人生更加精彩。
未来，我会更多的关注前端知识体系的总结归纳，形成自己的知识图谱，不断的分享给同道中人，帮助大家一起走下去，也帮助我走下去。
同时，也会尝试更多的自媒体、公众号、博客等平台，来进行知识变现。
最后，慢慢的走上全栈开发 -> 小游戏开发 -> 独立开发者这条被大家不认可的不归路。
当然，也会积极的寻找新的工作，在前端这个岗位上发光发热。
家庭和个人
人到中年，身不由己。作为已婚已育的人士，家庭和日常生活也会变得更加重要，个人的比重其实越来越少了，但这也是成熟的表现。
从家庭的角度来说，我会更多的关注夫妻感情、子女教育、家庭生活的平衡。更多的会引导孩子使用我总结的学习方法论，未来他可能不会从事前端行业，但也会受益非浅。
从个人的角度来说，我会更多的关注个人的成长和职业发展及转型，也会更多的学习新的知识和技能。
同时，也要关注自己的身体状况，春节期间了解到，身边不少朋友和亲戚都出现了比较大的健康问题，很多都是高血压和糖尿病引起的，这也警示我要注意锻炼身体了。毕竟，身体才是革命的本钱。
我的专栏系列
在不断的总结归纳中，我也写了不少文章，其中大部分是水文，但也是有点意义的，我从中也学习到不少知识和经验。
看了下大概也有快 70 篇了，有兴趣的可以看看，也可以关注我的专栏，我会不定时的更新。
前端视界专栏
祝福大家
文章写到这里，整个前端世界观都已经分享给大家了。
同时，祝大家春节快乐，身体健康，工作顺利，家庭幸福。
对于前端的同道中人，也有句祝福：莫愁前路无知己，天下谁人不识君。
也祝福自己，长风破浪会有时，直挂云帆济沧海。
