如何選擇正確的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

原文鏈接

轉載請註明出處