Koa2 還有多久取代 Express

前言

Koa 是運行在 Node.js 中的 web 服務框架,小而美。

Koa2 是 Koa 框架的最新版本,Koa3 還沒有正式推出,Koa1 正走在被替換的路上。

Koa2 與 Koa1 的最大不同,在于 Koa1 基于 co 管理 Promise/Generator 中間件,而 Koa2 緊跟最新的 ES 規(guī)范,支持到了 Async Function(Koa1 不支持),兩者中間件模型表現(xiàn)一致,只是語法底層不同。

Koa2 正在蠶食 Express 的市場份額,最大的原因是 Javascript 的語言特性進化,以及 Chrome V8 引擎的升級,賦予了 Node.js 更大的能力,提升開發(fā)者的編程體驗,滿足開發(fā)者靈活定制的場景以及對于性能提升的需求,蠶食也就水到渠成,2018 年開始,Koa2 會超越 Express 成為本年最大普及量的 Node.js 框架。

以上就是 Koa2 的現(xiàn)狀,以及它的趨勢,站在 2018 年的節(jié)點來看,Koa2 的學習大潮已經(jīng)到來,那么如果要掌握 Koa2,需要去學習它的哪些知識呢,這些知識跟 Node.js 以及語言規(guī)范有什么關(guān)系,它的內(nèi)部組成是如何的,運行機制怎樣,定制拓展是否困難,以及它的三方庫生態(tài)如何,應用場景有哪些,跟前端有如何結(jié)合等等,這些問題本文將做簡要的探討,Koa2 詳細的代碼案例和深度剖析見這里 。

備注:如下提到的 Koa 均指代 Koa 2.x 版本

關(guān)于作者 TJ

了解過 TJ 的童鞋都知道,他以驚為天人的代碼貢獻速度、源源不斷的開發(fā)熱情和巧奪天工的編程模型而推動整個 Node.js/NPM 社區(qū)大步邁進,稱為大神毫不過分,而大神的腦回路,向來與凡人不同。

關(guān)于大神的傳說有很多,最有意思的是在國外著名程序員論壇 reddit 上,有人說,TJ 從來就不是一個人,一個人能有這么高效而瘋狂的代碼產(chǎn)出實在是太讓人震驚了,他背后一定是一個團隊,因為他從來都不參加技術(shù)會議,也不見任何人,而最后 TJ 離開 Node 社區(qū)去轉(zhuǎn)向 Go,這種做事方式非常谷歌,所以 TJ 是谷歌的一個招牌,大家眾說紛紜,吵的不可開交,不過有一點大家都是達成共識的,那就是非常肯定和感謝他對于 Nodejs 社區(qū)的貢獻和付出。

Express 的架構(gòu)和中間件模型

聊 Koa 之前,先對比下 Express,在 Express 里面,不同時期的代碼組織方式雖然大為不同,比如早期是全家桶各種路由、表單解析都囊括到一個項目中,中后期做了大量的拆分,將大部分模塊都獨立出來官方自行維護,或者是采用社區(qū)其他開發(fā)者提供的中間件模塊,但縱觀 Express 多年的歷程,他依然是相對大而全,API 較為豐富的框架,并且它的整個中間件模型是基于 callback 回調(diào),而 callback 常年被人詬病。

對于一個 web 服務框架來說,它的核心流程,就是在整個 HTTP 進入到流出的過程中,從它的流入數(shù)據(jù)上采集所需要的參數(shù)素材,再向流出的數(shù)據(jù)結(jié)構(gòu)上附加期望素材,無論是一個靜態(tài)文件還是 JSON 數(shù)據(jù),而在采集和附加的過程中,需要各個中間件大佬的參與,有的干的是記錄日志的活兒,有的干的是解析表單的活兒,有的則是管理會話,既然是大佬,一般都脾氣大,你不安排好他們的注冊順序,不通過一種機制管理他們的入場退場順序,他們不僅不好好配合,還可能砸了你的場子。

那么 Express 里面,首先就是對于 HTTP 這個大家伙的管理(其他協(xié)議先不涉及),管理這個大家伙,Express 祭出了三件,哦不,其實是四件法寶。
首先是通過 express() 拿到的整個服務器運行實例,這個實例相當于是一個酒店,而你就是來訪的客人 - HTTP 請求,酒店負責你一切需求,做到你滿意。
在酒店里面,還有兩個工作人員,一個是 req(request) 負責接待你的叫阿來吧,還有一個送你離開的狠角色 - res(response),叫阿去吧,阿來接待到你進酒店,門口的攝像頭會你拍照(Log 記錄來去時間,你的特征),收集你的指紋(老會員識別),引領(lǐng)你去前臺簽到(獲取你的需求,比如你要拿走屬于你的一套西服),然后酒店安排你到房間休息(等待響應),里面各種后勤人員忙忙碌碌接待不同的客人,其中有一個是幫你取西服的,取了后,交給阿來,阿來再把西服穿你身上,同時還可能幫你裝飾一番,比如給你帶個帽子(加個自定義頭),然后送你出門,門口的攝像頭還會拍你一下,就知道了酒店服務你的時間......實在編不下去了,想用物理世界的案例來對應到程序世界是蠻難的,嚴謹度不夠,不過幫新手同學留下一個深刻印象倒是可取的。

Express 源碼簡要分析

上面酒店的 4 件法寶,其實就是服務器運行實例,req 請求對象,res 響應對象和中間件 middlewares,剛才負責照相的,簽到的,分析需求的其實都是中間件,一個一個濾過去,他們根據(jù)自己的規(guī)則進行采集、分析、轉(zhuǎn)化和附加,把這個 HTTP 客人,從頭到腳捏一遍,客人就舒舒服服的離開了。

中間件是眾多 web 框架中比較核心的概念,它們可以根據(jù)不同的場景,來集成到框架中,增強框架的服務能力,而框架則需要提供一套機制來保證中間件是有序執(zhí)行,這個機制在不同的框架中則大為不同,在 Express 里面,我們通過 use(middlewares()) 逐個 use 下去,use 的順序和規(guī)則都由 express 自身控制。
在 express/express.js 中,服務器運行實例 app 通過 handle 來把 Nodejs 的 req 和 res 傳遞給 handle 函數(shù),賦予 handle 對于內(nèi)部對象的控制權(quán):

app = function(req, res, next) {
  app.handle(req, res, next)
}

而在 express/application.js 中,拿到控制權(quán)的 handle 又把請求響應和回調(diào),繼續(xù)分派給了 express 的核心路由模塊,也就是 router:

app.handle = function handle (req, res, callback) {
  var router = this._router
  var done = callback || finalhandler(req, res, {
    env: this.get('env'),
    onerror: logerror.bind(this)
  })
  router.handle(req, res, done)
}

這里的 router.handle 就持有到了 req, res 對象,可以理解為,express 把 Nodejs 監(jiān)聽到的請求三要素(req, res, cb) 下放給了內(nèi)部的路由模塊 router。
然后繼續(xù)回到剛才 use(middlewares(),Express 每一次 use 中間件,都會把這個中間件也交給 router:

app.use = function use(fn) {
  router.use('/', fn)
}

而 router 里面,有很重要一個概念,就是 layer 層,可以理解為中間件堆疊的層,一層層堆疊起來:

var layer = new Layer(path, {
  sensitive: this.caseSensitive,
  strict: false,
  end: false
}, fn)
this.stack.push(layer)

以上是偽代碼(刪減了大部分),可以看做是 express 在啟動運行的時候,注冊好了一個中間件函數(shù)棧,里面堆疊好了待被調(diào)用的中間件,一旦請求進來,就會被 router handle 來處理:

proto.handle = function handle(req, res, out) {
  next()
  function next(err) {
    var layer
    var route
    self.process_params(layer, paramcalled, req, res, function (err) {
      if (route) {
        return layer.handle_request(req, res, next)
      }
      trim_prefix(layer, layerError, layerPath, path)
    })
  }
  function trim_prefix(layer, layerError, layerPath, path) {
    if (layerError) {
      layer.handle_error(layerError, req, res, next)
    } else {
      layer.handle_request(req, res, next)
    }
  }
}

handle 里面的 next 是整個中間件棧能夠轉(zhuǎn)起來的關(guān)鍵,在所有的中間件里面,都要執(zhí)行這個 next,從而把當前的控制權(quán)以回調(diào)的方式往下面?zhèn)鬟f。
但是問題就是這種機制在最初的時候,如果沒有事件的配合,是很難做到原路進去,再順著原路回去,相當于是每個中間件都被來回濾了 2 遍,賦予中間件更靈活的控制權(quán),這就是掣肘 Express 的地方,也是 Express 市場一定會被 Koa 蠶食的重要原因。

具體 Express 的代碼比這里描述的要復雜好幾倍,大家有興趣可以去看源碼,應該會有更多的收獲,如果沒有 Koa 這種框架存在的話,Express 的內(nèi)部實現(xiàn)用精妙形容絕對不為過,只是這種相對復雜一些的內(nèi)部中間件機制,未必符合所有人的口味,也說明了早些年限于 JS 的能力,想要做一些流程雙向控制多么困難。
關(guān)于 Express 就分析到這里,這不是本文的重點,了解它內(nèi)部的復雜度以及精妙而復雜都實現(xiàn)就可以了,因為這是特定歷史階段的歷史產(chǎn)物,有它特定的歷史使命。

早期的 Koa 模型 - 我們不一樣

得益于大神非同尋常的腦回路,Koa 從一開始就選擇了跟 Express 完全不同的架構(gòu)方向,上面 Express 的部分大家沒看懂也沒關(guān)系,因為 Koa 這里的處理,會讓你瞬間腦回路清晰。

首先要明白,Koa 與 Express 是在做同樣事情上的不同實現(xiàn),所以意味著他倆對外提供的能力大部分是相同的,這部分不贅述,我們看不同的地方:

Koa 內(nèi)部也有幾個神行太保,能力較大,首先 new Koa() 出來的服務器運行實例,它像青蛙一樣,張大嘴吞食所有的請求,通過它可以把服務真正跑起來,跟 Express 一樣,這個就跳過不提了,重點是它的 context,也就是 ctx,這貨上面有很多引用,最核心的是 request 和 response,這倆可以對應到 Express 兩個對立的 req 和 res,在 Koa 里面,把它倆都集中到 ctx 里面進行管理,分別通過 ctx.request 和 ctx.reponse 進行直接訪問,原來 Express 兩個獨立對象做的事情,現(xiàn)在一個 ctx 就夠了,上下文對象都在他手中,想要聯(lián)系誰就能聯(lián)系誰。
其次是它的中間件機制,Koa 真正的魅力所在,先看段代碼:

const Koa = require('koa')
const app = new Koa()
const indent = (n) => new Array(n).join(' ')
const mid1 = () => async (ctx, next) => {
  ctx.body = `<h3>請求 => 第一層中間件</h3>`
  await next()
  ctx.body += `<h3>響應 <= 第一層中間件</h3>`
}
const mid2 = () => async (ctx, next) => {
  ctx.body += `<h3>${indent(4)}請求 => 第二層中間件</h3>`
  await next()
  ctx.body += `<h3>${indent(4)}響應 <= 第二層中間件</h3>`
}
app.use(mid1())
app.use(mid2())
app.use(async (ctx, next) => {
  ctx.body += `<p style="color: #f60">${indent(12)}=> Koa 核心 處理業(yè)務 <=</p>`
})
app.listen(2333)

大家可以把這 22 行代碼跑起來,瀏覽器里訪問 localhost:2333 就能看到代碼的執(zhí)行路徑,一個 HTTP 請求,從進入到流出,是兩次穿透,每一個中間件都被穿透兩次,這個按照次序的正向進入和反向穿透并不是必選項,而是 Koa 輕松具備的能力,同樣的能力,在 Express 里面實現(xiàn)反而很費勁。

Koa2 源碼簡要分析

想要了解上面提到的能力,就要看下 Koa 核心的代碼:
同樣是 app.use(middlewares()),在 koa/application.js 里面,每一個中間件同樣被壓入到一個數(shù)組中:

use(fn) {
  this.middleware.push(fn)
}

在服務器啟動的時候,建立監(jiān)聽,同時注冊回調(diào)函數(shù):

listen(...args) {
  server = http.createServer(this.callback()).listen(...args)
}

回調(diào)函數(shù)里面,返回了 (req, res) 給 Node.js 用來接收請求,在它內(nèi)部,首先基于 req, res 創(chuàng)建出來 ctx,就是那個同時能管理 request 和 response 的家伙,重點是上面壓到數(shù)組里面的 middlewares 被 compose 處理后,就扔給了 handleRequest:

callback() {
  const fn = compose(this.middleware)
  return handleRequest = (req, res) => {
    const ctx = this.createContext(req, res)
  
    return this.handleRequest(ctx, fn)
  }
}

compose 就是 koa-compose,簡單理解為通過它,以遞歸的方式實現(xiàn)了 Promise 的鏈式執(zhí)行,因為我們都知道, async function 本質(zhì)上會返回一個 Promise,這里 compose 跳過不說了,繼續(xù)去看 handleRequest:

handleRequest(ctx, fnMiddleware) {
  return fnMiddleware(ctx).then(respond(ctx))
}

實在是簡潔的不像實力派,請求進來后,會把可以遞歸調(diào)用的中間件數(shù)組都執(zhí)行一遍,每個中間件都能拿到 ctx,同時,因為 async function 的語法特性,可以中間件中,把執(zhí)行權(quán)交給后面的中間件,這樣逐層逐層交出去,最后再逐層逐層執(zhí)行回來,就達到了請求沿著一條路進入,響應沿著同樣的一條路反向返回的效果。
借用官方文檔的一張圖來表達這個過程:

圖片描述
圖片描述

我知道這張圖還不夠,再祭出官方的第二張圖,著名的洋蔥模型:

圖片描述
圖片描述

Koa2 要學習什么

從上面的對比,我們其實就發(fā)現(xiàn)了 Koa2 獨具魅力的地方,這些魅力一方面跟框架設(shè)計理念有關(guān),一方面跟語言特性有關(guān),語言特性,無外乎下面幾個:

  • 箭頭函數(shù)
  • Promise 規(guī)范
  • 迭代器生成器函數(shù)執(zhí)行原理
  • 異步函數(shù) Async Function
  • 以及 Koa2 的應用上下文 ctx 的常用 API(也即它的能力)
  • koa-compose 工具函數(shù)的遞歸特征
  • 中間件執(zhí)行的進出順序和用法

這些都是基礎(chǔ)性的值得學習的,這些知識跟著語言規(guī)范有著非常親近的關(guān)系,所以意味著學會這些以后,也需要去到 ES6/7/8 里面挑選更多的語法特性,早早入坑學習,限于篇幅本文均不再探討,上面的基礎(chǔ)知識學習如果有興趣,可以跟著 Koa2解讀+數(shù)據(jù)抓取+實戰(zhàn)電影網(wǎng)站 了解更多實戰(zhàn)姿勢。

Koa2 和 Express 到底如何選擇

能不能來個痛快話?其實可以的,選 Koa2 吧,2018 年了,不用等了。
同時一定非它不可么,其實也不是,我們可以更加客觀的看待選擇問題,再梳理下思緒:

Koa 是基于新的語法特性,實現(xiàn)了 Promise 鏈傳遞,錯誤處理更友好,Koa 不綁定任何中間件,是干干凈凈的裸框架,需要什么就加什么,Koa 對流支持度很好,通過上下文對象的交叉引用讓內(nèi)部流程與請求和響應串聯(lián)的更緊湊,如果 Express 是大而全,那么 Koa 就是小而精,二者定位不同,只不過 Koa 擴展性非常好,稍微組裝幾個中間件馬上就能跟 Express 匹敵,代碼質(zhì)量也更高,設(shè)計理念更先進,語法特性也更超前。

這是站在用戶的角度比較的結(jié)果,如果站在內(nèi)部實現(xiàn)的角度,Koa 的中間件加載和執(zhí)行機制跟 Express 是截然不同的,他倆在這一點上的巨大差別也導致了一個項目可以完全走向兩種不同的中間件設(shè)計和實現(xiàn)方式,不過往往我們是作為框架的使用者,業(yè)務的開發(fā)者來使用的,那么對于 Nodejs 的用戶來說,Express 能滿足你的,Koa 都可以滿足你,Express 讓你爽的,Koa 可以讓你更爽。

這也是為什么,阿里的企業(yè)級框架 Eggjs 底層是 Koa 而不是 Express,360 公司的大而全的 thinkjs 底層也是 Koa,包括沃爾瑪?shù)?hapi 雖然沒有用 Koa,但是他的核心開發(fā)者寫博客說,受到 Koa 的沖擊和影響, 也要升級到 async function,保持對語法的跟進,而這些都是 Koa 已經(jīng)做好了整個底子,任何上層架構(gòu)變得更簡單了。

大家在選用 Express 的時候,或者從 Express 升級到 Koa 的時候,其實不用太糾結(jié),只要成本允許,都可以使用,如果實現(xiàn)成本過高,那么用 Express 也沒問題的,遇到其他新項目的時候,沒有了歷史包袱,在用 Koa 也不遲。

Koa 運行機制和 Nodejs 事件循環(huán)

其實通過上面的篇幅,我們對于內(nèi)部組成基本了解了,運行機制其實就是中間件執(zhí)行機制,而定制拓展性,我們上面提到了 Eggjs 和 Thinkjs 已經(jīng)充分證明了它可定制的強大潛力,這里我們主要聊下跟運行機制相關(guān)的,一個是 Koajs 自身,另外的一個是通過它向下到 Node.js 底層,它的運行機制是怎樣的,這塊涉及到 Libuv 的事件循環(huán),如果不了解的話,很難在 Node.js 這顆技能樹上再進一臺階,所以它也非常重要。

而 Libuv 的事件循環(huán),本質(zhì)上決定了 Node.js 的異步屬性和異步能力,提到異步,我們都知道 Node.js 的異步非阻塞 IO,但是大家對于 同步異步以及阻塞非阻塞,都有了自己的理解,說到異步 IO,其實往往我們說的是操作系統(tǒng)所提供的異步 IO 能力,那首先什么是 IO,說白了,就是數(shù)據(jù)進出,人機交互的時候,我們會把鍵盤鼠標這些外設(shè)看做是 Input,也就是輸入,對應到主機上,會有專門流入數(shù)據(jù)或者信號的物理接口,顯示器作為一個可視化的外設(shè),對應到主機上,會有專門的輸出數(shù)據(jù)的接口,這就是生活中我們可見的 IO 能力,這個接口再向下,會進入到操作系統(tǒng)這個層面,在操作系統(tǒng)層面,會提供諸多的能力,比如磁盤讀寫,DNS 查詢,數(shù)據(jù)庫連接,網(wǎng)絡(luò)請求接收與返回等等,在不同的操作系統(tǒng)中,他們表現(xiàn)出來的特征也不一致,有的是純異步的,非阻塞的,有的是同步的阻塞的,無論怎么樣,我們都可以把這些 IO 看做是上層應用和下層系統(tǒng)之間的數(shù)據(jù)交互,上層依賴于下層,上層也可以進一步對這些能力進行定制改造,如果這個交互是異步的非阻塞的,那么這種就是 異步 IO 模型,如果是同步的阻塞的,那么就是同步 IO 模型。

在 Nodejs 里面,我們可以拿文件讀寫為例,Koa 只是一個上層的 web 應用服務框架而已,它所有與操作系統(tǒng)之家的溝通能力,都建立在 Node.js 整個的通信服務模型的基礎(chǔ)之上,Nodejs 提供了 filesystem 也就是 fs 這個模塊,模塊中提供了文件讀寫的接口,比如 readFile 這個異步的接口,它就是一個典型的異步 IO 接口,反之 readFileSync 就是一個阻塞的同步 IO 接口,以這個來類推,我們站在上層的 web 服務這個層面,就很容易理解 Node.js 的異步非阻塞模型,異步 IO 能力。

那么 Node.js 的異步能力又是建立在 Libuv 這一層的幾個階段上的,什么?還有階段?

是的,Node.js 的底層除了解釋和執(zhí)行 JS 代碼的 Chrome V8 虛擬機,還有一大趴兒就是 Libuv,它跟操作系統(tǒng)交互,封裝了不同平臺的諸多接口,相當于抹平了操作系統(tǒng)的異步差異帶來的兼容性,讓 Node.js 對外提供一致的同異步 API,而 Libuv 的幾個階段,便是對于單線程的 JS 最有利的輔助實現(xiàn),所有的異步都可以看做是任務,任務是耗時的,libuv 把這些任務分成不同類型,分到不同階段,有他們各自的執(zhí)行規(guī)律和執(zhí)行優(yōu)先級。

大家可以先預測下下面這段代碼的執(zhí)行結(jié)果:

const EventEmitter = require('events')
class EE extends EventEmitter {}
const yy = new EE()
yy.on('event', () => console.log('粗大事啦'))
setTimeout(() => console.log('0 毫秒后到期的定時器回調(diào)'), 0)
setTimeout(() => console.log('100 毫秒后到期的定時器回調(diào)'), 100)
setImmediate(() => console.log('immediate 立即回調(diào)'))
process.nextTick(() => console.log('process.nextTick 的回調(diào)'))
Promise.resolve().then(() => {
  yy.emit('event')
  process.nextTick(() => console.log('process.nextTick 的回調(diào)'))
  console.log('promise 第一次回調(diào)')
})
.then(() => console.log('promise 第二次回調(diào)'))

你會發(fā)現(xiàn)你踏入了一個 【美好】 的世界,這就是我們通過了解 Koa 以后,如果想要繼續(xù)往下學習,需要掌握的知識,這塊知識才是真正的干貨,一言半語的確說不清楚,我們保留思路往下走。

Koa2 的三方庫生態(tài)如何

在 Koa1 時代和 Koa2 剛出的時候,的確它的三方庫不多,需要自己動手包裝,甚至還有 koa-convert 專門干這個活兒,把 1 代 koa 中間件轉(zhuǎn)成可以兼容 2 代 koa 可以兼容的形式。

但是時至今日,Koa2 的生態(tài)已經(jīng)相當完善了,尤其在 2018 年隨著更多開發(fā)者切入到 Koa2 中,將會有大批量的業(yè)界優(yōu)秀模塊庫進入到 Koa2 的大池子中,大家會發(fā)現(xiàn)可選擇的越來越多,所以他的生態(tài)沒問題。

跟前端如何結(jié)合

到這里,本文接近尾聲了,我也感覺意猶未盡,但是再寫下去怕是成飛流直下三千尺了,我想用一句話回答這個問題:
小而美是每一個工程師最終會選擇自我修養(yǎng),Koa2 是小而美的,能與它結(jié)合的必然也是小而美的,那么在 2018 年,就非 Parcel 莫屬,小而美絕配,關(guān)于 Parcel 如何 AntDesign/React/Bootstrap 等這些前端框架庫組合使用,可以關(guān)注 Koa2解讀+數(shù)據(jù)抓取+實戰(zhàn)電影網(wǎng)站 了解更多姿勢。

回到本文的標題:Koa2 還有多久取代 Express?我想完全替代是不可能的,但是新項目使用 Koa2(以及基于它封裝的框架)將會在數(shù)量上碾壓 Express,時間呢,2018 - 2019 兩年足矣,那么 2018 年起,但求不落后,加油!

封面圖來自 codetrick

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容