What’s New —— 前端新技术观察

最近在接受前端讯息和了解开源项目的时候，总是会去了解下某些功能是使用什么库来实现的，由此接触了很多的工具库，所以这篇文章主要是记录下我“主观”上觉得比较新的技术。

Astro

Astro 是一个 Islands 架构的支持多种 UI 框架的服务端优先的 web 框架。

0 JS: 将组件拆分未静态组件和可交互组件，仅对可交互组件执行hydration，减少客户端的JS执行。

.astro文件: 类似 jsx 语法，容易上手，且支持多种 UI 框架语法开发。

构建迅速: 底层构建体系基于 Vite 以及 Esbuild 实现，项目启动速度非常快。

💡

最后打包的页面为 .astro 生成的 html 和 UI 框架生成的 Islands 我的 astro 初体验: https://www.moonwillknow.dev/paoluda

Remix

Remix 是一个由 react-router 团队开发的基于 React 的全栈框架，其特点是专注于嵌套路由，是 Next.js 的替代品。

Lit

由 Google 推出的 web-component 构建库，使用类 jsx 语法优化了 web-component 的原生构建方式。

bun

bun 是一个开源的 JS 运行时，内置了打包器、转译器、任务管理器和你npm客户端，这也使其的打包和运行速度超过 node 和 deno。

mantine

开源的 React 组件库，拥有丰富的组件和功能齐全的 hooks，且有着丰富的实例代码支持快速开发。

Prisma

开源的 ORM 数据库对象操作库，可以使数据库操作脱离 sql 语句，而且可以通过 .prisma 文件清晰的描述 schema。

emotion

目前看到很多 React 组件库都在采用的 CSS in JS 方案。

turborepo

最近看到的大型项目都开始使用 monorepo 的项目管理方案，而 turborepo 是由 vercel 推出的一个 monorepo 管理库。

微信小程序 Skyline

Skyline 创建了一条渲染线程来负责 Layout, Composite 和 Paint 等渲染任务，并在 AppService 中划出一个独立的上下文，来运行之前 WebView 承担的 JS 逻辑、DOM 树创建等逻辑。这种新的架构相比原有的 WebView 架构，有以下特点：

界面更不容易被逻辑阻塞，进一步减少卡顿

无需为每个页面新建一个 JS 引擎实例（WebView），减少了内存、时间开销

框架可以在页面之间共享更多的资源，进一步减少运行时内存、时间开销

框架的代码之间无需再通过 JSBridge 进行数据交换，减少了大量通信时间开销

react-query

react的异步状态管理库，可封装了完整的请求状态，而且可以拦截重复请求，缓存和更新数据。另外 react-query 的团队 TanStack 还推出了很多 headlessUI 组件。

Radix-ui

无样式 react 组件库，可高度自定义的组件库。

Nest.js

基于 typescript 的 node 服务端框架，写法用大量修饰器进行了简化，默认提供了路由。

杂谈

其实最近在了解这些框架的过程中感觉，感觉前端的东西日新月异，但是总体的趋势还是相同的。所以最近还是在通过开源项目去了解不同的设计思路，这些是比框架或开源项目本身更加有价值的，无论是面向对象还是 Hooks 思想，我希望我在未来的开发过程中不断得去实践。

2022.08.29 最近看到一句话，说前端的环境善变，经常另起炉灶，标准化不足，所以开发者不断追新碰触低矮天花板，导致技术深度不足。其实我也在思考，技术的广度和深度到底哪个更重要，从被业务追赶角度的现状来看，广度可以提供更多的解决方案。从技术追求来看，深度可以去更好的实现自己的一些 idea，去创造些真正的产品。其实最近开始和工作中的劣质产品和解，因为好像还可以构思些 idea 去实现，在业余时间用这个来完成自己的平衡。