加强网站建设 实施政务公开,wordpress删除媒体库数据,vr全景网站开发,江苏网站建设哪家专业大家好#xff0c;我是若川。今天分享一篇「前端工程化」的好文。非广告#xff0c;请放心阅读。可点击下方卡片关注我#xff0c;或者查看系列文章。今天发文比较晚#xff0c;以往都是定时早上7:30发文#xff0c;也不知道是不是有点早。一.什么是前端工程#xff1f;一… 大家好我是若川。今天分享一篇「前端工程化」的好文。非广告请放心阅读。可点击下方卡片关注我或者查看系列文章。今天发文比较晚以往都是定时早上7:30发文也不知道是不是有点早。一.什么是前端工程一个类似的术语是软件工程Software EngineeringSoftware engineering is the systematic application of engineering approaches to the development of software.将工程方法系统化地应用到软件开发中就叫软件工程。那么紧接着又有两个问题工程方法是什么系统化怎么理解工程是指使用科学原理设计和制造机器、结构等比如修桥、铺路、建隧道、造车、盖房子Engineering is the use of scientific principles to design and build machines, structures, and other items, including bridges, tunnels, roads, vehicles, and buildings.具体到软件领域指的是以系统、严谨、可量化的方法开发、运营、维护软件软件工程包括对这些方法的应用和研究Software engineering the application of a systematic, disciplined, quantifiable approach to the development, operation and maintenance of software and the study of these approaches.所谓系统化可以理解为软件生命周期中用到的这些工程方法是互补的各自解决一部分问题联合起来保障软件的质量、交付速度等综上所述前端工程可以定义为将工程方法系统化地应用到前端开发中以系统、严谨、可量化的方法开发、运营、维护前端应用程序二.前端工程的演进历程同样先看软件工程其发展历程经历了这些关键点将计算机硬件抽象成冯·诺依曼架构进而有了软、硬件之分随着软件复杂度的上升模块化和信息隐藏的理念被提出来为了理解和管理软件开发过程软件工程变成了一个专业领域为了评估软件开发团队的能力成熟度衡量标准CMMI-DEV形成基于现代软件工程最佳实践建立起了人们普遍接受的软件工程知识体系前端工程也经历了类似的过程B/S 架构兴起进而有了前端、后端之分随着前端复杂度的上升模块复用、实践规范越来越重要为了管理和简化前端开发过程前端框架、自动化、构建系统应运而生并发展迅猛基于行业最佳实践开箱即用的框架如dva、工具体系等逐渐建立起来前端越来越重复杂度越来越高配套的前端工程体系也在不断发展和完善可简单分为开发、构建、发布 3 条主线前端框架插件化jQuery - 模块化RequireJS - 组件化React构建工具任务化grunt/gulp - 系统化webpackCI/CD工具化Jenkins - 自动化Web Hook三大主线撑起了前端工程体系系统地覆盖了前端开发的主流程其中的工程方法也彼此互补、相互影响体现在构建工具让百花齐放前端框架、类库能够无缝合作前端框架、类库也在一定程度上影响着构建工具如模块加载、CSS 预处理、甚至 CI/CD如 SSR三.面向过程视角下的前端工程体系摘自Book of Modern Front-end Tooling典型的前端工作流分为 5 个步骤开发测试构建部署监控从脚手架到监控系统配套的前端工程体系已经融入到了前端工作流的每个环节很大程度上决定着前端生产效率P.S.开发环节之前的分析、设计阶段这里不展开因为传统的软件工程方法同样适用前端项目在这个阶段并没有太大的特殊性开发阶段开发阶段的首要任务是创建样板项目一并选择前端框架、类库接着开始修改-验证的主循环主要涉及这些工程化设施脚手架创建前端应用的目录结构并生成样板代码公共库维护着可复用的 UI 组件、工具模块等公共资源包管理器引入第三方库/组件并跟踪管理这些依赖项编辑器提供语法高亮、智能提示、引用跳转等功能提升开发体验构建工具提供语法校验、编译、打包、DevServer 等功能简化工作流调试套件提供预览、DevTools、Mock、性能分析诊断等调试功能加速修改-验证的主循环测试阶段开发完成进入测试阶段先要对整体功能进行充分自测再移交专业的测试人员验证过程中需要用到工程化设施有单元测试框架提供针对组件、逻辑的测试支持静态扫描工具从代码质量、构建产物质量、最佳实践/开发规约等多个维度做静态检查自动化测试工具针对 UI 效果和业务流程提供测试支持性能测试工具监测并统计出相对准确的性能数据构建阶段不同于开发阶段在构建阶段要做更多的极限优化和流程联动涉及打包脚本在语法校验、编译、打包的基础上进行合并、压缩、代码拆分、图片处理、SSR等极限优化构建服务支持多任务并行打包、通知部署阶段最后将经过充分测试的前端应用程序部署到生产环境需要这些工程化工具发布平台将前端资源上传至 CDN 或 SSR 渲染服务或者以离线包的形式集成到移动客户端迭代管理平台提供 CI/CD 支持监控阶段前端应用程序上线之后还需要持续关注线上的实际效果和异常情况依赖这些工程设施埋点平台统计、分析业务数据跟踪性能指标监控平台观察线上的异常信息包括报错、白屏、流量异常等四.过程之间的衔接除工作流各阶段的工程设施之外前端工程的另一部分是过程之间的衔接。前者旨在提高生产效率后者要解决的是体验问题总的来看前端工程的演进体现在 2 方面协作模式多表现为新的理念、新的架构如BFF/SFF开发模式体现在新的抽象层、新的工作流上如Sass、React、webpack、甚至Cloud IDE无论是职责分工的变化还是具体工作内容的变化对开发者而言都意味着更多的学习、理解成本并最终表现在开发体验上。而面向过程间衔接的工程设施正是为了缓解这些变化带来的升级适配成本更平滑地走出过渡期例如codemod衔接新旧前端框架降低升级适配成本dva衔接 React 生态中的各种优秀理念redux、redux-saga 等降低学习成本IDE一方面打包全套工程设施降低上手成本另一方面衔接工作流的各个阶段提升开发体验理想的前端工程不仅要持续优化协作模式、提升开发效率还应该保障开箱即用的上手体验、一气呵成的衔接体验、无缝切换的升级体验五.总结从面向过程的角度来看前端工程是贯穿前端应用生命周期的一系列工程设施用来保障前端应用的开发体验、质量和交付速度具体的前端工程围绕开发、构建、发布 3 条主线展开以工具化、自动化等手段解决各个环节所遇到的问题。一方面控制前端开发的复杂度提高前端生产效率另一方面降低架构升级、协作模式变化等带来的迁移、适配成本提升开发体验参考资料大公司里怎样开发和部署前端代码如何推动前端团队的基础设施建设最近组建了一个江西人的前端交流群如果你也是江西人可以加我微信 ruochuan12 拉你进群。常驻推荐阅读我在阿里招前端我该怎么帮你现在还可以加模拟面试群如何拿下阿里巴巴 P6 的前端 Offer如何准备阿里P6/P7前端面试--项目经历准备篇大厂面试官常问的亮点该如何做出如何从初级到专家(P4-P7)打破成长瓶颈和有效突破若川知乎问答2年前端经验做的项目没什么技术含量怎么办如何准备20K的大厂前端面试常驻末尾你好我是若川江西人~(点击蓝字了解我)历时一年只写了一个学习源码整体架构系列 有哪些必看的JS库jQuery、underscore、lodash、sentry、vuex、axios、koa、redux关注若川视野回复pdf 领取优质前端书籍pdf回复1可加群长期交流学习我的博客地址https://lxchuan12.gitee.io 欢迎收藏觉得文章不错可以 分享、点赞、在看 呀^_^另外欢迎留言交流小提醒若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮欢迎点击阅读也可以星标我的公众号便于查找
