简介

在上一篇文章中，我探讨了三种最流行的 Node 框架:Express、Koa 和 Hapi 的区别、优点和缺点。在这篇文章中，我们将研究另外三种非常流行的框架之间的区别:Next、Nuxt 和 Nest。这三个框架都是服务器端渲染，它们分别与 React、Vue 和 Angular(三个目前最流行的前端框架) 密切相关

• 我们的比较将基于一下几点：

  • GitHub Stars 和 npm 下载
  • 安装
  • 基本的 Hello World 应用程序
  • 好处
  • 缺点
  • 性能
  • 社区活跃度

Next

Next 是一个 React 框架，允许使用 React 构建 SSR 和静态 web 应用

• start

  • GitHub Stars: +36,000
  • npm weekly downloads: +300,000

• 安装

  next react react-dom 是必不可少的

      npm install --save next react react-dom

  package.json 中添加脚本，如下所示：

      {
        "scripts": {
          "dev": "next",
          "build": "next build",
          "start": "next start"
        }
      }

  next 将读取 page 目录下的 js 文件，并解析成页面路由

• Hello World

  项目内创建目录文件 ./pages/index.js

      function Home() {return <div>Hello world!</div>;}
      
      export default Home;
      
      // npm run dev
      // 然后访问 http://localhost:3000

• 好处

  • 默认情况下，每个组件都是服务器渲染的
  • 自动代码拆分，加快页面加载速度
  • 不加载不必要的代码
  • 简单的客户端路由（基于页面）
  • 基于 Webpack 的开发环境，支持模块热更新（HMR）
  • 获取数据非常简单
  • 支持任何 Node HTTP 服务器实现，如 Express
  • 支持 Babel 和 Webpack 自定义
  • 能够部署在任何能运行 node 的平台
  • 内置页面搜索引擎优化（SEO）处理

• 缺点

  • Next 不是后端服务，应该与后台操作独立开
  • 如果你只想创建一个简单的 WEB 应用，那么它可能会是牛刀杀鸡
  • 数据会在客户端和服务器重复加载
  • 没有实现前后分离的项目，迁移到 Next 是一件痛苦的事，可能需要双倍工作

• 性能

  性能基于一下两点

  • 1、使用 Apache Bench 测试吞吐量。
  • 2、使用 lighthouse 测试 Preformance、Accessibility、Best Practices、SEO

 这是 Next 基本 HelloWorld 程序。每秒能处理 550.87 个请求。每个请求花费的平均时间为 18.153ms

lighthouse 测试报告中可以看到 Preformance、Accessibility、Best Practices、SEO 都高于 70，虽然比其他两个框架低，但不得不说已经是一个比较好的数据，Best Practices 得分 nuxt 则是高于其他俩个

• 社区活跃度

  • 贡献者数量：678
  • Pull Requests: 3,029
  • 社区相当活跃

Nuxt

Nuxt 是一个基于 Vue 的通用应用框架，预设了利用 Vue 开发服务端渲染的应用所需要的各种配置，主要关注的是应用的 UI 渲染

• star

  • GitHub stars：+19,000
  • npm weekly downloads: +100,000

• 安装

  为了快速入门，Nuxt.js 团队创建了脚手架工具 create-nuxt-app

      // 确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）npx create-nuxt-app < 项目名 >

  它会让你进行一些选择: 在集成的服务器端框架如:Express、Koa、Hapi、Feathers、Micro、Adonis (WIP)；选择您喜欢的 UI 框架:Bootstrap、Vuetify、Bulma、Buefy 等等

• Hello World

  Nuxt 依据 pages 目录结构自动生成 vue-router 模块的路由配置

      // ./pages/index.vue
      <template>
        <div>
          <h1>Hello world!</h1>
          <NLink to="/about">
            About Page
          </NLink>
        </div>
      </template>

• 好处

  • 它的主要范围是 UI 渲染，同时抽象出客户端 / 服务器分布
  • 静态渲染、前后分离
  • 自动代码分层
  • 服务、模板皆可配置
  • 项目结构清晰
  • 组件与页面无缝切换
  • 默认支持得 ES6 / ES7
  • 支持开发热更新
  • 路由级别的异步数据获取
  • 支持静态文件服务
  • 样式预处：Sass，Less，Stylus 等

• 缺点

  • 周边资源较少
  • 开发复杂的组件可能会很麻烦
  • 自定义配置显得很麻烦
  • 很多具有副作用的数据操作 this.items[key]=value
  • 高流量可能会给服务器带来压力
  • 只能在某些挂钩中查询和操作 DOM

• 性能

  Nuxt 中的基本 HelloWorld 应用。每秒能处理 190.05 个请求。平均一个请求时间为 52.619 毫秒。在此度量标准上，Nuxt 与其他两个框架相比表现最差

  Lighthouse 测试报告中 Preformance、Accessibility、SEO 三项中得分最高

• 社区活跃

  • 贡献者数量：191
  • Pull Requests：1,385

Nest

Nest 是一个渐进式 Node 框架, 深受 Angular 的启发。用于构建高效，可扩展的 Node. 服务器端应用程序的框架。使用 TypeScript 构建, 保留与纯 JS 的兼容性，集 OOP（面向对象编程）,FP（函数式编程）,FRP（响应式编程）一身。服务引擎盖默认使用 Express 但也提供与各种其他库的兼容性，例如 Fastify，允许轻松使用可用的无数第三方插件

• 安装

  nest 提供 cli 使用该 cli 命令安装 Nest 并创建新项目

      npm i @nestjs/cli
      nest new project-name

  或者，使用 Git 安装 TypeScript 启动项目：

      git clone https://github.com/nestjs/typescript-starter.git project
      cd project
      npm install
      npm run start

• Hello World

  使用该 npm cli 命令创建新项目后,src 目录下会出现几个核心文件，main.ts 是我们的入口

      // 创建一个服务然后监听 3000 端口
      import {NestFactory} from '@nestjs/core';
      import {ApplicationModule} from './app.module';
      
      async function bootstrap() {const app = await NestFactory.create(ApplicationModule);
        await app.listen(3000);
      }
      bootstrap();
      
      // 启动起来 
      npm start

• 好处

  • 作为基于 TypeScript 的 Web 框架，可以进行严格的类型定义
  • 自动生成 Swagger 文档
  • Nest 中的文件夹结构主要基于 Angular
  • 基于模块的框架，代码可复用
  • 项目结构清晰, 只需要关注业务无需关注架构
  • 使用最新版本的 TypeScript，意味着 JS 的型特性基本都可用
  • 为开发人员提供更少的上下文切换。从 Angular 代码到 Nest 的过渡相对容易
  • 与 Angular 类似，Nest 也有一个不错的命令行工具

• 缺点

  • 缺乏文档。该框架与其他框架有很好的集成，但文档很少
  • 背后没有大型企业的支持力
  • 总体而言，与其他框架相比，Nest 的社区规模较小

• 性能

  Nest 中的基本 HelloWorld 应用。每秒能处理 928.18 个请求。每个请求的平均时间为 10.774 毫秒。在此指标上，Nest 在我们比较的三个框架中表现最佳

  Lighthouse 提供的报告中，Nest 具有非常高的性能, 但是 accessibility, best practices,SEO 得分较低

  Nest 不是最流行的框架但值得一试！

• 社区参与

  • 贡献者数量：81
  • Pull Requests：469

Next, Nuxt, Nest 比较就到这里 Preformance、Accessibility、Best Practices、SEO 选择你最想要的那个吧

文章来源

哥伦比亚美女开发 Liz

Twitter: @lizparody23

Liz is a self-taught Software Engineer focused on JavaScript, and Developer Relations Manager at NodeSource. She organizes different community events such as JSConf Colombia, Pioneras Developers, Startup Weekend and has been a speaker at EmpireJS, MedellinJS, PionerasDev, and GDG.
She loves sharing knowledge, promoting JavaScript and Node.js ecosystem and participating in key tech events and conferences to enhance her knowledge and network

原文连接

转载请注明出处