🌝 15 个适用于您下一个项目的 JavaScript 框架⚔

开发者生态系统已经发展壮大，并且存在很多开发者不了解的框架。

作为开发者，我们有很多构建应用的框架选项。这些选择非常重要。

我们将介绍 15 个框架，助您打造下一个项目。我会提供详细的资源，方便您学习每一个框架。

相信我！这份清单就是你所需要的。

让我们开始吧。

库与框架

在开始之前，我们先来了解一下框架和库的区别。开发者们可以互换使用它们！

库和框架都是其他人编写的可重用代码。

简单来说：

把图书馆想象成去宜家。你家里有地方，但需要一些家具。你不想从零开始，所以去了宜家，在那里你可以挑选你需要的东西。你才是做决定的人。

现在，框架更像是建造一个样板房。你有一套方案，以及一些布局和设计的选择。但最终，蓝图和建造者才是主导者。他们会告诉你在哪里可以添加你的意见，但最终的主导者是他们。

从技术角度来说。

使用库，您可以控制应用程序的流程。您可以决定何时何地使用库的功能。但是使用框架，框架可以控制流程。它为您提供一些插入代码的位置，但它才是代码何时运行的决定者。

我特别推荐了 Freecodecamp 的这篇文章《框架和库的区别》，因为它解释得简单易懂。一定要完整地读一遍！

1. Wing——一种用于云的编程语言。

Wing 是一个专为开发云应用程序而设计的框架。
它允许你在云端构建应用程序，并且语法相当简单。

核心概念是您可以直接在应用程序中指定资源。

您可以运行本地模拟并使用 Winlang 控制台直观地查看每个步骤中发生的情况。

你编写代码。本地测试。编译。部署到云提供商。

您将需要v20 or higherWing 的 Node。

创建一个父目录（我们使用shared-counter），并使用 Vite 设置前端，创建一个新的 React 应用。您可以使用这个 npm 命令。

npm create -y vite frontend --template react-ts

// once installed, you can check if it's running properly.
cd frontend

npm install

npm run dev

您可以使用此 npm 命令安装 Wing。

npm install -g winglang

您可以使用来验证安装wing -V。

Wing 还提供了官方的VSCode 扩展和IntelliJ，后者提供语法高亮、自动补全、跳转到定义以及嵌入式 Wing 控制台支持。您可以在构建应用程序之前安装它！

您可以使用 Wing 作为云后端构建任何全栈应用程序。

创建后端目录。

mkdir ~/shared-counter/backend
cd ~/shared-counter/backend

创建一个新的空的Wing项目。

wing new empty
// This will generate three files: package.json, package-lock.json and main.w file with a simple "hello world" program

wing it // to run it in the Wing simulator
// The Wing Simulator will be opened in your browser and will show a map of your app with a single function.
//You can invoke the function from the interaction panel and check out the result.

使用该命令后结构如下wing new empty。

bring cloud;

// define a queue, a bucket, and a counter
let bucket = new cloud.Bucket();
let counter = new cloud.Counter(initial: 1);
let queue = new cloud.Queue();

// When a message is received in the queue -> it should be consumed
// by the following closure
queue.setConsumer(inflight (message: str) => {
  // Increment the distributed counter, the index variable will 
  // store the value before the increment
  let index = counter.inc();
  // Once two messages are pushed to the queue, e.g. "Wing" and "Queue".
  // Two files will be created:
  // - wing-1.txt with "Hello Wing"
  // - wing-2.txt with "Hello Queue"
  bucket.put("wing-{index}.txt", "Hello, {message}");
  log("file wing-{index}.txt created");
});

您可以安装@winglibs/vite来启动开发服务器，而不是使用它npm run dev来启动本地 Web 服务器。

// in the backend directory
npm i @winglibs/vite

您可以使用提供的 publicEnv 将数据发送到前端backend/main.w。
我们来看一个小例子。

// backend/main.w
bring vite;

new vite.Vite(
  root: "../frontend",
  publicEnv: {
    TITLE: "Wing + Vite + React"
  }
);

// import it in frontend
// frontend/src/App.tsx
import "../.winglibs/wing-env.d.ts"

//You can access that value like this.
<h1>{window.wing.env.TITLE}</h1>

您可以做更多：

读取/更新 API 路由并使用 Wing Simulator 检查它。
使用后端获取值。
同步浏览器，@winglibs/websockets在后端部署一个WebSocket服务器，您可以连接这个WebSocket来接收实时通知。

一些可以节省大量时间的功能包括热重载以获得即时反馈以及顺利生成必要的安全策略。

无需学习每个云提供商的语法。
您的代码可以编译到 AWS、GCP、Azure 或任何自定义平台。太棒了 :D

您可以阅读完整的分步指南，了解如何使用 React 作为前端、使用 Wing 作为后端构建一个简单的 Web 应用程序。测试使用 Wing Simulator 完成，并使用 Terraform 部署到 AWS。

部署后的AWS架构将是这样的。

为了给开发者提供更多选择和更好的体验，Wing 现已全面支持TypeScript (Wing)等其他语言。唯一需要注意的是，你需要安装 Wing SDK。

这也将使控制台完全可以进行本地调试和测试，而无需学习 Wing 语言。

该机翼目前支持以下输出：

AWS CDK 平台
Terraform/AWS 平台
Terraform/GCP 平台
Terraform/Azure 平台
模拟器平台
定制平台

Wing 甚至还有其他指南，因此更容易遵循。

您可以阅读文档并查看示例。

您还可以在操场上使用 Wing来检查结构和示例。

如果你更喜欢教程，那就看这个吧！

Wing 在 GitHub 上有 4.5k+ 颗星，1600+ 个版本，但仍然没有发布 v1 版本，这意味着一件大事。

星翼⭐️

2. Nest——高效且可扩展的服务器端应用程序。

一个渐进式 Node.js 框架，用于使用 TypeScript/JavaScript 构建高效且可扩展的服务器端应用程序。

它使用现代 JavaScript，用 TypeScript 构建（保留与纯 JavaScript 的兼容性），并结合了 OOP（面向对象编程）、FP（函数式编程）和 FRP（函数式反应式编程）的元素。

在底层，Nest 使用 Express，但也提供与 Fastify 等各种其他库的兼容性，从而可以轻松使用大量可用的第三方插件。

Nest 在这些常见的 Node.js 框架（Express/Fastify）之上提供了更高的抽象级别，但也将其 API 直接暴露给开发人员。这为开发人员提供了一定程度的自由。

在我们了解更多信息之前，请先观看 100 秒了解 Nestjs！

考虑到它们提供的灵活性，您当然不必重新发明轮子。

这就是使用 Nest CLI 设置新项目的方法。

npm i -g @nestjs/cli
nest new project-name

这将启动该应用程序。

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

您可以阅读文档。

他们还提供一系列付费课程（我不知道为什么）。如果你需要完整的路线图，并想成为 Nest 的专家，不妨看看。

但我建议使用 Freecodecamp 的这些免费教程进行学习。

NestJs 初学者课程 - 创建 REST API - 大约 3.42 小时，涵盖很多主题。
综合 NestJS 课程- 涵盖 20 个模块，时长 14 小时。

如果你正在寻找入门项目，可以学习一下如何在 NestJS 中使用 Nodemailer 发送电子邮件。通过学习这个，你可以打下扎实的基础。

Nest.js 拥有庞大的开发者社区，并被众多公司使用。查看使用 Nest 的项目和公司的完整列表。

顺便说一句，作为初学者，我最担心的是 Nextjs、Nuxtjs 和 Nestjs 这些类似的名称。我会把所有名称都涵盖进去，这样你就不会感到困惑了。哈哈！

Nest 在 GitHub 上拥有 64k+ 颗星，15k+ 次提交，并且即将v10发布。

星巢⭐️

3. Gatsby - 最佳的基于 React 的框架，具有内置的性能、可扩展性和安全性。

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

它将动态呈现站点的控制和可扩展性与静态站点生成的速度相结合，创造了一个全新的可能性网络。

Gatsby 可以从任何数据源提取数据，无论是 Markdown 文件、无头 CMS（例如 Contentful 或 WordPress），还是 REST 或 GraphQL API。使用源插件加载数据，然后使用 Gatsby 统一的 GraphQL 接口进行开发。

与 Next.js 不同，Gatsby 不执行服务器端渲染。相反，它在构建时在客户端生成 HTML 内容。

我见过一些使用 Gatsby 构建的出色的投资组合。

使用以下 npm 命令开始。

npm init gatsby

它会要求输入网站标题和项目目录的名称。继续按照提示选择您的首选语言（JavaScript 或 TypeScript）、CMS、样式工具和其他功能。

这就是您可以使用它的方法。

cd my-gatsby-site

// to start the local dev server
npm run develop

你可以阅读文档。我个人很喜欢文档的流程。

您还可以按照教程开始学习，《操作指南》和《概念指南》深入讲解 Gatsby 概念以及网站架构。

Gatsby 提供开箱即用的 PWA 和丰富的主题。使用 Gatsby 主题，您的所有默认配置（共享功能、数据源、设计）都会从您的网站中抽象出来，并集成到一个可安装的软件包中。您可以阅读更多关于主题的信息。

例如，gatsby-theme-blog是用于创建博客的官方 Gatsby 主题。可能存在可通过进行配置的主题选项gatsby-config.js。

npm install gatsby-theme-blog

对于内容密集型的企业级网站（例如电商平台或大型媒体网站）来说，Gatsby 并非理想的解决方案。随着内容规模的增长，构建时间将急剧增加。

找到使用 Gatsby 构建的606 个网站的列表。其中 53 个网站是开源的，因此这可以给你一些启发，也可以作为一个起点。

他们还提供了海量插件，并按类别分类，每个插件都有清晰的文档。其中一个例子就是一个可以为你的应用添加 Google Analytics 的插件。

npm install gatsby-plugin-google-analytics

您还可以使用Gatsby 的Starter 库。您还需要什么来使用 Gatsby 构建您的下一个应用？

使用这些参考指南来获取有关 Gatsby API 的详细信息。

如果您更喜欢完整的课程，我建议您观看Gatsby 静态站点生成器教程- Freecodecamp 提供的 9 小时教程。

Gatsby 在 GitHub 上拥有 55k 颗星，目前已发布 v5 版本，有 245k+ 名开发人员在使用。

明星盖茨比⭐️

4. Nextjs——用于 Web 的 React 框架。

由于它提供的优化级别，它是我最喜欢的框架之一。

Next.js 使您能够通过扩展最新的 React 功能并集成强大的基于 Rust 的 JavaScript 工具来创建全栈 Web 应用程序，以实现最快的构建速度。

Next.js 由荷兰公司 Vercel（之前称为 ZEIT）于 2017 年创建。

Next.js 也提供静态生成器，就像 Gatsby 一样。Next.js 的构建原则是，Build once, runs everywhere您可以使用 Next.js 创建 Web 应用程序、移动应用程序、桌面应用程序和渐进式 Web 应用程序。

Nextjs 提供了许多功能，例如文件路由、渲染技术（例如 ISR）以及深层图像和字体优化。您可以查看任何 Nextjs 网站的 SEO 统计数据，在大多数情况下，它都是一流的。

使用以下 npm 命令开始。

npx create-next-app@latest

您可以阅读文档并按照本指南开始。

这其中涉及很多概念，阅读完整的文档可能需要几个月的时间。我之前写了一篇文章，你可以看看。虽然它并没有很出名，但它是我基于多年 Nextjs 经验撰写的最好的文章之一。我还提到了Nextjs 团队提供的官方课程。

你不知道 Nextjs 能做什么

Anmol Baranwal ・ 2024年2月20日

#nextjs #编程 #初学者 #教程

如果您想通过 YouTube 教程学习，我建议您观看这些最新的教程，因为文档经常更新，所以最好观看最近的教程而不是几年前的教程。

Nextjs 13（应用路由器）与 TypeScript - 1 小时教程。
Next.js 14 完整课程 2024 - 3 小时教程。

你也可以观看 100 秒学会 Nextjs。他们添加了一个基础教程，将学习时长缩短至 11 分钟。

我通过文档自学了它，并用它构建了 6 个以上的项目，甚至还开发了一个代码库超过 2 万的 SAAS 应用。正因如此，我才说它是你的最佳框架之一。

使用 Next.js 构建的一些热门网站包括 Auth0、Coinbase、Docker、GitHub、Hulu、Netflix、Sesame、星巴克、Trulia、Twitch 和 Uber。您可以查看所有使用 Nextjs 的网站。

他们还提供了各种可供您直接使用的入门模板。

Next 在 GitHub 上拥有 12 万颗星，即将发布v14.2，NPM 上的每周下载量超过 6000 万次。其代码库显示，目前有 260 万开发者在使用。

星号 Nextjs ⭐️

5. Preact - 具有相同现代 API 的快速 3kB React 替代品。

Preact 是一个轻量级、快速、高性能的库，是 React 的替代品。Preact 的大小仅为 3kb（最小化和 gzip 压缩后），但却提供了 React 的所有必要功能，使其成为最佳的 JavaScript 框架之一。

谷歌高级开发项目工程师 Jason Miller 创建了 Preact。

Preact 基本上具备虚拟 DOM 组件的所有功能，但没有以下开销：

熟悉 React API 和模式，即 ES6 类、钩子和功能组件。
通过简单的 preact/compat 别名实现广泛的 React 兼容性。
您所需的一切，如 JSX、VDOM、DevTools、HMR、SSR。

由于它们支持相同的 API，您可以在生产过程中轻松地从现有项目中的 React 切换到 Preact。

下面展示了示例代码结构。您也可以查看此示例Codepen ，以了解 Preact 代码库的结构。

使用以下 npm 命令开始。

npm init preact

这就是运行开发服务器的方法。

# Go into the generated project folder
cd my-preact-app

# Start a development server
npm run dev

你需要配置一些东西，尤其是别名。请遵循本指南。

您可以阅读文档并查看详细的演示和示例列表。

他们还提供了基于网络的教程，您可以按照该教程学习 Preact。

如果您需要示例应用程序、样板、组件、工具包等，请使用Awesome Preact 。

Preact 在 GitHub 上已有 36k 颗星，并且即将v10发布。

星形 Preact ⭐️

6. tRPC – 端到端类型安全 API 变得简单。

tRPC 允许您轻松构建和使用完全类型安全的 API，而无需模式或代码生成。

trpc gif — 上面的客户端没有从服务器导入任何代码，只导入了它的类型声明

如果我们要深入了解，那么你一定要读一些历史。

API 简史：RPC、REST、GraphQL、tRPC

ZenStack 的 JS ・ 2023 年 1 月 11 日

#webdev #javascript #api #typescript

目前，GraphQL 是使用 TypeScript 实现类型安全 API 的主要方式（这太棒了！）。由于 GraphQL 的设计理念是与语言无关的 API 实现规范，因此它无法充分利用 TypeScript 等语言的强大功能。

如果您的项目是使用全栈 TypeScript 构建的，则可以在客户端和服务器之间直接共享类型，而无需依赖代码生成。

tRPC 面向全栈 TypeScript 开发者。它让您可以轻松编写可在应用前后端安全使用的端点。API 契约的类型错误将在构建时被捕获，从而减少应用程序在运行时出现错误的可能性。

这是为 mono repo 设计的，因为您需要从服务器导出/导入类型定义。

使用以下 npm 命令开始。

npm install @trpc/server@next @trpc/client@next

您必须定义一个带有实例的后端路由器。更多详情，请参阅快速入门指南。

理解trpc 所涉及的概念（例如 rpc 和使用的术语）非常重要。

您可以阅读文档。

如果您已经在一个混合语言的团队中工作，或者有您无法控制的第三方消费者，那么您应该创建一个与语言无关的 GraphQL-API。

如果您想测试一下，我建议使用包含最少示例的这个模板。

您还可以观看这个45 分钟的 YouTube 教程来了解有关 trpc 的更多信息。

它们在 GitHub 上拥有 32k+ 颗星，目前处于v11测试阶段，并且有 51k 名开发人员在使用。

星号 tRPC ⭐️

7.Nuxtjs -直观的 Vue 框架。

Nuxt 是一个基于 Vue.js 生态系统的渐进式开源框架，用于构建高性能 Web 应用程序，尤其是服务器端渲染的应用程序。

但请记住，Nuxt 不能替代 Vue.js，因为它无法独立运行。它也不能被视为像 Express 那样成熟的后端框架。

观看 100 秒 Nuxtjs 来掌握整体概念。

Nuxt 是创建这三种 Web 应用程序的最佳 JavaScript 框架之一 - 预渲染静态页面、单页 Web 应用程序（SPA）、服务器端渲染 Web 应用程序（SSR），甚至通用应用程序。

开发人员喜欢 Nuxt，尤其是因为它拥有丰富的库和模块。

使用以下 npm 命令开始。

npx nuxi@latest init <my-project>

您可以阅读文档并检查codesandbox 示例。

您可以按照本指南了解更多关键概念。

有很多集成选项，因此您可以更轻松地继续使用您喜欢的工具和服务。

您可以查看免费课程列表来了解 Nuxt 生态系统。

如果您想要推荐的课程，那么请学习Nuxt 3 — 初学者课程- Freecodecamp 提供的 3 小时教程。

使用 Nuxt 构建的一些热门网站包括 Aircall、Amplitude、Backmarket、Bitpay、Bootstrap Vue、Fox News、Gitlab、Icons8、Instrument、MyScript、Nespresso、Note.com、Ozon.ru、Roland Garros、System76、Todoist、Upwork 和 Wappalyzer。查看不同类别下的完整网站列表。

如果您想快速测试和构建，那么我建议您查看入门模板。

Nuxt 在 GitHub 上拥有 51k+ 颗星，并被 318k+ 开发人员使用。

星空努克斯特⭐️

8. Ember.js——一个用于创建雄心勃勃的 Web 应用程序的 JavaScript 框架。

Ember.js 是一个 JavaScript 框架，用于为企业构建可扩展的单页 Web 应用程序。与其他框架不同，Ember.js 的基础是模型-视图-视图模型 (MVVW) 架构。

Ember.js 最初是一个 SproutCore 2.0 框架，后来由其创建者 Yehuda Katz 更名为 Ember.js，Yehuda Katz 是一位经验丰富的开发人员，被誉为 jQuery 的主要创建者之一。

他们还提供了命令行界面工具。Ember CLI 是创建、构建、测试和提供构成 Ember 应用或插件的文件的官方方式。

npm install -g ember-cli

尽管与 React、Vue 和 Svelte 相比，Ember.js 是一个较老的前端 JavaScript 框架，但它仍然功能强大，并拥有庞大的用户群，其中包括微软、LinkedIn、Netflix 和 Twitch 等大公司。查看完整列表。

有了强大的默认设置，您可能永远不需要在应用程序中配置任何内容，但如果您需要，可以选择它们！

这意味着 Ember.js 遵循“CoC - 约定优于配置”方法，确保在大多数情况下不需要任何配置，以便您可以直接跳转到编码和构建 Web 应用程序。

它们还支持类似于 AngularJS 的双向数据绑定。

随着我们深入探讨，了解 ember.js 的诞生、背后的先驱者，以及开源软件开发过程中那些改变人生的决策至关重要。观看视频！

安装 Ember CLI 后。

npm install -g ember-cli

您可以创建一个新的应用程序，如图所示。

ember new ember-quickstart --lang en

cd ember-quickstart
npm start

您可以阅读详细的快速入门文档和官方指南。

要学习 ember.js，你可以按照官方团队创建的分步教程进行操作。你可以在Ember API 文档上阅读有关 API 的更多信息。

Ember 中有数千个 JavaScript 库运行良好。当一个 npm 包提供一些 Ember 特有的功能时，它们被称为addon。插件提供了一种编写可复用代码、共享组件和样式、扩展构建工具等的方式——所有这些都只需极少的配置。查看完整的插件列表。

如果您正在寻找更多文章来学习 Ember.js，我推荐这些：

Ember JS Essentials： Startech 提供的安装及其功能初学者指南。
Toptal 撰写的构建您的第一个 Ember.js 应用程序的指南。

这足以理解结构并决定 Ember 何时适合您的项目。

他们在 GitHub 上拥有 22k+ 颗星，并且发布了v5.8500 多个版本。

星号 Ember.js ⭐️

9. Backbone.js——为你的 JS 应用提供一些带有模型、视图、集合和事件的 Backbone。

Backbone.js 是一个基于 JavaScript 的框架，通过 RESTful JSON 接口连接到 API。

Jeremy Ashkenas 因创建了一些最好的 JavaScript 框架（例如 CoffeeScript 和 Underscore.js）而闻名，他于 2010 年 10 月推出了 Backbone.js。

它旨在创建单页 Web 应用程序并保持不同 Web 应用程序组件（例如众多客户端和服务器）之间的同步。

Backbone.js 以小巧轻便而闻名，因为它只需要 jQuery 和一个 JavaScript 库 Underscore.js 即可使用整个库。

Backbone.js 通过提供具有键值绑定和自定义事件的模型、具有丰富的可枚举函数 API 的集合、具有声明性事件处理的视图来为 JavaScript 密集型应用程序提供结构，并通过 RESTful JSON 接口将其全部连接到您现有的应用程序。

这是一个简单的主干视图。

var AppView = Backbone.View.extend({
  // el - stands for element. Every view has an element associated with HTML
  //      content will be rendered.
  el: '#container',
  // It's the first function called when this view is instantiated.
  initialize: function(){
    this.render();
  },
  // $el - it's a cached jQuery object (el), in which you can use jQuery functions
  //       to push content. Like the Hello World in this case.
  render: function(){
    this.$el.html("Hello World");
  }
});

您可以阅读文档。

Backbone.js 被许多值得信赖的公司使用，例如沃尔玛、Pinterest、SoundCloud 等等。

您可以参考他们的wiki，其中记录了教程、博客文章和示例网站。

您可以参考几篇很棒的文章来了解更多信息：

根据 repo 统计，它们在 GitHub 上拥有 28k+ 颗星，并被 66k+ 开发人员使用。

明星 Backbone.js ⭐️

10. Svelte——控制论增强的网络应用程序。

Svelte 是一种构建 Web 应用程序的新方法。

Svelte 由著名前端开发者 Rich Harris 创建，于 2016 年首次推出，并迅速蹿红。

许多开发人员认为 Svelte 是一个真正改变游戏规则的革命性想法，它从根本上改变了我们编写 Web 应用程序的方式。

与 React 或 Vue.js 等其他 JavaScript 框架不同，Svelte 没有虚拟 DOM。相反，您可以使用简单的 HTML、CSS 和 JavaScript 代码构建无需样板的组件。

然后，Svelte Compiler 在构建时将此代码编译为小型的无框架原始 JavaScript 模块，并在状态发生变化时精确更新 DOM。

因此，与 React 或 Vue.js 等其他传统框架不同，Svelte 不需要高浏览器处理。

Svelte 依靠响应式编程来精准地更新 DOM。因此，与几乎所有其他框架相比，它可以实现最快的渲染速度，并在大多数性能基准测试中名列前茅。

使用以下 npm 命令开始。

npm create svelte@latest my-app

您可以这样使用它。

cd my-app
npm install
npm run dev -- --open

您可以阅读文档。该团队还提供了官方的 VSCode 扩展，可以与其他各种编辑器和工具集成。

他们还提供了详细的基于网络的教程来学习 Svelte。

您可以查看所有示例来了解关键概念和结构，包括 DOM 事件、生命周期、运动、转换和处理 SVG。

您可以观看这些教程来了解有关 Svelte 的所有知识。

学习 Svelte – 初学者完整课程- Freecodecamp 提供的 23 小时教程。
Sveltekit 和 Tailwind - Freecodecamp 提供的 2 小时教程。

非常感谢老师们免费提供如此详细的教程！

Svelte 在 GitHub 上拥有 76k+ 颗星，即将发布v4.2，并有 282k 名开发人员在使用。

星空瘦身⭐️

11. Remix——构建更好的网站。

Remix 是一个全栈 Web 框架，可让您专注于用户界面并通过 Web 基础知识进行工作，以提供快速、流畅且有弹性的用户体验，并可部署到任何 Node.js 服务器，甚至是边缘的非 Node.js 环境（如 Cloudflare Workers）。

Remix 建立在 React Router 之上，具有以下四个特点：

编译器
服务器端 HTTP 处理程序
服务器框架
浏览器框架

您可以观看此视频来了解有关 Fireship 的 Remix 的更多信息。

通过嵌套路由，Remix 可以消除几乎所有的加载状态，如图所示。

使用以下 npm 命令开始。

npx create-remix@latest

这就是您可以使用它的方法。

mkdir my-remix-app
cd my-remix-app
npm init -y

# install runtime dependencies
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom

# install dev dependencies
npm i -D @remix-run/dev vite

如果您想要包含您的服务器，请阅读本快速入门指南，并了解如何使用 Remix Vite 插件提供 Vite 配置，因为 Remix 使用 Vite。

你可以阅读文档。他们根据你的用途进行了分发，顺便说一句，我很喜欢这一点。

查找使用 Remix 构建的网站的完整列表。

你也应该看看社区制作的Remix 资源。其中一些资源很有帮助，可以改善整个生态系统。

如果您是第一次接触 Remix，我建议您阅读官方团队创建的Remix 教程 -30 分钟。

他们在 GitHub 上有 27k+ 颗星并且即将v2.8发布。

明星混音⭐️

12. AdonisJS – 用于构建 Web 应用程序和 API 服务器的 TypeScript 第一个 Web 框架。

AdonisJS 是一个功能齐全的 Node.js 后端框架。该框架从零开始构建，高度重视开发人员的人体工程学和易用性。

AdonisJS 专注于后端，并允许您选择所需的前端堆栈，这意味着前端不可知。

它是 Node.js 社区中最稀有的框架之一，它附带一套第一方软件包，可帮助您创建和发布产品，而无需浪费数百小时组装不同的 npm 软件包。

从根本上讲，AdonisJS 为您的应用程序提供了结构，配置了无缝的 TypeScript 开发环境，为您的后端代码配置了 HMR，并提供了大量维护良好且有详细文档的软件包。

他们稍微强调了测试，这非常好。

使用以下 npm 命令开始。

npm init adonisjs@latest hello-world

AdonisJS 采用经典的 MVC 设计模式。首先使用函数式 JavaScript API 定义路由，将控制器绑定到路由，然后在控制器中编写处理 HTTP 请求的逻辑。

import router from '@adonisjs/core/services/router'
import PostsController from '#controllers/posts_controller'

router.get('posts', [PostsController, 'index'])

控制器可以使用模型从数据库获取数据并呈现视图（又名模板）作为响应。

import { HttpContext } from '@adonisjs/core/http'
import Post from '#models/post'

export default class PostsController {
  async index({ view }: HttpContext) {
    const posts = await Post.all()
    return view.render('pages/posts/list', { posts })
  }
}

如果您正在构建 API 服务器，则可以用 JSON 响应替换视图层。但是，处理和响应 HTTP 请求的流程保持不变。

您可以阅读文档。

您还可以参考入门套件。

如果您刚开始使用 Adonisjs，他们还提供了一个VSCode 扩展，您应该使用它。

您必须查看Awesome Adonisjs，它提供了一系列很棒的书签、包、教程、视频、课程、使用此资源的网站的公司以及来自 AdonisJS 生态系统的其他很酷的资源。

大多数时候，开始接触新事物都很困难，因此团队提供了10 多门课程来了解 Adonisjs 生态系统。

他们在 GitHub 上拥有 15k+ 颗星并且即将v6.8发布。

星 AdonisJS ⭐️

13. Astro——内容驱动网站的网络框架。

Astro 是一个开源的服务器优先 Web 框架，它融合了静态网站生成 (SSG) 和服务器端渲染 (SSR) 的优势，能够创建快速且 SEO 友好的网站。Astro 专为支持博客和电商等内容丰富的网站而构建，并拥有强大的开发生态系统。

使用以下 npm 命令开始。

npm create astro@latest

您可以阅读使用 Astro 构建的文档和网站展示。其中一些网站真的非常棒，视觉效果令人震撼！

Astro 支持 React、Preact、Svelte、Vue、Solid、Lit、HTMX、Web 组件等。阅读所有功能文档。

您可以按照本教程使用 Astro 搭建您的第一个博客。或者使用 Astro 的主题来启动您的下一个项目。其中一些是免费的，有些则需要付费！

您可以看到所示的加载性能，甚至我对此感到惊讶。

性能至关重要，尤其是在进行商业活动时，因为高效的算法可以节省更多的金钱和麻烦。

无论是在可访问性、图标还是使用不同的库方面，集成选项都非常丰富。

您可以观看Freecodecamp 制作的Astro Web Framework Crash Course一小时教程。

Astro 在 GitHub 上拥有 42k+ 颗星，已发布v4.61800+ 个版本，并被 112k+ 名开发人员使用。

星空天文⭐️

14. Fresh——下一代 Web 框架。

Fresh 是下一代 Web 框架，专为速度、可靠性和简单性而构建。

一些突出的特点：

基于岛屿的客户端补水，实现最大程度的互动。
零运行时开销意味着默认情况下不会向客户端发送任何 JS。
无需配置。
开箱即用的 TypeScript 支持。

该框架使用 Preact 和 JSX 进行渲染和模板化，处理服务器和客户端上的任务。

此外，Fresh 消除了构建步骤。您编写的代码可直接在服务器端和客户端运行。TypeScript 或 JSX 到纯 JavaScript 的转换会动态地、精确地在需要时进行。这有助于实现极快的迭代周期和快速部署。

从此开始吧。

deno run -A -r https://fresh.deno.dev

Fresh 所采用的最重要的架构决策是使用岛屿架构模式。

这意味着 Fresh 应用程序默认向客户端发送纯 HTML。服务器渲染页面的各个部分随后可以通过交互式小部件（岛）独立地重新水化。

客户端仅负责渲染页面中那些交互性足够强、值得额外投入的部分。任何纯静态内容都没有相关的客户端 JavaScript，因此非常轻量。

您可以阅读文档。

您可以找到所有使用此功能构建的网站，例如Max Schmidt的作品集网站。

他们在 GitHub 上有 11k+ 颗星并且即将v1.6发布。

星鲜⭐️

15. Vue.js——一个用于在 Web 上构建 UI 的渐进式 JavaScript 框架。

Vue.js 是一个渐进式框架，因为它能够通过双重集成模式简化高端单页 Web 应用程序的设计。了解 Vue 的所有使用方法，包括嵌入 Web 组件、独立脚本，甚至构建具有服务器端渲染或静态站点生成的复杂应用程序。

Vue.js 使用 MVVM（模型-视图-视图模型）架构，使一切变得简单、灵活且对初学者友好。

Vue.js 于 2014 年由 Google 开发人员 Evan You 首次推出，他从 AngularJS 中汲取灵感，提供了一种简单、轻量且高效的替代方案。

Vue.js 在借鉴 ReactJS 和 AngularJS 部分功能的同时，也对其进行了增强，以提供更流畅、更友好的体验。例如，Vue.js 将 AngularJS 的双向数据绑定与 React 高效的虚拟 DOM 相结合。

与 React 不同，Vue 内置了 MVC 框架，可以快速轻松地进行配置。此外，Vue.js 的压缩版本大小仅为 18-20 KB，比 React 或 AngularJS 等臃肿笨重的竞争对手轻得多。

Vue.js 还包含一个用于 CSS 转换和动画的便捷内置组件。

观看 100 秒了解 Vue.js 以了解更多信息！

使用以下 npm 命令开始。

npm create vue@latest

此命令将安装并执行官方 Vue 项目脚手架工具 create-vue。您将收到一些可选功能的提示，例如 TypeScript 和测试支持。

这就是启动开发服务器的方法。

cd <your-project-name>
npm install
npm run dev

一个简单的应用程序。

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>