如何选择正确的Node框架：Next, Nuxt, Nest?

简介

在上一篇文章中，我探讨了三种最流行的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是一件痛苦的事，可能须要双倍工做

• 性能

  性能基于一下两点

  • 一、使用Apache Bench测试吞吐量。
  • 二、使用 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

原文链接

转载请注明出处