依赖关系图

292d51baa165d580b068a2628e8aa775.jpg

工具分析

前端工具非常多，需要认识每个工具并理解他们之间的关系，主流工具国内有对应的网站和中文文档，但是部分工具并没有，因此部分工具介绍是由本作者翻译，请见谅。

生成代码框架利器-Mitosis

Mitosis是一种一次编写组件，可以编译到每种框架中的工具，它非常简单，有一套语法，类似于react。能够实际有效地帮助我们实现不同框架，UI一致，交换一致，便于维护。目前支持的框架有Vue，React，Angular，SolidJS，Alpine，Qwik，Svelte

主流三大框架

我们耳熟能详的三大框架无非就是Vue，React，Angular。

Vue

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

易学易用

基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。

性能出色

经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。

灵活多变

丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。

React

React是一个用于构建用户界面的 JAVASCRIPT 库。

主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。

起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React 特点

  • 1.声明式设计 −React采用声明范式，可以轻松描述应用。

  • 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

  • 3.灵活 −React可以与已知的库或框架很好地配合。

  • 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

  • 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

  • 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

Angular

Angular 是一个 Web 框架，能够帮助开发者构建快速、可靠的应用。

由 Google 的专业团队维护，Angular 提供了广泛的工具、API 和库，简化和优化你的开发工作流程。Angular 为你提供了一个坚实的平台，可用于构建快速、可靠、能够随着团队规模和代码库规模扩展的应用程序。

  • 基于组件的框架，可用于构建可扩展的 Web 应用程序

  • 集成良好的库（library），涵盖各种功能，包括路由、表单管理、客户端——服务器通信等

  • 开发人员工具，可帮助你开发、构建、测试和更新代码

其他框架

SolidJS

Solid是一个用于构建用户界面，简单高效、性能卓越的JavaScript库，Solid 站在 React, Knockout 等巨人的肩膀上。如果你之前用 React Hooks 开发过，Solid 应该看起来很自然。事实上，Solid 模型更简单，没有 Hook 规则。每个组件执行一次，随着依赖项的更新，钩子和绑定会多次执行。Solid 遵循与 React 相同的理念，具有单向数据流、读/写隔离和不可变接口。但是放弃了使用虚拟 DOM，使用了完全不同的实现。

SolidStart

SolidStart是一个基于 SolidJS 的应用框架，旨在简化现代 Web 应用的开发流程。它支持多种渲染模式，包括服务器端渲染（SSR）、客户端渲染（CSR）和静态站点生成（SSG），并提供了丰富的功能和优化选项。

Alpine

Alpine是一个耐用、极简的工具，可直接在标记中编写行为。可以将它看作是现代Web的jQuery。只需放入一个脚本标签即可开始使用。它集成了15个属性、6个属性和2个方法。简单，轻量级，强大。

Qwik

Qwik是一种新型的web框架，可以提供任何规模或复杂性的即时加载web应用程序。您的站点和应用程序可以使用大约1kb的JS启动(无论应用程序的复杂性如何)，并在规模上实现一致的性能。

Svelte

Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。

与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。

LIT

Lit 是一个基于 Web-Component 构建的前端框架，前身基本可以理解为即 Polymer ， Lit 提供了如下具有竞争力的特性

基于 Web-Component 的更高层封装，提供了现代前端开发习惯的响应式数据，声明式的模版，减少了web component的一部分样板代码.

小。运行时仅有5K

性能强悍。规避了 VDOM 的一些弊端，更新时仅处理 UI 中的异步部分（可以理解成仅处理响应式的部分）

兼容性较好。因为 web-component 是 HTML 的原生能力，也就代表着 web-component 可以在任何使用 HTML 的地方使用，框架无关。

TanStack

TanStack.png

TanStack是一个基于React的框架

大多数的 Web 框架(如 React)都没有内置的从组件中获取或更新数据的方式，因此开发人员最终会构建自己的获取数据的方式。 这通常意味着开发者总是倾向于使用 React Hooks 将基于组件的 state 和 effects 整合在一起，或者使用更通用的状态管理库来存储和提供整个程序中的异步数据。React Query 通常被描述为 React 缺少的数据获取(data-fetching)库，但是从更广泛的角度来看，它使 React 程序中的获取，缓存，同步和更新服务器状态变得轻而易举。

Nuxt

Nuxt是一个免费且开源的框架，它提供了一种直观且可扩展的方式来创建类型安全、高性能和生产级别的全栈Web应用和网站，使用的是Vue.js。

PREACT

PREACT3kb 大小的 React 轻量、快速替代方案，拥有相同的现代 API。

贴近实质

Preact 在 DOM 之上提供了最薄的虚拟 DOM 抽象，在提供稳定的平台特性和注册事件处理程序的同时还确保与其他库无缝兼容。

Preact 无需转译即可在浏览器中直接使用。

微小体积

大多数 UI 框架占了应用 JavaScript 大小的半边天，Preact 却不一样：它的微小让您写的代码成为您应用中占比最大的部分。

这也就意味着下载、解析、执行更少的 JavaScript——您可以专心构建绝佳用户体验，而无需花更多的时间在框架本身。

性能卓越

Preact 很快，不只是因为其体量微小，更是因为其基于树差异的简单、可预测而极快的虚拟 DOM 实现。

我们会与浏览器工程师密切合作，将 Preact 的性能调校到极限，压榨出其每一分性能。

轻松嵌入

Preact 的轻量让您可以将强大的虚拟 DOM 实现移植到其他框架无法进入的领域。

无需复杂集成即可使用 Preact 来构建应用组件，使用构建应用的相同工具与技巧将 Preact 嵌入一个小部件中。

即刻生产

轻量在不牺牲生产性的情况下才有意义。Preact 可让您即刻部署到生产环境，甚至还提供了一些附加功能：

  • 将 props、state 和 context 传递进 render()

  • 使用 class 和 for 一类的标准 HTML 属性

生态兼容

虚拟 DOM 组件让其复用易如反掌——无论是按钮，还是数据提供方，Preact 的设计都能让您轻松、无缝地借用来自 React 生态中的许多组件。

为您的打包工具添加一行简单的 preact/compat 替名即可为即便是最为复杂的 React 组件提供一层无缝兼容。

Fresh

Fresh是基于Preact 的一种框架，旨在通过构建最知名的工具、惯例和web标准来易于使用。快速构建快速应用程序，Island-based架构，表格，正确的方式，服务器HTML数据流

Remix

Remix是一个基于React全栈 Web 框架，它让您专注于用户界面，并通过 Web 标准倒推，提供快速、流畅且弹性的用户体验。建立在 React Router 之上，包含四个方面

  1. 一个编译器

  2. 一个服务器端 HTTP 处理程序

  3. 一个服务器框架

  4. 一个浏览器框架

Next

Next一个基于React的框架，提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。

零配置，混合模式：SSG和SSR，增量静态生成，支持TS，快速刷新，基于文件系统的路由，API路由，内置支持CSS，代码拆分和打包。

Docusaurus

Docusaurus是一个基于React快速构建以内容为核心的框架/网站构建工具。

Gatsby

Gatsby是一个基于 React 的免费、开源框架，用于帮助 开发者构建运行速度极快的 网站 和 应用程序。

Analog

Analog是一个基于Angular的框架使用Vite进行服务和构建，并使用Vitest进行测试。支持Angular应用的服务器端渲染（SSR）和静态站点生成（SSG）。使用基于文件的路由，并支持Angular应用的API（服务器）路由。

Astro

Astro 是一款集多功能于一体的 Web 框架，旨在构建快速且以内容为中心的网站。"以内容为中心"的定义是指那些内容丰富的网站，例如大多数营销网站、出版网站、文档网站、博客、个人作品集以及某些电子商务网站。在构建此类网站时，Astro 拥有一些独特的优势。

Astro 采用的是服务端渲染，与 Next.JS、SvelteKit、Nuxt、Remix 等服务端渲染框架相似。然而，与其他框架构建的单页应用程序（SPA）不同，Astro 构建的是多页应用程序（MPA），这也是 Astro 具备快速性的原因之一。此外，Astro 容易学习上手，不需要太多对新技术的压力。它原生支持 React、Preact、Svelte、Vue、Solid、Lit 等热门框架组件，并且其文档非常详细，通过逐步实例指导用户如何应用。