為了保證可讀性,本文采用意譯而非直譯。另外,本文版權(quán)歸原作者所有,翻譯僅用于學(xué)習(xí)。
對于網(wǎng)頁應(yīng)用,現(xiàn)代的開發(fā)方法使得前端部分變得越來越大,與之對應(yīng)的后端反而變小。我們的網(wǎng)站Weld的代碼中90%都是前端相關(guān)。我可以想象大多數(shù)現(xiàn)代的網(wǎng)頁應(yīng)用都類似。
網(wǎng)頁應(yīng)用一直在演化,網(wǎng)頁開發(fā)的技術(shù)也在不斷進(jìn)步?,F(xiàn)代的開發(fā)甚至依賴于在同一個項(xiàng)目中使用多個不同的框架。比如我們使用一些依賴于jQuery、AngularJS 1.x的舊的模塊,和React、Vue里面的新模塊。
我們需要一種方法可以把一個大的項(xiàng)目拆分成很多個小的模塊,讓它們獨(dú)自運(yùn)行。
舉個例子:
- myapp.com:使用靜態(tài)HTML技術(shù)構(gòu)建的靜態(tài)頁面。
- myapp.com/settings:使用AngularJS 1.x 構(gòu)建的舊的設(shè)置頁面。
- myapp.com/dashboard:使用React構(gòu)建的新的控制面板。
能夠想象我們需要如下技術(shù):
- 一個共享的JavaScript代碼庫比如用于管理路由和用戶會話,以及一些共享的CSS。當(dāng)然要越少越好。
- 一堆獨(dú)立的模塊,也就是微應(yīng)用(‘mini-app’)。每一個使用各自的框架搭建,使用不同的代碼庫管理。
- 一個可以將所有模塊連接起來的發(fā)布系統(tǒng),可以將整個服務(wù)運(yùn)行。任何模塊的更新都會觸發(fā)服務(wù)的重啟。
正如大家想到的,那就是前端微服務(wù)化。像Spotify, Klarna, Zalando, Upwork和Allegro都使用前端微服務(wù)化技術(shù)來構(gòu)架他們的網(wǎng)頁應(yīng)用。
我總結(jié)了一下幾種實(shí)現(xiàn)方案: