2017.09.01
前言
進入 NodeJS 世界算一算也兩個多年頭了
當時 2015 年暑假的 Node 也才 0.12.x 版左右 (後來與 iojs 合併變為 4.0.0)
兩年後的這個暑假竟然已經到了 8.4.x 版
前端框架更是百家爭鳴的狀態
有 Google 主導的 Angular、Facebook 主導的 React
開源框架 Durandal，以及它的後繼者 Aurelia
中國高手開發的 Vue
各個框架無不想在這個大 JS 時代取得領導地位
後端 Node 框架領導者也一路從 express
發展到支援 generator 的 koa 1
再到了支援 async / await 的 koa 2
這些發展都得以讓開發者能夠寫更少，做更多
由這麼多前後端 JS 框架的蓬勃發展來看
就可明白 JavaScript 技術的更迭速度有多快
以追求新技術為興趣的我，身在這個時代洪流中真的倍感興奮
實際使用的全端主力架構
也從 2015 年所用的 Meteor + Angular 2
途經 koa2 + Vue
最後到了 koa2 + React
開發語言也從 ES5 JS 與 CoffeeScript
再到 ES6 JS，最後選擇了 TypeScript 做為主力
一路累積過來實在有太多心得想分享，不過一直沒什麼時間能好好記錄下來
剛好近期利用 Isomorphic TypeScript 的架構來開發專案
它是個很適合將以上所有技術做個總結的架構
就隨手打篇文章總結一下，不會說明太多細節
如果有錯誤的地方歡迎給予指正
什麼是 Isomorphic TypeScript？
關於這個架構的完整解釋，可以參考 TechBridge 的這篇文章
簡言之，就是讓前後端共用同一份程式碼
並借助 TypeScript 的型別檢查等特性，讓我們所有程式碼變得更嚴謹、更易維護
如果還不了解 TypeScript (TS) 是什麼
可以簡單想像它就是 JS 的超集合，相容於 JS 的語法，但多了更多新特性
假如已經會了 JS，基本上不需什麼學習成本就能無痛轉移至 TS
以下還是會使用 JS 來代稱開發語言
從此開發者不需要學習兩種程式語言來開發網站
例如 後端 (PHP/Ruby/Python/C#) + 前端 JS
而是前後端都編寫 JS，讓程式碼更一致
甚至共用極豐富的 npm 套件，或是自己寫好的 JS 類別庫都行
最簡單的使用案例就是前後端共用同一個 Logger：
- 在 PHP 的情境
1. 後端 PHP 安裝 KLogger 套件 (透過 composer 安裝)
2. 調整 KLogger 相關設定 (日誌層級、輸出格式等)
3. 在 PHP 程式碼中引入 KLogger
4. 前端 JS 安裝 Pino 套件 (透過 browserify 安裝)
5. 調整 Pino 相關設定 (日誌層級、輸出格式等)
6. 在 JS 程式碼中引入 Pino
7. 透過 Webpack 來轉換並打包前端程式碼
- 在 Isomorphic JS 的情境
1. 安裝 Pino 套件 (透過 npm 安裝)
2. 調整 Pino 相關設定 (日誌層級、輸出格式等)
3. 在 JS 程式碼中引入 Pino (前後端皆可引同一個套件)
4. 透過 Webpack 來轉換並打包前後端程式碼
由此可知 Isomorphic JS 的架構不僅省去學習兩種語言的困擾
也不需學習兩種語言各自的套件管理器，使用 npm 即可一次搞定
更因為共用同一款 Logger 套件，使用、設定、引入的方式都一樣，減少學習與維護成本
專案結構大致如下圖：
1. client 資料夾存放所有前端程式，也可建立 lib 資料夾專門存放自己寫給前端用的類別庫
2. server 資料夾與 client 同理
3. lib 資料夾存放前後端共用的類別庫
- parser.js 用來處理前後端資料格式的轉換
4. data 存放測試資料，讓開發時不需跟資料庫溝通，前後端直接從這個資料夾拿 json 即可
瓶頸與期許
這麼多前後端架構的誕生，也是經過種種演變而成
就如同 JS 針對異步處理的演進過程般
從最原始的 Callback 到了 Promise 再到 Generator 甚至 Async / Await
要是沒辦法掌握完整的脈絡，很容易就迷失在這片技術海中
Isomorphic 的架構也不例外，它是建立在許多技術的基礎之上
當然本身如果就熟悉 NodeJS 以及 TS，那遭遇的瓶頸會少得多
但要結合前後端，就必須得熟悉變化更劇烈的前端框架了
首先目前最適合搭配此種架構的前端框架，我想非「React」莫屬了
要能靈活掌握 React，並整合 Server Code、Client Code 與 TypeScript
在環境的建立上，也非得理解「Webpack」要如何運用
順便還要知道一下「Babel」到底是啥鬼，扮演了什麼角色
前端資料管理技術又有「MobX」、「Redux」
跨端技術「SSR」、「GraphQL」
以及後端部署技術「PM2」、「Docker」等
這一個個都是坑阿！！期許自己今年內把這些都搞定！
目前還卡在 React + Redux 無法隨心所欲的掌握應用
但實在越寫越好玩，真希望一天有超過24H的時間...
創作內容
Isomorphic Typescript
Windows Phone (2)