掘金 后端 ( ) • 2024-04-19 16:14

本文主要介绍了Node.js Web服务器生态系统,包括服务端框架、服务端渲染(SSR)技术、全栈框架以及如何使用Express.js框架入门Web应用开发。

webserver生态

服务端框架

分类 名称 开源协议 GitHub地址 星标数量(约) 服务端框架 Express MIT expressjs/express 63.7k 服务端框架 Koa2 MIT koajs/koa 34.8k 服务端框架 Hapi BSD-3-Clause hapijs/hapi 14.5k 服务端框架 Fastify MIT fastify/fastify 30.5k 服务端框架 NestJS MIT nestjs/nest 64.2k SSR框架 Next.js MIT vercel/next.js 120k SSR框架 Nuxt.js MIT nuxt/nuxt.js 51.8k 全栈框架 SvelteKit MIT sveltejs/kit - 全栈框架 TSRPC MIT tsrpc/tsrpc 1.7k

请注意,SvelteKit作为Sapper的继任者,继续在Svelte的主仓库下发展,因此没有单独的星标数量。Svelte项目的GitHub地址是sveltejs/svelte,它包含了SvelteKit的代码。

sveltejs/svelte 当前约76.4k star

next的增长真是太恐怖了,能力只停留在hello word的层次严重阻碍了我的进步。找个机会也搞一搞next去

整个node相关的博客只会出现express/koa、fastify、next/nuxt以及TSPRC

截止时间:2024年04月19日12:19:16

大写注意!!!

还有一些框架就不写了,有兴趣可以自己去找一找教程学习

Express

Express是一个灵活的Node.js Web应用框架,提供了一系列强大的特性帮助创建各种Web应用和API。它是最流行的Node.js框架之一,以简单、灵活著称。

特点
  • 简洁的API:Express提供了简洁而强大的API,使得开发Web应用变得非常直接和便捷。
  • 中间件架构:通过使用中间件,可以轻松扩展Express应用的功能。
  • 路由系统:Express的路由系统允许创建RESTful Web服务和应用。
  • 高度可定制:Express几乎不对Node.js本身进行抽象,给开发者提供了极高的自由度和灵活性。
  • 强大的社区支持:拥有庞大的社区,提供了丰富的插件和中间件,方便功能的扩展。
Express "Hello, World!" 示例
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Express:Hello, World!');
});

app.listen(3000, () => {
  console.log('App listening on http://localhost:3000/');
});

Koa2

Koa2是由Express原班人马打造的一个新的Web框架,它更加轻量级,使用async/await关键字来避免回调地狱,提高代码的可读性和可维护性。

特点
  • 现代化的语法:Koa2充分利用ES2017的async/await语法,使得异步代码更加清晰。
  • 轻量级:Koa2本身非常轻量,核心模块只包含基础的功能。
  • 错误处理优秀:通过中间件的上下文(ctx)机制,提供了更加强大和方便的错误处理方式。
  • 高度可定制:和Express类似,Koa2也提供了高度的可定制性,可以根据需要添加各种插件和中间件。
  • 优雅的API设计:Koa2的API设计简洁优雅,易于理解和使用。
Koa2 "Hello, World!" 示例
const Koa = require("koa");
const app = new Koa();

app.use(async (ctx) => {
  ctx.body = "Koa:Hello, World!";
});

app.listen(3000, () => {
  console.log("App listening on http://localhost:3000/");
});

Hapi

Hapi是一个强大的服务器框架,用于构建应用程序和服务。它允许开发者专注于编写可重用的应用逻辑,而不是花时间在低级协议处理上。

特点
  • 丰富的功能:Hapi提供了丰富的功能,如输入验证、缓存、认证等,这些都是内置支持的。
  • 插件系统:Hapi的一个核心概念是插件系统,它允许你轻松地将功能分割成独立的可重用模块。
  • 配置导向:Hapi的配置导向特性使得路由和服务的配置变得非常直观。
  • 社区支持:虽然社区规模不如Express,但Hapi拥有一群忠实的用户和贡献者,提供了许多高质量的插件。
  • 用于大型应用:Hapi的设计理念适合构建大型应用和服务,提供了强大的工具和架构来支持复杂的应用需求。
Hapi "Hello, World!" 示例
const Hapi = require('@hapi/hapi');

const init = async () => {
    const server = Hapi.server({
        port: 3000,
        host: 'localhost'
    });

    server.route({
        method: 'GET',
        path: '/',
        handler: (request, h) => {
            return '@hapi/hapi:Hello, World!';
        }
    });

    await server.start();
    console.log('Server running on %s', server.info.uri);
};

init();

这些框架各有特色,选择哪个框架取决于项目需求、团队熟悉度以及对特定特性的需求。

Fastify

Fastify以其高性能为主要卖点,它专注于提供最快的路由和最低的延迟响应,适合构建高性能的Web应用和API。Fastify还提供了丰富的插件生态系统,方便扩展功能。

特点
  • 高性能:Fastify设计时考虑到了高性能需求,其路由和响应处理非常快速。
  • 低开销:通过高效的架构设计,Fastify尽量减少了额外的性能开销。
  • 插件系统:Fastify拥有一个强大的插件生态系统,允许开发者轻松扩展框架功能。
  • 模式验证:内置支持JSON Schema,提供了强大的路由请求和响应数据验证功能。
  • 开发者友好:提供了详细的文档和清晰的开发体验,使得开发者可以快速上手和构建应用。
Fastify "Hello, World!" 示例

下面是一个使用Fastify创建的简单“Hello, World!”应用示例:

const fastify = require("fastify")({ logger: true });

// 声明路由
fastify.get("/", async (request, reply) => {
  return "Fastify:hello word";
});

// 启动服务器
const start = async () => {
  try {
    await fastify.listen({ port: 3000 });
    fastify.log.info(`server listening on ${fastify.server.address().port}`);
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};
start();

在这个示例中,首先通过调用fastify()函数创建了一个Fastify实例,其中启用了日志记录功能。然后,使用.get()方法声明了一个路由,当访问根路径(/)时,返回一个包含hello: 'world'的JSON对象。最后,通过调用start()函数启动服务器,监听3000端口。

NestJS

NestJS是一个用于构建高效、可靠的服务器端应用程序的框架。它主要使用TypeScript开发,但也支持纯JavaScript。NestJS以Angular的设计模式为灵感,提供了出色的模块化、面向切面编程(AOP)以及微服务支持。这使得构建复杂的后端应用更加系统化和模块化。NestJS可以基于Express或可选地基于Koa来运行,因此它结合了这两个框架的优点,并在此基础上提供了一个层次化的、综合性的框架。

特点
  • TypeScript支持:NestJS是以TypeScript为首选语言构建的,利用TypeScript的强类型和最新ECMAScript特性,提高了代码的质量和可维护性。
  • 模块化:通过模块化的方式组织代码,每个模块负责一个独立的功能,有助于保持代码的整洁和可管理性。
  • 面向切面编程(AOP):支持面向切面编程,允许开发者切入应用的不同生命周期,例如日志记录、权限控制等,这增加了代码的复用性和灵活性。
  • 微服务支持:内置了微服务模块,可以轻松创建微服务架构的应用,支持多种微服务传输层。
  • 灵活性:虽然NestJS提供了许多约定,但它设计得非常灵活,可以根据需要轻松替换内部组件。
  • 丰富的生态系统:拥有丰富的模块和库供选择,可以轻松集成各种功能,如数据库、身份验证、文件上传等。

NestJS的设计哲学和架构模式,尤其是其对TypeScript的深度集成和模块化的方式,使其成为构建复杂、大型后端应用的理想选择。它的这些特点尤其适合团队开发和企业级应用,可以帮助开发者和团队提高开发效率,同时保持代码的可维护性和可扩展性。

全栈框架

Sapper/SvelteKit

Sapper/SvelteKit 是基于 Svelte 的应用框架,旨在为构建高效的全栈应用提供工具和约定。SvelteKit 作为 Sapper 的继任者,带来了改进的路由、服务端渲染(SSR)和静态站点生成(SSG)功能。与 React 和 Vue 不同,Svelte 在构建时进行编译,生成高效的 JavaScript 代码,以减轻客户端的负担。

特点
  • 高效的编译:在构建时将应用编译为高效的 JavaScript 代码,优化运行时性能。
  • 全栈能力:提供一套完整的工具和约定,支持从前端到后端的全栈开发。
  • 改进的路由和渲染:引入改进的路由系统和服务端渲染(SSR)/静态站点生成(SSG)功能,提升应用性能和SEO。
  • 易于使用:设计简洁,易于学习和使用,适合各种规模的项目开发。

TSRPC

TSRPC 是一个基于 TypeScript 的高效、灵活的 RPC 框架,旨在提供一种类型安全的方式来构建客户端和服务器端的通信。它利用 TypeScript 的强类型特性,确保通信双方的数据类型一致性,从而减少运行时错误。TSRPC 适用于需要高性能通信的分布式系统、游戏服务器、实时应用等场景。

特点
  • 类型安全:利用 TypeScript 提供的类型系统,实现请求和响应的类型安全,减少类型错误。
  • 高性能:设计时考虑到性能,适用于需要高性能通信的场景。
  • 易于使用:提供了简洁的 API 和清晰的文档,使得开发者可以快速上手。
  • 跨平台:可以在多种平台和环境中使用,包括 Node.js、浏览器等。
  • 灵活性:支持多种通信协议,如 HTTP/HTTPS、WebSocket 等,适应不同的应用需求。

服务端渲染(SSR)

Next.js 和 Nuxt.js

Next.jsNuxt.js 分别是基于 React 和 Vue 的 SSR 框架。它们提供服务端渲染的能力,以改善 Web 应用的首次加载性能和 SEO。这两个框架均提供了一套完整的开发体验,包括路由、状态管理和构建工具,简化了 SSR 应用或静态站点的开发过程。

特点
  • 服务端渲染:通过服务端渲染提升首次加载性能和 SEO。
  • 完整的开发体验:提供路由、状态管理和构建工具等完整的开发体验。
  • 易于上手:设计理念和文档齐全,便于新手学习和使用。
  • 灵活的构建选项:支持静态站点生成(SSG)和服务端渲染(SSR),适应多种部署需求。

Express.js 框架入门

Express.js 是一个灵活的 Node.js Web 应用框架,提供了一系列强大的特性帮助你创建各种 Web 和移动设备应用。下面我们将通过基础概念、模板引擎、静态文件服务以及如何构建 RESTful API 来入门 Express.js。

基础概念:路由、中间件

路由(Routing)

路由是Web应用的核心,它指定了应用如何响应客户端对特定端点的请求。端点是指URI(或路径)和特定的HTTP请求方法(如GET、POST等)的组合。

示例代码:

const express = require('express');
const app = express();

// 定义一个简单的路由
app.get('/', (req, res) => {
  res.send('Hello, Express!');
});

app.listen(3000, () => {
  console.log('App listening on port 3000');
});

中间件(Middleware)

中间件是Express应用的核心,它可以访问请求对象(req)、响应对象(res)和应用的请求-响应循环中的下一个中间件函数。

示例代码:

app.use((req, res, next) => {
  console.log('Time:', Date.now());
  next();
});

模板引擎和静态文件服务

模板引擎

Express允许你使用模板引擎,从而可以在服务器端生成HTML,带有动态数据并发送到客户端。

示例代码(使用EJS模板引擎):

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index', { title: 'Express Demo', message: 'Hello, Express with EJS!' });
});

静态文件服务

Express提供了一个内置的中间件express.static来服务静态资源文件,如图片、CSS和JavaScript文件。

示例代码:

app.use(express.static('public'));

构建 RESTful API

构建RESTful API意味着创建符合REST架构风格的Web服务。REST利用HTTP请求方法来表示操作,使得Web服务设计更加简洁和统一。

示例代码:

// 获取所有资源
app.get('/api/resources', (req, res) => {
  res.send('List of resources');
});

// 创建一个新资源
app.post('/api/resources', (req, res) => {
  // 创建资源逻辑
  res.send('Resource created');
});

// 获取指定ID的资源
app.get('/api/resources/:id', (req, res) => {
  let id = req.params.id;
  // 根据id获取资源逻辑
  res.send(`Resource with id ${id}`);
});

通过以上示例,你可以看到Express.js如何简洁高效地支持Web应用开发,从基本的路由和中间件到复杂的RESTful API设计。Express的灵活性和简单性使其成为Node.js开发者的首选框架之一。