2019年，虽然大前台领域没有出现颠覆性的技术，但是Flutter、WebAssembly、Serverless的火热发展依然超出了我们的预期，也让我们进一步看到了大前台的融合趋势。 2020年下半年，大前台领域有哪些你不能错过的顶级技术趋势？今天让我们和边肖一起看看吧~Web组件化基本上，这就是未来。 为什么？因为这些纯Web组件与框架无关，所以它们可以在没有框架或任何框架拼写标准化的情况下工作。 因为他们没有JS疲劳，而且有现代浏览器支持。 因为他们的文件大小和消耗将是最好的，而VDOM的渲染是令人钦佩的。 这些组件提供了Custom Element，这是一个Javascript API，允许您定义新的html标记、指定布局的HTML模板，当然还有Shadow DOM，它本质上是特定于组件的。 这个领域比较知名的工具有Lit-html(以及Lit-element)、StencilJS、SvelteJS，当然还有Bit，这些都是可重用的模块化组件，可以在任何地方直接共享、使用和开发。 考虑到组件开发时代的未来以及模块化、可重用性、封装和标准化的原则，Web组件是答案。 微前台开发虽然享有组件的模块化优势，但与后台微服务相比，很大程度上还是单一的。 微前台带来了将前台架构拆分成不同前台的功能，可供从事应用开发不同部分的不同团队使用。 每个团队可以在其微前台的端到端生命周期中获得自主权，可以独立开发、版本控制、测试、构建、渲染、升级和部署(例如使用Bit等工具)。 然而，今天的生态系统仍然有一些缺点。 通常，人们会担心独立前端部署、捆绑和环境差异等问题。 Bit使您能够隔离、版本化、构建、测试和升级各种前台/组件。 目前，这主要在使用多个应用程序时非常有用(尽管它已被广泛用于通过组件逐步重建现有应用程序的一部分)。 2020年Bit上线部署功能时，独立团队将拥有独立前台的开发、编写、版本、部署和升级的权利。 您可以组合UI应用程序，并让团队使用独立的持续部署和增量更新来创建简单的解耦代码库。 这些前景的组合将最终帮助您创建应用程序。 这就是用Bit写的应用的优势。 布拉德·弗罗斯特(Brad Frost)提出的理论，将Web应用的构成与原子、分子、有机体的自然构成进行比较，最后以一个具体的网页作为结论。 原子由分子组成(例如，文本输入+按钮+标签原子=搜索分子) 分子有机体 有机体位于布局模板中，布局模板可以体现为交付给客户的页面。 这是一个30秒的详细解释，配有可视化示例。 它包括一张我用非凡的艺术天赋画的令人印象深刻的画，你可以复制并粘贴在你的办公板上。 原子组件的优势不仅仅是通过模块化、可重用的组件来构建模块化的UI应用。 这种范式迫使您考虑组成每个组件的角色和API。 组装Web程序集将语言多样性带入Web开发，以弥补JavaScript创建的空白。 它被定义为“基于堆栈的虚拟机的二进制指令格式。” Wasm是作为编译高级语言(如C/C ++/Rust)的可移植目标而设计的，因此它可以部署在Web上的客户端和服务器应用程序中。 Eric Elliot在他的文章中优雅地概述了这个概念的好处:在wasm中实现性能关键的内容，并像标准JavaScript模块一样导入它。 一种新语言:WebAssembly代码以二进制格式定义AST(通用语法树)。 为了便于阅读，您可以编写和调试文本格式。 对浏览器的改进:浏览器将知道二进制格式，这意味着我们将能够编译二进制包，压缩的二进制包比我们今天使用的文本JavaScript更小。 更小的有效载荷意味着更快的交付。 根据编译时的优化机会，WebAssembly可能比JavaScript运行得更快！封装是样式和阴影Dom组件的一个重要方面——它可以保持标记结构、样式和行为的隐藏，并与页面上的其他代码分开，这样不同的部分就不会冲突，代码也可以保持干净。 Shadow DOM API是关键部分，它提供了一种将隐藏的单个DOM附加到元素上的方法。 影子DOM实际上已经被浏览器使用了很长时间。 你可以把影子DOM想象成“DOM中的DOM” 它是一棵独立的DOM树，有自己的元素和样式，与原始DOM完全隔离。 它允许将隐藏的DOM树附加到常规DOM树中的元素上。 影子DOM树从影子根开始，可以像普通DOM一样附加到任何需要的元素上。 这样做的主要目的是我们不需要为类使用名称空间，因为没有名称冲突或样式溢出的风险。 这是真正封装的Web组件风格的处理方案。 TypeScript接管前景。最近的每一次谈话听起来都像是TS正在接管前台开发。 据报道，80%的开发人员承认他们想在他们的下一个项目中使用或学习TypeScript。 虽然有缺点，但TS代码更容易理解，实现更快，产生的错误更少。 想要重构React应用程序并将其与TS一起使用吗？去 想逐步开始？使用Bit之类的工具将应用程序中的组件逐步重构为ts，并使用React-Typescript编译器独立于应用程序来构建它们。 从组件库到动态集合组件开发，出现了一个工具，就是Bit及其托管平台Bit.dev 使用Bit持续隔离现有组件，并将其导出到一个动态的可重用共享集，而无需尝试构建一个繁琐且高度耦合的组件库。 使用Bit，可以独立隔离、版本控制、构建、测试和升级UI组件。 它简化了隔离现有应用程序中的组件、将它们收集到远程集合中并在任何地方使用它们的过程。 每个组件都可以在任何项目之外进行构建、测试和渲染。 您可以升级单个组件(及其相关组件)，而不是整个应用程序。 在bit.dev平台中(或者在您自己的服务器上)，您可以为不同的团队远程托管和组织组件，以便每个团队可以控制自己的组件开发。 每个团队可以共享和重用组件，但保持其独立性和控制力。 该平台还提供了一个共享组件的一体化生态系统:它自动记录UI组件的文档，交互式地呈现组件，甚至提供了一个内置的注册表来使用npm安装组件。 此外，您可以导入组件并在任何存储库中修改它们。 短期来看，这类似于Spotify/iTunes改变了之前通过静态CD专辑分享音乐的流程，彻底改变了分享和作曲组件的流程。 这是一个动态的模块化处理方案，每个人都可以共享和使用组件。 为什么从长远来看，Bit对微前景的发展是有帮助的？ 主要是因为它已经允许你独立地对UI应用的各个部分进行版本化、测试、构建和升级。 2020年，它将引入独立部署，最终允许不同的团队端到端地拥有应用程序的所有部分:保留一个独立而简单的代码库，让团队仔细而持续地构建和部署增量UI更新，并共同组成前台。 JAMStackJAM是JavaScript，API和Markup的缩写，前面第一个缩写，JAMstack是JavaScript，API和Markup构建的技术栈。它是基于客户端JavaScript、可重用API和预建标记的现代Web开发架构。 它需要满足以下三个标准:1。JavaScript:请求/响应循环中的任何动态编程都由JavaScript解决，完全运行在用户端。 这可以是任何前台框架、库，甚至是轻量级的JavaScript。 2.API:所有服务器端进程或数据库操作都被归类为可重用API，通过HTTPS使用JavaScript访问。 这些可以定制或使用第三方服务。 3.标记:模板标记应该在部署时预先构建，通常使用内容站点的站点生成器或Web应用程序的构建工具。 JAMstack受欢迎的原因如下:1。更好的性能:当页面在部署时生成时，为什么要等待页面被动态构建呢？当谈到最小化第一个字节的时间时，没有什么比通过CDN提供的预建文件更好的了。 2.安全性更高:服务器端进程可以归为微服务API，可以减少攻击表面积。 您还可以利用专业第三方服务的专业知识。 3.更便宜、更容易扩展:当您的部署相当于一堆可以在任何地方提供的文件时，扩展就是在更多的地方提供这些文件。 CDN是完美的，通常包括扩展他们所有的计划。 4.更好的开发人员体验:松散耦合和控制分离允许更有针对性的开发和调试，选择CMS选项进行站点生成器扩展消除了为内容和营销维护单独堆栈的需要。 设计开发一体化随着组件驱动设计系统的兴起，产品和团队之间的UI一致，新的工具应运而生，弥合了设计师和开发者之间的鸿沟。 然而，这不是一项简单的任务。 虽然代码本身实际上是真理的唯一来源(这是客户真正得到的)，但大多数工具都试图在设计者和设计者之间架起一座桥梁。 在这个分类里，你可以找到framers，Figma，Invision DSM等。 在开发人员方面，您可以看到Bit.dev等平台如何托管下一代组件库，并帮助建立共享组件的采用范围。 边肖是一名拥有多年开发经验的程序员。 想学好WEB前台，身边没有人可以指导你学习。无论是想向计算机专业WEB前台方向发展，还是零基础转行，都可以去这个WEB前台裙，在这里可以了解到最新的学习路线和教程。有什么不懂的可以在里面问。这是网络前台裙。 前面的三个输入296、中间的三个输入212和后面的三个输入562。 平台为你的实际源代码提供了可视化效果，让设计师和开发者合作，用可视化的方式讨论源代码本身。 另一个值得注意的有希望的想法是设计令牌。 通过在代码中放置标记，设计人员可以直接使用外部协作工具控制简单的样式(如颜色)。 与Bit.dev等平台集成后，可以创建比以前更紧密的工作流。