【在主画面加入捷径】
       
【选择语系】
繁中 简中

[书籍回顾] 6 JavaScript Projects 评价

REVIEW
【赞助商连结】

    前言

    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 已经出来好一阵子了,不算是特别新的东西。如果有需要在网页上做数据视觉化的读者,可以参考一下本章的内容。

    结语

    范例集算相对小众的书,读者有可能完全用不到这些范例相关的知识,就不会想买;此外,一本书的容量也无法塞入太多范例。这本书提供六个有趣的范例,在每章的末段会提供完整的程序代码,除了可以学习特定函式库的用法,也可以自己试着练习追踪程序代码。

    【赞助商连结】