2019给前端的5个建议

2019农历新年行将到来，是时分总结一下团队过去一年的技术沉淀。过去一年我们支撑的数据相关业务突飞猛进，其中两个中心平台级产品代码量分别到达30+万行和80+万行，TS模块数均超越1000个，协同开发人员增加到20+人。由于历史缘由，开发框架同时基于React和Angular，思索到产品的复杂性、人员的短缺和技术背景各异，我们尝试了各种办法打磨工详细系来提升开发效率，以下是节选的5项主要办法。
一、基于Redux的状态管理
从2013年React发布至今已近6个年头，前端框架逐步构成React/Vue/Angular三足鼎立之势。几年前还在争论单向绑定和双向绑定孰优孰劣，如今三大框架曾经不谋而合选择单向绑定，双向绑定沦为单纯的语法糖。框架间的差别越来越小，加上Ant-Design/NG-ZORRO/ElementUI组件库的成熟，选择任一你熟习的框架都能高效完成业务。
那接下来中心问题是什么?我们以为是状态管理。简单应用运用组件内State便当快捷，但随着应用复杂度上升，会发现数据散落在不同的组件，组件通讯会变得异常复杂。我们先后尝试过原生Redux、分形Fractal的思绪、自研类Mobx框架、AngularService，最终以为Redux照旧是复杂应用数据流处置最佳选项之一。
庆幸的是除了React社区，Vue社区有相似的Vuex，Angular社区有NgRx也提供了简直同样的才能，以至NgRx还能够无缝运用redux-devtools来调试状态变化。
无论如何优化，一直要遵照Redux三准绳：
准绳办法引发的问题
Singlesourceoftruth组件Stateless，数据来源于Store如何组织Store？
Stateisread-only只能经过触发action来改动Stateaction数量收缩，大量榜样代码
ChangesaremadewithpurefunctionsReducer是纯函数反作用如何处置，大量榜样代码
这三个问题我们是经过自研iron-redux库来处理，以下是背后的考虑：
如何组织Action?
actiontype需求全局唯一，因而我们给actiontype添加了prefix，其实就是namespace的概念
为了追求体验，恳求(Fetch)场景需求处置3种状态，对应LOADING/SUCCESS/ERROR这3个action，我们经过FetchTypes类型来自动生成对应到3个action
如何组织Store/Reducer?
reducer和view不用逐个对应，应用中同时存在组件树和状态树，依照各自需求去组织，经过connect来绑定状态树的一个或多个分支到组件树
经过结构一些预设数据类型来减少榜样代码。关于Fetch返回的数据我们定义了AsyncTuple这品种型，减少了榜样代码
明白的组织构造，第1层是ROOT，第2层是各个页面，第3层是页面内的卡片，第4层是卡片的数据，这样划分最深处根本不会超越5层
最终我们得到如下扁平的状态树。虽庞大但有序，你能够快速而明白的访问任何数据。
如何减少榜样代码?
运用原生Redux，一个常见的恳求处置如下。十分冗余，这是Redux被很多人诟病的缘由
代码量减少三分之二!!
主要做了这2点：
引入了预设的AsyncTuple类型，就是{data:[],loading:boolean,error:boolean}这样的数据构造;
运用AsyncTuple.handleAll处置LOADING/SUCCESS/ERROR这3种action，handleAll的代码很简单，运用if判别action.type的后缀即可，源码在这里。
曾经React和Angular是两个很难调和的框架，开发中糜费了我们大量的人力。经过运用轻量级的iron-redux，完整遵照Redux中心准绳下，我们内部完成了除组件层以外简直一切代码的复用。开发标准、工具库达成分歧，开发人员可以无缝切换，框架差别带来的额外本钱降到很低。
二、全面拥抱TypeScript
TypeScript目前可谓大红大紫，依据2018stateofjs，超越50%的运用率以及90%的称心度，以至连Facebook的Jest也正在从Flow切换到TS。假如你还没有运用，能够思索切换，绝对能给项目带来很大提升。过去一年，我们从局部运用TS变为全面切换到TS，包括我们本人开发的工具库等。
TS最大的优势是它提供了强大的静态剖析才能，分离TSLint能对代码做到愈加严厉的检查约束。传统的EcmaScript由于没有静态类型，即便有了ESLint也只能做到很根本的检查，一些typo问题可能线上出了Bug后才被发现。
下图是一个前端应用常见的4层架构。代码和工具全面拥抱TS后，完成了从后端API接口到View组件的全链路静态剖析，具有了完善的代码提示和校验才能。
前后端协作简图
除了上面讲的iron-redux，我们还引入Pont完成前端取数，它能够自动把后端API映射到前端可调用的恳求办法。
Pont完成原理：
Pont(法语：桥)是我们研发的前端取数层框架。对接的后端API运用JavaSwagger，Swagger能提供一切API的元信息，包括恳求和响应的类型格式。Pont解析API元信息生成TS的取数函数，这些取数函数类型圆满，并挂载到API模块下。最终代码中取数效果是这样的：
Pont完成的效果有：
依据办法名自动匹配url、method，并且对应到prams、response类型圆满，并能自动提示
后端API接口变卦后，前端相关联的恳求会自动报错，再也不担忧后端悄然改接口前端不知晓
再也不需求前后端接口商定文档，运用代码保证前端取数和后端接口定义完整分歧
另外iron-redux能接纳到Pont接口响应数据格式，并推导出整个Redux状态树的静态类型定义，Store中的数据圆满的类型提示。效果如下：
最终TS让代码愈加强健，特别是关于大型项目，编译经过简直就代表运转正常，也给重构增加了很多自信心。
三、回归Sass/Less
2015年我们就开端理论CSSModules，包括后来的styled-components等，到2019年css-in-js计划照旧争论不休，固然它的确处理了一些CSS言语天生的问题，但同时增加了不少本钱，新手不够友好、全局款式掩盖本钱高涨、伪类处置复杂、与antd等组件库分离有坑。与此同时Sass/Less社区也在飞速开展，特别是Stylelint的成熟，能够经过技术约束的手腕来防止CSS的BadParts。
全局污染：商定每个款式文件只能有一个顶级类，如.home-page{.top-nav{/**/},.main-content{/**/}}。假如有多个顶级类，能够运用Stylelintrule检测并给出正告。
依赖管理不彻底。借助webpack的css-loader，已够用。
JS和CSS变量共享。关于JS和Sass/Less变量共享，我们探索出了本人的解法：
四、开发工具掩盖全链路
2019年，你简直不可能再开发出React/Angular/Vue级别的框架，也没必要再造Ant-Design/Ng-Zorro这样的轮子。难道就没有时机了吗?
当然有，分离你本身的产品开发流程，照旧有很多时机。下面是常规项目的开发流程图，任何一个环节只需深挖，都有提升空间。假如你能经过工具减少一个或多个环节，带来的价值更大。
单拿其中的【开发】环节展开，就有很多可扩展的场景：
一个有代表性的例子是，我们开发了国际化工具kiwi-intl。它同样具有TS的类型圆满，十分强大的文案提示，另外还有：
VSCode插件kiwilinter，自动对中文文案标红，假如已有翻译文案能自动完成交换
Shell命令全量检查出没有翻译的文案，批量提交给翻译人员
Codemod脚本自动完成旧的国际化计划向Kiwi迁移，本钱极低
除了以上三点，将来还方案开发阅读器插件来检查漏翻文案，应用Husky在git提交前对漏翻文案自动做机器翻译等等。
将来假如你只提供一个代码库，那它的价值会十分局限。你能够参照上面的图表，开发相应的扩展来丰厚生态。假如你是新手，引荐学习下编译原理和对应的扩展开发标准。
五、严厉彻底的CodeReview
过去的一年，我们一共停止了1200+屡次CodeReview(CR)，很多同事从刚开端不好意义提MR到后来追着他人Review，CR成为每个人的习气。经过CR让项目中任何一行代码都至少被两人触达过，减少了绝大多数的低级错误，提升了代码质量，这也是协助新人生长最快的方式之一。
其中一个项目MR截图
掩盖度比深度重要，掩盖度追求100%
频率比典礼感重要，坐公交蹲厕所翻开手机都能够Review他人代码，不需求特地组织会议
粒度要尽可能小，一个组件一个办法均可，能够分离GitFlow
24h小时内处置，无问题直接merge，有问题一定要留comment，并且提供action
关于亟待上线来不及Review的代码，能够先兼并上线，上线后再补充Review
需求自上而下的推进，具有完善的标准，同时定期总结Review经历来丰厚开发标准
CR并不只是为了找错，看到好的代码，不要吝啬你的赞誉
实质是鼓舞开发者间更多的沟通，相互学习，营造技术文化气氛
总结
以上5点当然不是我们技术的全部。除此之外我们还理论了挪动端开发、可视化图表/WebGL、WebWorker、GraphQL、性能优化等等，但这些还停留在术的层面，将来到一定水平会拿出来分享。
假如你也准备或正在开发复杂的前端应用，同时团队人员多样技术背景各异，能够参考以上5点，运用Redux完成标准明晰可预测的状态管理，深耕TypeScript来提升代码强健性和可维护性，借助各种Lint工具回归简双方便的CSS，不时打磨本人的开发工具来保证开发标准高效，并严厉彻底实行CodeReview促进人的交流和提升。