- 什么是前端集成解决方案
- 前端领域有哪些技术元素
- 前端集成解决方案
每个前端团队都在打造自己的前端开发体系，这通常是一个东拼西凑，逐渐磨合的过程，在技术发展日新月异的今天，这样的过程真的是不可抽象和复制的么？本文希望能够通过系统的拆解前端开发体系为大家提供体系设计思路参考。
什么是前端集成解决方案
前端集成解决方案，英文翻译为 Front-end Integrated Solution，缩写fis，发音[fɪs]
前端集成解决方案并不是一个新词汇，将这个词拆开来看，我们能得到：
前端：指前端领域，即web研发中常用的浏览器客户端相关技术，比如html、js、css等集成：将一些孤立的事物或元素通过某种方式改变原有的分散状态集中在一起，产生联系，从而构成一个有机整体的过程。解决方案：针对某些已经体现出的，或者可以预期的问题，不足，缺陷，需求等等，所提出的一个解决问题的方案，同时能够确保加以有效的执行
总结来说，前端集成解决方案就是：
将前端研发领域中各种分散的技术元素集中在一起，并对常见的前端开发问题、不足、缺陷和需求，所提出的一种解决问题的方案。
前端领域有哪些技术元素
前端行业经历了这么长时间的发展，技术元素非常丰富，这里列举出一般web团队需要用到的技术元素：
- 开发规范：开发、部署的目录规范、编码规范。 提升开发效率、快速定位问题，提升效率
- 模块化开发：js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等。 css解决依赖管理，组件内部样式管理
- 组件化开发：在模块化基础上，以页面小部件为单位将页面小部件的js、css、html代码片段在一起进行开发、维护，组件单元是资源独立，可复用
- 组件仓库：有了组件化，将一些非常通用的组件放到一个功能的地方供团队共享，方便新项目复用。 流行的组件库： bower
- 性能优化：通过工程手段保证的性能优化点
- 项目部署：对性能优化有直接的影响，包含静态资源缓存、cdn、非覆盖式发布等问题。合理的静态资源资源部署可以为前端性能带来较大的优化空间
- 开发流程：完整的开发流程包含本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。
- 开发工具：这里说的工具不是指IDE，而是工程工具，包括构建与优化工具、开发-调试-部署等流程工具，以及组件库获取、提交等相关工具，甚至运营、文档、配置发布等平台工具。
以上8项，1-3是技术和业务相关的开发需求，4是技术沉淀与共享需求，5-8是工程优化需求。
经过这些年的工程领域实践，个人觉得以上8项技术元素应该成为绝大多数具有一定规模的前端开发团队的标配。各位读者可以对照自己团队现状来思考一下团队开发体系还有哪些环节需要完善。
前端集成解决方案
不难发现，其实其他领域工程也基本需要解决上述这些问题。前端由于其领域语言的独特性，使得前端工程在解决这些问题上跟其他工程有很大区别，因此至今也没有形成一套比较好的理论体系指导团队实践前端工程。
- 模块化开发涉及到性能优化、对构建工具又有一定的配套实现要求，也会影响开发规范的定制
- 组件化开发应该基于模块化框架来加载其他依赖的组件，如果组件化框架自带模块管理功能，那么就可能导致工程性的性能化实现困难
- 组件库应该与组件化开发配套，组件仓库中的组件都应该按照相同的标准来实现，否则下载的组件不具有可复用性、可移植性，就是去了仓库的意义
- 我们设计的开发规范工具是否能很容易的实现，如果部署上有特殊要求，工具是否能很容易的做出调整，而不是修改规范。
- 工具是否能提供接入公司已有流程中的接口，比如命令调用，如果工具需要一些系统环境支持，公司的ci流程中是否能支持等问题。