前端2018：年度结果

Web开发的世界正在以惊人的速度增长。 昨天的新闻今天可能已经过时，今天几乎没人知道的明天会成为进步的引擎。 我们今天发布的翻译材料将考虑2018年前端领域发生的所有最有趣的事情。 我们将讨论框架和辅助工具的开发，JavaScript趋势以及前端在2019年的发展方向。

WebAssembly标准化

WebAssembly通常被认为是构建未来Web的技术之一。 这项技术旨在通过将以它们编写的程序转换为Web浏览器支持的单一二进制格式，以最大限度地提高代码性能，减小代码大小以及使用不同语言进行Web开发的可能性。

2017年下半年，所有主流浏览器的开发人员都报告了对WebAssembly的支持。 然后，在2018年2月发生了3个重要事件：发布了WebAssembly规范的第一个版本，发布了相应的JavaScript接口和Web API的规范。

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

从npm下载的前四个最受欢迎的前端模块包括React，jQuery，Angular和Vue。 下面我们将更详细地讨论用于Web开发的库的情况。


从NPM下载2018前端库

React继续统治着前端库的世界，并且在不断发展

React多年来一直是Web开发的领导者。 它的使用范围在2018年继续增长。根据Stack Overflow进行的一项调查 ，该库仍然是程序员中最受欢迎的库之一。

核心的React开发团队非常积极地开发库并为其添加新功能。 在2018年期间，可以看到React v16的许多新增功能，包括新的组件生命周期方法 ，新的Context API ， 新的鼠标指针事件， 惰性函数以及新的React.memo高阶组件 。 应该注意的是，大多数注意力都集中在React和Suspense API钩子上 。

React钩子引起了极大的兴趣，他们写了很多关于它们的书，很多人喜欢它们。 该技术使您可以使用useState函数将状态添加到功能组件中，从而可以管理组件生命周期事件。

这是一个视频，展示了如何使用钩子如何显着改善React应用程序代码。

这个库的另一个有趣的新功能是React Suspense。 它旨在控制React组件自身中的数据加载。 Suspense API允许您在等待完成从任何源接收数据的异步操作时暂停数据输出。 Suspense API在惰性函数中用于实现组件代码分离。 实现此技术的主要目标是能够管理任何异步数据下载，例如对各种API的请求。 此外，Suspense API允许您缓存响应请求。

有一个经过特殊设计的示例，演示了用于在页面上加载数据的许多指示符，只要将isFetching标志设置为true 。 借助Suspense API，开发人员可以使用用户界面控件，特别是，这些工具可用于指示在等待数据加载，设置超时和配置导航时应在屏幕上显示的内容。 人们甚至普遍认为Suspense API可以消除对Redux的需求。 通过Dan Abramov的演讲，您可以了解使用此API进行应用程序开发的信息。

Vue继续在GitHub上按星数绕过React

在Vue在2017年实现爆炸性增长之后，这种情况在2018年仍在继续。就GitHub上的星数而言，该框架甚至优于 React。

尽管Web开发人员喜欢Vue，但就其实际使用而言，此框架仍远远落后于React和Angular。 但是，Vue拥有活跃的用户群，并且不断增长，这使Vue有望在未来的Web开发中扮演重要角色。

Vue的创建者Ewan Yu谈到Vue 3的话题

Vue即将发布3.0版。 在2018年，框架的创建者Ewan Yu在各种活动中谈到了框架的预期功能并进行了撰写 。

Angular框架仍然很受欢迎，第七版

2018年10月，发布了Angular的第七版。 迄今为止，该框架经历了重大的发展，已经从MVC架构发展到使用组件的现代系统。 它的受欢迎程度也在不断增长。

尽管Angular没有区分React和Vue的热情支持者，但该框架在专业项目中仍然很流行。 许多开发人员对React感到厌倦，因为使用该库时，他们必须在选择其他工具，设计应用程序架构，构建项目的过程中做出很多决定。 另一方面，Angular使开发人员无需做出许多决定，因此可以使用广泛使用的建筑模板。 Angular是一个框架，其功能可以满足Web应用程序开发人员的所有需求，并且相应的命令行工具完全负责构建项目的过程。 当然，使用这种方法的很多事情都在框架中设置得很紧。 在专业环境中使用Angular的另一个优势是它设计为使用TypeScript。 作为Angular的结果，我们可以说这个框架在Web开发环境中为其本身创建了一个名称，并继续加强其地位。

应当指出， @angular/core npm软件包是新的Angular，而angular软件包是旧的AngularJS。

以下是2018年@angular/core ， angular ， react和vue软件包下载的npm数据，以及来自GitHub的这些项目的状态信息。


角度 /核心，角度，反应和Vue的项目数据

越来越多的开发人员希望学习GraphQL，但是该技术尚未绕过REST。

GraphQL技术已在GitHub之类的一些大型项目中找到了应用，但尚未广泛传播。 根据JS州的研究，只有略微超过20％的前端开发人员使用了GraphQL技术，但是了解和计划使用该技术的人所占的比例是62.5％。


GraphQL技术

CSS-in-JS技术变得越来越普遍

在分析Web开发环境时，人们会感觉到它正在使用JavaScript统一所有内容。 当应用于CSS-in-JS技术时，这种趋势也很明显，即使用JS字符串工具创建哪些样式。 这使您可以使用通常的JS语法以及导入和导出机制来处理样式和依赖项。 此外，它还简化了动态样式，因为使用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之间的任务更加清晰地分开，从而允许CSS根据属性进行动态样式化。 在React中，这段代码看起来很像普通的JavaScript：

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

为了实现CSS-in-JS功能，主要使用样式组件和情感库。 样式化组件库的存在时间超过了Emotion，并且已经变得更加广泛，但是Emotion的流行度正在迅速增长，许多开发人员都选择了它。 应该注意的是，Kent S. Dodds甚至停止使用他的Glamorous CSS-in-JS库，而更喜欢使用Emotion。 就npm和GitHub而言，这是Styled组件和Emotion库的外观。


2018年的样式化组件和情感库

使用单文件组件时，Vue框架支持本地CSS，而无需使用其他库。 为此，只需将scoped属性添加到style组件标签中，然后Vue使用CSS-in-JS技术来组织具有局部样式的工作，这些样式不会超出该组件并且不会属于其他组件。

另外，应该注意的是，在Angular中，默认情况下，通过使用视图封装技术，将使用CSS作用域。

苦于技术疲劳的开发人员在命令行工具中找到了救赎工具

每个人都知道监视不断更新的库（对于Web项目至关重要）以及考虑库更新并在这种情况下做出正确的体系结构决策来正确更新项目是多么的疲惫。 这个问题已成为解决此类问题的命令行工具开发的催化剂，从而使程序员可以专注于处理应用程序。 所有这些工具已成为2018年创建新应用程序的主要手段。 特别是，可以在此区域中注意以下项目： Next.js （用于React的SSR）， Create-React-App （创建客户端React应用程序）， Nuxt.js （用于Vue的SSR）， Vue CLI （客户端Vue应用程序） ， Expo CLI用于React Native，标准Angular工具。

开发人员简化前端并提高生产率的愿望导致静态网站生成器的普及

在JavaScript的快速，革命性的发展过程中，每个人都喜欢学习最新的库并将其付诸实践。 但是，现在一切都趋于稳定，开发人员已开始意识到并非所有站点都应该是复杂的单页应用程序（SPA）。 这种理解导致了静态站点生成器的出现，增长和发展。 多亏了他们，您可以使用各种前端工具（例如React或Vue）开发项目，然后在组装过程中将其转换为静态HTML文件。 这使您可以非常快速地为客户提供完整的页面。

静态站点的优点在于它们是简单性和性能的完美结合。 如果在项目的组装过程中生成HTML文件，则可以将完成的页面发送给几乎立即加载的用户，而无需诉诸服务器或客户端渲染。 客户端与HTML代码一起还加载了页面正常工作所需的JS文件，从而为用户提供了与普通单页应用程序相同的功能。

静态网站生成器非常适合创建个人网站或博客之类的东西，但是它们也可以用于大型项目。 在2018年，面向React应用的Gatsby和React Static之类的生成器以及基于Vue项目的VuePress之类的工具越来越受欢迎。 实际上，静态站点已经变得如此流行，以至于开源Gatsby项目已经发展成为一家公司并获得了风险投资。

无服务器架构和JAMStack

静态站点的日益普及导致旨在支持它们的服务器技术的发展。 因此，最近几年在Web开发领域中一直在谈论无服务器架构，这是由于它们使您能够组织服务器和客户端代码的分离并减少服务项目的成本。

借助JAMStack Web项目开发方法（J是JavaScript，A是API，M是Markup，即标记），无服务器化的趋势得以扩展。 JAMStack基于开发静态站点的概念，我们在上一节中已经讨论过。 由于预先形成的标记，该技术使您可以实现极高的站点加载速度。 在客户端上，这些站点通过使用特殊的服务器API变成动态SPA。 2018年，他甚至在freeCodeCamp，Netlify和GitHub的主持下通过了首个JAMStack黑客马拉松 。 这是在freecodecamp.com上展示使用JAM体系结构的功能的材料，它使您可以评估使用JAMStack方法开发大规模应用程序的可能性。

TypeScript可能是JS的未来，但Flow不能说相同

JavaScript通常因缺乏静态类型而受到批评。 解决此问题的主要工具是TypeScript和Flow 。 同时，TypeScript比Flow流行得多，事实上，对Stack Overflow的一项研究表明，开发人员甚至比JavaScript本身更喜欢TypeScript（这些语言的对应数字分别为67％和61.9％）。 根据JS州的研究，超过80％的开发人员计划使用TS或已经很乐意使用它。 如果我们谈论Flow，那么只有34％的开发人员会使用它，或者想要使用它。

从所有指标来看，TypeScript是JS中静态类型化的标准解决方案；与普通JavaScript相比，许多人更喜欢TS。 今年，npm中TS的下载数量一直在持续且显着增长，而Flow的下载时间表仍然相当平稳。 人们感到，仅由热衷于静态键入的忠实拥护者使用的一种工具TypeScript已成为Web开发中使用极为广泛的工具。 这是来自npm和GitHub的TypeScript和Flow数据（如babel-preset-flow ）。


2018年下半年的TypeScript和Flow下载

Webpack 4于2018年初发布

Webpack 4在发布Webpack 3之后仅8个月就发布了。新版本的Webpack一直在朝着简化工作和加快构建过程的方向发展。 有时，Webpack 4的性能可以超过Webpack 3的性能98％。 Webpack 4旨在使用合理选择的默认参数，无需插件即可支持更多功能，并且为了开始使用Webpack，不再需要先准备配置文件。 另外，Webpack现在支持WebAssembly，并允许您直接导入WebAssembly文件。

Babel 7.0发布

Babel 7于2018年发布-自Babel 6发布以来已经过去了三年.Babel是一个库，通过该库可以将JavaScript代码转换为ES5代码，从而将新标准（ES6 +）的功能转换为ES5代码，从而实现JS项目的浏览器兼容性。 有关Babel新版本发布的资料表明Babel 7更快，更现代，支持高级配置选项，具有与缩小有关的改进功能，支持JSX Fragments和TypeScript技术，处于早期阶段的新语言构造协调等等。 应该注意的是，npm中的Babel软件包现在使用@babel命名空间。

2018年重要出版物

考虑一下2018年发布的几本重要出版物。

• 这是您在2018年使用JavaScript需支付的费用的材料。
• 这是 React Conf事件的帖子，您可以从中了解React的未来。
• 在本文中，Airbnb分享了自己在React Native方面的经验， 该经验被该公司收购了两年。
• Google 在这里向想要的人显示了Google Photos Web UI设备。
• 在这里您可以了解到Microsoft将把Edge浏览器转移到Chromium平台。
• 这是 Node.js的创建者Ryan Dahl 的非常有趣的演示。

2019年预测

2019年的前端还有什么？ 这是我们的预测：

• 由于该技术的不断发展，标准化以及开发人员对生产力的渴望，WebAssembly在Web项目中将变得越来越普遍。
• React仍将在Web开发工具排名中名列前茅，而Vue和Angular将继续扩大其用户基础。
• CSS-in-JS可以是标准的样式设置方法，可以代替常规的CSS。
• 也许开发人员会注意标准的Web组件 。
• 毫不奇怪，生产力将继续吸引全球关注。 这表明高级Web应用程序（PWA）和代码共享技术将用于绝大多数Web项目中。
• 由于PWA的传播和发展，Web项目将与移动和桌面设备的功能更加紧密地集成在一起，并将为用户提供无需连接网络即可获得的全面工作机会。
• 命令行工具的增长和发展旨在使开发人员摆脱独立配置工具的需要，并使他们有机会平静地创建Web项目。
• 越来越多的公司将基于标准技术（例如React Native或Flutter）实施移动解决方案。
• 在前端开发中，容器化的作用将会增强（特别是我们在谈论Docker和Kubernetes）。
• GraphQL将会得到重大推广，这项技术将在更多公司中使用。
• TypeScript将不再被视为普通JavaScript的替代，而是在以前通常选择JavaScript的那些情况下的标准选择。
• 使用A-Frame ， React VR和Google VR之类的库，虚拟现实技术将向前迈进一大步。

亲爱的读者们！ 您对2019年的前端开发有何期待？