[書籍回顧] 6 JavaScript Projects 評價

REVIEW
【分享本文】
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

    前言

    6 JavaScript Projects 是 SitePoint 所出版的 the Modern JavaScript Collection 套書中的第四本。該套書共有四本:

    JavaScript 已經問世 20 多年了,在這段時間內,JavaScript 和網頁技術產生許多的變化。該系列書籍期望能帶來到西元 2018 年為止的最新實務。本書藉由一些範例來看如何將網頁技術用在專案中,供有需要寫類似類型的網頁應用程式的程式人參考。

    本書共 192 頁,分為 6 章,算是一本輕量級的書籍;這本書的實例會比一般的範例程式長一些,各章的作者會帶著我們讀專案程式碼;閱讀本書時需耐著性子讀,比較能夠讀懂這些專案所要展示的技術點。我們接下來會逐一介紹各章節。

    6 JavaScript Projects

    本章利用 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 已經出來好一陣子了,不算是特別新的東西。如果有需要在網頁上做資料視覺化的讀者,可以參考一下本章的內容。

    結語

    範例集算相對小眾的書,讀者有可能完全用不到這些範例相關的知識,就不會想買;此外,一本書的容量也無法塞入太多範例。這本書提供六個有趣的範例,在每章的末段會提供完整的程式碼,除了可以學習特定函式庫的用法,也可以自己試著練習追蹤程式碼。

    【分享本文】
    Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email
    【追蹤新文章】
    Facebook Twitter Plurk
    標籤: JAVASCRIPT