“前端基础技术体系是一个非常宽泛的概念，涉及到非常多的点，前端这个行业本身易入门难精通的一部分原因也是每一次的技术深入都需要技术广度上有提升，这些广度以前覆盖了HTTP、其他后端语言、操作系统、印刷设计等，现在由于移动设备的兴起，广度要求的点做了更多的扩充，移动设备多样化、国际化、Native技术等等。列举这些不是想说明前端有多复杂，而是技术体系本身就不是一个独立的存在，需要结合更多其他领域才能有更好的发展，其实其他技术的发展也是类似。”
背景
我司主要分to Business( toB ) / to Customer ( toC ) / 新业务 / 活动 / 小程序 这几个业务方向，人员分组是从ToB / toC / 公共 / 新业务 这4个组来分配，人员个数目前是17人，我在公共组。
我们的团队也像其他团队一样遇到了以下几个难题，比如:
- 开发规范、工具、流程不一致，团队之间缺少沟通。
- 原始的发布机制，更偏向瀑布的开发方式。
- 模块库少，代码共用少。
- 前端工作流不明确不一致，效率低，前端在业务中非常被动。
切入点
改造的切入点 和 项目初期技术选型 或 前端leader考核方向也是一样的。
第1阶段 类/库选择 -- 不同业务方向不同的技术栈选择
第2阶段 模块化/组件化开发/轮子/拓展 -- 不同业务方向不同的技术栈选择
第3阶段 代码规范/测试工具/打包编译 -- 相同的开发规范
第4阶段 开发流程/代码部署/反馈机制 -- 相同的工作流程/部署方式
第5阶段 可见数据优化 -- 缺失
第6阶段 人员 -- 横向流动/沟通成本/培训/分享/review
切入点
截止到 2018-09-01 已调整部分
- 前端仓库 svn整体迁移到 git ，从单一仓库拆分为多模块git仓库，减少不同组不同业务之间的代码耦合/权限控制关系
- 新仓库使用必须使用 前端脚手架工具sy-cli，对接部署系统，及统一的开发工作流程，收敛各前端业务组对部署系统及开发流程的重复开发及使用，降低因为部署带来的各种风险
- 完成sy-cli的小程序自动打码功能，实现同步
- 完成sy-pre的开发及使用，完成 cdn刷新/cdn上传/雪碧图在线制作的功能，已投入使用
- 完成twig模板 同步/异步使用，达到一次书写多次使用。移除原有ejs+twig混用的开发模式，减少开发难度及多种模板语法复用困难
- 增加前端日常巡检功能，每天3次周期巡查线上前端页面报错
- 使用tb/jd的前端数据衡量我们的前端页面数据，从前端无人关注报错/性能优化，到现在，每天都有人去钉钉群里关注
- 建立前端wiki主页，文档化相关脚手架工具，配置文件的说明。
截止到 2018-05-01 已调整部分
- 不同项目解耦到不同git项目库，但是工作模式/发布流程/代码规范必须基本一致 -- 减少人员沟通/流动成本 （各组已经开始拆分）
- 补齐基础文档，提高代码可读性 -- 减少人员沟通/流动成本 （每个git项目必须有详细的readme）
- 优化前端分支开发work flow -- 提高前/后端联调效率 （培训+git 权限）
- 增加browsersync -- 提高开发效率 （sy-cli集成）
- 增加yoman -- 提高开发效率 （替换为sy-cli集成）
- 把mock-server改为node中间层 -- 处理数据的代理和 Mock，url 的路由分发，还有模板渲染
截止到 2018-02-28 已调整部分
- 从Svn切换到Git -- 更加高效管理静态资源文件版本
- 修改gulp+webpack打包加入autoPrefixer/csso/imagemin/px2rem/Babel/polyfill -- 提升开发效率
- 引入standardJS + pre commit -- 约束开发规范
- web hook + Jenkins -- 收紧上传流程
- 加入打包机的机制 -- 优化发布机制
- 抽离img lazyLoad/base样式/base iconfont -- 代码共用/优化用户体验
- 完善文档机制 -- 减少人员依赖
- 开启ios/andorid webview 真机debug -- 提高开发效率
- 修改mock-server-改为express手动调用dev环境数据 -- 提高前/后端联调效率
未来需要去实现的
- 收紧与客户端交互的BridgeJS协议 -- 未进行
- 增加h5-hybrid-app页面增加 客户端缓存加载,更新机制 -- 未进行
- 调用hybrid原生组件渲染 -- 未进行
- 优化mock-server-制定规范 -- pc端小伙伴已自助完成
- 配套node服务层的加入pm2/forever/senTry - 提升稳定性和监控，稳定后部署到线上 -- 未进行
一套数据一个模板支持多端多view渲染 -- 前端书写一套模板 通过编译，编译成不同的文件给浏览器/app甚至小程序使用(php-view/小程序/native等等)- 明确前端工作，优化工作流 - 持续调整中，已完成部分自动化流程
- 代码上线后的自动反馈机制 -- 已完成，减少人员沟通/流动成本
- jenkins打包机迁移，前端资源也区分测试和生产环境，减少七牛资源消耗 -- 已完成
- 听云类似的工具去管理异常报错 -- 已完成，前端巡检工具去每天排查
团队/个人 学习方向
- 虽然是不同业务团队使用不同的技术框架，但是在开发方式/项目规范/发布流程上要尽量相同，切换的只是业务逻辑-减少横向流动成本
- 定期分享及review会议，时间不长，重在拓展知识面和团队感情提升/默契增加，多多沟通
- 在未来做hybrid开发的时候，会接触到基础的客户端开发知识，更多native的运作原理
- 本地做mock-server的时候会配置路由遇到更多服务端的知识，用nginx的时候会涉及反向代理，ssl证书等等，每个小伙伴都必须要接触，熟悉的小伙伴可以自己封装自动扫描/优化规范等等
- 目前新项目都是起步阶段，不管是封装组件/造轮子，都需要考虑稳定性/推展性/兼容性等等
- 像优秀的前端团队学习
最后
很多人觉得技术体系/框架是很虚化的东西，觉得优化/创新无非是换个框架/引个新工具/优化下之前的流程大多也都会用等等，但是其实这些改变都只是外壳，理解为什么这么设计要重要于知道如何使用，思考改变背后所引发的改变才是最大的改变。
网友评论