前端已今非昔比，有了React18（服务器组件）和所有现代Web堆栈，前端开发真正意味着应用程序开发。我们开发Web和本机应用程序的方式已经变得更加模块化、组件化和组织化，因此我们应该更少地关注实现和配置，而更多地关注应用程序的创建和组合。这份清单不会介绍你没听说过但会改变你日常生活的新尖端工具，而是会介绍改变游戏规则和流行的工具，它们将有助于加速前端开发，让你成为更好的开发者-并获得更多空闲时间。1.Bits-10xcomponent-driven实际上，现代前端已经是组件驱动的了。现代应用程序是用现代框架构建的，而现代框架是以组件为中心的。Bit是用于组件驱动开发一体化工具的下一代工具。Bit不是构建由许多组件组成的应用程序，而是构建可用于组合不同应用程序的独立组件。每个组件都是独立的，可以在任何地方运行。虽然Bit可以让您成为组件创建和组合的大师，但Bit的云平台可以帮助团队一起扩展和构建许多东西。Bit的开源软件工具是轻量级和高度可扩展的。它用于开发和合成组件。它为开发和组合组件提供了一个简单而强大的工作空间，将任何repo转变为智能monorepo，同时抽象出开销和配置。它提供了强大的功能，如可重用和可定制的组件模板、漂亮的可视化组件文档（带有mdx等）、独立的单元测试、版本管理和每个组件的导出（推送/发布）等。此外，它还有一个可视化用户界面，让开发体验也变得有趣起来！Bit本地工作区UI中的一个非常基本的按钮Bit的云平台淘宝拥有超过200,000名开发人员和一些世界上最好的团队，他们可以在其中托管和协作开发他们的组件。它为“开箱即用的组件市场”配备了企业级功能，包括安全托管、搜索、注册等。一个应用程序只是一个组件图……UI、挂钩、逻辑，甚至后端。Bit是一个强大的基础设施，它的范式转变已经在发生。开始使用Bit的热门用例包括微前端（尝试Bit与模块联盟！）、设计系统（组件协作）、快速应用程序开发（仅编译组件）以及产品团队的快速交付（升级组件，而不是应用程序）).ModuleAlliance+Bits=前端Bits的下一步发展：模块化Web平台2.GatsbyJS和NextJS-最快的JAMStack站点GatsbyJS和NextJS是JAMStack时代两个突出的静态网站框架。在正确的用例中，使用这两个选项之一可以大大加快新网站的开发，这要归功于现成的框架、丰富的模板和高度优化的工具集来开始构建。GatsbyJS是一个免费、开源、基于React的框架，旨在帮助开发人员构建高性能网站和应用程序。简单地说，GatsbyJS是一个使用React的静态网站生成器。事实上，它可以让你部署静态页面（在编译时获取数据），这些页面实际上是React应用程序。随着时间的推移，它在性能、速度和开发体验方面得到了很好的优化。Next.js是一个开源的React前端开发Web框架，由Vercel创建，可以为基于React的Web应用程序实现服务器端渲染和生成静态网站。Next通常被认为是一种更健壮和灵活的生成网站甚至应用程序的方式。这两个框架都有数以千计的插件和多年的优化，是构建静态网站时真正快速启动和运行的好方法。如何选择取决于你的项目。它们都不是用于完整的现代应用程序，但都提供了一些额外的扩展来突破JAMStack静态站点的限制。3.Netlify和Vercel——前端开发的后端Vercel和Netlify是两个在很多方面具有可比性的平台。两者都为前端开发人员部署静态网站提供了一种简单的方法。两者都消除了必须处理服务器和微服务以部署网站的痛苦和开销，并为前端开发人员提供了一个非常简单和友好的工作流程来托管和部署他们的静态网站。Netlify创建自己的存储库并推送到Github存储库和它自己的微服务。然后，它会在广泛的CDN上执行和分发内容，以服务于预建的静态网站。Vercel是面向前端开发人员的部署平台。Vercel使开发人员能够托管即时部署和自动扩展的网站和Web服务——所有这些都无需任何复杂的服务器配置。这两个平台都提供用于构建、部署和托管的解决方案。这两个托管平台都有一个与github的集成工作流程，以及无服务器功能支持和不同API等很酷的功能。虽然Netlify的开发经验很棒，但Vercel的一个巨大优势是服务器端呈现，它使您可以在几分钟内轻松部署一个功能完备的Next.js应用程序。在Netlify、Vercel和DigitalOcean之间做出选择Netlify与Vercel4。RippleCI-传播组件驱动的构建您可以在使用Bit的组件驱动工作时享受RippleCI。虽然仍处于封闭测试阶段[获得访问权限](mailto:support@bit.dev)，但Ripple无疑是网络的解决方案。它只构建组件。更准确地说，它构建所有受影响的组件——无处不在。当您将更改推送到组件时，Bit会“知道”哪些其他组件依赖于该组件，并将更改传播并构建到所有受影响的组件，跨所有不同的应用程序。想象一下，当您对按钮或卡片进行更改并观察Ripple将更改传播到使用您的卡片组件的所有应用程序，以及依赖于它的每个组件和页面时。通过这种方式，Ripple继续整合整个组织。Bit的团队正在使用Ripple更新的组件构建服务。由于每个组件都是独立构建的，因此您可以轻松准确地看到哪个更改破坏了哪个组件、在哪里以及为什么。由于Ripple只构建组件，它还可以通过简单地不构建不变的东西来节省大量构建时间。一些使用Ripple测试版的团队证实，它可以将构建时间减少90%。此外，Ripple利用Bit为组件、页面和应用程序的每次更改创建可视化预览。这是科幻小说，它确实有效。5.Stencil和Svelte——真正的Web组件基于Web组件标准构建的自定义组件和小部件，可以在现代浏览器上运行，并且可以与任何可与HTML一起使用的JavaScript库或框架一起使用。Templates是一个“用于构建快速、可重用的UI组件和渐进式Web应用程序的Web组件编译器”。它使用TypeScript、JJSX、微型虚拟DOM层、高效的单向数据绑定和异步渲染管道来加载和生成基于标准的Web组件。Stencil还解锁了一些功能，例如无需运行无头浏览器的服务器端渲染、预渲染和“对象作为属性”（而不仅仅是字符串）。Stencil组件很容易创建，因为它们本质上是带有装饰器元数据的ES6/TypeScript类。Svelte是“一个编译器，可以将您的声明式组??件转换为高效的JavaScript，当您的应用程序状态发生变化时，它可以像外科手术一样更新DOM”。这意味着，您可以使用CSS、HTML和纯JavaScript构建无模板组件，Svelt会将它们编译成具有内置反应性的小型轻量级JS。另一个有用的功能是内置支持JS库中任何与框架无关的CSS。6.Jest和Cypress的关键区别是什么——测试驱动的乐趣，在哪个项目中使用哪个是关键。Cypress是一个开源工具（现在是一个商业平台），用于现代Web的前端自动化测试。Cypress建立在一个新的架构之上，该架构与被测应用程序在相同的运行循环中运行。因此，Cypress可以更好、更快、更可靠地测试浏览器中运行的任何内容。Cypress适用于任何前端框架或网站。Jest是一个“令人愉快的JavaScript测试框架，专注于简单性”——这说明了很多。Jest采用了一种熟悉的方法。它建立在Jasmine测试框架之上，使用熟悉的expect(value).toBe(other)断言，并自动模拟require()返回的CommonJS模块，使大多数现有代码可通过短反馈循环进行测试。通过小型node.js命令行工具模拟DOMAPI并并行运行测试。关键区别在于Cypress最常用于端到端测试，而Jest用于单元测试。您也可以反过来，将两者用于相反的用例，但这是常见的约定。了解更多。我用Jest、Enzyme、测试库和Cypress测试了一个React应用程序。这是不同之处。7.Sentry——简单的全栈应用监控Sentry.io是一个开源的全栈错误跟踪系统，支持广泛的服务器、浏览器、桌面和原生移动语言和框架。那么，为什么Sentry会出现在前端开发者的名单中呢？因为它是一种Web开发体验，旨在为前端和全栈开发人员提供非常简单和友好的体验，以发现问题和防止错误进入生产环境、监控性能，所有这些都通过一个简单的SDK安装在2个命令中。而且UI/UX的使用也非常简单友好。使用Sentry，您还可以跟踪由后端引起的前端错误，为您提供全面的全栈方法来监控和修复webdev错误。您可以获得有关应用程序状态的上下文，以便了解特定问题的影响。更重要的是，所有未处理的异常都会被自动捕获，及时发现并处理个别错误。
