后端开发教程 - Java、Spring Boot 实战 - msg200.com
2020 年必须了解的 11 个前端趋势
或者——如何在午餐前的谈话中显得聪明！
在团队午餐会上展现你的智慧，显然是紧跟最新前端趋势的重要原因。它甚至可能帮助你成为更优秀的开发者，构建更优秀的技术和产品。或许吧。
所以，请允许我为你指出一些有趣的方向，让你更容易地完成这项光荣的任务。我不会逐字逐句地解释每个概念，但会介绍每个概念，以及它的用途，并指引你找到更多资源。
例如，我们将简要介绍 Micro Fontends、Atmoic Design、Web Components TS 接管、ESM CDN 以及 Design Tokens。您可以随意浏览并标记您想了解更多信息的主题。如有任何疑问或其他建议，请在下方留言。
简短免责声明：我来自 Bit 团队建设团队。但这并不影响以下任何内容的真实性。尽情享受吧！
1. 微前端
微前端是午餐时最热门的前端话题。
讽刺的是，尽管前端开发享有组件的模块化优势，但它仍然比后端微服务更加单体化。 微前端有望将您的前端架构拆分为不同的前端，供不同的团队处理应用程序的不同部分。每个团队都可以自主掌控其微前端的端到端生命周期，可以独立地进行开发、版本控制、测试、构建、渲染、更新和部署（例如使用Bit 等工具）。 与其在这里解释整个概念，不如阅读@thecamjackson在 @martinfowler 博客上发表的这篇精彩文章。这篇文章非常精彩，应该涵盖了您开始深入研究这个概念所需的一切。然而 ，当今的生态系统仍然存在一些不足。人们主要担心的是诸如独立前端的部署、打包、环境差异等问题。Bit已经允许您隔离、版本控制、构建、测试和更新单个前端/组件。目前，这主要在处理多个应用程序时有用（尽管它已经普遍用于通过组件逐步重构现有应用程序的部分功能）。 当 Bit 在 2020 年引入部署功能时，独立团队将能够开发、编写、版本控制、部署和更新独立前端。它将允许您共同编写 UI 应用程序，并让团队创建具有独立持续部署和增量升级的简单解耦代码库。这些前端的组合最终将创建您的应用程序。使用 Bit 编写的 UI 应用程序如下所示：
了解更多：
微前端 - Martin Fowler
2.原子设计
原子设计是午餐谈话中另一个非常有趣的话题，我更喜欢把它看作一门哲学，而不是纯粹的方法论。
简而言之，Brad Frost提出的理论将 Web 应用程序的组成与原子、分子、生物体等的自然组成进行了比较，最终形成了具体的网页。原子组成分子（例如，文本输入+按钮+标签原子=搜索分子）。分子组成生物体。生物体生活在布局模板中，该模板可以具体化为交付给用户的页面。
这里有一个*详细的 30 秒解释和视觉示例。*它包括我以很高的艺术天赋制作的非常令人印象深刻的图画，你可以将其复制粘贴到你的办公室板上😆
原子组件的优势不仅仅是通过模块化和可重用的组件构建模块化 UI 应用程序。这种范式迫使您以组合的方式思考，以便您更好地理解每个组件的角色和 API、它们的层次结构，以及如何以有效和高效的方式抽象应用程序的构建过程。看一看。
3. 封装样式和 Shadow Dom
来源：developer.mozzila.org
组件的一个重要方面是封装——能够将标记结构、样式和行为隐藏并与页面上的其他代码分离，从而避免不同部分发生冲突，并保持代码整洁。Shadow DOM API是其中的关键部分，它提供了一种将隐藏的独立 DOM 附加到元素的方法。实际上，
Shadow DOM 已被浏览器广泛使用。您可以将 Shadow DOM 视为“DOM 中的 DOM”。它是独立的 DOM 树，拥有自己的元素和样式，与原始 DOM 完全隔离。
它允许将隐藏的 DOM 树附加到常规 DOM 树中的元素——此 Shadow DOM 树以 Shadow 根开始，您可以在其下方附加任何您想要的元素，就像普通 DOM 一样。这样做的主要好处是我们不需要为类设置命名空间，因为不存在名称冲突或样式溢出的风险。此外，它还有其他优势。它通常被称为长期承诺的真正封装 Web 组件样式的解决方案。了解更多：
使用 Shadow DOM
4. TypeScript 接管
最近，各种讨论都说 TypeScript 正在接管前端开发。据报道，**80% 的开发者承认他们希望在下一个项目中使用或学习 TypeScript **。
尽管 TypeScript 存在一些缺点，但它更易于理解、实现速度更快、错误更少、所需的样板代码更少。想要重构你的 React 应用以使用 TS 吗？那就去做吧。想要循序渐进？使用Bit等工具逐步将应用中的组件重构为 TS，并使用React-Typescript 编译器独立于应用构建它们。这样，你就可以逐步升级你的代码，一次一个组件。
了解更多信息：
为什么 TypeScript 是 2019 年编写前端代码的最佳方式，以及为什么你应该说服每个人都使用它。Lyft
的 TypeScript
和 Slack 的 TypeScript
5. Web 组件- Stencil、Svelte、Lit 和朋友们！
所以基本上，这就是未来。为什么？因为这些纯 Web 组件与框架无关，无需框架或任何框架拼写标准化即可工作。因为它们不会产生 JS 疲劳，并且受现代浏览器支持。因为它们的包大小和功耗都经过优化，而且 VDOM 渲染效果令人惊叹。
这些组件提供自定义元素（一种 JavaScript API，允许您定义一种新的 HTML 标签）、用于指定布局的 HTML 模板，当然还有本质上特定于组件的 Shadow DOM。
在这个领域，值得了解的著名工具包括Lit-html （和Lit-element）、StencilJS、SvelteJS 以及 Bit，它们用于可重用的模块化组件，可以在任何地方直接共享、使用和开发。
当我们思考 UI 开发的未来，以及在组件时代模块化、可重用性、封装性和标准化原则应该是什么样子时，Web 组件就是答案。了解更多：
6. 从组件库到动态集合
在动态集合中组织组件；重用、组合、保持独立组件驱动开发
的出现催生了各种各样的工具。一个突出的工具是Bit，以及它的托管平台Bit.dev。 您无需费力构建繁琐且高度耦合的组件库，而是使用 Bit 持续隔离现有组件并将其导出到动态可重用的共享集合中。 使用Bit (GitHub)，您可以独立隔离、版本控制、构建、测试和更新 UI 组件。它简化了在现有应用程序中隔离组件、将其收集到远程集合并在任何地方使用它的过程。每个组件都可以在任何项目之外构建、测试和渲染。您可以更新单个组件（及其依赖项），而不是整个应用程序。在 bit.dev 平台（或您自己的服务器上）上，您的组件可以为不同的团队远程托管和组织，以便每个团队都可以控制自己组件的开发。每个团队都可以共享和重用组件，但保持其独立性和控制力。 该平台还提供了开箱即用的一体化共享组件生态系统：它自动记录 UI 组件，在交互式环境中渲染组件，甚至提供内置注册表，方便使用 npm/yarn 安装组件。此外，您还可以通过 Bit Import 在任何代码库中进行修改。 短期来看，这彻底改变了组件共享和组合的流程，就像 Spotify/iTunes 改变了之前通过静态 CD 音乐专辑共享音乐的流程一样。它是一个动态的模块化解决方案，让每个人都可以共享和使用组件。 从长远来看，Bit 有助于铺平通往微前端的道路。为什么？因为它已经允许您独立地对 UI 应用程序的各个部分进行版本控制、测试、构建和更新。2020 年，它将引入独立部署功能，最终允许不同的团队端到端地拥有应用程序的各个部分：保持解耦和简单的代码库，让团队谨慎且持续地构建和部署增量 UI 升级，并共同组合前端。
7. 状态管理：告别 Redux？（不是……）
Redux 是一头难以对付的猛兽。随着前端模块化程度的提高，在应用程序中全局管理状态的痛点也变得越来越明显，但 Redux 的强大实用性使其成为许多团队的首选解决方案。
那么，我们会在 2020 年与 Redux 说再见吗？可能不会完全如此 😄
然而，处理状态的框架（React Hooks、Context-API 等）中新功能的涌现，正在描绘一个没有全局存储的未来。像Mobx这样的工具，仅仅在一年前还很少被采用，但由于其面向组件和可扩展的特性，正变得越来越流行。您可以在这里探索更多替代方案。
阅读：*理解 React Hooks * — 作者：Dan Abramov
8.ESM CDN
ES 模块是浏览器中使用模块的标准，由 ECMAScript 标准化。使用 ES 模块，您可以轻松地将功能封装到模块中，并通过 CDN 等方式使用。随着 Firefox 60 的发布，所有主流浏览器都将支持ES 模块，Node 团队正在努力为Node.js添加 ES 模块支持。此外，WebAssembly 的 ES 模块集成也将在未来几年内推出。想象一下，通过 CDN 在您的应用中编写模块化的Bit UI 组件……
9. 渐进式 Web 应用。仍在不断发展。
渐进式 Web 应用程序利用最新技术，将Web 和移动应用程序的优点融为一体。您可以将其视为一个使用 Web 技术构建的网站，但其操作和使用体验类似于应用程序。浏览器、服务工作线程以及缓存和推送 API 的可用性方面的最新进展使 Web 开发人员能够允许用户将 Web 应用程序安装到主屏幕、接收推送通知，甚至离线工作。
由于 PWA 提供了贴心的用户体验，并且所有网络请求都可以通过服务工作线程拦截，因此必须通过 HTTPS 托管应用程序以防止中间人攻击，这也意味着更高的安全性。这里有一个由 Facebook 开发人员Omer Goldberg主持的精彩演讲，概述了 PWA 的最佳实践。
10. 设计师与开发者的整合
随着组件驱动设计系统 的兴起，使得跨产品和团队的 UI 保持一致，新的工具也应运而生，以弥合设计师和开发人员之间的差距。然而，这并非易事；虽然代码本身实际上是唯一的事实来源（这是用户真正得到的），但大多数工具都试图从设计师的角度弥合差距。在这个类别中，你可以找到 Framer、Figma、Invision DSM 等等。
从开发人员的角度来看，你可以看到像Bit.dev这样的平台，它托管你的下一代组件库并帮助创建共享组件的采用。该平台为你的实际源代码提供渲染可视化，以便设计人员可以与开发人员协作，并以可视化的方式就源代码本身进行讨论。
另一个值得注意的有前途的想法是设计令牌。在你的代码中放置令牌，设计人员可以通过外部协作工具直接控制简单的样式方面（例如颜色）。与 Bit.dev 等平台集成，这可以创建比以往更紧密的工作流程。
中等的
中等的
11. WebAssembly——走向未来？
WebAssembly将语言多样性引入 Web 开发，弥补了 JavaScript 造成的缺陷。它被定义为“一种基于堆栈的虚拟机的二进制指令格式。Wasm 被设计为一个可移植的目标，用于编译 C/C++/Rust 等高级语言，从而支持客户端和服务器应用程序在 Web 上的部署”。Eric Elliott
在他的文章中优雅地概述了这一概念的优势：
- JavaScript 的改进：在 wasm 中实现对性能至关重要的内容，并像标准 JavaScript 模块一样导入它。
- 一种新的语言： WebAssembly 代码定义了以二进制格式表示的 AST（抽象语法树）。您可以以文本格式进行编写和调试，使其更具可读性。
- 浏览器改进： 浏览器将理解二进制格式，这意味着我们将能够编译出比我们目前使用的文本 JavaScript 更小的二进制包。更小的有效负载意味着更快的交付速度。根据编译时优化机会，WebAssembly 包的运行速度也可能比 JavaScript 更快！
- 编译目标：其他语言在整个 Web 平台堆栈中获得一流二进制支持的一种方式要了解有关此概念的更多信息，为什么它有用，在哪里使用以及为什么它尚未出现，我建议阅读这篇精彩的文章和这个精彩的视频。为什么我们需要 WebAssembly：对 Brendan Eich 的采访*Brendan Eich 和 Eric Elliott 讨论 WebAssembly 细节*medium.com
了解更多
中等的
中等的
文章来源：https://dev.to/jonisar/11-must-know-frontend-trends-for-2020-13e1
blog.bitsrc.io