2022 年10個最佳 Node.js CMS 平臺

2022 年10個最佳 Node.js CMS 平臺推薦

hi, 大家好, 我是徐小夕,之前和大家分享了很多**「低代碼可視化」「和」「前端工程化」「相關的話題, 今天繼續(xù)和大家聊聊」「CMS」**系統(tǒng).
?

內容管理系統(tǒng) (「「CMS」」) 使沒有強大技術背景的人也能夠輕松發(fā)布內容。我們可以使用 「「CMS」」 來管理我們的內容和交付。市面上有不同類型的 「「CMS」」，它們執(zhí)行不同的目的并具有不同的功能。

在本文中，我將和大家分享一下 「「2022」」 年使用的一些最佳 「「Node.js CMS」」，希望可以作為我們選擇最佳 「「CMS」」 的指南。

什么是內容管理系統(tǒng)？

內容管理系統(tǒng)是一種軟件應用程序，它提供圖形用戶界面，其中包含我們可以用來創(chuàng)建、更新、管理和發(fā)布內容的工具。

內容存儲在數據庫中，并通過 CMS 提供的展示層或前端層（通常以網站模板的形式）顯示給目標受眾。

有不同類型的 「「CMS」」，但最常見的如下：

1.傳統(tǒng)內容管理系統(tǒng)

傳統(tǒng)的 「「CMS」」 是一個整體且緊密耦合的系統(tǒng)。對于傳統(tǒng)的 「「CMS」」，內容和前端層或“頭部”緊密相連。傳統(tǒng)的 「「CMS」」 提供了顯示內容的前端層。

傳統(tǒng) 「「CMS」」 的入門門檻較低。它提供模板、拖放界面和所見即所得編輯器，使非開發(fā)人員無需編程或技術知識即可創(chuàng)建網站。

2.無頭內容管理系統(tǒng)

「「Headless CMS」」 是僅后端且 「「API」」 優(yōu)先的內容交付系統(tǒng)。它沒有傳統(tǒng) 「「CMS」」 的限制。

與傳統(tǒng)的 「「CMS」」 不同，無頭 「「CMS」」 不提供展示層。相反，它充當我們內容的基于云的存儲。內容與前端展示解耦。

開發(fā)人員通過 「「CMS」」 提供的 「「API」」（無論是 「「REST」」 還是 「「GraphQL」」）訪問他們需要向用戶顯示的內容。

由于基于 「「API」」，開發(fā)人員可以自由選擇他們喜歡使用的工具、編程語言和框架。

3.混合內容管理系統(tǒng)

混合 「「CMS」」 融合了傳統(tǒng)和無頭 「「CMS」」 體驗。它為開發(fā)人員和營銷人員提供了兩全其美的優(yōu)勢。

它是無頭 「「CMS」」 的 「「API」」 優(yōu)先方法與傳統(tǒng) 「「CMS」」 的模板系統(tǒng)的組合。

混合 「「CMS」」 為市場和內容編寫者提供了傳統(tǒng) 「「CMS」」 熟悉的界面和體驗，并為開發(fā)人員提供了跨多個渠道交付內容所需的 「「API」」 訪問權限。

基于 Node.js 的 CMS

「「Node.js CMS」」 是用 「「Node.js」」 構建的 「「CMS」」；然而，這并不意味著開發(fā)人員只能使用 「「Node.js」」。

接下來就來介紹一下 「「2022」」 年比較活躍的 「「CMS」」。

1. Strapi

「「Strapi」」 是一種流行、靈活且開源的無頭 「「CMS」」，使我們能夠創(chuàng)建豐富的數字體驗。「「Strapi」」 提供了 「「REST」」 和 「「GraphQL API」」，開發(fā)人員可以使用這些 「「API」」 來訪問存儲在其存儲庫中的內容。

我們可以通過其可調整的設置和管理面板自定義 「「Strapi」」 以滿足我們的需求。我們還可以通過安裝社區(qū)開發(fā)的插件來擴展 「「Strapi」」 的功能。

「「Strapi」」 支持多種數據庫，例如 「「MongoDB」」、「「SQLite」」、「「MySQL PostgreSQL」」 和 「「MariaDB」」。

「「Strapi」」 提供永久免費的社區(qū)計劃和其他基于用戶需求的付費定價選項。

特點:

完全可定制
REST 和 GraphQL API
插件市場
國際化支持

網址: https://strapi.io/

2. Ghost

「「Ghost」」 是一個強大的發(fā)布平臺，受到世界領先的作家、創(chuàng)作者和專業(yè)內容團隊的信賴。

「「Ghost」」 專注于為出版商、企業(yè)家和開發(fā)人員簡化在線發(fā)布流程。簡而言之，「「Ghost」」 使博客和發(fā)布 「「Web」」 內容變得簡單。

我們可以在使用 「「Ghost」」 時保持高效，因為它為專業(yè)人士日常使用的常用工具提供了集成。

「「Ghost」」 提供了一個 「「REST API」」，開發(fā)人員可以使用它來檢索 「「CMS」」 數據并將其顯示給目標受眾。

它首先是一個開源軟件，因此我們可以免費克隆存儲庫并將實例部署到我們的服務器上。但是，「「Ghost」」 提供不同的付費計劃，其基本計劃為每月 9 美元。

特點

搜索引擎優(yōu)化
第三方集成
主題市場
REST API
國際化支持
觀眾參與度分析
電子郵件營銷
功能豐富的編輯器，專注于內容
內置訂閱和會員管理

網址: https://ghost.org/

3. Sanity

「「Sanity」」 的用途遠不止傳統(tǒng)的 「「Web」」 體驗。從投資組合和公司網站到電子商務應用程序，「「Sanity」」 的應用無處不在。

「「Sanity」」 提供了一個 「「GraphQL API」」，開發(fā)人員可以使用它來訪問存儲在其存儲庫中的內容。

「「Sanity」」 提供了廣泛的插件和第三方集成，我們可以用來定制我們的工作場所并擴展其功能。它提供免費套餐并有其他定價選項。

特點

GraphQL API
國際化支持
適應性強且用途廣泛——可以擁有超越傳統(tǒng) Web 體驗的不同應用程序
不斷發(fā)展的社區(qū)——廣泛的指南、插件和代碼示例

網址: https://www.sanity.io/

4. ButterCMS

「「ButterCMS」」 是一個 「「API」」 驅動的 「「CMS」」 和博客引擎，用于快速網站開發(fā)，可滿足開發(fā)人員和營銷人員的需求。

作為 「「API」」 驅動的 「「CMS」」，它對開發(fā)人員友好。但是，憑借內置 「「SEO」」、預覽、修訂歷史記錄和日程安排等功能，「「Butter」」 使營銷人員能夠做到最好。

「「Butter」」 將媒體管理提升到一個新的水平。除了存儲和優(yōu)化圖像，「「Butter」」 還提供了一個內置的圖像編輯器，我們可以使用它來轉換、裁剪、調整大小、應用過濾器等等。

「「Butter」」 有一個非商業(yè)用途的免費開發(fā)者計劃。其基本付費計劃為每月 83 美元。

特點

REST API
內置圖像編輯器
國際化
搜索引擎優(yōu)化

網址: https://buttercms.com/

5. Apostrophe

「「Apostrophe CMS」」 稱自己為“一個強大且靈活的網站構建平臺，適用于數字機構、「「SaaS」」 公司、高等教育、企業(yè)等。”

「「Apostrophe」」 是使用 「「Node.js」」、「「Express」」、「「MongoDB」」 和 「「Vue.js」」 等技術構建的。

「「Apostrophe」」 有一個擴展和集成系統(tǒng)，可為 「「SSO」」、表單、營銷、「「SEO」」、設計、安全等用例提供各種擴展。它還提供了拖放功能，我們可以利用它來構建網站的前端結構。

特點

自定義插件支持
REST API
拖放界面
國際化

網址: https://apostrophecms.com/

6. Prismic

「「Prismic」」 是一個用于編輯在線內容的無頭 「「CMS」」。我們可以使用 「「Prismic」」 構建從簡單、編輯和企業(yè)網站到電子商務商店的所有內容。

「「Prismic」」 有一個功能，內容切片，我們可以用它來將我們網站的頁面分成不同的部分。我們可以使用內容切片來創(chuàng)建可重用的自定義組件，并為登陸頁面、微型網站、案例研究和推薦構建動態(tài)布局。

「「Prismic」」 提供了 「「REST」」 和 「「GraphQL API」」，開發(fā)人員可以使用這些 「「API」」 來訪問存儲在其存儲庫中的內容。它還為 「「C#」」、「「JavaScript」」、「「Ruby」」 和 「「Java」」 等不同的編程語言提供 「「SDK」」。

「「Prismic」」 是一個負擔得起的低成本 「「CMS」」，它有一個免費的社區(qū)計劃。

網址: https://prismic.io/

7. Tina

「「Tina」」 是一個免費且完全開源的無頭 「「CMS」」，專為 「「Next.js」」 和 「「Gatsby」」 等基于 「「React」」 的框架構建。它為存儲在 「「Markdown」」 和 「「JSON」」 中的內容提供可視化編輯體驗。

**「Tina」**支持 「「MDX」」，它使開發(fā)人員能夠創(chuàng)建動態(tài)、交互式和可自定義的內容。

「「Tina」」 提供了一個 「「GraphQL API」」，我們可以使用它來查詢和獲取我們的內容。還有一個 「「Cloudinary」」 包，我們可以用它來優(yōu)化和管理我們的媒體文件。

特點

很棒的實時編輯體驗
MDX 支持
GraphQL API

網址: https://tina.io/

8. Keystone

「「Keystone」」 是一個開源可編程后端，可讓您在幾分鐘內創(chuàng)建高度定制的 「「CMS」」 和 「「API」」。

我們可以使用 「「Keystone」」 來構建最基本的網站或更復雜的應用程序，例如電子商務商店。

使用 「「Keystone」」，我們?yōu)槲覀兊膬热菝枋隽艘粋€架構，并為內容獲得了一個 「「GraphQL API」」 和漂亮的管理 「「UI」」。

我們可以在 「「Keystone」」 中為我們網站的不同部分創(chuàng)建自定義的可重用組件。

特點 GraphQL API 自定義響應組件靈活的關系強大的過濾功能數據庫遷移

網址: https://keystonejs.com/

9. Payload

「「Payload」」 是一個開源、自托管的無頭 「「CMS」」，使用 「「Node.js」」、「「Express」」、「「React」」 和 「「MongoDB」」 構建。

「「Payload」」 提供基于配置文件中定義的內容集合自動生成的 「「REST」」 和 「「GraphQL API」」。我們還可以將本地 「「API」」 與服務器端框架（例如 「「Next.js」」）一起使用。

「「Payload」」 帶有內置的電子郵件功能。我們可以使用它來處理密碼重置、訂單確認和其他用例。「「Payload」」 使用 「「Nodemailer」」 來處理電子郵件。

「「Payload」」 有免費計劃和其他定價選項。出于開發(fā)目的，它是完全免費的，但是一旦我們想要將項目推向生產，即使我們使用免費版本，我們也必須選擇可用的許可證之一。

特點

REST 和 GraphQL API
電子郵件功能
內容本地化
安全
三個計劃中任何一個的可用功能都沒有限制

網址: https://payloadcms.com/

10. Directus

「「Directus」」 是用于管理自定義 「「SQL」」 數據庫的開源無頭 「「CMS」」。**Directus **還有一個直觀的管理應用程序，供非技術用戶管理內容。

「「Directus」」 提供 「「RESTful」」 和 「「GraphQL API」」 來管理數據庫中的數據。

我們可以使用我們選擇的數據庫，因為 「「Directus」」 支持 「「PostgreSQL」」、「「MySQL」」、「「SQLite」」、「「OracleDB」」、「「MariaDB」」 和 「「MS-SQL」」 數據庫。

「「Directus」」 提供自托管的免費計劃；還提供付費云計劃。核心團隊支持僅適用于云管理項目。

特點

驗證
內容國際化
免費和開源
支持任何SQL數據庫
零供應商鎖定

網址: https://directus.io/

好啦, 今天的分享就到這啦, 如果文章對你有幫助, 歡迎「點贊」 + 「評論」, 鼓勵作者創(chuàng)造更優(yōu)質的內容~

更多技術復盤匯總: 趣談前端

讀：Node.js以親民，容易學習且功能強大而“俘獲”很多開發(fā)者，特別是基于其上的一些應用框架也不斷產生，本文為你總結和推薦 5 款流行且實用的“好東西”。

自打 2009 年以來，Node.js 成為開發(fā)者們特別是前端人員熱議的話題，還有一部分萌新的后端開發(fā)者也都開始使用 Node.js，開發(fā)網站和相關應用程序。

從流行榜上來看，在過去幾年，它的受歡迎程度確實正在不斷提升。

它在北美稱為受歡迎的Web開發(fā)工具，包括Netflix和PayPal等大型互聯(lián)網客戶。

受歡迎程度上升的原因是加載時間的減少和性能的提高。因此，我們分析 2024 年排名前 5 的 Node.js 后端框架是一件重要的事情。

因此，本文將為各位介紹 2024 年排名前 5 的 Node.js 后端框架、它們的功能和常見用例。

Express.js：經過測評的“冠軍”

Express.js 是 Node.js 著名的后端框架之一。

它是一個開源 Web 應用程序框架，可供開發(fā)者們免費使用，它亦基于 Node.js 平臺構建。Express.js 是一個極簡框架，新手和經驗豐富的 Web 開發(fā)人員都能很快入門并實踐。

目前它的場景主要用于創(chuàng)建 Web 應用程序與 RESTful API。

是什么讓它脫穎而出？我們現(xiàn)在總結如下：

1.高效的路由

Express.js 提供了一種簡潔的方法來管理各種 HTTP 請求并將它們分配給特定任務。

讓我們來看一個代碼例子：

// app.js 
const express=require('express'); 
const app=express(); 
const port=3000; 


// 主頁的路由
app.get('/', (req, res)=> { 
  res.send('歡迎來到主頁！'); 
}); 


// 路由 2 
app.get('/user/:id', (req, res)=> { 
  const userId=req.params.id; 
  res.send(用戶資料頁面 - ID: ${userId} ); 
});

2.中間件支持

Express.js 允許中間件支持處理 HTTP 請求。讓我們看一個創(chuàng)建用于記錄 HTTP 請求詳細信息中間件的簡單示例。

const express=require('express'); 
const app=express(); 
const port=3000; 


app.use((req, res, next)=> { 
  console.log([${new Date().toLocaleString()}] ${req.method} ${req.url} ); 
  next(); 
});

3. 輕松數據庫集成

Express.js 與數據庫無關，也就是它不強制使用特定的數據庫，開發(fā)者們可以選擇自己喜歡的數據庫。

Express.js 之所以容易集成數據庫，主要是因為它的模塊化、靈活性還有提供數據庫連接和豐富的 npm 包生態(tài)系統(tǒng)。

4. 易于學習

Express.js 在業(yè)界中以簡單和簡約的設計而聞名，這使得我們很容易學習，特別是已經熟悉 JavaScript 和 Node.js的同學。

此外，我們還可以使用Bit等工具輕松開始使用 Express.js ，Bit是可組合軟件的下一代構建系統(tǒng)。

再仔細考慮，我們會發(fā)現(xiàn) Express.js 本身就是可組合的。你可以在應用程序的任何位置插入和播放組件。

例如，我們可以創(chuàng)建可以在任何給定時間插拔的中間件組件。

圖：使用 Bit 和獨立組件設計的 Express API 的Bit Scope

我們可以看到兩個組件：授權者和 API 應用。這兩個組件已作為獨立的 Bit 組件實現(xiàn)，并在其獨立空間中進行維護以及版本控制。

通過這樣實現(xiàn)，我們可以快速地以可組合的方式設計自己的應用程序！

NestJS：帶給我們一種現(xiàn)代且結構化的開發(fā)方法

NestJS 是一個以構建可擴展且高效的 Node.js 服務器端應用程序而聞名的框架。

Nest 使用漸進式 JavaScript，也具有用 TypeScript 編寫代碼的能力。盡管它完全支持 Typescript，但它可以用純 JavaScript 編寫代碼，并包括面向對象編程、函數式編程和函數式反應式編程。

主要特點：

1.模塊化

Nest.js 允許將代碼分解為單獨的可管理模塊，從而使其更易于維護。讓我們看看下面的模塊。

import { Module } from '@nestjs/common';


@Module({
 imports: [
  CacheModule
 ],
 controllers: [PaymentController],
 providers: [PaymentService],
})
export class PaymentModule {}

payment module可以導出到其它模塊。在此示例中，已導出common模塊中的cache module。

由于 nest.js 具有模塊結構，也比較易于維護。

2.可擴展

Nest.js 通過將應用程序分解為可管理的模塊，支持靈活的組件替換以及通過微服務和異步操作容納高流量，實現(xiàn)了無縫擴展。

它確保在保持可靠性的同時高效處理增加的工作負載。

3.依賴注入

依賴注入只是向類添加外部依賴項而不是在類本身內創(chuàng)建依賴項的方法。讓我們看一個代碼例子。

import {
 HttpException, Injectable, NotFoundException
} from '@nestjs/common';

@Injectable()
export class PaymentService {

 constructor() {}

 getReceipt() {
   return 'Payment Receipt';
 }

}

上面我們已經創(chuàng)建payment service并添加了@Injectable()注釋以使其可注入。可以按如下所述使用創(chuàng)建的服務。

import { Controller, Get, Post, Body } from '@nestjs/common';
import { PaymentService } from './payment.service';
@Controller('payment')
export class PaymentController {
 constructor(private readonly paymentService: PaymentService) {}
@Get()
 getPaymentReceipt() {
 return this.paymentService.getReceipt();
 }
}

4. 類型安全

Nest.js 使用 TypeScript 提供類型安全，可用于捕獲開發(fā)過程中的潛在錯誤，并提高代碼的可維護性。請來看一個代碼例子：

export class PaymentDto {


  @IsNotEmpty()
  @IsEnum(SERVICE_PROVIDER_SLUG, {
    message: `Invalid serviceProvider. Valid options are: ${Object.values(SERVICE_PROVIDER_SLUG).join(', ')}`,
  })
  serviceProvider: string;

  @IsNotEmpty()
  @IsNumber()
  value: number;

  @IsNotEmpty()
  @IsString()
  validityPeriod: string;

  @IsNotEmpty()
  @IsArray()
  @ArrayNotEmpty()
  @ValidateNested()
  @Type(()=> PaymentAttributesDto)
  paymentAttributes: PaymentAttributesDto[]

}

在這個例子中，我們創(chuàng)建了一個包含多個參數的 Paymentdto類，并添加了注釋來驗證參數類型。

舉個例子，如果我們向“value”參數發(fā)送一個字符串類型值，它將拋出一個異常。

Koa.js：優(yōu)雅且輕量的框架

Koa.js 是一個更輕、更小、更具表現(xiàn)力的 Web 框架，也是由 Express.js 團隊設計的。它允許我們通過異步函數來拋棄回調并處理錯誤。

框架特點如下：

1. 上下文對象（ctx）

Koa.js 包含一個名為 ctx 的功能，它用于捕獲請求和響應詳細信息。此上下文傳遞給每個中間件。可以從以下示例中看到，從methodctxrequest做對象和方法記錄。

const Koa=require('koa');
const app=new Koa();


app.use(async (ctx)=> {
  const { method, url, request, response }=ctx;
  console.log('Method :' + method + ' Request : ' + request);
});


app.listen(3000);

2. 組成中間件

與 Express Js 很是相似，Koa 支持用于處理 HTTP 請求和響應的中間件函數。在下面的示例中，我們創(chuàng)建了一個簡單的中間件：

const Koa=require('koa');
const app=new Koa();


app.use(async (ctx, next)=> {
  await next(); 
});


app.listen(3000);

3. Async/Await 支持

Koa 使用 async/await 語法以更同步的方式編寫異步代碼。以下代碼示例包含使用 async/await 關鍵字。

const Koa=require('koa'); 
const app=new Koa(); 


app.use(async (ctx)=> { 
  const data=await fetchData(); 
  ctx.body=Data: ${data} ; 
}); 


app.listen(3000);

4.錯誤處理

Koa.Js 支持各種類型的錯誤處理。我們可以使用app.emit()或ctx.throw()來處理錯誤。下面的示例包含了上面的錯誤處理方法。

const koa=require('koa'); 
const app=new koa(); 


//錯誤處理方法一
app.use(async (ctx, next)=> { 
  try { 
    await Promise.reject('Something went error'); 
  } catch (err) { 
    ctx.status=err.status || 500; 
    ctx.body=err.message; 
    ctx.app.emit('error', err, ctx); 
  } 
}); 


//錯誤處理方法二
app.use(async (ctx, next)=> { 
  ctx.throw(500, 'error'); 
}); 


app.on('error', (err, ctx)=> { 
  console.log(err); 
}); 


app.listen(3000);

Hapi.js

Hapi.js 是 Http-API 的縮寫，是一個用于開發(fā)可擴展 Web 應用程序的開源框架。hapi 最基本的經典用例之一是構建 REST API。

沃爾瑪實驗室已經使用了 hapi js 來處理“黑色星期五”等活動的流量，“黑色星期五”是網上購物最繁忙的日子之一。

主要特點：

1.配置驅動設計

使用它提供的配置對象，我們能夠在 Hapi.js 中配置路由、參數設置和插件等。

const Hapi=require('@hapi/hapi');


const server=Hapi.server({
  port: 3000,
  routes: {
    cors: true,
  },
});


server.route({
  method: 'GET',
  path: '/',
  handler: (request, h)=> {
    return 'Hello, Hapi!';
  },
});


async function start() {
  await server.start();
  console.log(Server running at ${server.info.uri} );
}


start();

2. 強大的插件系統(tǒng)

Hapi.js 允許輕松集成插件，它做的很體貼，不會讓人有太多麻煩。讓我們看一個代碼例子。

const start=async function () { 


    const server=Hapi.server(); 


    await server.register([{ 
        plugin: require('plugin1'), 
        options: {} 
    }, { 
        plugin: require('plugin2'), 
        options: {} 
    }]); 
};

在這個例子中，我們集成了兩個插件。可以使用 key 將選項傳遞給插件的選項列表options中。

3. 身份驗證和授權

Hapi.js內置支持各種身份驗證策略，并允許開發(fā)者輕松定義訪問控制策略。

server.route({ 
  method: 'GET', 
  path: '/private-data', 
  handler: (request, h)=> { 
    // 僅當經過身份驗證時才訪問私人數據
    const user=request.auth.credentials; 
    return Welcome, ${user.username}! ; 
  }, 
  options: { 
    auth: 'jwt', // 使用 JWT 身份驗證策略
  }, 
});

基于上面的代碼示例，我們可以直接將認證策略定義為‘jwt’。

4. 輸入驗證

輸入驗證是 hapi.js 的另一個重要方面。在options路由對象中，我們可以定義哪些輸入需要驗證。默認validate對象由以下值組成。

{ 
   headers: true, 
   params: true, 
   query: true, 
   payload: true, 
   state: true, 
   failAction: 'error'
}

Adonis.js

Adonis.js 框架是 Node.js 中的全功能 MVC 框架。

它能夠構建可擴展且可維護的應用程序。Adonis.js 遵循與 Laravel 框架類似的結構，并包含開箱即用的 ORM、身份驗證和路由等先進功能。

主要特點：

1.全棧MVC框架

Adonis.js 遵循 MVC 架構模式。使用 MVC 模式的框架有助于組織代碼，并使其更易于維護和擴展。如下圖示：

2. 集成 ORM（Lucid）用于數據庫交互

Adonis.js 擁有自己的 ORM，名為 Lucid。

Lucid 提供了一個富有表現(xiàn)力的查詢生成器，并支持各種數據庫系統(tǒng)。在 lucid 中，我們可以創(chuàng)建模型來讀取和寫入數據庫。請看下面的代碼例子。

const Model=use('Model')

class User extends Model {
}

module.exports=User

我們正在使用此用戶模型而不是數據庫查詢。現(xiàn)在我們正在創(chuàng)建一個路由，在其中獲取用戶。

使用時很簡單，用User 的User.all()方法來輕松獲取用戶信息。

const Route=use('Route')
const User=use('App/Models/User')

Route.get('users', async ()=> {
return await User.all()
})

3. 用戶認證系統(tǒng)

Adonis.js 內置了對用戶身份驗證和授權的支持。

它還提供了一組用于處理用戶會話、密碼哈希和訪問控制的方法和中間件等，期待你更多的挖掘。

結語

以上，便是2024年的一些主流Nodes框架，雖然寫的是 2024，其實就是在后續(xù)市場上有一定優(yōu)勢和流行趨勢的框架產品。

不論你選擇Express.js 是因為它的簡單性，還是選擇Nest.js因為它的結構良好，還是選擇Adonis.js因為它的生產力，還是選擇Koa.js因為它的優(yōu)雅性，選擇自己合適且正確的框架都是蠻重要的。

這些框架各有千秋，總是取決于你的需求。了解你的項目需要什么至關重要，并請在此基礎上選擇合適的框架。

本文旨在幫助你尋找最新趨勢、新功能的優(yōu)秀框架，希望幫助大家成功進行后端開發(fā)，提供更好的框架選型參考價值。

感謝大家的閱讀！

參考：
https://blog.bitsrc.io/top-5-nodejs-frameworks-in-2024-32c7fe9d49c6

入探討 Node.js 網站重新設計

Node.js 剛剛推出了一個新的 Next.js 網站并分享了幕后細節(jié)。他們考慮過 Nextra，但最終選擇了自定義 Next.js 設置。該網站是靜態(tài)構建的，使用 ISR 來生成動態(tài)內容。

現(xiàn)在您已經注意到nodejs.org 的全新外觀了！

我們在設計時非常謹慎，既向過去致敬，又展望未來。該網站有許多聚合用例、數千個頁面，并且是許多人的日常資源。整個故事有一些死胡同和彎路。但最終這是集體努力的結果。憑借超過三打貢獻者的貢獻以及與精選合作伙伴的出色團隊合作，該項目得以實現(xiàn)。該網站改進了信息架構，以前所未有的方式將內容帶到用戶的指尖，并在未來幾年建立了穩(wěn)定的開發(fā)平臺。我們還迭代了改進的開發(fā)人員體驗、更清晰的 CI/CD 反饋以及平易近人的技術堆棧。

請繼續(xù)閱讀，更深入地了解這段旅程并洞察即將發(fā)生的事情。

規(guī)模和限制

nodejs.org 網站已經存在超過 14 年了。類似于實用下載和文檔主頁的設計首次出現(xiàn)于 2011 年底。這是 Node.js 0.6天的背景。

從那時起，該網站的規(guī)模隨著項目的需要而緩慢增長。它包含 1600 多頁。在鼎盛時期，它擁有近 20 種本地化語言。該域每月處理30 億個請求，傳輸的數據量為 2 PB。毫不夸張地說，該網站是 Node.js 社區(qū)的重要資源。確保更改不會對用戶和貢獻者造成不必要的干擾絕對是至關重要的。

錯誤的開始：nodejs.dev

該項目首次嘗試重新設計于 2019 年開始。工作從新域和新存儲庫nodejs.dev開始。回想起來，這可能從一開始就無意中注定了該項目的失敗。該團隊面臨著孤立開發(fā)的挑戰(zhàn)。簡而言之，這個代碼庫不是社區(qū)或貢獻者所在的地方。不存在已建立的貢獻者工作流程。已經很忙的人們自愿貢獻出自己的時間，不想學習第二套工具。這是一個太沉重的負擔。該項目無法維持維持勢頭所需的領導力。此外，新技術堆棧的單一切換會很復雜，并對網站的現(xiàn)有存在構成風險。

然而，nodejs.dev 帶來了很多經驗教訓和更新的內容。我們創(chuàng)建了一系列綜合學習資源，并將其運用到當前的設計中。所有這一切正在形成一個愿景：漸進式進化、就地開發(fā)以及盡可能少的干擾。

在飛行中重新組裝飛機

2022 年，Claudio Wunder 加入了該項目。他彌合了兩項開發(fā)工作之間的差距。他引導網絡團隊走向一個新的方向：回到現(xiàn)有的存儲庫。考慮如何重建站點，同時仍作為生產級資源運行。

代碼庫開始在多個維度上顯示出它的年齡。設計已經過時了。對于大多數參與該項目的 Web 開發(fā)人員來說，Metalsmith 和 Handlebars 模板已經不再受歡迎。該網站的內部結構很難擴展，而且文檔也很少。嘗試混合代碼和內容是一個挑戰(zhàn)。

團隊仔細考慮了技術堆棧。正在進行的重新設計的第一階段涉及nextra，一個優(yōu)秀的 Next.js 靜態(tài)站點生成器。這是一個很好的入門方式，但隨著網站的發(fā)展，我們需要自定義設置。我們發(fā)現(xiàn)自己越來越“突破”nextra 的慣例，依賴于 nextra 抽象的底層 Next.js 模式和強大工具。

Next.js是一個自然的發(fā)展過程，以其靈活性和強大功能而著稱。例如，該網站仍然是為了最終用戶速度和基礎托管獨立性而靜態(tài)構建的，但利用 Next.js 的增量靜態(tài)重新生成來獲取動態(tài)內容（例如版本）。 React 提供的創(chuàng)作體驗不僅更符合貢獻者當前的技能，而且還與我們可以使用的更大的工具生態(tài)系統(tǒng)更加一致。

在此過程中，我們與Vercel建立了密切的合作伙伴關系。當網站的規(guī)模在靜態(tài)導出期間使 webpack 的內存管理緊張時，他們提供了直接支持。這是一種共生關系。我們的需求推動他們的平臺得到改進，他們的平臺使我們能夠構建更好的網站。我們在公開發(fā)布之前對新版本進行了 Beta 測試，這是該框架的真實壓力測試。

2023 年 4 月，我們進行了一次小型切換。這是一個有點諷刺的說法。拉取請求有 1600 個文件，將 GitHub UI 推向了渲染能力的極限。網站的基礎設施會發(fā)生變化，但外觀、內容和創(chuàng)作體驗將保持不變。這是一個重要的里程碑——證明我們可以在飛行中重建飛機。

重新設計

OpenJS 基金會非常友善地資助我們與設計師Hayden Bleasel一起進行重新設計。 Hayden 為該網站帶來了現(xiàn)代設計，并幫助我們思考遇到的多方面用例。結果是我們可以用它來指導我們的開發(fā)的Figma文檔。其中包括用戶體驗流程、暗/亮模式、頁面布局、移動視口注意事項和組件細分。

接下來是將設計實現(xiàn)為代碼，這是一項分布在世界各地的努力。重點放在基礎設計元素和結構化組件層次結構的順序構建上。我們從第一天起就構建了組件的變體，并從一開始就考慮了國際化。這減少了返工，并使新手可以輕松完成任何任務。我們開始通過Storybook和Chromatic的托管實例單獨構建組件。 Storybook 是原型、迭代和測試組件的好地方。我們選擇使用Tailwind CSS，但重點是設計令牌和應用 CSS。這種共同語言幫助新手了解我們的方法并翻譯 Figma。

Orama搜索將網站的所有內容放在用戶的指尖。它們對我們的靜態(tài)內容進行索引，并以閃電般的速度提供 API 內容、學習材料、博客文章等結果。那里的團隊直接貢獻了這種集成，并繼續(xù)幫助我們提供卓越的體驗。很難想象沒有這個功能。

Node.js 在我們社區(qū)中的影響力對我們來說很重要。因此，舊網站已國際化為近 20 種語言。然而，一系列不幸的事件導致我們重置了所有翻譯。這是一個艱難的決定，但考慮到當時的情況，這是正確的決定。我們正在與Crowdin合作，重新建立我們的努力。這將包括仔細解析基于 MDX 的新內容。我們期待著未來幾個月的持續(xù)內部化。

當我們在新的基礎設施上構建并開始預覽該網站并重新設計時，更深入地了解最終用戶的行為是非常寶貴的。我們利用Sentry提供錯誤報告、監(jiān)控和診斷工具。這對于識別問題和為我們的用戶提供更好的體驗有很大幫助。在重新設計工作之前，Sentry 也很有用，可以通過重播用戶會話來識別舊站點中的問題。

在所有這些集成和開發(fā)步驟中，我們一直關注最終用戶的可訪問性和性能。 Vercel 和Cloudflare支持可確保網站快速可靠。我們還通過 GitHub Actions 投資了 CI/CD 管道，為貢獻者提供實時反饋。這包括使用 Chromatic、Lighthouse 結果進行視覺回歸測試，以及一套檢查和測試，以確保網站質量保持較高水平。

格蕾絲·霍珀和黑客啤酒節(jié)

在整個網站重新設計過程中，我們積極努力打造包容和熱情的體驗。重新設計工作與 2023 年 9 月的Grace Hopper 慶典開源日以及下個月的Hacktoberfest非常吻合。這兩個活動都向整個生態(tài)系統(tǒng)的項目展示了新的貢獻者。我們通過將“良好的第一個問題”作為離散的開發(fā)任務來為這些事件做好準備。就 Grace Hopper 而言，我們還提供了現(xiàn)場指導，以便與會者能夠以落地公關結束這一天。我們很自豪地說，我們有許多首次為該項目做出貢獻。

僅在 Grace Hopper 期間，就有 28 位作者提出了 40 個 PR。 Hacktoberfest 新增 26 個 PR。

文檔，文檔，文檔

開源項目的好壞取決于它的文檔。允許新貢獻者異步建立上下文至關重要。為此，我們不將 DX（開發(fā)人員體驗）限制于工具。重新設計為我們提供了一個很好的機會來發(fā)現(xiàn)和改進文檔中的差距。在此過程中，我們迭代或引入了：

合作者指南
內容VS代碼
貢獻
DEPENDENCY_PINNING
治理
自述文件
翻譯

新代碼非常注重內聯(lián)代碼和配置注釋、關注點分離以及明確定義的常量。整個過程中使用 TypeScript 可以幫助貢獻者理解數據的形狀和函數的預期行為。

未來的計劃

重新設計為 Node.js 網站的新時代奠定了基礎。我們擁有堅實的基礎，可以持續(xù)多年。如果過去有任何指示的話，我們將在這個空間內迭代很長一段時間。

但工作還沒有完成。出色地：

將網站重新設計擴展到 API 文檔。他們位于單獨的代碼庫中，但計劃將此處開發(fā)的樣式移植到 API。這又是一項細致的工作，不能影響日常使用或貢獻。
探索網站和 API 文檔的 monorepo。這應該可以改善重要的耦合，并減少管理兩個獨立代碼庫的開銷。
重新調整國際化努力。先前的翻譯無法延續(xù)。我們的大量降價/MDX 方法提出了一個獨特的挑戰(zhàn)，我們正在與 Crowdin 合作解決。
持續(xù)改進 CI/CD 流程。我們在向貢獻者提供自助反饋方面取得了巨大進步，但還有更多工作要做。

謝謝

許多人和組織為實現(xiàn)重新設計做出了大大小小的貢獻。我們要感謝：

首先也是最重要的是所有使這個項目成為可能的貢獻者和合作者。
Chromatic提供視覺測試平臺，幫助我們審查 UI 更改并捕獲視覺回歸。
Cloudflare用于提供為 Node.js 網站、Node.js 的 CDN 等提供服務的基礎設施。
Crowdin提供了一個平臺，使我們能夠本地化 Node.js 網站并與譯者合作。
Hayden Bleasel對 Node.js 重新設計的設計工作。
Orama提供了一個搜索平臺，可以為我們的內容建立索引并提供閃電般快速的結果。
Sentry為其錯誤報告、監(jiān)控和診斷工具提供開源許可證。
Vercel提供為 Node.js 網站提供服務和支持的基礎設施
最后，感謝OpenJS 基金會的支持和指導。

社區(qū)很強大，我們對共同實現(xiàn)的目標感到興奮。

原文鏈接

作者：tsingc 鏈接：https://juejin.cn/post/7351454390148120588

在線咨詢

上一篇：HTML5特效庫 canvas粒子噴射特效源碼
下一篇：18.CSS超鏈接樣式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

2022 年10個最佳 Node.js CMS 平臺

什么是內容管理系統(tǒng)？

1.傳統(tǒng)內容管理系統(tǒng)

2.無頭內容管理系統(tǒng)

3.混合內容管理系統(tǒng)

基于 Node.js 的 CMS

1. Strapi

2. Ghost

3. Sanity

4. ButterCMS

5. Apostrophe

6. Prismic

7. Tina

8. Keystone

9. Payload

10. Directus

Express.js：經過測評的“冠軍”

NestJS：帶給我們一種現(xiàn)代且結構化的開發(fā)方法

Koa.js：優(yōu)雅且輕量的框架

Hapi.js

Adonis.js

結語

入探討 Node.js 網站重新設計

規(guī)模和限制

錯誤的開始：nodejs.dev

在飛行中重新組裝飛機

重新設計

格蕾絲·霍珀和黑客啤酒節(jié)

文檔，文檔，文檔

未來的計劃

謝謝

您的項目需求