現在我們對 JavaScript 模組有了更多的瞭解，我們已準備好深入探討 Sagan 應用程式的客戶端架構。

注意：如果您尚未閱讀過關於Sagan 專案的先前部落格文章，您應該知道這是為本部落格和spring.io上的所有其他內容提供支援的 Spring 參考應用程式。之前的文章展示瞭如何執行此應用程式，我們如何實現零停機部署，以及我們如何將 Sagan 升級以使用最新的 JDK8 功能。

在這篇文章中，我想介紹 Sagan 應用程式中客戶端架構的基礎知識。

1. 為什麼客戶端應用程式位於單獨的 sagan-client 專案模組中？
2. 它如何與 sagan-site 模組連結？
3. 什麼是npm、bower 和 gulp？
4. 這些工具如何協同工作來構建客戶端應用程式？

為了說明這一切，下面的螢幕錄影將向您展示如何新增新的 bower 依賴項並編寫一個小型新功能（網站上的鍵盤快捷鍵！），以及如何增強 gulp 構建（最佳化圖片！）。

!{iframe src="//player.vimeo.com/video/92961329" width="640"  height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen}{/iframe}

注意：有關螢幕錄影中提到的網站連結，請參閱節目備註。您也可以在 Vimeo 上以高畫質觀看此螢幕錄影。

對 npm、bower 等感興趣？Spring.io 有一篇關於此主題的精彩文章：“理解 JavaScript 包管理器”。

SpringOne 2GX 2014 即將到來

今年的SpringOne 將於9月8日至11日在德克薩斯州達拉斯舉行，超級早鳥註冊現已開放。我們希望在那裡見到您！