終於來到 Modern Web 近來最蓬勃發展的 Frontend 部份了！！本文會簡略帶過 Modern Web 的術語還有 Boilerplate 採用的 Frontend 技術，如果你已經熟知這個部份了，建議直接跳過 Frontend 部分，直接閱讀 Infrastructure 的部分。

SPA，Single Page Application

傳統網頁做一個動作就必須要刷新整個頁面，Server 需要回傳整頁的 Html，速度慢，互動性差，而且對 Server 的負擔又重。而最近被大家熱議的 SPA 則不同以往，它只有單一的主頁面，剩餘的整個 App 都被打包成 Javascript，可以一次性載入整個 App，也可以採用 Lazy Loading 的方式，以 Ajax 的形式載入操作 App 所需的必要部分。

據筆者所知，BackboneJs、AngularJs 等 Framework / Library 撰寫的 App 都屬於 SPA，而最近興起的則有 ReactJs 與 VueJs。

React

Boilerplate 的整個 Frontend 是由 React 貫串起來的，ReactJs 是由 Facebook 推出的 View Library，提醒各位讀者，它是專門處理 View，所以不像 AngularJs 可能還有 Model 和 Controller，React 也只是單純的輕量 Library，不是重型的 Framework。

筆者認為 React 之所以廣受好評是因為 Write Once, Run Anywhere 的精神，在 React 中有所謂 JSX 和元件化的語法，除了用來寫 Web App 之外，其實還能用來寫 Native 的手機 App，有興趣的人可以搜尋一下 React Native。

Webpack

撰寫 SPA 時會使用到大量的 Javascript，而且為了方便維護，通常會將檔案切割成 Common JS 或 AMD JS 模組，但這並不被原生 JS 所支援，因此我們需要一套工具來把這些分散的模組串聯在一起，並且打包成原生 JS 可以處理的語法，甚至還要為了 Development 環境建立 Source Mapping，或是為了 Production 壓縮整份 JS。

基於上面種種原因，我們撰寫 SPA 時通常會搭配 Webpack 這套打包工具來建置可執行的 JS。Webpack 是目前最受歡迎的工具，但其實在 Modern Web 剛起步的階段，Browserify 這個工具也曾紅極一時，而目前我們的 Boilerplate 也是按照主流採用 Webpack。

CSS Module

Webpack 基於 Loader 的技術讓我們不只可以 Import JS 檔案，還可以 Import CSS 檔案，稱之為 CSS Module，甚至還可以 Import 圖片檔、字型檔，只要 Loader 支援，你想 Import 什麼都可以。在 Boilerplate 中，我們已經實作了 CSS Module 的部分，可以 Import SASS 檔案，Webpack 的設定已經幫各位搞定，使用範例可以參考 HomePage 元件的寫法：

// ...
import s from './styles.scss';

const HomePage = (props) => (
  <PageLayout>
    <p className={s.redBorder}>
      // ...      
    </p>
  </PageLayout>
);

export default HomePage;