In the previous article has been introduced in the state on a large front-end content management, UI components, applets, cross-platform and framework layer. In this article, I will continue to introduce programming language, engineering, monitoring, testing and service side, but also on the part of the front end of the second half of the big concerns can be discussed.
Combination of individual and team experience to be a technical summary of the first half of 2019, the various technical framework / language / tool divided into two dimensions:
- Technology adoption life cycle
- Technical direction
Programming language
The current mainstream programming language has a combination ES6 / 7 + Babel after used ES6 / 7 Basic can not go back to the original ES5 era, there was the concept of class and convenience of JS code modular load module, plus each kind of syntactic sugar with the joy of dancing. Syntax async await the promise of writing alternatively, it makes the code more compact logic. ES specification is still in rapid iterations, will be an updated version every year, the introduction of many language features, while Babel blessing can be translated into the new syntax is ES5 version running in the browser.
In 2019 stateofcss have statistics on the use of CSS properties, each property represents the number of outer heard before, the inner ring represents the number of actually used.
其实CSS特性的使用覆盖面很大因素取决于浏览器的支持程度，浏览器支持越好越容易获得更高的使用率。可以看到几个高使用率的CSS特性在浏览器支持方面都非常好，除去Opera Mini和少量IE11，其他主流浏览器都能完美支持。
一个有趣的现象是在布局方面Flexbox使用率要高于Grid，可能的原因在于在低版本浏览器的支持方面Flexbox要更好，但其实在当前主流浏览器的支持度上已经没有区别。另一个因素可能是React Native也是推荐使用Flexbox来做布局，具有较大的群众基础吧。
CSS in JS的理念应该来自React Native，最开始接触的时候相当颠覆，在JS文件中直接写相应的CSS定义，使得组件内聚化达到极致，解决了css全局污染的问题。在web前端，css in js有很多的实现方式，但目前来看还是比较早期，传统的Less、Sass的这类css预处理框架已经能够比较好的解决一些问题，从编程习惯上也一脉相承，因此css in js理念不错，但要得到推广还需要时间。
CSS Houdini 提出了一个前无古人的的设想：开放 CSS 的 API 给开发者，开发者可以通过这套接口自行扩展 CSS，并提供相应的工具允许开发者介入浏览器渲染引擎的样式和布局流程中。简单的说houdini可以让大家去写css 的polyfill从而极大的改善css新特性引入的速度。不过讽刺的是，它本身也需要浏览器支持，w3c标准还处于working draft，大多数浏览器都还没很好支持，大家可以期待一下～
工程化
提到工程化先拿腾讯直播团队分享过的一张图来镇楼，很多小伙伴会狭隘的认为工程化就是webpack或者gulp打包而已，其实这个应该涵盖从项目创建、开发、编译、打包、测试、发布、监控全流程。
项目初始化 项目脚手架目前已经非常普遍，例如create-react-app或者vue-cli都是官方标准的脚手架工具。对于一些稍大的公司都建议自己包装一套自己的脚手架，这样可以沉淀很多最佳实践，例如工程目录结构、lint配置、监控配置、打点配置等等，因此脚手架是落地前端架构标准化不可或缺的一环。
本地开发 lint的规范一定要在项目初期就落地，可以直接拿airbnb的规范或者再定制化一下。lint可以极大的提升代码质量，至少从代码风格来看可以保证统一。 Sonar的引入可以进一步提升代码质量，帮助分析出潜在的问题，同时分析代码的重复率，过长的高数等等，这些都是所谓的代码bad smell，如果任其发展下去，项目维护成本会直线上升。 Mock工具的必要性在前后端联调时就能充分提现，很多时候由于前后端接口定义不清晰导致联调过程就是一个扯皮过程，如果缺乏mock工具，前端也会沦为后端接口调试的触发器，前端页面点一下，后端调试大半天，前端小伙伴们伤不起啊。Mock工具至少要有接口定义和本地mock的能力，能够极大提升大家研发体验。
打包 前端工程打包工具强烈推荐webpack 4，强大的插件能力能够让你做几乎任何事情。webpack4中引入了更为强大智能的code split能力，能够极大缩减包大小，经过实践通常减小幅度都在30%-50%，而且在打包速度上也有很大改进，通常也有30%的提升。
监控
当老板给你发一个线上问题的截屏，你本地又无法重现，又没有足够的日志，这时候是不是郁闷，和老板信任的小船说翻就翻了。
监控从能力来看分为几个阶段： 第一阶段：硬件运维能力，例如服务器运行情况，CPU、内存、磁盘、网络等等，在拓机情况下能够快速响应。 第二阶段：应用服务的监控，例如服务可用性、异常流量监控、页面接口的响应时间、App crash等等。 第三阶段：核心业务指标监控，例如业务核心链路数据同比环比的对比等等。 第四阶段：全链路的数据监控，从客户端、前端到服务层，到数据层，能够通过唯一id串联起来，可以方便回溯用户操作，重现问题现场。
很显然要做到监控这四个阶段需要做大量的基础设施，往往大厂都有一套完备的轮子。对于小团队而言，采用开源方案能够快速补全能力。
Cat 是美团开源的业界良心监控方案，对于前后端都有不错的监控能力，数据收集也很完备，能够提供实时的性能指标、健康状况、实时告警等数据，在多家互联网公司也得到实践，实属拯救码农头发的必备工具，你值得拥有～
umeng 作为移动端行为分析工具已经有非常广泛的使用，不过对于大厂而言用户数据非常关键，如果有能力还是建议自研，毕竟用户的行为数据是核心资产，将来可以基于这些数据做推荐、分析等等有价值的事情。
lighthouse/perf curve/perf budget 这些都是作为性能监控的工具，不仅仅可以得到线上环境真实数据，还能在开发阶段提前预警性能问题、落地性能优化的最佳实践，也是小伙伴们不可或缺的好伴侣～
测试
这里通常指的是自动化测试而非手工测试，从测试覆盖范围可以分为单元测试、UI测试、接口测试和功能自动化测试。我所经历的公司或团队，几乎没有能把自动化测试能够做好的，时间和需求频繁变更往往是最大的借口，不过程序员内心都不愿意写测试用例的吧（手动捂脸）。
从落地难易程度来看，接口测试和单元测试最好落地，接口不说了难度不高收益还不错，主要需要对数据准备有些要求。单元测试首推Jest，同时还能统计出覆盖率，但是单元测试要明确好可以测试的范围，一般业务逻辑和底层通用方法比较适合。所以业务逻辑代码从UI层代码抽离非常重要，这时候redux这类状态管理框架就有了天然优势了，里面reducer、action部分就可以单测覆盖。
UI的测试一般对于组件库有点帮助，简单的做法就是通过snapshot进行dom对比，简单粗暴。功能自动化很少能够落地，appium或者selenium都是其中翘楚，需要看业务情况，如果有频繁页面改动，一开始功能自动化写的爽，后续维护成本大的惊人，而且由于功能覆盖时间差，还是需要大量手动测试的。
服务端
自从出现Node之后，前端技术正式进入服务端开发，从而让前端的小伙伴们可以进行全栈的开发，技术栈的范畴变的更大，对于业务的把控能力也变强了。
Node可以带来几个明显的好处 第一，可以作为BFF(Backend for Frontend)层，解决前后端接口频繁变更的问题，通过BFF层可以实现更加灵活的接口，接口字段的过滤，接口的聚合等等 第二，可以用做SSR(Server Side Render)，通过Node层同构直出，可以将前端渲染代码放在服务端，实现首屏的服务端渲染，提升首屏渲染时间 第三，基于“只要能用JS实现，最终都会用JS实现”定律，Node让前端同学可以用JS撸后端代码，这个掌控一切的感觉太爽了~
Node也存在一些缺点 第一，需要额外的服务器，很多场景下Node层仅仅做接口透传的工作，对于服务器是一种浪费，而且作为一个核心节点如果一旦挂掉整个应用都不可用 第二，需要对Node服务有一整套的打包、部署、监控等能力，这个对于前端同学来说提出了较高的运维能力的要求，这些事情往往让前端同学苦不堪言
服务端最近可以持续关注GraphQL/Serverless，这两项技术对于前后端的架构设计都会带来深远的影响。
2019年下半年展望
中后台的重塑 针对中后台业务特点，缺乏详尽的交互设计，缺乏足够的前端资源，页面样式相对统一，业界提出通过少量代码或者无代码方式搭建中后台前端系统。目前有的一些最佳实践：Fusion Design，飞冰，Ant Design Pro。大家都是从几个方向去实现中后台前端系统的无代码化，Ant Design Pro基于Ant Design提供了一整套中后台的网站框架和页面模板，对于快速搭建很有帮助。Fusion Design和飞冰是通过打通设计和编码环节，直接从sketch文档导出相应的页面代码，也是极大的释放了前端同学码页面的工作量。
Flutter跨平台解决方案 Flutter作为一个跨多端(iOS，Android，PC，Embedded)，具有美观、快速、高效、开放的特点，目前在闲鱼、贝壳、阿里等公司都有落地场景，作为下一代跨平台解决方案我们可以持续关注，它具有一个非常宏大的野心，背靠Google大厂，能够从系统底层开始抹平各端差异，具有一个强大的技术架构来支持，长期来看还是挺值得期待的。
-
搭建服务：可以看到整个搭建服务无论是在中后台还是整个无线端，以及 PC 端都有大量场景，这样大量场景需要把整个框架标准化，希望把里面的元件、组件以及模块标准化，还希望把这样的服务能够服务于今天所有无论是中后台也好，C 端页面也好，希望有这样的体系——服务化标准化的方式服务，打通整个体系，这就是为什么把搭建服务认为是面向未来最重要的方向。
-
Serverless：可以让前端更加贴近业务，可以让更多能力下沉。前端转到 Node 体系有一个很大的挑战，但是到了 Serverless 我们可以不用关注部署，不用关注运维，不需要关注所有的 DevOps，也不需要关注底层数据库的状态，他会让我们前后端整个的体系像前后端分层一样又往前迈一步。
-
智能化：因为在 AI 来临的时候，我们能否从一个 Design 变成一个 Code？今天每个公司的前端都有大量的设计、大量原代码，我们通过大量设计稿和原代码进行机器学习，让中间的布局可学习，让中间的元件可学习，我相信未来 D2C 一定能够解决前端生产力瓶颈，让前端从今天大量低端开发、手工工作中解放出来，将精力转移到很多领域深度的参与、深度的突破。
-
IDE：今天阿里的前端我们做了叫工程中台，工程中台做到了前端代码从提交到发布的管控，当然包括中间提交之后整个代码的编译、构建、检测以及发布。但是在前台的部分，每个团队都有一个工具，而这个工具在各团队之间割裂的，无法复用。因为工程不仅仅是提交到发布，前端工程化应该从编码开始到发布，应该是一个完整的链路、完整的格局
Front-end technology stack standardization of front-end development up to now, the whole technology stack is still flourishing in the stage, but for company or team, need to gradually move towards the era of the wilderness from the era of the regular army, which need to do something on the standardization of the technology stack. For example, a team of about 10 people in the front, if the three front-end framework still exist, so precipitation technology, code reuse out of the question. So for a front-end team, standardized technology stack is very important and requires a unified scaffolding, lint configuration, mock tools, programming languages, frameworks, monitoring and so on.
Written in the last
Large front-end technology is very complex, due to the limited individual and team effort, there is always a lot of omission also need your little friends to add. For each technology adoption life cycle which have limited personal experience, always inevitable that some controversy, I can do relatively reasonable as possible.
The various technologies in different life cycles, was not intended to belittle a technology, in fact, on the contrary, can appear in Laggards cycle often explain this technology is the baptism of years, after a long period of verification. But there is always an era an era of mainstream technology, this summary of hope that we can continue to self-reflection examine the current technology stack, remain in the mainstream of the industry for the future maintenance of the project, to attract talent is helpful.
No matter what kind of technology will always be obsolete the day, as the code farmers still have to continually learn, not only aspects of Alchemy and stay above using various techniques, but also a lot of practice aspects tract, can poke surface technology, see the principle behind it and the nature of the problem.
Interested students can focus on micro-channel public number Daddy yards agriculture , from time to time to share information about investment, finance, they are: