又到了歲末年終的時刻。今年是我正式邁入職場工作完整的一年，覺得是應該寫些什麼，來留下一點記錄。

Node.js

其實早在 2011 年，大學實務專題就已經接觸 Node.js，並使用它作為我們系統後端開發的主要程式語言。不過這一塊主要由另一個組員負責，那時候我主要著重在 Android app 開發上（當時還僅是 Android 2.2 版本，現在 7.0 都已經出來了 XD）。真正開始投入這個領域是在研究所碩二的時候。

學習 Node.js 與其他程式語言最大的差異，大概就是對其非同步思維的掌握。 callback hell 可能是所有學習 Node.js 初學者都曾有過的經驗。

2016 年以前（更正確來說應該碩士畢業前），個人常使用 async 套件來處理 callback hell 問題， 不過隨著 ES6 / ES2015 的推行，Promise 已經成為處理非同步的事實標準，因此它也就成為 Node.js 開者者必須要會的基本能力。

而 ES6 加入的 generator 特性，使用 co + yield 已經可以優雅地處理非同步邏輯。ES7 則進一步引入 async / await 語法，更容易處理非同步程式。不過 async / await 直到 Node.js v7 才被引入，並且需要加入 --harmony-async-await 開啟該功能。至於瀏覽器則尚未支援，不過借助 Babel 的轉譯功能，已經可以使用該語法投入在產品開發上。

個人目前主要還是使用 Express 框架開發 Web 以及 API 服務，在 async / await 尚未被正式支援前，引入 co-express，作為處理非同步的解決方案。

順便提一下 Koa。Koa 1.x 使用 generator 撰寫 middleware，2.x 則使用 async /await 。不過在 Node.js 在 async / await 尚未被正式支援前，將無限期處於 unstable 的狀態（估計要等到 Node.js v8）。就現況而言，Express 已經是很完善的生態系，周邊套件比較豐富完整，Koa 雖然標榜是下一代 Node.js 的 web 框架，但感覺沒有立即使用的必要。

今年初，為了做實作服務授權以及 API Gateway，土炮了一個 OAuth 2.0 provider，對整體 OAuth 2.0 的規範有更進一步的了解。

Front-end Engineering

Angular, React and Vue

除了後端 API 的開發，我在公司更多的時間可能是在寫前端。三大主流框架 Angular、React、Vue 也都玩過一遍（Angular 2 & Vue 2 還尚未有應用到實際專案的例子），來講講對這三個框架的看法。

Angular 1 在 2016 年，很多人可能認為是比較過時的舊東西了，特別是 Angular 2 在中秋節推出後特別明顯。不過 Angular 作為一個大而全的框架，對於前端提供一套完整的解決方案，只要學習上手之後，便可以提供可觀的生產力。在 Angular 1.5 後新增 angular.component() 方法，component 有自己的生命週期，並引入單向綁定，使得 Angular 1 也可以寫成 compoenent-based applicatoin，甚至考慮引入 Flux / Redux 來管理應用程式狀態。至於 Angular 2，個人接觸不深，目前不好評論，不過仍持續保持關注。

React 本身沒有像 Angular 這麼多複雜的概念，理解 state 和 props ，大致就能開始上工了。但是要建構一個完整的 application，很明顯只有 React 是不夠的，你可能需要 React Router 來管理路由，使用 Flux / Redux 來管理應用程式的狀態。這時候學習曲線就會會直線飆升。不過對於一個初學者來說，我覺得學會 Babel 與 Webpack 來搞定開發環境可能是一個比較大的門檻，不過好在現在已經有 create-react-app 這一類的工具出現了，可以降低初期設置開發環境的痛苦指數。

2016 年可以說是 Vue 大紅大紫的一年。我在今年 7 月才接觸，用在一個相對短期的實驗性專案。作為 MVVM 的框架，許多語法對於寫過 Angular 的開發者幾乎可以無痛轉換。不過和 React 一樣， Vue 核心並沒有提供路由機制，建立中、大型應用可能需要搭配 vue-router，官方也有 vuex 作為狀態管理的解決方案。Vue 2 個人也是接觸不多，主要多了 SSR (server-side rendering)，並支援 JSX。不過老實說，用上 JSX 的 Vue，個人覺得與 React 比起來倒已經有 87 分像了 XD。

從這裡便不難發現，前端元件化開發已是趨勢，框架之間的同質性也愈來愈高，撇除性能不談，選擇框架的原因可能在於偏好。就目前而言，我更偏好於擁抱 functional programming 的 React。

Build Systems

再來談談構建工具的改變。短短一、兩年之內，從一開始使用 Grunt 做為構建工具，再到 Gulp ，乃至於現在使用 NPM scripts + Webpack，這一連串的更迭，正體現了前端工程這幾年來產生的劇烈變化。所以在 2015 年有了 JavaScript Fatigue 這個說法（簡單來說就是被新技術淹沒，感到暈眩不知所措 XD）又或者是這一篇 How it feels to learn JavaScript in 2016。

至於前端套件管理方面，在 2016 年初決定將公司產品導入 Webpack 後，就已經棄用 Bower ，全面採用 NPM 作為前端依賴管理的解決方案。

DevOps

大概在今年 8 月左右開始接觸 Docker，會用上 Docker 的原因，主要是開始嘗試將系統從單體式架構走向微服務 (Microservice）架構，使用微服務意味著必須要將不同功能模組由各自的專案進行開發，當管理的專案變多，開發環境的建置與部署就變成不是一件簡單的事情。

Docker 容器化與隔離性的特質，使得它很適合應用在微服務架構上。除此之外，透過 Docker Compose 的設置，還可以迅速搞定 Developer 的開發環境，讓新進人員馬上投入專案開發（沒有蜜月期？XD），並統一開發與部署環境，達到 “Build, Ship and Run Any App, Anywhere” 的境界。

Open Source Projects

這裡僅列比較個人覺得比較重要的幾項：

• fqb - Facebook Graph API query builder for JavaScript
  這是一個方便建構 Facebook Query 字串的小工具，因為開發公司產品的一些功能需要不斷與 Facebook Graph API 打交道，所以用 JavaScript 寫了這個小工具，並把它發佈到 NPM 上，方便日後再利用。

• api-seed
  用於建構 RESTful API 的 starter project，主要使用 Node.js 的 Express 框架搭配 MonogoDB。

• worker-seed
  用於建構 job queue worker 的 starter project，主要基於 Node.js 與 Redis，需要定時任務可以搭配 node-cron 或 node-schedule 等 library 使用。

• react-redux-boilerplate
  其實 React 生態圈已經有很多各式各樣的 boilerplate（也可能稱之為 starter 或 seed project），但不一定令人滿意，或需稍加修改，於是就自己親手寫了一個符合自己需求的樣板。在實踐的過程中，最重要的收穫是掌握了各式工具的應用（Wepack, Babel, ESLint, etc）。

• angular-redux-boilerplate
  這是一個使用 Angular 1.5+ 結合 Redux 的樣板。相較於 React，使用 Angular 結合 Redux 的例子並不多，但是使用 Angular 的 legacy project 相信是不少的。基於系統穩定等理由，也許沒辦法立即轉換到新框架，但是使用 Angular 1.5 的 angular.component() 重構是一個不錯的方法，結合 Redux 可以讓資料流更清楚可預測。最近在整理公司既有的專案，於是隨手造了這個 boilerplate。

About 2017

身為一個 Node.js / JavaScript Developer，新的一年，除了對 JS 的發展持續保持關注外，希望可以投入更多時間在 DevOps 上。特別是 Docker clustering tools 如 Swarm, Kubernetes, Mesos 等都還沒有時間好好玩一玩，而最終目的還是希望能將公司產品導入完整的 CI / CD 流程。

無論如何，回顧這一年的成長還真不少，新的一年也繼續努力！