前端视界:我的技术与思考
本文是我前端工作 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 篇了,有兴趣的可以看看,也可以关注我的专栏,我会不定时的更新。
前端视界专栏
祝福大家
文章写到这里,整个前端世界观都已经分享给大家了。
同时,祝大家春节快乐,身体健康,工作顺利,家庭幸福。
对于前端的同道中人,也有句祝福:莫愁前路无知己,天下谁人不识君。
也祝福自己,长风破浪会有时,直挂云帆济沧海。