前言
6 JavaScript Projects 是 SitePoint 所出版的 the Modern JavaScript Collection 套書中的第四本。該套書共有四本：
- Practical ES6
- Modern JavaScript Tools and Skills
- JavaScript: Best Practice
- 6 JavaScript Projects，本文所要介紹的書籍
JavaScript 已經問世 20 多年了，在這段時間內，JavaScript 和網頁技術產生許多的變化。該系列書籍期望能帶來到西元 2018 年為止的最新實務。本書藉由一些範例來看如何將網頁技術用在專案中，供有需要寫類似類型的網頁應用程式的程式人參考。
本書共 192 頁，分為 6 章，算是一本輕量級的書籍；這本書的實例會比一般的範例程式長一些，各章的作者會帶著我們讀專案程式碼；閱讀本書時需耐著性子讀，比較能夠讀懂這些專案所要展示的技術點。我們接下來會逐一介紹各章節。
Chapter 1: Build a Full-Sphere 3D Image Gallery with React VR
本章利用 React VR 建立一個 3D 圖片集 (image gallery)。React VR 由臉書公司 (Facebook Inc.) 所開發，奠基在 WebGL 之上，目的是為了簡化 WebGL 程式的開發。React VR 需搭配 React 使用。
由於 WebGL 在主流瀏覽器上已經可以使用了 (參考這裡)，想要在專案中使用 3D 圖像的讀者，可以閱讀一下本章的內容。
Chapter 2: Build a WebRTC Video Chat Application with SimpleWebRTC
本章使用 SimpleWebRTC 開發一個即時影音串流聊天程式。SimpleWebRTC 基於 WebRTC，目的是為了簡化 WebRTC 程式開發的過程。SimpleWebRTC 是一個商業串流服務，有免費額度；收費的著眼點在維持伺服器運作和人事開銷等。這是一個新興平台，有興趣的讀者可以看一看。
Chapter 3: Build a JavaScript Single Page App without a Framework
當我們想要建立單頁網頁應用程式時，很自然地會想到 Angular、React、Vue 等前端框架，很多新的網頁程式也是以這些框架來撰寫。然而，過度依賴框架，會使我們視野受限。因此，本章展示一個不依賴前端框架的貨幣展示及轉換程式。
本章使用以下網頁技術：
- jQuery：操作 DOM
- Semantic UI
- Handlebars：模板語言
- vanilla router：前端路徑處理
- Express：後端框架
- Axios：(從後端) 抓取第三方資料
並使用以下第三方 API：
- fixer.io API
- Free Currency Converter API
這章展示的程式不長，也沒用到複雜的 data binding 相關功能。筆者以為，可以把 jQuery 換成原生 JavaScript 但保留其他部分，更符合現代 JavaScript 網頁程式的精神；不過，使用 jQuery 也沒什麼錯，這算是個人喜好。
Chapter 4: Build a To-do List with Hyperapp, the 1KB JS Micro-framework
本章使用 Hyperapp 製作一個 TODO 程式。TODO 程式算是很好的練習主題，透過這個過程可以學到資料的 CRUD 等基本操作；像是 TodoMVC 就用很多的前端框架造同一個輪子，藉此熟悉不同的框架。Hyperapp 則是近年來走紅的前端框架，在 GitHub 超過 15,000 個星星數；主打的特色是體積小 (1kB 左右)、支援虛擬 DOM、沒有額外相依性等。
本章的範例不長，在 CodePen 平台上實作，最後原作者也提供了做好的範例，讓讀者追蹤其程式碼。對 Hyperapp 有興趣的讀者可以趁機學一下該框架的寫法。
Chapter 5: Use Parcel to Bundle a Hyperapp App & Deploy to GitHub Pages
本章沿續上一章的主題，再做另一個 Hyperap 應用程式，也是 TODO 清單程式；不過，本章的重點不在程式本身，而是利用 Parcel 將專案打包並發布。由於本例的程式只有前端的部分，故可以發佈到 GitHub 這類網站上。
Parcel 是近年來走紅的專案程式碼打包程式，主打快速編譯及免設定。Parcel 可將數個 JavaScript 命令稿合併成單一命令稿，便於發佈；同時可用 Babel 等 JavaScript 轉譯器在打包程式時將 ES6+ 語法轉換為等效的 ES5 語法。
Chapter 6: Interactive Data Visualization with Modern JavaScript and D3
由於 JavaScript 本身沒有視覺化的方式，最簡單的方式就是用瀏覽器做為視覺化工具。D3 是一個知名的 JavaScript 資料視覺化函式庫，本章展示一個用 D3 製作的收入分布圖。基本上從本範例程式得到的知識是富者越富、貧者越貧，這在全世界都是持續發生的問題。
其實 D3 已經出來好一陣子了，不算是特別新的東西。如果有需要在網頁上做資料視覺化的讀者，可以參考一下本章的內容。
結語
範例集算相對小眾的書，讀者有可能完全用不到這些範例相關的知識，就不會想買；此外，一本書的容量也無法塞入太多範例。這本書提供六個有趣的範例，在每章的末段會提供完整的程式碼，除了可以學習特定函式庫的用法，也可以自己試著練習追蹤程式碼。