Flutter 突飞猛进地发展，作为构建跨平台移动应用的另一个绝佳选择向 React Native 发起了挑战

React Native 推出两年后，Flutter才发布，但 Flutter 的发展非常迅速。Flutter 在GitHub上斩获了 80,500颗星，几乎赶上了 React Native 的83,000颗星，照此情形 Flutter 很快就过超越 React Native。

鉴于 Flutter 没有开发社区的推波助澜（React Web开发人员推动了React Native的发展），所以如此迅速的发展实在令人刮目相看。Flutter 正在努力打造最优秀的的跨平台移动框架。

Node.js 基金会与 JS 基金会合并成立 OpenJS 基金会：Node版本12遵循了年度长期支持发布策略

为了支持 JavaScript 生态系统并加速语言的发展，Node.js 基金会与 JS 基金会合并成立了 OpenJS 基金会。该基金会表示，希望通过中立的组织推进协作和发展，如今他们托管了31个开源项目，包括 Node、jQuery 和 Webpack。这一举动为整个JS社区带来了积极的影响，并得到了Google、IBM和微软等大公司的支持。

今年，Node发布了版本12，该版本遵循长期支持（LTS）策略，可以一直到2023年4月。Node12提供了许多新功能、安全更新和性能改进。一些值得注意的更新包括 import/export 语句的原生支持、私有类属性、兼容V8 Engine 7.4、对TLS 1.3的支持以及其他诊断工具。

随着版本3的发布Svelte 获得了关注，但在采用方面依然落后

Svelte 在竞争异常激励的前端框架世界中，找到了自己的跻身之道。但是，正如我们在本文开头的介绍，Svelte 还没有得到大量的实际应用。总的来说，Svelte“简单而强大”。Svelte 网站表明了其三大优点：

• 需要编写的代码量更少

• 没有虚拟DOM

• 真正的响应式编程

Svelte 尝试将大部分工作转移到编译过程中，减少运行时在浏览器中进行的工作。Svelte 具有基于组件的体系结构，可编译为纯 HTML 和原始 JavaScript，同时也承诺减少样板代码。它使用响应式编程来直接更新DOM，而不是利用虚拟的DOM。

Svelte 为前端领域带来了耳目一新的感觉——即提供更少的功能。2020年，Svelte 的成长和发展很让人欣慰，希望我们能够获得一些实际的例子，证明它确实能够与 React、Vue 和Angular 等强大的竞争对手一较高低。

相关视频：https://youtu.be/AdNJ3fydeao

静态网站的使用仍在持续，开发人员开始采用 JAMStack

随着 Gatsby 等框架利用率的提高，Netlify 等负责托管静态网站的公司也得到了快速增长，于是无数headless CMS公司相继出现，静态网站证明了自己是Web不可或缺的一部分。

静态网站将旧网站与新兴的工具、库和更新结合在一起，提供了无与伦比的体验。我们能够使用 React 等现代库来构建我们的网站，然后在构建时将它们编译成静态 HTML 页面。由于所有页面都是预先构建的，因此服务器不需要花费时间利用请求中的数据渲染页面，这些页面可以立即提供，并利用CDN中全局缓存的优势，尽可能迅速地将页面提供给用户。

静态网站使用的一种流行的编程模式是 JAMStack。这是一种结合了静态/ SPA的方式，这些页面都是静态提供的，但是一旦进入客户端，就会被当成SPA——通过API和用户交互来推进UI的状态。

PWA的增长和采用有所增加

虽然静态网站的速度无人能及，但也并非适合所有应用，另一个绝佳的选择是 PWA（渐进式Web应用程序）。我们可以利用 PWA 在浏览器中缓存资源，以确保页面的立即响应与离线支持。此外，在 PWA 方式中，后台工作人员还可以提供推送通知等原生功能。

甚至有人声称 PWA 可以取代原生移动应用。无论最终结果将如何，毫无疑问，在很长一段时间内 PWA 将影响各大公司构建产品的主要方式。

前端的工具越来越优秀

近几年来，前端开发人员总是抱怨厌倦了 JavaScript， 但是我们也慢慢看到，开源项目维护人员的不懈努力减轻了人们对 JavaScript 的厌倦。

以前，如果我们想构建SPA，则必须利用 Bower 或 NPM 引入依赖关系，还要掌握如何利用 Browserify 或 Webpack 进行编译，从零开始编写 Express 服务器，并在库发生更新时维护我们的应用。

多年来，我们经历了很多痛苦，但如今我们造就了最活跃、最发达的软件包生态系统。我们有很多工具可以帮助我们抽象化构建应用程序中最痛苦的部分：创建 React 应用、Vue CLI、Angular CLI、用于静态网站的Gatsby、用于 React Native 移动应用的Expo、用于SSR应用程序的Next / Nuxt、用于创建服务器的生成器、免却为GraphQL编写服务器的Hasura、使用 GraphQL 代码生成器自动生成 TypeScript 类型、Webpack不断得到简化等等，我们总能找到工具帮我们减轻繁重的工作。

也许现在我们开始厌倦了工具了？

GraphQL深受开发人员的喜爱，并在科技公司中得到进一步的采用

GraphQL 有望解决传统的基于 REST 的应用程序面临的许多问题。GraphQL 很快就获得了开发人员的喜爱，而各大科技公司也纷纷开始采用它。几年前，GitHub 用 GraphQL 编写了它的最新API，许多其他组织也在做出了同样的变革。

GraphQL 应用程序是数据驱动的（不是端点驱动），因此客户端可以声明所需的确切数据，从服务器接收相应的JSON响应。GraphQL API提供的文档记录了所有的数据及其类型，帮助开发人员更全面地了解API。

由于GraphQL API 提供了完全类型化的架构，因此它也可以与 TypeScript 应用程序很好地集成。GraphQL 可以通过 GraphQL Code Generator 等工具读取客户端代码中的查询，并将其与架构进行匹配，以提供在整个应用程序中流动的 TypeScript 类型。

在过去的一年中，GraphQL 的下载量增加了一倍，而 Apollo 也开始朝着使用最广泛的框架迈进。

CSS-in-JS的发展势不可挡

Web开发的发展大有让 JavaScript 一统天下的趋势，CSS-in-JS 的采用充分体现了这一点，因为这些CSS样式都是使用 JavaScript 字符串创建的。

在这种方式下，我们可以通过 import/export ，利用常规的 JavaScript 语法共享样式和依赖项。由于CSS-in-JS组件可以将 props 插入到样式字符串中，因此简化了动态样式。如前所述，Facebook 甚至认为 CSS-in -JS 可能会成为前端的未来，并即将发布自己的库。

下面是一个经典的 CSS 与 CSS-in-JS 的示例。如果用普通CSS处理动态样式，那么你必须管理组件中的类名称，并根据 state/props 进行更新。而且你还需要为每种变化建立一个CSS类：

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

在 CSS-in -JS 中，你不再需要管理CSS类。你只需要将 props 传递给样式化的组件，而它会利用声明式的语法处理动态样式。这些代码更为简洁，而且由CSS管理基于 props 的动态样式后，我们就可以将样式与 React 相分离。实际的代码读起来与正常的 React 和 JavaScript 代码并无二样：

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

styled-components 和 emotion 是 CSS-in-JS 的两个主要库，而且2019年 emotion 的下载超过了 styled-components。从增长幅度来看，这两个库遥遥领先于其他 CSS-in-JS 库，而且它们还将持续快速增长。

VS Code是文本编辑器市场上的主宰

开发人员对于IDE /文本编辑器充满了热情，他们会没完没了地争论为什么自己的编辑器才是最佳选择。然而，前端开发人员不约而同地选择了 VS Code。VS Code 是一款开源编辑器，它提供的插件为开发人员提供了无与伦比的体验。

根据“2018年JS的状况调查”（地址：https://2018.stateofjs.com/other-tools/），文本编辑器的使用情况如下（2019年的调查发布时，下图将被更新）：

Webpack 5 已进入测试阶段且即将发布

Webpack 已成为所有现代 JavaScript 工具链的核心组件，而且也是最常用的构建工具。Webpack 一直在提高性能和可用性，努力为开发人员提供更好的工具。Webpack 5 主要侧重于以下几个方面：

• 通过持久缓存提高构建性能；

• 通过更好的算法和默认值来改善长期缓存；

• 清理内部模式，同时不会引发任何重大变动。

Jest 放弃 Flow，转投 TypeScript 的怀抱

Facebook 维护着流行的测试库 Jest 和 Flow，后者是 TypeScript 的竞争对手。2019年初，Facebook 大胆声明 Jest 将放弃Flow，转投 TypeScript 的怀抱。这进一步表明 TypeScript 已成为输入 JavaScript 代码的标准选择，2020年及以后 TypeScript 的使用会进一步增加。

2019年Chrome 发布了稳定版本 72–78

Chrome 快速迭代的步伐从未停歇，他们正在迅速为Web和开发工具添加新功能。2019年，Chrome 发布了7个稳定版本，其中包括Beta版79、dev版80和canary版81。

过去一年中有关 Chrome 的重大新增功能，请参照如下链接：https://en.wikipedia.org/wiki/Google_Chrome_version_history?source=post_page—–1e7d07966d6c———————-

微软 Edge 浏览器移至 Chromium，并创建了新的标志

对 Web开发人员来说，IE及其后续的 Edge 就是个笑话，它们令开发人员苦不堪言。这款浏览器在Web功能实现方面一直落后于他人，并且众所周知，为其编写跨浏览器兼容的代码简直就是灾难。为了赢得开发人员，微软决定选择使用Google的开源 Chromium 引擎。2019年中期，这项变更已进入beta阶段。

Facebook 发布了 Hermes，这是面向 Android 的 JavaScript 解析器，用于改进 React Native

Facebook 认为 Android JavaScript 引擎的速度不够快，所以他们建立了自己的引擎。Facebook全力支持 React Native，此举表明为了确保其在所有平台上都能尽可能有效地工作，他们愿意做出必要的调整。

2020年的预测

• 随着代码拆分和 PWA 的进一步使用，性能仍然是Web最关键的方面。

• WebAssembly 会越来越普及，并得到实际采用和应用于产品中。

• 新兴创业公司和新项目都会采用 GraphQL，而其他公司也会纷纷从 REST 向 GraphQL 迁移。

• TypeScript 将成为新兴创业公司和项目的默认选择。

• 我们有望看到没有服务器且构建在区块链之上的真实应用，这会让Web更加开放。

• CSS-in-JS可能取代普通的CSS，会成为默认的样式设置方式。

• “无代码”应用越来越流行。随着AI的改进和应用抽象层的增加，构建应用程序会越来越容易。2020年，我们有望看到无需编写代码即可创建应用的重大转变。

• Flutter 可能会取代 React Native，成为构建跨平台移动应用的最佳方式。

• Svelte 将会用于更多实际项目。

• Deno（Node 创建者构建的 TypeScript 运行时）将投入实际使用。

• AR / VR 将取得巨大进步，其中包括使用A-Frame、React VR 和 Google VR 等库，并改进浏览器中原生的 AR / VR 工具。

• 容器化（例如Docker、Kubernetes）的影响在前端开发中越来越普遍。

原文：https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2019-1e7d07966d6c

本文为 CSDN 翻译，转载请注明来源出处。

【End】

刷爆技术人朋友圈的DevOps是什么？《敏捷无敌之DevOps时代》读书会系列课程来了！第一课由微服务与云计算技术专家、书籍作者亲自授课，扫码免费学习：https://edu.csdn.net/huiyiCourse/detail/1127