该材料的作者（我们今天将其翻译发表）说，他希望与读者分享有关未来几年网络技术发展的预测。 尤其是，在这里，我们将讨论作者所说的前端开发人员今天可能值得学习的内容。
与JavaScript相关的所有事物都在快速发展。 这也适用于可归因于Web开发领域的内容。 如今，那些不基于最先进技术的项目的人们开始特别感受到他们使用的技术与几乎每天都出现的新技术之间的鸿沟。 这些技术包括Webpack，React，Jest，Vue，Angular处于当前状态。 尽管前端开发领域的“人口”（包括技术专家和程序员）在不断增长，但这个领域正在为标准化而努力。 新技术和工具的出现已经改变了这种状况。
可以肯定地说，标准化的用户界面将是前端技术发展的普遍趋势。 特别是，我们正在谈论基于组件的组合，即对模块化系统的需求。 这种趋势几乎影响所有方面-从样式到测试，甚至到管理应用程序状态。 这种趋势可能包括围绕Web组件，ES模块，相应的工具构建的技术，以及更多的技术。
1.用于处理Web组件的系统，独立于框架和库
总的来说，我们可以说这就是未来。 怎么了 问题是所讨论的系统独立于框架。 这意味着，鉴于其有关代码表示的功能，它们可以完全独立地工作，也可以与任何框架一起工作。 这些系统的特征不是所谓的“ JavaScript疲劳”，“ JavaScript疲劳”。 它们受现代浏览器的支持。 在使用它们创建的项目中，包括了最佳数量的辅助代码。 他们充分利用了VDOM的功能。
有问题的组件是使用“定制元素”标准构建的。 它使您可以创建新的HTML标记，并对它们的属性进行微调-从外观到内部机制以及使用Shadow DOM的功能。
该领域中值得注意的项目是
Lit-html （和
Lit-element ），
StencilJS ，
SvelteJS ，
Bit 。
在组件时代，模块化，重用，封装和标准化的原理应该如何看待？ 如果您考虑一下，请考虑UI开发的未来，事实证明，这种未来由Web组件代表。 我们将回到这个想法。 同时，这是Web组件上的一些有用材料。
在这里，您可以了解有关开发Web组件的工具。
这是有关Web组件库的材料。
在这里，您可以找到使用Web组件制作RSS阅读器原型的示例。
2.关于框架和图书馆之战的未来
从NPM的下载量来看，React仍在稳步绕过Angular和Vue。 至少现在 。在这里，我们将不讨论哪些框架和库比其他框架和库更好，以及为什么如此。 如果您有兴趣阅读-
这里 就是 -在真实数据上比较了Angular，React和Vue的材料。 我们将研究全局。 它看起来像这样：在前端开发中，基于组件的技术的份额正在增长。 它在不断增长。 使用类似技术的开发人员的数量也在迅速增长。 此外，该区域有足够的可用空间来引入新工具。
那么，哪种框架将在5年内首次出现？ 没有人知道。 可以肯定地说，任何想为将来做好准备的人都应该学习JavaScript生态系统的基本技术，并习惯于由Web组件控制DOM的环境。 也许在5年后，React将成为界面开发的领先工具。 您可以通过查看以上基于NPM数据的图表来考虑这一点。 但不是那么简单。 例如，看看
这些指标。 他们让我们说，就实际使用而言，React和Vue之间的差距很小。
Vue和React在实际使用方面非常接近将来，我们希望改善独立于框架的Web组件的标准化。 在这方面，可以反思这将对框架战争产生什么影响。 顺便说一下，众所周知，React甚至不是框架，而只是一个库。
3.组件的隔离，重用和组成
Bit是一个平台的示例，该平台专注于开发组件，与它们协作并重用它们说到前端开发和构建用户界面所用的组件，人们不禁会想起
Bit 。
这个
开放源代码平台允许您隔离组件（或适合重用的任何JS代码段），并将它们转变为可在许多项目中使用的构建块。 在这种情况下，开发人员可以控制组件的源代码，管理其更改以及其依赖关系的完整树。
简而言之，感谢Bit，开发人员有机会改善不同项目中的组件并同步更改。 多亏了
bit.dev组件
中心，该思想扩展到了团队开发，使团队成员可以组织代码并共享代码。
Bit中心为开发人员提供了联合创建和使用组件所需的全部功能。 例如-便捷的搜索工具，一个可以在其中试用组件的交互式环境，对CI / CD的完全支持。
多亏了Bit，您不仅可以使用团队努力创建的组件，还可以使用开源项目。 这包括建议对现有组件进行更改的能力，以及共享其发展的能力。
4. ES模块和CDN
ES模块是ES6标准的一部分，该标准描述了如何在浏览器中使用模块。 使用此技术，您可以将某些功能转移到可以通过CDN下载的模块上。 Firefox 60发布后，可以说ES模块支持
所有主流浏览器 。
Node.js中也正在进行有关ES模块支持的工作
。 另外，预期将对ES模块的支持添加到
WebAssembly中 。
5.组件级状态管理
应用程序状态管理有哪些新内容？ 如今，状态管理归结为将所有内容放入全局Redux存储库中。
但是，这种方法可能会使组件的工作复杂化，可能成为重用和模块化方面完全公开其功能的障碍。 如果从这种角度考虑情况，可以说MobX之类的项目为我们提供了一种有趣的，更被动的方法来处理应用程序状态（在这里您还可以调用
未声明的项目）。
如果我们谈论用于管理状态的新标准React机制，我们可以回顾Context API和钩子。 它们的出现意味着程序员不再需要第三方库来管理状态，并且可以在功能组件级别上管理状态。 这提高了项目的模块化和重用组件的能力。
结果，如果您展望未来，很可能会发生“状态”一词主要用于封装组件的应用程序，而不是某些应用程序级别的全局数据仓库的应用程序。
6.组件的程式化是一个组成
分离实现逻辑和样式的组件-通过合成使组件样式化的方法关于如何
样式化组件已有很多论述。 这个领域有很多机会。 这些是嵌入式CSS，CSS模块，JS代码中的CSS描述，风格化的组件以及诸如Stylable之类的中间解决方案。
考虑到组件的未来样式，我倾向于将样式想象为一种组合。 这意味着组件设计系统必须同时包含实现某些逻辑的组件和描述样式的组件。 使用这种方法，可以创建随项目发展而发展的组件设计系统。 这样就无需开发人员掌握庞大的样式库。 用于设计诸如Sketch或Figma之类的组件的工具也可以使用此想法。
7. GraphQL-API和数据驱动的客户端应用程序
GraphQL技术和基于组件的开发方法为基于Web的客户端应用程序提供了令人兴奋的机会。 例如，使用
Apollo，您可以轻松创建可通过GraphQL处理数据的UI组件。 还有许多其他
工具使使用GraphQL更加容易。
合理地处理各种API可以简化数据驱动应用程序的开发。 这使您可以提高开发速度。 因此，GraphQL是一项应该考虑未来的人应该注意的技术。
8.基于组件的设计器工具
组件逐渐成为Web项目
设计系统的组成部分。 这减少了设计师和程序员之间的差距。 他们两个正在互相接近。
例如，
Sketch已经提供了用于组件设计的模块化开发的工具，这些工具需要组件之间的依赖关系。 已经有一些
工具可以在Sketch中使用以编程方式塑造其可视化外观的组件。 这种工具的广泛使用只是时间问题。 诸如
Figma之类的工具主要针对可重用的用户界面组件。
Framer项目正在为编程设计师开发工具。 该工具允许设计人员控制如何将用户界面元素转换为React组件。
总结
在这里，我们向您介绍了客户端Web开发中的几种趋势，根据该材料的作者，应该注意那些为未来做好准备的人。 我们希望该出版物为您提供思想上的帮助。
亲爱的读者们！ 您如何看待Web开发的未来？
