如何選擇正確的Node框架：Next, Nuxt, Nest?

一二三發表於2019-05-05
框架UX

簡介

在上一篇文章中，我探討了三種最流行的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

    如何選擇正確的Node框架：Next, Nuxt, Nest?

    這是Next基本HelloWorld程式。每秒能處理550.87個請求。每個請求花費的平均時間為18.153ms

    如何選擇正確的Node框架：Next, Nuxt, Nest?

    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與其他兩個框架相比表現最差

    如何選擇正確的Node框架：Next, Nuxt, Nest?

    Lighthouse測試報告中Preformance、Accessibility、SEO三項中得分最高

    如何選擇正確的Node框架：Next, Nuxt, Nest?

  • 社群活躍

    • 貢獻者數量：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在我們比較的三個框架中表現最佳

    如何選擇正確的Node框架：Next, Nuxt, Nest?

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

    如何選擇正確的Node框架：Next, Nuxt, Nest?

    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

原文連線

轉載請註明出處

相關文章