简介：
- JavaScript 运用局限普遍，静态范例言语 TypeScript 会继承取得更多开辟者的喜爱。
- 组件成为前端最基本的物料，CSS 融合在组件中(CSS in JS)的计划日益成熟。
- 前端的“端”愈来愈多， API 查询言语 GraphQL 会继承坚持高速增进 。
JavaScript 运用局限普遍，TypeScript 更受喜爱
在 github 2018 调查报告的中，JavaScript 一连多年稳居第一，成为最受迎接的开辟言语。从 Stack Overflow 的调查报告中，我们能够看到更细致的数据，恣意两个开辟者中至少有一个会 JavaScript，而且这个比例还在持续增进，从 2016年的 55.4%，到 2017年的 62.2% ，到 2018 年的 69.8%。在 npm 的调查报告中，JavaScript 生态圈也是异常繁华，module 的数目继承坚持高速增进，将其他言语远远的甩在了背面。
图一： npm 2018 调研报告 – Module Counts
从运用局限上看，JavaScript 能够写前端、效劳端、挪动端，以至还能够写物联网运用。在 npm 2018 的调研报告中，大多数 JavaScript 开辟者*写 web 前端运用(93%)和 node.js 效劳端运用(70%)。在 stateofjs 2018 的调研报告中，另有相称数目的 JavaScript 开辟者*写挪动或桌面运用，比方 Electron(19.6%)、React Native(18.7%)、Native Apps(10.6%)， Flutter 、Weex、PWA 都在 1% 之内。
备注：npm 和 stateofjs 的调研用户群体特性相似，一致归类为 JavaScript 开辟者。
图二： npm 2018 调研报告 – The JavaScript I write runs on…
值得注意的是，TypeScript 在 2018 年取得更多开辟者的喜爱。在 github 言语排行版中，TypeScript 上升了 3 名，排到了第 7 的位置。在 stateofjs 2018 的调研报告中， JavaScript 开辟者有 86.3% 情愿继承运用 ES6，有 46.7% 情愿继承运用 TypeScript。排在第三、四的是 Facebook 的 Flow 和 Reason 言语，然则占比都不高。
图三：stateofjs 2018 调研报告- JavaScript Flavors
从互联网的生长汗青的角度看，2010 年 3G (国内)最先提高，2014 年 4G 全面铺开，拉开挪动互联网的序幕。互联网从传统的内容供应者，转变成了效劳供应者。前端运用也发作的实质的转变，从传统互联网时期的内容展现，转变成了具有庞杂交互的逻辑的效劳供应窗口。跟着前端运用变得愈来愈庞杂，和 JavaScript 运用的范畴愈来愈普遍，传统 JavaScript(ES5) 已顺应庞杂的开辟需求，因而功用越发壮大的 ES6 孕育而出。
在 JavaScript 运用庞杂度不停增添的背景下，估计 2019 年，静态范例言语 TypeScript 会继承取得更多开辟者的喜爱。TypeScript 属于 ES6 的超集，一方面它能够很好的兼容 ES6 语法，另一方面它又供应了可选的静态范例搜检和接口(interface)的功用。在开辟庞杂度高、须要大规模协作的 JavaScript 运用时，TypeScript 相对 ES6 无妨是一种更好的挑选。
组件成为最基本的前端物料，CSS in JS 让组件化更完全
在 stateofjs 2018 的调研报告中， JavaScript 开辟者有 64.8% 情愿继承 React，有 28.8% 情愿继承 Vue。但依据个人视察，在国内 Vue 开辟者会比 React 多一些，这能够是由于 Vue 上手简朴而且有完美的中文文档。Angular 方面，有凌驾一半运用 Angular 框架的开辟者示意，不情愿继承运用 Angular 举行开辟了。而其他开辟框架 Preact、Ember、Polymer、JQuery 的运用量都很少。如今，React 和 Vue 已成为前端开辟框架的双雄，不会 React 或 Vue 能够连事情都不好找。
图四：stateofjs 2018 调研报告 – Front-end Frameworks
组件是 React 和 Vue 最壮大的功用之一。在 Vue 中一个 .vue 文件就是一个组件，包括 Template、JS、CSS 三个部份，个中 CSS 部份是可选的，开辟者也能够将 CSS 自力出去。在 React 中一个 .jsx 文件就是一个组件，然则 JSX 只能包括 Template、JS 两个部份，组件的 CSS 部份必需 import from 'xxx.css' 进来。
无论是 React 照样 Vue，都转变不了 CSS 全局作用域的题目。开辟者能够在一个组件中，经由过程 Selector，如 .class .id ，取到本该属于其他组件的 CSS 款式。组件本应是一个自力的作用域，然则它的 CSS 竟然是全局的！在运用庞杂度低、单人开辟的情况下 CSS 全局作用域不算大题目。然则在多人协作开辟的场景下，能够会因而致使款式争执。比方，由于引入了 B 开辟者的组件，A 开辟者的组件款式紊乱了，这就致使了较高的联调本钱。
图五：CSS document level V.S. component level
处理的思绪就是，运用 CSS in JS 的东西，使得 CSS 只对它归属的组件见效。CSS in JS 的计划有许多，主流的有：styled-components、emotion、css-modules、aphrodite、glamor、glamorous、radium、react-jss。styled-components 计划运用人数最多，emotion 计划排第二而且增进势头勇猛，而 css-modules 计划在两年前已住手保护了，不再引荐。styled-components 的写法太反直觉，个人更喜好 emotion。从下载量的增进势头来看 emotion 比 styled-components 更快。因而，假如有 CSS in JS 需求的项目，越发引荐 emotion。置信在 2019 年，CSS in JS 计划会越发成熟，我们无妨期待吧。
图六： npmtrends.com CSS in JS 计划下载量对照
“端”愈来愈多，GraphQL 继承坚持高速增进
在挪动互联网时期降临之前，传统意义上的前端只要浏览器的 PC 端。挪动互联网鼓起后，涌现了浏览器的 H5 端、iOS 端、Android 端。再厥后一些平台级 App ，比方微信、QQ，推出了本身的 JS-SDK，Hybird 也成为了新的端。近两年，微信、支付宝、百度、头条也推出了本身的小顺序平台，小顺序也成为了新的端。
每一个端都有自各儿的特性，不存在一种大一致的计划，能够适配一切的端。这致使了同一个营业，须要在 6 个端，开辟 6 次、联调 6 次。
我们假定有一个如许的 API，它包括了该营业在各个端上一切的数据，这不就处理了屡次联调的题目了嘛。虽然照样须要开辟 6 次，然则如今由于只要 1 个 API，所以联调次数变成了 1 次。然则该计划的背地的价值是，加载慢、保护本钱高。恣意 1 个端，都要猎取其他 5 个端的上差异化的数据，加载能不慢嘛。假如 API 有修正，能够会影响到 6 个端的代码，保护起来也费力。
稍作转变，如今我们假定，前端能够经由过程一种范例的 API 查询语法，精确地猎取恣意自定义的数据，在效劳端经由过程剖析前端查询语句，返回其自定义的查询数据。虽然照样 6 个端，1 个 API，然则每一个端能够只猎取本身的数据，不就处理了加载慢的题目了嘛。假如某个端须要增改猎取的数据，只须要修正这个端的查询语句即可，这不就处理了保护本钱高的题目了吗。经由过程定义一种范例的 API 查询语法，能够使得前端猎取 API 数据，就像从数据库猎取数据一样轻易和天真。
GraphQL 就定义一套范例的 API 查询语法，在坚持天真性和可保护性的前提下，极大的降低了联调本钱。
备注：GraphQL 官方运用的例子是，一个营业要要求多个 REST 范例的 API 。然则，国内一般运用的不是准守范例的 REST API ，他们的痛点在国内不那么痛，所以改用多端多 API 联调本钱高来举例。
图七：@helferjs 从REST到GraphQL
由于运用 API 查询言语 GraphQL 猎取的要领太简朴了，所以连数据管理的事省了。也就是说，运用 GraphQL 能够把 Redux、Mobx 干的活给省了。我们能够看到，在 stateofjs 2018 调研报告中， 把 GraphQL 和 Redux、Mobx 都归类为一类 —— 数据层(Data Layer)。报告中指出，有 47.2% 的 JavaScript 开辟者示意会继承运用 Redux，20.4% 会继承运用 GraphQL， 5.6% 会继承运用 Mobx。须要注意的是，有 62.5% 示意对 GraphQL 感兴趣，因而 GraphQL 取得 stateofjs 的最感兴趣奖(Highest Interest)。
图八：stateofjs 2018 调研报告 – Data Layer
估计 2019 年，GraphQL 会继承坚持高速增进，被更多的开辟者运用。在 npm 2018 调研报告中，特地指出了 GraphQL 的客户端库 Apollo 的下载量坚持着高速的增进。
图九：npm 2018 调研报告-GraphQL continues hyper-growth
