前端工程——基础

[luqin]

前端工程——基础

本文整理自：张云龙前端工程系列blog

前端是一种技术问题较少、工程问题较多的软件开发领域。

当我们要开发一款完整的Web应用时，前端将面临更多的工程问题，比如：

• 大体量：多功能、多页面、多状态、多系统；
• 大规模：多人甚至多团队合作开发；
• 高性能：CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载、移动端首屏CSS内嵌、HTTP 2.0服务端资源推送。

前端领域有哪些技术元素

前端行业经历了这么长时间的发展，技术元素非常丰富，这里列举出一般web团队需要用到的技术元素：

1. 开发规范：包括开发、部署的目录规范，编码规范等。

2. 模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。是提升前端开发效率的重要基础。

3. 组件化开发：在模块化基础上，以页面小部件(component)为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护，组件单元是资源独立的，组件在系统内可复用。比如头部(header)、尾部(footer)、搜索框(searchbar)、导航(menu)、对话框(dialog)等，甚至一些复杂的组件比如编辑器(editor)等。通常业务会针对组件化的js部分进行必要的封装，解决一些常见的组件渲染、交互问题。

4. 组件仓库：共享组件、方便复用、管理组件依赖。（暂定npm）

5. 性能优化：这里的性能优化是指能够通过工程手段保证的性能优化点。由于其内容比较丰富，就不在这里展开了，感兴趣的同学可以阅读这两篇文章 [1] [2]。性能优化是前端项目发展到一定阶段必须经历的过程。这部分我想强调的一点是 性能优化一定是一个工程问题和统计问题，不能用工程手段保证的性能优化是不靠谱的，优化时只考虑一个页面的首次加载，不考虑全局在宏观统计上的优化提升也是片面的。

   • 按需加载
   • 同步/异步加载
   • 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
   • 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化
   • 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
   • 代码校验：避免CSS表达式，避免重定向

6. 项目部署：部署按照现行业界的分工标准，虽然不是前端的工作范畴，但它对性能优化有直接的影响。合理的静态资源资源部署可以为前端性能带来较大的优化空间。

   • 缓存复用（静态资源缓存）：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存。参考文章：缓存控制
   • 文件指纹（非覆盖式发布）

7. 开发流程：完整的开发流程包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。对开发流程的改善可以大幅降低开发的时间成本。

   • 支持多模块、多仓库、多团队协作开发
   • 支持定制项目开发（定制模块，个性化）
   • 本地开发调试
   • 前后端联调
   • 提测
   • 上线

8. 开发工具：这里说的工具不是指IDE，而是工程工具。前端开发需要工具支持，这个问题的根本原因来自前端领域语言特性。前端开发所使用的语言（js、css、html）以及前端工程资源的加载与定位策略决定了前端工程必须要工具支持。前面提到的7项技术元素都直接或间接的对前端开发工具设计产生一定的影响，因此能否串联其他技术要素，使得前端开发形成一个连贯可持续优化的开发体系，工具的设计至关重要。

   • 构建（分布式）与优化工具
   • 开发-调试-部署等流程工具
   • 组件库获取、提交等相关工具
   • 文档平台工具
   • 配置发布平台工具

   以上8项，1-3是技术和业务相关的开发需求，4是技术沉淀与共享需求，5-8是工程优化需求。

组件化开发

参考

• 张云龙系列blog
• 前端工程——基础篇
• 浅谈前端集成解决方案
• 前端工程与性能优化
• 2015前端组件化框架之路