大家好，我叫CUGGZ。上班第一天，祝大家开个好头，事业有成，前程似锦！本文将分享StateofJS2022调查结果总结出的2023年8大Web发展趋势！(Meta)Frameworks单页应用程序(SPA)和React.js、Vue.js、Svelte.js等相关框架已经存在多年。然而，随着基于这些解决方案的元框架的兴起，可以看到应用程序从客户端渲染(CSR)转向服务器端渲染(SSR)的明显趋势。如今，在使用JavaScript框架时，SSR无处不在。流行的Next.js元框架构建在React之上。React核心开发人员AndrewClark将其称为2022年的“真正的React18版本”，因为它具有React团队作为较低级别的基本构建块（例如Suspense、流式SSR）提供的所有功能。Vercel（Next.js背后的公司）和React核心团队紧密合作，以提供出色的开发人员体验。Remix（最近被Shopify收购）是Next.js的替代品，它采用不同的方法将React转变为元框架（例如，使用网络标准作为一等公民）。虽然Next.js已经是现代SSR领域的有力竞争者，但其他框架也值得关注：SveltKit：基于Svelte.js构建，其最新的1.0版本得到了Vercel的支持；SolidStart：基于Solid.js构建，其DX可与React相媲美而不是改进。渲染模式虽然过去10年（2010-2020）一直由单页应用程序(SPA)和客户端渲染(CSR)主导，从Knockout.js和Ember.js到Angular.js、React.js和Vue.js，在过去几年中，人们对使用元框架的服务器端渲染(SSR)越来越感兴趣。从外部看，这个周期似乎又要结束了，因为SSR和JavaScript（例如jQuery、MooTools、Dojo.js）已经在多页应用程序(MPA)中使用了很长时间(2005-2010).以前SSR都是用Java（比如JSP）或者后来的RubyonRails，这次不一样，因为我们依赖JavaScript。近年来，Next.js一直是这一趋势背后的推动力，但SvelteKit等其他元框架正在迎头赶上。长期以来，SSR一直在与静态站点生成(SSG)竞争以获得完美的性能（请参阅Next.js与Gatsby.js），尽管这两种模式的用途完全不同。后一种模式用于静态内容（如博客等网站），而前者用于动态内容（如Web应用程序）。由于需要高度动态的内容或以用户为中心的带有身份验证的内容，开发者不能选择SSG（部署前构建一次，所以静态），而必须使用SSR（基于服务器上的单个数据请求按需构建）或CSR（客户端的按需个人数据）。CSR、SSR、SSG并不是渲染技术的最新趋势。虽然SSR和SSG在几年前开始了性能优化趋势，但增量静态再生(ISR)和流式SSR等更精细的渲染技术开始活跃起来。前者推进SSG，因为它允许在每个页面的基础上静态重建站点（例如，每60秒重建页面X）而不是重建整个站点。按需ISR，也称为按需重新验证，可用于通过应用程序公开的API触发重建（例如，更新CMS数据时）。另一方面，StreamingSSR优化了服务端渲染的单线程瓶颈。普通的SSR必须在服务器上等待数据以立即将呈现的内容发送到客户端，而流式SSR允许开发人员将应用程序分成多个块，这些块可以并行地从服务器增量发送到客户端。过去几年，SPA/MPA中的SSG和SSR渲染模式非常简单。然而，现在更细化的版本越来越流行。除了ISR和流式SSR之外，部分水合（例如React服务器端组件）允许仅水合客户端的某些组件，而渐进式水合允许对水合顺序进行更细粒度的控制。Control,Island用于隔离MPA中的应用程序或组件（例如Astro）并使用可恢复性而不是水合作用（例如Qwik）的架构。JavaScript运行时2009年，RyanDahl在一次会议上宣布了Node.js。最初是将JavaScript从浏览器中分离出来并使其在服务器上可用的实验，后来成为JavaScript在过去十年中取得成功的最大推动力之一。RyanDahl在没有浏览器的情况下为Node.js使用名为V8的JavaScript引擎（由Chrome实现）。因此，Chrome浏览器和Node.js使用相同的JavaScript引擎，但有自己的JavaScript运行时（例如浏览器API与Node.jsAPI）来与之交互。十年后，RyanDahl宣布Deno成为Node的继任者，承诺为开发人员提供更安全、更快速的环境，包括开箱即用的类似浏览器的API、TypeScript和标准库。Deno也运行在V8上，但今天它只是众多JavaScript运行时之一。在竞争激烈的边缘计算领域，许多云提供商已经实现了自己的JavaScript运行时（例如CloudflareWorkers），这些运行时针对自己的基础设施（例如Cloudflare）进行了优化。因此，Deno的商业模式也正在通过DenoDeploy和他们的即时边缘渲染SSR框架（最初作为概念证明）称为DenoFresh成为云提供商。像Bun这样的独立于云提供商的解决方案最近成为最快JavaScript运行时竞赛中的另一个热门话题。Monorepos过去，monorepos主要用于大型应用程序，一个包含单个版本控制存储库中的较小项目的项目。这些较小的项目中的每一个都可以是从单个应用程序（例如SPA、MPA）到可重用包（例如功能、组件、服务）的任何东西。合并项目的做法可以追溯到2000年代初期，当时它被称为共享代码库。如今，Monorepos不再是大型应用的专属，许多小公司和开源项目也能从中受益。例如，一个公司可以在monorepos中有各种包，包括共享的UI组件、共享的设计系统（例如可重用的协作设计）以及各自领域的通用实用功能。这些包可以在各种应用程序中导入：使用所有这些共享包的真实应用程序（例如app.mywebsite.com客户端呈现），考虑SEO的主页/产品/登陆页面（例如mywebsite.com使用服务器端呈现或静态网站生成）仅使用共享设计系统包，以及使用共享UI组件和共享设计系统包的技术文档页面（例如docs.mywebsite.com）。Turborepo（被Vercel收购）再次在JavaScript/TypeScript中推广monorepo。Turborepo允许团队在monorepo中为他们所有的应用程序和包创建构建管道。引人注目：构建缓存在本地机器上的管道中或跨团队在云中。Turborepo结合其他重要的monorepo工具，如npm/yarn/pnpm工作区（依赖管理）和变更集（版本控制），使这个工具链成为今年值得关注的领域。实用优先CSSTailwindCSS是实用优先CSS的代表。一方面，开发人员讨厌它在UI代码中的冗长，另一方面，他们喜欢它出色的DX。作为开发人员，您只需在您的项目中配置一次，然后立即在您的HTML中使用其预定义的CSS。然而，随着最近服务器端渲染(SSR)的兴起，这种对实用优先CSS的爱恨交织可能会结束。近年来，像StyledComponents(SC)和Emotion这样的CSS-in-JS解决方案一直是现代基于组件的Web应用程序样式的主导力量。但是，如果使用SSR的主要目标是高性能，那么CSS-in-JS会产生负面影响：增加包大小（SC为12.7kB，Emotion为7.9kB），更重要的是，当将其插入DOM时以前，由于CSS序列化，运行时开销会增加。因此，我们可能会看到开发人员转向对SSR更友好的解决方案，例如使用实用程序优先的CSS（例如TailwindCSS、UnoCSS）和预定义的UI组件（例如DaisyUI）。或者使用其他同样流行的替代方案，如CSS模块或称为零运行时/编译时间的CSS-in-JS（例如vanilla-extract、linaria、astroturf）。从JavaScript到TypeScript的端到端类型安全的演变是不可阻挡的。在这场Web开发的大迁移中，全栈应用的端到端类型安全无疑是一个重要的趋势。这一概念的实现由通信层(API)补充，该通信层(API)需要桥接类型实体（例如：类型用户、类型BlogPost）从服务器端到客户端应用程序。在用于客户端-服务器通信的Web开发中，通常使用REST和GraphQL。两者都可以与OpenAPIforREST和GraphQLCodeGeneratorforGraphQL一起使用，为前端应用程序生成类型化的模式文件。有一个名为tRPC的类型安全API正在成为REST/GraphQL的替代品。如果使用在前端和后端之间共享代码的TypeScriptmonorepo，tRPC可以将所有类型从后端导出到前端应用程序，而无需任何类型化模式的中间生成。然后，前端可以简单地通过使用在后台通过HTTP连接的类型化函数来调用后端的API，以进行客户端-服务器通信。总的趋势肯定是将更多此类类型安全解决方案用于全栈应用程序，例如tRPC、Zod、Prisma和TanStackRouter，它们都在应用程序中提供类型安全。构建工具在React中，create-react-app(CRA)主导了几年。这在当时是一场革命，因为初学者得到了一个随时可用的React入门项目，不再需要使用React设置来配置自定义Webpack。然而，在过去的一年里，Webpack很快就过时了。Vite是构建单页应用程序(SPA)的新手，它可以与所有流行的框架（如React、Vue）一起创建入门项目。由Vue.js的创造者尤玉玺实现，将Vite定位为下一代前端工具。在Vite内部，它从esbuild获得力量，与其他JavaScript构建工具相比，它是用Go编写的，因此它打包依赖项的速度比其竞争对手（例如Webpack）快10-100倍。Vite的生态系统随着Vitest（Jest的替代品）等新增功能而蓬勃发展。但最近出现了新的竞争对手，例如Vercel的Turbopack。Turbopack之所以被称为Webpack的继任者，是因为它是由Webpack的创始人TobiasKoppers推出的。Next.js仍然使用与Turbopack同一家公司开发的Webpack，因此预计未来Next.js和Turbopack可能会成为绝配。人工智能驱动的开发人工智能最终会接管开发人员的工作吗？这个问题目前还没有答案，但是，人工智能驱动的开发将在2022年成为现实。随着GitHubCopilot的发布，开发人员可以在他们最喜欢的IDE中使用人工智能程序。只需编写代码（或写一条评论说明您想编写什么代码），GitHubCopilot将自动完成实现细节。但AI驱动的开发并不止于此：OpenAI的ChatGPT是一种更通用的语言模型，也可以执行编程任务。许多开发人员使用ChatGPT作为StackOverflow的替代品。在许多情况下，当用作搜索引擎替代品时，ChatGPT会提供有用的答案（尽管并不总是完美的）。因为搜索引擎必须处理大量的SEOSPAM（不仅仅是开发相关的内容），ChatGPT目前被视为一个可行的替代方案。除了上述趋势，还有许多其他趋势值得一提：Tauri作为Electron的替代品，用于由JavaScript/CSS/HTML实现的桌面应用程序；Playwright作为Cypress的E2E（端到端测试）替代品；Warp和Fig成为下一代终端；CSS容器查询成为响应式设计的CSS媒体查询的替代方案。
