如何選擇正確的Node框架：Next, Nuxt, Nest?
簡介
在上一篇文章中，我探討了三種流行的Node框架:Express、Koa和Hapi的區(qū)別、優(yōu)點(diǎn)和缺點(diǎn)。在這篇文章中，我們將研究另外三種非常流行的框架之間的區(qū)別:Next、Nuxt和Nest。這三個(gè)框架都是服務(wù)器端渲染，它們分別與React、Vue和Angular(三個(gè)目前流行的前端框架)密切相關(guān)
- 我們的比較將基于一下幾點(diǎn)：
- GitHub Stars和npm下載
- 安裝
- 基本的Hello World應(yīng)用程序
- 好處
- 缺點(diǎn)
- 性能
- 社區(qū)活躍度
Next
Next是一個(gè)React框架，允許使用React構(gòu)建靜態(tài)web應(yīng)用
- 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
項(xiàng)目內(nèi)創(chuàng)建目錄文件 ./pages/index.js
- function Home() {
- return <div>Hello world!</div>;
- }
- export default Home;
- // npm run dev
- // 然后訪問 http://localhost:3000
- 好處
- 默認(rèn)情況下，每個(gè)組件都是服務(wù)器渲染的
- 自動(dòng)代碼拆分，加快頁面加載速度
- 不加載不必要的代碼
- 簡單的客戶端路由（基于頁面）
- 基于Webpack的開發(fā)環(huán)境，支持模塊熱更新（HMR）
- 獲取數(shù)據(jù)非常簡單
- 支持任何Node HTTP服務(wù)器實(shí)現(xiàn)，如Express
- 支持Babel和Webpack自定義
- 能夠部署在任何能運(yùn)行node的平臺(tái)
- 內(nèi)置頁面搜索引擎優(yōu)化（SEO）處理
- 缺點(diǎn)
- Next不是后端服務(wù)，應(yīng)該與后臺(tái)操作獨(dú)立開
- 如果你只想創(chuàng)建一個(gè)簡單的WEB應(yīng)用，那么它可能會(huì)是牛刀殺雞
- 數(shù)據(jù)會(huì)在客戶端和服務(wù)器重復(fù)加載
- 沒有實(shí)現(xiàn)前后分離的項(xiàng)目，遷移到Next是一件痛苦的事，可能需要雙倍工作
- 性能
性能基于一下兩點(diǎn)
1、使用Apache Bench測試吞吐量。
2、使用 lighthouse測試 Preformance、Accessibility、Best Practices、SEO
這是Next基本HelloWorld程序。每秒能處理550.87個(gè)請求。每個(gè)請求花費(fèi)的平均時(shí)間為18.153ms
lighthouse測試報(bào)告中可以看到Preformance、Accessibility、Best Practices、SEO都高于70，雖然比其他兩個(gè)框架低，但不得不說已經(jīng)是一個(gè)比較好的數(shù)據(jù)，Best Practices 得分nuxt則是高于其他倆個(gè)
- 社區(qū)活躍度
- 貢獻(xiàn)者數(shù)量：678
- Pull Requests: 3,029
- 社區(qū)相當(dāng)活躍
Nuxt
Nuxt是一個(gè)基于Vue的通用應(yīng)用框架，預(yù)設(shè)了利用Vue開發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置，主要關(guān)注的是應(yīng)用的UI渲染
- star
- GitHub stars：+19,000
- npm weekly downloads: +100,000
- 安裝
為了快速入門，Nuxt.js團(tuán)隊(duì)創(chuàng)建了腳手架工具 create-nuxt-app
- // 確保安裝了npx（npx在NPM版本5.2.0默認(rèn)安裝了）
- npx create-nuxt-app <項(xiàng)目名>
它會(huì)讓你進(jìn)行一些選擇:在集成的服務(wù)器端框架如:Express、Koa、Hapi、Feathers、Micro、Adonis (WIP)；選擇您喜歡的UI框架:Bootstrap、Vuetify、Bulma、Buefy等等
- Hello World
Nuxt依據(jù) pages 目錄結(jié)構(gòu)自動(dòng)生成 vue-router 模塊的路由配置
- // ./pages/index.vue
- <template>
- <div>
- <h1>Hello world!</h1>
- <NLink to="/about">
- About Page
- </NLink>
- </div>
- </template>
- 好處
- 它的主要范圍是UI渲染，同時(shí)抽象出客戶端/服務(wù)器分布
- 靜態(tài)渲染、前后分離
- 自動(dòng)代碼分層
- 服務(wù)、模板皆可配置
- 項(xiàng)目結(jié)構(gòu)清晰
- 組件與頁面無縫切換
- 默認(rèn)支持得ES6 / ES7
- 支持開發(fā)熱更新
- 路由級(jí)別的異步數(shù)據(jù)獲取
- 支持靜態(tài)文件服務(wù)
- 樣式預(yù)處：Sass，Less，Stylus等
- 缺點(diǎn)
- 周邊資源較少
- 開發(fā)復(fù)雜的組件可能會(huì)很麻煩
- 自定義配置顯得很麻煩
- 很多具有副作用的數(shù)據(jù)操作this.items[key]=value
- 高流量可能會(huì)給服務(wù)器帶來壓力
- 只能在某些掛鉤中查詢和操作DOM
- 性能
Nuxt中的基本HelloWorld應(yīng)用。每秒能處理190.05個(gè)請求。平均一個(gè)請求時(shí)間為52.619毫秒。在此度量標(biāo)準(zhǔn)上，Nuxt與其他兩個(gè)框架相比表現(xiàn)最差
- 社區(qū)活躍
- 貢獻(xiàn)者數(shù)量：191
- Pull Requests：1,385
Nest
Nest是一個(gè)漸進(jìn)式Node框架,深受Angular的啟發(fā)。用于構(gòu)建高效，可擴(kuò)展的Node.服務(wù)器端應(yīng)用程序的框架。使用TypeScript構(gòu)建,保留與純JS的兼容性，集OOP（面向?qū)ο缶幊蹋?FP（函數(shù)式編程）,FRP（響應(yīng)式編程）一身。服務(wù)引擎蓋默認(rèn)使用Express但也提供與各種其他庫的兼容性，例如Fastify，允許輕松使用可用的無數(shù)第三方插件
- 安裝
nest提供cli使用該cli命令安裝Nest并創(chuàng)建新項(xiàng)目
- npm i @nestjs/cli
- nest new project-name
或者，使用Git安裝TypeScript啟動(dòng)項(xiàng)目：
- git clone https://github.com/nestjs/typescript-starter.git project
- cd project
- npm install
- npm run start
- Hello World
使用該npm cli命令創(chuàng)建新項(xiàng)目后,src目錄下會(huì)出現(xiàn)幾個(gè)核心文件，main.ts是我們的入口
- // 創(chuàng)建一個(gè)服務(wù)然后監(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();
- // 啟動(dòng)起來
- npm start
- 好處
- 作為基于TypeScript的Web框架，可以進(jìn)行嚴(yán)格的類型定義
- 自動(dòng)生成Swagger文檔
- Nest中的文件夾結(jié)構(gòu)主要基于Angular
- 基于模塊的框架，代碼可復(fù)用
- 項(xiàng)目結(jié)構(gòu)清晰,只需要關(guān)注業(yè)務(wù)無需關(guān)注架構(gòu)
- 使用的TypeScript，意味著JS的型特性基本都可用
- 為開發(fā)人員提供更少的上下文切換。從Angular代碼到Nest的過渡相對容易
- 與Angular類似，Nest也有一個(gè)不錯(cuò)的命令行工具
- 缺點(diǎn)
- 缺乏文檔。該框架與其他框架有很好的集成，但文檔很少
- 背后沒有大型企業(yè)的支持力
- 總體而言，與其他框架相比，Nest的社區(qū)規(guī)模較小
- 性能
Nest中的基本HelloWorld應(yīng)用。每秒能處理928.18個(gè)請求。每個(gè)請求的平均時(shí)間為10.774毫秒。在此指標(biāo)上，Nest在我們比較的三個(gè)框架中表現(xiàn)不錯(cuò)
Lighthouse提供的報(bào)告中，Nest具有非常高的性能,但是accessibility, best practices,SEO得分較低
Nest不是流行的框架但值得一試！
- 社區(qū)參與
- 貢獻(xiàn)者數(shù)量：81
- Pull Requests：469
Next, Nuxt, Nest比較就到這里 Preformance、Accessibility、Best Practices、SEO選擇你最想要的那個(gè)吧
