2023 年 10 个前端 Web 发展趋势总结！( 四 ) _前端

import React from 'react'import {render} from 'react-dom'import {createUseStyles} from 'react-jss'// Create your Styles. Remember, since React-JSS uses the default preset,// most plugins are available without further configuration needed.const useStyles = createUseStyles({myButton: {color: 'green',margin: {// jss-expand gives more readable syntaxtop: 5, // jss-default-unit makes this 5pxright: 0,bottom: 0,left: '1rem'},'& span': {// jss-nested applies this to a child spanfontWeight: 'bold' // jss-camel-case turns this into 'font-weight'}},myLabel: {fontStyle: 'italic'}})const Button = ({children}) => {const classes = useStyles()return (<button className={classes.myButton}><span className={classes.myLabel}>{children}</span></button>)}const App = () => <Button>Submit</Button>render(<App />, document.getElementById('root'))因此，可能会看到开发人员迁移到 SSR 友好的解决方案，例如：实用程序优先的 CSS（例如 Tailwind CSS、UnoCSS）与预定义的 UI 组件（例如 DaisyUI）搭配使用，其他同样流行的替代方案（例如 CSS 模块）或被称为零运行时的失败者 /compile-time CSS-in-JS（例如 vanilla-extract、linaria、astroturf、已编译）。
使用 TypeScript 实现端到端类型安全从 JavaScript 到 TypeScript 的演变是不可阻挡的。在这次 Web 开发的大迁移中，全栈应用程序的 E2E 类型安全无疑是一个重要趋势。此概念的实现取决于通信层 (API)，通信层需要将类型实体（例如 User 类型、BlogPost 类型）从服务器桥接到客户端应用程序。
在 Web 开发中，客户端-服务器通信的常见方式是 REST 和 GraphQL 。两者都可以与 OpenAPI for REST 和 GraphQL Code Generator for GraphQL 一起使用，为前端应用程序生成类型化架构文件。

文章插图

然而，类型安全 API 有一个新的后起之秀，称为 tRPC，它可以用作 REST/GraphQL 的替代品。如果您正在使用前端和后端共享代码的 TypeScript monorepo，则 tRPC 能够将所有类型从后端导出到前端应用程序，而无需中间生成类型化模式。

// trpc.tsimport { initTRPC } from '@trpc/server';/** * Initialization of tRPC backend * Should be done only once per backend! */const t = initTRPC.create();/** * Export reusable router and procedure helpers * that can be used throughout the router */export const router = t.router;export const publicProcedure = t.procedure;

随后，前端只需使用类型化函数即可调用后端的 API，这些函数通过 HTTP 在底层进行连接，以实现实际的客户端-服务器通信。总体趋势肯定会倾向于在全栈应用程序中使用更多类型安全的解决方案，例如 tRPC、Zod、Prisma 和 TanStack Router，它们都在应用程序边缘提供类型安全。
构建工具在 React 领域，create-react-app (CRA) 主导了几年。这在当时是一场小小的革命，因为初学者获得了一个现成的 React 入门项目，而无需再使用 React 设置来配置自定义 Webpack 。然而，目前 Webpack 俨然已经过时了。

文章插图

当谈到单页应用程序（SPA）时，Vite 是新的挑战者，因为它可以与所有流行的框架（例如 React.js）一起使用来创建入门项目。它由 Vue.js 的创建者 Evan You 实现，将自己打造为下一代前端工具。在底层，它从 esbuild 获得了强大的功能，与其他 JavaScript 打包器相比，esbuild 是用 Go 编写的，因此打包依赖项的速度比竞争对手（例如 Webpack）快 10-100 倍。

// npm 6.xnpm create vite@latest my-vue-app --template vue// npm 7+, extra double-dash is needed:npm create vite@latest my-vue-app -- --template vue// yarnyarn create vite my-vue-app --template vue// pnpmpnpm create vite my-vue-app --template vue

虽然 Vite 的生态系统因 Vitest（Jest 的测试替代品）等新增功能而蓬勃发展，但 Vercel 的 Turbopack 等其他竞争对手最近才出现。Turbopack 被称为 Webpack 的继承者，因为它是由 Webpack 的创建者 Tobias Koppers 领导的。由于 Next.js 仍然使用 Webpack 和 Turbopack 是同一家公司开发的，因此我们可以预期 Next.js 和 Turbopack 在未来可能会成为完美的搭配。
人工智能驱动的发展人工智能最终会取代开发人员的工作吗？这个问题目前还没有答案，但是，人工智能驱动的开发将在 2022 年成为热门话题。随着 Github Copilot 的发布，开发人员能够在他们最喜欢的 IDE 中与人工智能程序员配对。它就像编写代码（或编写说明您想要编码的内容的注释）一样简单，GitHub Copilot 将自动完成实现细节以使其最好地理解。