前端2019：年度结果

在2019年，已经发生的前端开发世界正以惊人的速度发展。 该材料是我们今天发布的翻译，致力于回顾2019年的重要事件，新闻和趋势。



顺便说一下，这是我们在2018年发布的类似材料。 那里最后有一个2019年的预测部分。 我们认为，其中许多是有道理的。 本文不会没有预测，但我们不会超越自己。

关于从npm下载流行的前端框架和库

React库再次占据主导地位并继续增长，而奇怪的是，jQuery位居第二。 领导者们不远处就是Angular和Vue。 这两个框架都有一个热情的开发人员基础。 Svelte框架今年已经获得了公众的广泛关注，但是其实施还不是很活跃。


从npm下载前端框架和库（ 源 ）

WebAssembly成为HTML，CSS和JavaScript的第四种网络语言

经过了相当安静的一年，12月初的WebAssembly技术为大家所熟知。 事实上，它是W3C Web开发的官方推荐 。 W3C（万维网联盟）是致力于标准化Web技术的中央国际组织。

自2017年推出以来，WebAssembly技术已引起广泛关注。 许多人已经在使用它。 在过去的几年中，发布了WebAssembly 1.0规范；对该技术的支持已集成到所有主要的浏览器中。

与WebAssembly有关的另一条2019年新闻与Bytecode Alliance的成立有关。 联盟组织的目标是确保WebAssembly在浏览器之外的未来，并共同实施标准和提出新的标准。

我们仍在等待WebAssembly地位真正得到巩固的时刻，何时将大量实施该技术。 WebAssembly的每一项改进都使我们更加接近这一点。 当然，W3C声明是朝着在企业界将该技术合法化迈出的一大步。 我们需要继续降低进入WebAssembly编程世界的入门门槛，这将简化新的WebAssembly项目的开发。

TypeScript的使用正在迅速增长，许多开发人员承认对这种语言的热爱

2019年可以称为TypeScript年。 该语言不仅已成为解决键入JS代码问题的事实上的标准。 在个人项目和工作中，许多开发人员都比普通JavaScript更喜欢它。

在今年早些时候发布的StackOverflow 研究中 ，在开发人员最喜欢的语言排名中，TypeScript与Python排名第二，仅次于Rust。 如果同一项研究中的TypeScript上升得更高，这也就不足为奇了，其研究成果有望在2020年初实现。


许多开发人员喜欢TypeScript

TypeScript实际上已经接管了Web开发的世界。 这适用于前端和后端。 一些程序员试图将TypeScript视为另一种短期趋势。 他们以为他会分享Coffeescript的悲惨命运。 但是TypeScript已证明其在解决JS开发的根本问题方面的价值。 有种感觉，随着时间的流逝，它的受欢迎程度只会越来越高。

通过与所有主要代码编辑器集成，TypeScript为Web开发人员提供了极大的便利。 JavaScript开发人员将TypeScript视为一种工具，使用它可以减少错误。 在他们看来，TypeScript是打字代码，比JavaScript代码更容易阅读。 这些是有助于创建自文档程序的对象接口。

如果我们谈论TypeScript的流行，值得注意的是至少在2019年NPM的下载数量绕过了React。 他的下载量也比竞争对手多-Flow和Reason等项目。

我想提请您注意TypeScript和React是完全不同的技术，旨在解决不同的问题。 因此，这种比较就像比较暖和软。 这只是TypeScript受欢迎程度的展示。


TypeScript在NPM中绕过React

TypeScript 3.0于2018年底发布。 在2019年，他升级到3.7版，其中包括ECMAScript标准的最新功能，例如可选链以及仅检查null和undefined值。 新版本的TypeScript改进了与使用类型有关的功能。

React继续领先，开发人员对钩子充满热情

Vue和Angular具有专用的用户社区。 Vue在GitHub上的星级数量甚至超过了React。 但是在实际使用中，无论是程序员的个人项目还是他们的工作，React都能自信地占据第一位。

在2018年底，React团队发布了所谓的钩子。 在2019年，钩子从字面上捕获了React的世界。 绝大多数的React开发人员将它们用作管理组件状态和处理其生命周期中事件的主要机制。 在这一年中，已经写了无数有关钩子的文章，它们的使用方式变得更加清晰，最重要的React软件包已经开始提供可用于这些软件包的自定义钩子。

挂钩为程序员提供了一种使用简单简洁的语法管理功能组件的状态和生命周期的方法。 另外，React允许您创建自定义钩子，以帮助开发人员编写适合重用的代码，帮助创建可以一起使用的逻辑。 这消除了对高阶组件或渲染属性的需求。

React开发团队特别关注有助于提高工作效率的程序员和工具的便利性。 在React 16.8中钩子大声出现之后，随着库在2019年达到16.4版，其余的创新都没有那么大。

可以说，在释放钩子之后，React开发团队通过创建辅助工具专注于程序员的便利性。 程序员的便利性，他在开发React应用程序时所经历的感受已成为React Conf 2019会议的主题。首席会议发言人兼React Team Manager的Tom Ochchino表示，开发人员对React的使用基于以下三个想法：低投入障碍，高生产率，解决方案的可扩展性。 看一下React团队发布的（或计划发布的）支持这些想法的内容：

• 新版本的React Developer Tools。
• 新的性能分析器。
• 创建React App v3。
• 用于测试的实用程序更新。
• 竞争模式（预期）。
• Facebook使用的CSS-in-JS系统（预期）。
• 逐步/选择性地准备工作的预渲染页面代码（预期）。
• 对可用性进行核心改进（预期）。

人们认为，如果程序员工作愉快，那么他将取得成功，从而给用户带来积极的印象。 因此，上述的React Developer Initiative对每个人都是胜利。 这是 React Conf 2019关于预期的React功能的演讲，这是该活动所有演讲的链接。

Vue框架正在为发布版本3做准备，其使用量正在增长

也许，虽然Vue不能被称为最通用的框架，但很难不注意到围绕它已经形成了一个社区，该社区的成员对自己的业务充满热情。 众所周知，Vue在React和Angular中发挥了最大的作用，但是比它们更容易构建。 Vue的另一个重要优势是其更大的开放性，并且不受任何大型公司（如Facebook（反应是其创意）或Google（该公司支持Angular））的控制。

Vue世界中的主要新闻是即将发布的3.0版。 Alpha版本预计在今年年底发布。 今年，Vue 2.x仅收到了几处更新，已接近年初。 事实是，开发人员的所有力量都旨在发布Vue 3.0。

Vue今年发布的版本不多，这并不意味着该框架没有发生任何有趣的事情。 当Ewan Yu发布Vue的第三个版本的RFC时，社区中对更改进行了广泛的讨论。 例如，您可以在此处和此处阅读它们。

困扰Vue开发人员的主要问题是对框架API的重大更改。 但是，在出现这种负面反应之后，据说新的API将被添加到旧的API中，并且它们将与Vue 2向后兼容。许多开发人员说，如果新的Vue版本看起来不像他们想要的那样，他们将考虑切换到Svelte的能力。 人们担心Vue的变化会使该框架看起来像React。 尽管社区中的许多成员仍对框架的未来感到担忧，但仍感觉到噪音已经消退，每个人都在等待新版本的发布。

在Vue 3中，除了有争议的功能外，还将出现一些有趣的新功能和有用的更改：

• API组成。
• 更改配置和安装API。
• 碎片。
• 支持时间分片技术（实验性）。
• 支持多个v模型。
• 门户网站
• 新的自定义指令API。
• 改善反应性。
• 重写了虚拟DOM。
• 提高静态性能。
• 挂钩API支持（实验性）。
• 优化插槽生成（父组件和子组件的渲染分离）。
• 改进的TypeScript支持。

在Vue领域中，一个值得注意的事件是今年发布了Vue CLI的第4版，其主要重点是更新基本工具。

这是 Ewan Yu关于Vue的话题。

Angular的第8版和第9版以及新的Ivy编译/渲染引擎问世

当框架向开发人员规定某些操作方案时，Angular的理念帮助该工具赢得了大量用户。 Angular告诉开发人员什么是对的，什么不是，但是它提供了开发人员需要的所有工具。

这消除了讨论在项目中应包括哪些库和依赖项的许多原因。 应该注意的是，在使用React的团队中经常会出现此类问题。 另外，Angular应用程序使用TypeScript编写。 由于选择Angular的人必须同意已经为他做出了许多决定，因此该框架在各个公司中都非常受欢迎。 这种状况使开发人员可以专注于开发软件产品，而不是浪费时间考虑软件包。

2019年，发布了Angular 8版本。 同年，发布了新的Ivy编译/渲染引擎。 常春藤的主要优点是它减少了捆的大小。 但是，实际上，它为Angular带来了许多其他用途。 现在，在Angular 9发行之前，Ivy是一项可选功能。 在这里，您可以阅读Angular 8新增功能的详细信息。我特别要注意以下几点：

• 现代JavaScript代码的差异加载。
• 一个熟悉常春藤技术的机会。
• 确保Angular路由器的向后兼容性。
• 改进了网络工作者的组装。
• 能够向Angular开发人员传递有关使用Angular CLI的信息。
• 依赖关系更新。

在2019年12月期间，Angular团队正准备发布Angular 9.似乎该框架版本将于今年年底或明年年初发布。 Angular 9中最大的创新是Ivy将成为标准渲染引擎。 这是观看的视频，您可以了解有关Angular 9的更多信息。

现在比以前更加关注可访问性（a11y）和国际化（i18n）

网络应该是一个对所有人开放并可供所有人使用的空间。 结果，前端可访问性和国际化已成为优先事项。 自2015年开始JavaScript和网络快速发展之后，模式和框架终于开始稳定下来。 如今，当技术比几年前更加稳定时，这种情况使开发人员可以更加关注用于本地化应用程序并提高其可用性的工具。 这使得Web对所有类别的用户而言都是更受欢迎的地方。 我们应该为我们已经走过的这些方向感到骄傲，但是还有很多事情要做。

他们对MDN的可访问性说的是：“可访问性是一种实践，它允许尽可能多的人使用您的网站。 传统上，我们认为这是残疾人的可访问性，但实际上，这个数字包括使用移动设备或网络连接速度较慢的其他用户组。”

这就是w3.org关于国际化的看法 ：“如果您对项目进行国际化，则意味着您正在设计或创建自己的材料，应用程序，规格和其他类似资源，从而使它们可以正常使用于任何文化的用户居住在任何地区，使用任何语言，或使其易于适应此类用户。”

ES2019的功能

ECMAScript（基于JavaScript的规范）继续遵循今年的年度更新周期。 ES2019标准具有许多新功能 。 以下是其中一些：

• 方法Object.fromEntries() 。
• String.trimStart()和String.trimEnd()方法。
• JSON.stringify()方法改进了对Unicode的支持。
• Array.flat()方法。
• Array.flatMap()方法。
• 使用try/catch改进工作。
• Symbol对象的description属性。

尽管ES2019中出现了非常有趣的新功能，但即将到来的ES2020标准中可能会出现一些可能是自ES6 / ES2015以来最令人期待的事情：

• 私人班级字段。
• 可选链是obj.field?.maybe?.exists 。
• 仅检查null和undefined值undefined item ?? 'use this only if item is null/undefined' item ?? 'use this only if item is null/undefined' 。
• BigInt数据BigInt 。

爆炸扑人气

Flutter在React Native推出两年后问世，但很快就流行起来。 就GitHub上的星数而言，该项目非常接近React Native。 而且，如果该项目的受欢迎程度继续以相同的速度增长，它将很快超过React Native。 Flutter与React竞争，是另一个出色的跨平台移动应用程序开发工具。

考虑到Flutter不能像React Native那样拥有同一个友好的开发人员社区，并且使用React的Web开发人员也可以代表Flutter，这样的成功看起来尤其令人印象深刻。 Flutter的目标是成为最佳的跨平台移动开发框架。

这是一个表格，其中某些指标与React Native和Flutter相匹配。

Node.js Foundation和JS Foundation合并组成OpenJS Foundation； Node.js 12将成为LTS版本

为了支持JavaScript生态系统并加速语言的发展，Node.js Foundation和JS Foundation合并成立了OpenJS Foundation 。 此步骤的主要思想是在一个中立的组织的主持下建立合作和技术开发，该组织现在将31个开源项目联合在一起。 这些项目包括Node，jQuery和Webpack。 对于整个JS社区来说，这一举措可以看作是一项积极的运动。 它得到了领先的技术公司如Google，IBM和Microsoft的支持。

根据确定的传统，今年发布的第12版Node.js将获得长期支持（LTS，长期支持），直到2023年4月。 Node.js 12提供了许多新功能，安全更新和性能改进。 一些值得注意的创新包括对import/export结构的本地支持，对私有类字段的支持，与V8引擎版本7.4的兼容性，对TLS 1.3的支持以及其他诊断工具的出现。 这是有关Node.js 12创新的材料。

Svelte框架吸引了很多关注，但尚未得到广泛使用。

Svelte框架能够在人满为患的前端框架世界中找到自己的位置。 但是，如上所述，这尚未导致该框架的广泛使用。 如果简而言之表达Svelte的本质，那么我们可以说这是一个“简单而强大”的工具。 该项目的网站具有三个主要优势：

• 精明的开发人员编写更少的代码。
• 该框架不使用虚拟DOM。
• 他确实反应灵敏。

Svelte试图将大部分工作带到编译阶段，而不是在页面工作时在浏览器中执行任何操作。 Svelte具有基于组件的体系结构，其结构被编译为纯HTML和JavaScript。 这保证了需要更少的样板代码。 该框架使用了反应式编程的思想，该思想使您可以直接对DOM进行更改，而不必更改虚拟DOM，然后将更改与实际更改进行协调。

Svelte为前端开发人员提供了一些新颖有趣的东西，使他们没有更多的机会，但是机会更少。 在2020年，观察Svelte的成长和发展将非常有趣。 我希望我们能够看到在大型项目中使用它的示例。 与大型竞争对手React，Vue和Angular相比，这会让您知道它的外观。

静态站点仍然相关，开发人员正在介绍JAMStack

静态网站已经证明它们是网络的一部分，并且不会放弃职位。 盖茨比（Gatsby）等框架的使用扩展，Netlify等静态站点托管的快速增长，无数个没有用户界面创建CMS的新公司，都支持了这一声明。

静态站点将网络上已有的内容与新工具和库相结合。 它们使您可以创建其他项目无法比拟的项目。 我们可以使用像React这样的现代库来创建站点，然后在项目构建过程中将它们编译成静态HTML页面。 由于现在所有页面都存储为现成的，因此当客户端访问数据时，服务器不会花费资源填充数据。 页面可以立即交付给客户端，项目可以充分利用CDN缓存的优势。 这使您可以使网站的内容尽可能地靠近其用户。

创建静态网站时， JAMStack模式（JavaScript，API，标记）非常流行。 这是一种将静态站点和单页应用程序结合在一起的混合方法。 使用这种方法，页面以静态形式提供给客户端，但是当页面出现在客户端上时，它们的行为就像SPA，它们使用API​​和用户操作来更改接口状态。

PWA在增加，其实施也在增加

使用静态站点是创建极其快速的Web项目的一种方法。 但是它们并不适合所有情况。 另一个有趣的选项是渐进式Web应用程序（PWA，渐进式Web应用程序）。 PWA允许您在浏览器中缓存资源，以加快页面对用户影响的反应时间，并确保没有Internet连接的项目的效率。 此外，它们还允许您使用后台工作流，这些工作流使这些应用程序更接近本机应用程序，从而实现了推送通知的功能。

有人甚至声称PWA可以取代传统的移动应用程序。 不管怎样，应该指出的是，毫无疑问，PWA长期以来将成为公司在项目开发中使用的一系列技术的重要组成部分。

前端工具变得真正高质量

前端开发人员多年来一直在抱怨JavaScript疲劳。 但是，由于支持开源项目的人们的巨大努力，您可以看到这个问题是如何逐渐消失的。

以前，如果需要创建SPA，则需要使用Bower或NPM构建自己的依赖关系集。 有必要了解如何使用Browserify或Webpack转换代码，必须从头开始编写Express服务器，并使应用程序在库更新风暴中不停运转。

, , . , . , , Create React App, Vue CLI, Angular CLI. — Gatsby, , Expo, React Native. Next Nuxt , . GraphQL- Hasura, TypeScript- GraphQL Code Generator. Webpack. — , .

, « -»?

GraphQL ,

GraphQL , , REST. , , GraphQL. , API GitHub GraphQL , .

GraphQL- . , JSON-. API GraphQL , , API .

API GraphQL , , , TypeScript-. GraphQL Code Generator , TypeScript-, .

GraphQL . Apollo .


GraphQL

CSS-in-JS

-, , JavaScript. CSS-in-JS, , JavaScript-.

, , , JavaScript- import/export . , , , , CSS-in-JS , . , , Facebook CSS-in-JS — , .

, CSS CSS-in-JS. CSS , . , CSS-:

 // JS-  const MyComp = ({ isActive }) => {  const className = isActive ? 'active' : 'inactive';  return <div className={className}>HI</div> } // CSS- .active { color: green; } .inactive { color: red; } 

CSS-in-JS CSS- . , . , React, , . JS-, React:

 const Header = styled.div`  color: ${({ isActive }) => isActive ? 'green' : 'red'}; `; const MyComp = ({ isActive }} => (  <Header isActive={isActive}>HI</Header> ) 

styled-components emotion — CSS-in-JS-. emotion 2019 styled-components . , , , CSS-in-JS. , .


CSS-in-JS-

VS Code

IDE . , , , . -, , . , , VS Code. — , , , , .

State of JS Survey 2019 .


VS Code —

Webpack 5 -

Webpack , JavaScript-. — . Webpack , , . 5 Webpack :

• .
• .
• , , Webpack.

Jest Flow TypeScript

Facebook , Jest . Flow — TypeScript. 2019 , Jest Flow TypeScript. , TypeScript JS-. TypeScript 2020 , .

Chrome 72-78

Chrome . , -, . 2019 7 Chrome. Chrome 79 -, Chrome 80 dev-, Chrome 81 — canary-. , Chrome 2019 .

Microsoft Edge Chromium

Internet Explorer, Edge, - . , , . , - . , Microsoft Chromium Google. 2019 -.

Facebook Hermes — JavaScript- Android, React Native

Facebook , JavaScript- Android . — Hermes . Facebook React Native. , , React Native .

2020

, 2020 :

• - . PWA.
• WebAssembly , .
• GraphQL REST, , GraphQL.
• TypeScript .
• , , -. .
• CSS-in-JS , CSS, .
• «» . , . , . 2020 .
• Flutter React Native - .
• , Svelte.
• Deno ( TypeScript, Node.js).
• AR/VR A-Frame , React VR Google VR . AR/VR.
  
• - (Docker, Kubernetes).

亲爱的读者们！ -2020?