如何選擇正確的Node框架：Next, Nuxt, Nest?
簡介
在上一篇文章中，我探討了三種流行的Node框架:Express、Koa和Hapi的區(qū)別、優(yōu)點和缺點。在這篇文章中，我們將研究另外三種非常流行的框架之間的區(qū)別:Next、Nuxt和Nest。這三個框架都是服務器端渲染，它們分別與React、Vue和Angular(三個目前流行的前端框架)密切相關
- 我們的比較將基于一下幾點：
- GitHub Stars和npm下載
- 安裝
- 基本的Hello World應用程序
- 好處
- 缺點
- 性能
- 社區(qū)活躍度
Next
Next是一個React框架，允許使用React構建靜態(tài)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
項目內創(chuàng)建目錄文件 ./pages/index.js
- function Home() {
- return <div>Hello world!</div>;
- }
- export default Home;
- // npm run dev
- // 然后訪問 http://localhost:3000
- 好處
- 默認情況下，每個組件都是服務器渲染的
- 自動代碼拆分，加快頁面加載速度
- 不加載不必要的代碼
- 簡單的客戶端路由（基于頁面）
- 基于Webpack的開發(fā)環(huán)境，支持模塊熱更新（HMR）
- 獲取數據非常簡單
- 支持任何Node HTTP服務器實現，如Express
- 支持Babel和Webpack自定義
- 能夠部署在任何能運行node的平臺
- 內置頁面搜索引擎優(yōu)化（SEO）處理
- 缺點
- Next不是后端服務，應該與后臺操作獨立開
- 如果你只想創(chuàng)建一個簡單的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則是高于其他倆個
- 社區(qū)活躍度
- 貢獻者數量：678
- Pull Requests: 3,029
- 社區(qū)相當活躍
Nuxt
Nuxt是一個基于Vue的通用應用框架，預設了利用Vue開發(fā)服務端渲染的應用所需要的各種配置，主要關注的是應用的UI渲染
- star
- GitHub stars：+19,000
- npm weekly downloads: +100,000
- 安裝
為了快速入門，Nuxt.js團隊創(chuàng)建了腳手架工具 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渲染，同時抽象出客戶端/服務器分布
- 靜態(tài)渲染、前后分離
- 自動代碼分層
- 服務、模板皆可配置
- 項目結構清晰
- 組件與頁面無縫切換
- 默認支持得ES6 / ES7
- 支持開發(fā)熱更新
- 路由級別的異步數據獲取
- 支持靜態(tài)文件服務
- 樣式預處：Sass，Less，Stylus等
- 缺點
- 周邊資源較少
- 開發(fā)復雜的組件可能會很麻煩
- 自定義配置顯得很麻煩
- 很多具有副作用的數據操作this.items[key]=value
- 高流量可能會給服務器帶來壓力
- 只能在某些掛鉤中查詢和操作DOM
- 性能
Nuxt中的基本HelloWorld應用。每秒能處理190.05個請求。平均一個請求時間為52.619毫秒。在此度量標準上，Nuxt與其他兩個框架相比表現最差
- 社區(qū)活躍
- 貢獻者數量：191
- Pull Requests：1,385
Nest
Nest是一個漸進式Node框架,深受Angular的啟發(fā)。用于構建高效，可擴展的Node.服務器端應用程序的框架。使用TypeScript構建,保留與純JS的兼容性，集OOP（面向對象編程）,FP（函數式編程）,FRP（響應式編程）一身。服務引擎蓋默認使用Express但也提供與各種其他庫的兼容性，例如Fastify，允許輕松使用可用的無數第三方插件
- 安裝
nest提供cli使用該cli命令安裝Nest并創(chuàng)建新項目
- 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命令創(chuàng)建新項目后,src目錄下會出現幾個核心文件，main.ts是我們的入口
- // 創(chuàng)建一個服務然后監(jiān)聽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
- 基于模塊的框架，代碼可復用
- 項目結構清晰,只需要關注業(yè)務無需關注架構
- 使用的TypeScript，意味著JS的型特性基本都可用
- 為開發(fā)人員提供更少的上下文切換。從Angular代碼到Nest的過渡相對容易
- 與Angular類似，Nest也有一個不錯的命令行工具
- 缺點
- 缺乏文檔。該框架與其他框架有很好的集成，但文檔很少
- 背后沒有大型企業(yè)的支持力
- 總體而言，與其他框架相比，Nest的社區(qū)規(guī)模較小
- 性能
Nest中的基本HelloWorld應用。每秒能處理928.18個請求。每個請求的平均時間為10.774毫秒。在此指標上，Nest在我們比較的三個框架中表現不錯
Lighthouse提供的報告中，Nest具有非常高的性能,但是accessibility, best practices,SEO得分較低
Nest不是流行的框架但值得一試！
- 社區(qū)參與
- 貢獻者數量：81
- Pull Requests：469
Next, Nuxt, Nest比較就到這里 Preformance、Accessibility、Best Practices、SEO選擇你最想要的那個吧
