前端视界:我的技术与思考

2,946 阅读18分钟

前端视界:我的技术与思考

本文是我前端工作 9 年的总结,从一个比较大的宏观视角,来梳理前端世界观,希望能给大家带来一些帮助。

前言

大家好,因为过年比较忙,也有俩三个礼拜没有写点文章了,趁现在抓住过年的尾巴,还有点时间来梳理下我工作 9 年的一些思考、总结和感悟,也希望我的总结能帮助到一些还从事前端工作的朋友。

下面我会先从比较宏观的角度来梳理前端的世界观:知识体系框架及生态应用端分类业务开发场景架构设计企业级工程化性能优化软实力级别划分前端未来与AI前端学习方法论等方面总结,也分享下我的个人感悟和专栏系列,同时祝福大家都能找到自己的方向和目标。

前端世界观

front-end-world

前端说起来简单,但是要学深入学精通其实非常难,难度绝不低于后端,希望各位前端也不要妄自菲薄。下面我简述下前端的世界观和体系:

  • 知识体系:前端的知识体系其实非常多的,一个优秀的前端绝不是只会基础的HTMLCSSJavaScript,或者某个框架及生态,而是需要掌握更多的知识,包括:网络和浏览器组件库及实用工具算法和数据结构设计模式以及相应的服务端知识等。

  • 框架及生态:前端目前框架主要就是ReactVueAngular三大框架,围绕这三大框架开发了各种组件库图表库构建库路由状态管理css预处理器等生态,这些也是我们前端需要了解学习的。

  • 应用端分类:前端的复杂度就是体现在应用端,除了我们经常面对的PC端H5小程序HybridApp跨平台,还有全景图3DElectron桌面应用数据大屏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智能机器人应用

  • 学习方法论:这个学习方法论,其实不仅仅是前端学习用到,而且在所有学习时都能用到,分享给大家,希望对大家有所帮助。主要是要有搜索能力,能查找些优质的信息和知识图谱,然后尝试多种学习方式,带着问题针对性学习、最重要的是在遇到困难的时候要坚持不懈/学以致用,为了更好的学习,需要有系统性学习成一个体系,做到这一步,就要善于总结归纳举一反三,同时持续的深度学习原理和实践

前端知识体系

fe-knowledge

前端的知识体系内容非常多,上图只是列举了一部分,如果需要了解更多,需要自己去学习,下面是一些简单介绍:

  • 三驾马车:前端三大基础,分别是HTMLCSSJavaScript,学完这些就算入门了,可以开发简单的页面和个人网站了。简单的说,HTML是用来描述网页结构的,CSS是用来描述网页样式的,JavaScript是用来描述网页行为的。

  • 三大框架:在三驾马车的基础上,如果开发者想要开发企业级应用,那就需要用到框架了,目前比较流行的就是ReactVueAngular三大框架,这三大框架都是基于JavaScript的,它们都有自己的生态和社区,也都有自己的优缺点,需要根据项目需求来选择。

  • NodeJS相关构建框架:在学习三大框架时,必然要涉及到代码运行和构建的,这些构建框架就是NodeJS相关的,必须要掌握,比如WebpackVite等,如果要开发组件库和插件就需要了解 rollupgruntgulp等。

  • 组件库:如果我们使用框架去开发,那就要写组件,但也不需要所有组件都自己写,有很多生态以及给我们提供了相应的组件库。组件库是指一些常用的UI库图表库工具库动画库等,这些组件库可以帮助开发者快速开发企业级应用,提高开发效率。目前比较流行的组件库有Ant DesignElement UIVant UI等。

  • 浏览器:作为前端开发,必然要和浏览器打交道,所以要了解浏览器的知识,包括:浏览器组成渲染原理事件循环数据存储安全机制性能优化等。

  • 网络环境http:用户访问的页面数据大多数都是活的,不是静态的,所以需要了解http协议及其相关的 TCP/IP协议UDPCDNDNS等。

  • 实用工具:我们的代码除了用编辑器开发调试运行,在开发调试运行过程中还需要用到一些实用工具,比如:GitNPMChrome及插件终端MAC环境配置FTP上传MarkDown等。

  • 代码部署:在开发过程中,我们的代码需要部署到服务器上,以便用户访问,根据不同的项目需求,我们需要了解的部署工具部署知识,比如:CodeReview虚拟主机FTP上传服务器配置CI/CDSSHAPP发布等知识。

  • 计算机基础知识:如果想要更深入的学习前端和其他语言,需要了解一些计算机基础知识,比如:计算机组成结构编程语言操作系统编译原理网络协议数据库汇编等。

  • 形而上学:在学习前端的过程中,我们需要了解一些形而上学的知识,比如:设计模式算法和数据结构设计原则软件工程软件工程实践等。

  • 服务端知识:除了前端知识,我们还需要了解一些服务端知识,比如:常用语言数据库Web框架中间件和工具其他技术等。

前端框架及生态

fe-framework-ecology

前端的框架和生态非常多,上图也只是列举了一部分,如果需要了解更多,需要自己去学习,下面是一些简单介绍:

  • ReactReact是目前最流行的前端框架之一,它采用了组件化的开发模式,通过虚拟DOM来优化性能,支持JSX单向数据流

  • VueVue是另一个流行的前端框架,支持组件化双向数据绑定响应式系统渐进式框架

  • AngularAngular是一个全栈框架,它采用了模块化设计,支持依赖注入双向数据绑定模板语法

为了配合这 3 大框架,除了官方推荐的状态管理路由库UI组件工具链脚手架等,还衍生出非常多的生态,简单举例:

  • 工具库:包括设计数据处理网络请求封装日期时间处理响应式编程库等。

  • CSS预处理器:包括SASSLESSStylus等。

  • CSS后处理器:包括PostCSSAutoprefixer等。

  • 代码规范工具:包括ESLintPrettierStylelintEditorConfigGit Hooks等。

前端应用端分类

fe-application-classification

前端的应用端很广泛,如上图所示,前端的应用端包括:PC网站H5移动端小程序HybridApp跨平台App大屏可视化3D全景图Electron桌面应用H5游戏AR/VR/可穿戴设备Web3.0AIGC,也根据其应用场景特点开发要点进行了分栏归类。

前端业务开发场景

fe-business-scenario

前端的业务开发场景特别多,那针对不同的业务场景,在开发过程中需要注意不同的开发重点,技术栈的选型也非常关键,需根据项目大小及性能和开发重点选择合适的技术栈。

  • 企业PC官网/宣传网站:使用 VueReact,注重浏览器兼容性、页面加载速度SEO优化

  • 响应式H5网站/小程序:使用 H5CSS3(媒体查询)Vue,注重适配多屏优化体验符合平台规范

  • CMS/CRM后台管理系统/论坛博客:使用 VueReact,注重用户体验表单处理数据安全多用户并发支持

  • 电子商务平台/APP:使用 VueReactReact Native原生,注重搜索效率购物车稳定性支付安全用户体验优化

  • SASS/PASS平台:使用 VueReact,注重多租户数据隔离资源动态分配数据安全平台稳定性

  • 数据可视化:使用 EchartsD3.js,注重图表准确性数据交互性能优化

  • 第三方服务/插件/组件库:使用 JSAPIRollup,注重兼容性可复用性性能优化

  • 低代码/无代码平台:使用 VueReact拖拽插件,注重组件丰富性应用稳定性配置灵活性

  • PWA离线应用/物联网/机器人应用:使用 Service Worker通信协议ROS,注重离线体验设备兼容性控制能力

  • Web3.0/人工智能AI应用:使用 区块链技术TensorFlowPyTorch,注重安全性模型准确性隐私保护

  • 小游戏:使用 HTML5CSS3CanvasCocos CreatorEgret Engine,注重性能优化用户体验社交功能跨平台兼容性

前端架构设计

fe-architecture-design

前端项目架构设计非常复杂,涉及:基础框架选型构建工具代码规范工具状态管理UI框架公共组件封装国际化测试框架监控与日志前端安全微前端框架,上图中我已经说明了其相应模块功能的作用常见框架、工具和措施,以及其在架构设计中的重要性

前端企业级工程化

fe-engineering

前端的企业级工程化是有一定流程的,涉及多个阶段,需要根据项目需求和团队情况进行设计和实施。下面是前端企业级工程化的主要阶段:

  • 业务需求阶段业务需求导入制度规范文档沉淀

  • 技术开发阶段前端基础框架搭建技术中台封装业务需求开发

  • 测试联调阶段自动化测试代码构建部署

  • 投产阶段CI/CD部署web服务

  • 生产运维阶段性能调优/数据埋点数据可视化/日志监控异常预警/上报BUG反馈

前端性能优化

fe-performance-optimization

如上图所示,前端性能优化的维度和流程很多,具体优化流程如下:

  • 评估当前性能:使用 LighthousePageSpeed Insights 等工具评估当前性能,确定优化目标。

  • 优化关键指标:根据评估结果,优先优化首屏加载时间最大内容绘制时间等关键指标。

  • 构建优化:通过代码分割Tree-shaking压缩资源等手段优化构建过程。

  • 资源优化:优化图片字体视频等资源,减少文件大小加载时间

  • 网络请求优化:减少 HTTP 请求,使用 HTTP/2HTTP/3,实现懒加载

  • 代码优化优化代码逻辑,减少冗余代码提升算法效率

  • 服务器优化优化服务器配置,使用 CDN 加速静态资源。

  • 性能监控:部署性能监控工具,实时监控性能指标,收集用户反馈

  • 持续优化:根据监控数据和用户反馈持续优化性能,定期评估优化效果。

前端软实力

fe-softpower

如上图所示,前端开发的软实力是指除了技术能力之外,开发者在工作中需要具备的其他重要能力。这些能力对于个人的职业发展、团队协作以及项目成功都至关重要。

前端开发级别划分

fe-level

前端工程师的级别划分通常根据工作经验、技术能力、项目管理能力及团队协作能力等多个维度进行评估。上图是常见的级别划分方式,也是我比较认可的,根据个人能力划分的层次。

前端未来与AI

fe-future-ai

如上图所示,前端不会凋零,凋零的只是不学习的老兵,未来前端前端技术将朝着更高效、更智能的方向发展。

  • 主流框架如 ReactVueAngular 等将持续更新,集成服务端渲染(SSR)、静态生成(SSG)等功能,简化全栈开发流程。构建工具如 ViteTurbopack 将逐渐取代 Webpack,显著提升开发体验。

  • TypeScript 将成为前端开发的标配,同时 WebAssembly(Wasm) 将更广泛地融入前端工作流,支持复杂应用。微前端架构和模块化技术将更普及,提高协作效率。

  • 全栈框架将进一步普及,前端开发者需掌握更多后端知识

  • 边缘计算实时数据处理将下沉至更多场景,提升性能。

  • Web3.0技术将逐步完善,去中心化应用(DApp)在前端的集成将成为趋势。

  • AI技术将深度融入前端开发,从智能代码生成自动化测试,再到个性化用户体验,AI 将成为前端开发的重要助力

前端学习方法论

fe-study-method

刚刚说了,前端不会凋零,会凋零的是老兵,这就需要我们不断的学习努力,跟上时代的步伐。因此,我总结了一些学习方法论,希望能帮助大家在学习中更加高效、更加深入。

工欲善其事,必先利其器,我们先要找到优质的学习资料和知识图谱,做我们的导师,然后尝试多种方法去学习,最好带着问题去学习,能让自己记忆更深刻。同时也要坚持不懈,学以致用,不能三天打鱼,两天晒网,要深度的系统性学习。最后做到总结归纳、举一反三,深度学习原理。

我的未来道路

在写这篇文章的时候,我刚好春节前被裁失业了,我的前端职业生涯道路可以说是遇到了一个小坎儿,我也在不断的学习中,希望我能在未来的道路上走的更远。

最近这一年多的时间里,我对前端、社会和就业、生活都有了一些新的感悟和思考,也有了一些新的计划和目标。

之前我也写过文章,阐明了我未来前端之路,人到中年,更多的是被改变,但也正是这个改变说不定能让自己脱胎换骨,让自己的人生更加精彩。

未来,我会更多的关注前端知识体系的总结归纳,形成自己的知识图谱,不断的分享给同道中人,帮助大家一起走下去,也帮助我走下去。

同时,也会尝试更多的自媒体、公众号、博客等平台,来进行知识变现。

最后,慢慢的走上全栈开发 -> 小游戏开发 -> 独立开发者这条被大家不认可的不归路。

当然,也会积极的寻找新的工作,在前端这个岗位上发光发热。

家庭和个人

人到中年,身不由己。作为已婚已育的人士,家庭和日常生活也会变得更加重要,个人的比重其实越来越少了,但这也是成熟的表现。

从家庭的角度来说,我会更多的关注夫妻感情、子女教育、家庭生活的平衡。更多的会引导孩子使用我总结的学习方法论,未来他可能不会从事前端行业,但也会受益非浅。

从个人的角度来说,我会更多的关注个人的成长和职业发展及转型,也会更多的学习新的知识和技能。

同时,也要关注自己的身体状况,春节期间了解到,身边不少朋友和亲戚都出现了比较大的健康问题,很多都是高血压和糖尿病引起的,这也警示我要注意锻炼身体了。毕竟,身体才是革命的本钱。

我的专栏系列

在不断的总结归纳中,我也写了不少文章,其中大部分是水文,但也是有点意义的,我从中也学习到不少知识和经验。

看了下大概也有快 70 篇了,有兴趣的可以看看,也可以关注我的专栏,我会不定时的更新。

前端视界专栏

祝福大家

文章写到这里,整个前端世界观都已经分享给大家了。

同时,祝大家春节快乐,身体健康,工作顺利,家庭幸福。

对于前端的同道中人,也有句祝福:莫愁前路无知己,天下谁人不识君。

也祝福自己,长风破浪会有时,直挂云帆济沧海。