全文共6648字，預計學習時長19分鐘
圖源：Unsplash
“歷史總是驚人的相似，有重演之勢。”
一位科技界的大佬和小芯如是說。
我於1999年建立了第一個網站，用了一些可供網站管理員使用的最先進的技術（這種情況確實不能稱他們為開發人員）：所見即所得編輯器（WYSIWYG editors）。
對於我（還有很多人！）而言，這最初是指Microsoft FrontPage，而我正面帶尷尬的微笑，以一種懷舊又羞愧的心情告訴你這一切。
我的網站是一堆靜態的 HTML 頁面，這些頁面有很多 JavaScript 和精彩的 GIF，它們在20世紀初的網際網路時代備受矚目，並且由靜態的託管者提供服務，這些託管者本質上相當於義大利的 GeoCities。
在接下來的幾年中，我逐漸做出了更好的選擇，例如2002年釋出的 Macromedia Dreamweaver MX（也就是現在的Adobe）；其最大優點是生成更加符合標準的程式碼。
十年後的2009年，我仍在建立網站，但動態是那個時候的關鍵。所有頁面都是使用 PHP 在伺服器端生成的。不只是PHP：開發人員當時也在用.NET，Java，Python，Ruby等構建全棧式網路應用程式。
這些技術並不完全是新技術：ASP 在1996年前後出現，而 PHP 在1994年首次亮相！但是，20世紀頭十年的後半期，正是在這個時候，有了簡化網站開發的新框架推動，更多的小型團隊和開發人員可以使用這些技術。
例如，Django和 Ruby onRails 於2005年問世。此外，在那幾年，人們開始注意到動態網站的便宜主機託管選項（Bluehost這類共享主機開發於2003年），因此開發人員不必管理自己的伺服器。
當時，雲端計算還是一個相對較新的事物，總之，它基本上都是基礎設施即服務。
圖源：Unsplash
快進到當今時代。現在是2019年，開發人員現在正在……再次建立靜態網站。你可能會稱其為網站開發領域的尼采永恆迴歸的再現。
但這一次，情況有所不同：得益於更新的 HTML、JavaScript、CSS 標準和 API，網路瀏覽器的功能遠遠超過了20年前。
現在，電子表格和3D遊戲這樣極其複雜的應用程式可以開發出來並在網路瀏覽器中執行，而且無需外部外掛。（大量的GIF也會再次使用，但這次暗含了一些諷刺意味！）
JAMstack 和 Isolated Front End
HTML5 最初發佈於2008年，自那時起，瀏覽器廠商一直在實施新的網路標準並向網站中新增 API。
改變體現於更多的“基本”事物，例如<video>標籤在很大程度上推動了Adobe Flash退出歷史舞臺，對WebAssembly之類的網路構建方式提出了根本性的建議，因此開發人員常常很難掌握最新訊息以及可能發生的情況。
但是，最大的進步是網路應用程式新設計正規化的推廣，這種新正規化被稱為JAMstack，包括JavaScript、可重用 API 和預渲染（pre-rendered）Markup。
該設想從移動應用程式中獲得靈感，即使網路應用程式的前端層與後端層完全隔離，人們也可以只憑借一組商定的介面用HTTPS進行通訊。
JAMstack 應用程式體系結構的概念概述
JAMstack 的 JavaScript 部分所起的作用應該是不言而喻的：整個應用程式都在客戶端（即網路瀏覽器）中執行，由 JavaScript 支援（你也可以更加概括地解釋此定義，就像解釋執行 JavaScript 程式碼的瀏覽器中相同的 VM 一樣， WebAssembly也是如此）。
“A”絕對是最有趣的部分，它指的是API：API讓 JAMstack 應用程式具有互動性，併為終端使用者帶來非凡的體驗。你的靜態應用程式可以通過 HTTPS呼叫的 API 與其他服務進行互動。
最簡單的例子是 RESTful API，它們易於構建、方便使用。最近，GraphQL越來越流行，它對於可以用圖表表示的資料特別有用（其發明於Facebook 並不是巧合）。
對於某些情況，例如，那些需要交換大量結構化資料的應用程式還可以選擇Protocol Buffer和gRPC，儘管它們目前需要代理才能與網路瀏覽器一起使用。
最後，實時應用程式可能會利用WebSocket。你可以自由選擇你想要的任何 API 格式，只要它滿足你的需求即可。
說到 API，一個非常重要的細節是任何人都可以擁有它們。你的應用程式可能正在與你（或後端團隊）構建和維護的 API 進行互動。或者，你可能正在使用第三方API，例如 SaaS 應用程式提供的 API。稍後將重點介紹這些內容。
最後，JAMstack 中的“M”代表預渲染的 Markup。網路應用程式是靜態 HTML 檔案，在“構建時”通過各種打包工具（例如webpack、Parcel或Rollup）對這些檔案進行預渲染。
Markdown檔案中的內容也可以渲染，就像靜態網站生成器一樣，例如Hugo、Gatsby以及Jekyll。在部署應用程式之前，所有預處理都在開發人員的計算機或持續整合 (CI) 伺服器上完成。
使用 JAMstack 編寫的應用程式一旦被“編譯”，就變成了一堆 HTML、JavaScript 和 CSS 檔案，附帶著全部資源（影象、附件等）。伺服器端任何時候都不會處理。這給 JAMstack 應用程式帶來了極大好處。
首先，JAMstack 應用程式極其容易部署、縮放和操作，而且它的效能極好。
你可以從雲物件儲存服務（例如Azure Blob Storage或AWS S3）交付靜態檔案，這些服務價格（每GB每月只需花幾便士）非常便宜，而且特別可靠。
使用物件儲存服務時，你也不需要管理、修補伺服器或框架，因此開銷減少了，而且安全性也提高了。
然後，將 CDN（內容分發網路）放在物件儲存的前面時，你的網站將由世界各地的多個終端節點直接提供服務和快取，在全球範圍內，你網站的訪客將受到最小的延遲影響，此外，可擴充套件性也會達到極佳水平。
如果你願意的話，也可以像我一樣通過星際檔案系統 (IPFS) 提供檔案。
其次，JAMstack 的開發人員體驗（DX）很容易進行。首先，前端開發人員和後端開發人員可以專心編寫自己的程式碼，只要他們就介面和API達成一致意見，就基本上可以進行自主操作。
帶有複雜模板引擎（還記得PHP嗎？）的整體式應用程式時代已經一去不復返，這引起了兩個團隊間的衝突，讓大家都很頭疼。
前端應用程式在編譯後只是一堆靜態檔案，因此它們也容易自動部署：級別較高時，你可以將新捆綁軟體複製到儲存區域，然後更新 CDN ，從而指向新資源。
前端應用程式的編譯速度往往非常快，無需擔心容器化技術、容器編排以及Kubernetes等問題。
考慮到工具的標準化程度，有了預製模板，建立持續整合和持續交付（CI / CD）管道通常很簡單。
最後，前端開發人員可以自由進行實驗，在某些情況下，他們甚至可以將開發前端指向生產後端。
一切都與速度有關
圖源：Unsplash
對於終端使用者而言，真正的獲益在於感覺到應用程式的快速執行。這不僅可以提高使用者滿意度，還可以提高使用者的參與度和保留率。
為什麼會感覺到應用程式的快速執行？本文將從以下三個方面來解答。
首先，應用程式本身非同步載入資料，因此使用者可以在載入資料時看到介面，並可以與其進行互動。下圖是新版Twitter 應用程式載入的動圖：
該應用程式本身幾乎立即載入，然後逐漸開始非同步請求資料，並填充整個介面。
第二個原因是大量快取應用程式的能力。對於很多的JAMstack 應用而言，JavaScript 和 CSS 檔案不會經常更改，所以客戶端下載應用後可以長時間快取。
這樣可以節省請求應用程式程式碼的時間，客戶端只需要提取資料即可。此外，如果該網路應用程式是通過 CDN 提供的，那麼它會允許使用者從靠近他們的終端節點檢索你的程式碼，極大地降低了延遲。
應用程式的程式碼可能有好幾KB，即使如此，從 CDN 下載它的時間延遲降低了，還可以本地快取檔案，這實際上意味著該應用程式的執行速度變快了。
關於快取，你還可以使用諸如Service Workers之類的更多技術來實現應用程式程式碼和資料的快取，進一步加快頁面載入速度，甚至提供離線體驗。
最後，API 伺服器不需要花費時間生成並提供完整的 HTML 頁面，它只需要處理原始資料（通常是 JSON payload，在傳輸過程中使用 GZIP 壓縮），而把構建頁面的工作交給客戶端完成。
將資源交給物件儲存服務時，後端伺服器不會收到對靜態資源的所有請求，因此它將擁有更多的資源來處理實際的業務邏輯和API。
你可能不需要自己的API
圖源：Unsplash
上面曾提到，JAMstack 中的“A”代表 API，而且你可以使用任何人構建和操作的任何 API。
你可以使用外部身份提供程式對使用者進行身份驗證。如果你要構建企業應用程式，那麼目錄可能已經位於Azure AD或G Suite Directory（或與之同步）。
至於消費者應用程式，可以考慮與Apple、Facebook、GitHub這樣的社交平臺合作。
也有像Auth0和Okta這樣的公司，它們可以提供功能強大且可擴充套件的解決方案，包括帳戶管理（登錄檔單、密碼重置...）以及與各類外部供應商的整合。
令人欣慰的是，很多其他的 API 至少可以支援來自上述某些供應商的身份驗證令牌，因此你可以立即進行整合操作。另外，無論如何，使用外部身份提供程式而不使用自己的身份驗證程式碼都是一個好主意，因為這種做法最安全。
然後，你可以整合大量的 SaaS 服務，這會使你的應用程式得以接觸到大量的資料，擁有更多的功能，而你這一端無需付出任何努力。
API 可以應用於天氣、交通、顯示股票價格、地圖、監控航班，甚至還可以用來訂比薩。
你可以使用 Google Analytics 或 Adobe Analytics 來計算網站的流量。如果要建立部落格，那麼你可以使用Disqus或Commento之類的服務，從而輕鬆實現使用者對帖子的評論功能。
如果你需要內容管理系統來修改網站內容變得輕鬆愉快，那麼“無頭內容管理系統”可為你提供多種選擇。例如，Strapi和Ghost。甚至隨處可見的 WordPress 也可以在無頭模式下使用。
企業應用程式與 Microsoft Office 365 和 G Suite 等辦公套件整合後，你就可以收發電子郵件、管理日曆和聯絡人、建立文件和電子表格、訪問企業目錄等。
這些服務還附帶 OneDrive 和 Google Drive 中的雲端儲存，因此你可以輕鬆地使用它們來儲存和檢索資料。
開發人員還可以依靠外部服務來接受信用卡付款（如 Stripe）、在檔案格式之間進行轉換、為影象生成縮圖（例如CloudConvert）、處理視訊、傳送訊息（可通過 Slack、Teams、Twilio 等服務）......
API的功能是列不完的。使用者可以從前端應用程式直接訪問某些資料庫服務，例如Firestore。
最後，你還可以將某些“低程式碼/無程式碼”服務用於伺服器環境一定需要進行的過程，因為它們需要連線客戶端無法直接訪問的服務（資料庫、某些企業應用程式等）。
一種解決方案是Azure Logic Apps，它本來是一個為開發人員和企業而設計的 IFTTT，你可以通過 REST 呼叫來讓它執行。
使用外部服務提供的 API 的好處不容錯過。確保它們可用並根據需要進行擴充套件是其他人員的責任。
你無需修補任何應用程式或框架，更不用說基礎架構了，所有這些都會交給一個團隊來維護，從而保證其安全性。
關於隱私和合規性，還有一些有意思的好處。
圖源：Unsplash
如果你的應用程式僅存在於客戶端而未儲存任何資料，那麼 GDPR 合規性的責任多半將由你依賴的服務供應商承擔，就像使用外部服務付款一樣（如 Stripe），這讓你免於遵從PCI-DSS。
當然，如果沒有其他選擇，也可以構建自己的 API。
藉助無伺服器平臺，例如 AWS Lambda和AzureFunctions，你無需管理和擴充套件自己的伺服器，不過仍有負責的東西。
負責的內容包括修補應用程式，確保其在受支援的執行時上執行（例如：你使用的Node.js達到使用年限時，你要更新版本），可以視需要考慮如何地理複製這些部署和負載均衡。
構建自己的 API 通常也需要管理資料儲存，這些資料儲存需要經過複製、備份和縮放。
接下來是什麼？JEMstack
依靠自己的 API 和/或第三方 API 來使用 JAMstack 構建網路應用程式，是當今網路開發過程中最先進的設計模式之一。
數十年來，人們一直在將應用程式完整地移動到伺服器上，並儘可能地將大部分工作從客戶端上移走，然後又將更多的任務放到瀏覽器上。
無論是你自己還是其他人，還需要伺服器的只剩下一個地方，那就是 API。那麼按照邏輯，下一個問題是：“我們如何才能完全擺脫伺服器？”
答案是：最終可能通過使用區塊鏈實現，特別是以太坊(Ethereum)。
我建議稱其為“JEMstack”，是 JavaScript、Ethereum 和預渲染 Markup 的首字母縮寫。
該堆疊將是“ Web 3.0”或分散式 Web 的一部分。“JEMstack”分散式應用程式（或 dapps）將接受IPFS提供的服務，其資料將作為分散式總賬儲存在區塊鏈中。
其中的一些好處包括將資料的控制權交還給使用者，而且無論怎樣，開發人員都不必為基礎架構擔心。
以上這些還遠遠沒有實現。你完全可以使用區塊鏈（尤其是以太坊）構建 dapp，事實上，這樣的應用已經有很多了：App.co上有一個不錯的精選列表。但是，要使此類技術成為主流，仍需要解決許多問題。
實際上，構建以以太坊為基礎的應用程式的開發人員經驗 (DX) 確實很棒。
應用程式可以通過簡單無縫地呼叫智慧合約來輕鬆訪問和更改儲存在區塊鏈上的資料。此類智慧合約由一些程式碼組成，它們為了以太坊區塊鏈（從技術層面來說是以太坊虛擬機器）而被編譯，之後在上面執行。
智慧合約可以儲存資料並在上面進行計算，它通常由名為Solidity的語言編寫，這種語言與C語言類似。
但是，我在寫本文時發現，終端使用者體驗 (UX) 仍有很大的提升空間，這是廣泛應用 dapp 的最大障礙，該障礙可能還會持續更長時間。
首先，大多數使用者將需要安裝瀏覽器擴充套件來與以太坊進行互動，例如 Firefox 和 Chrome 的Metamask和 Safari 的Tokenary。只有不那麼流行的瀏覽器（如 Brave 和 Opera）才提供對以太坊錢包的內建支援。
Mobile 是另一個雷區，使用者需要在其中下載特定應用程式（例如 Coinbase Wallet 或 Opera Mobile）才能與區塊鏈進行互動。
然後，使用者必須處理以太坊錢包。雖然從以太坊讀取資料既免費又便於操作（並且不需要使用者互動），但是在區塊鏈上寫入任何東西都需要得到使用者的手動批准，而且至少要支付“油費”。
使用者需要支付一小部分以太坊代幣，才能執行改變區塊鏈狀態的程式碼，而且無論智慧合約功能本身是否可支付，這都是必需的（例如：它將資金（以太幣）轉移給其他人）。
使用者體驗並不讓人滿意，因為它要求使用者顯式單擊彈出視窗，然後等待幾秒鐘到幾分鐘，以便以太坊區塊鏈能確認交易。
當然，使用者需要先購買以太坊令牌，這並不像看起來那樣簡單，尤其是在世界上某些國家或地區。
最後，如果使用者放錯了錢包的私鑰或還原了單詞，或不夠謹慎，都會留下安全隱患。
目前有一個龐大的團體正在致力於改善區塊鏈應用的使用者體驗，使其更容易新增身份，構建更透明的流程，使交易更快，甚至能瞬間完成。
每種技術仍處於不穩定狀態，而且現在存在著各種各樣彼此競爭的區塊鏈技術。這與平臺和框架的情況很相似。
真心希望在接下來的幾個月和幾年中，會看到更多的融合和標準化，而最終寫在“JEMstack”上的 dapp 可能會成為新的規範。
小芯相信，有生之年，一定能看到的！
我們一起分享AI學習與發展的乾貨