Onelab, Frontend Tech Supervisor, Jul 2010 ~ 09

Multi-Table Virtual games (2019-2020)

• 開發在一頁顯示不同遊戲類型的 multi widget game RWD SPA 架構, 混搭 react component 跟 pixi.js 視覺元件的高度整合應用，並設計能在這兩種 view 元件中共享同樣的 redux state/action/reducer 環境。
• 使用 react-redux multi store 架構, 讓 lobby 與 game 各自保持自己獨立的 redux store 結構。
• 設計分離式專案架構, 讓同事可以自行建立獨立專案各自開發 react widget & pixi component.
• 協助同事轉型並訓練撰寫 react functional component & hooks.
• 撰寫 custom hooks / react 共用元件 / middleware 給其他同事開發利用。

使用技術

• react functional component, react hooks. react lazy & suspense, styled component / system (emotion).
• redux v7.1+, react-redux with hooks, react context API, react-i18n with hooks. 
• pixi.js v5 / rx.js / webpack / websocket.

--------------------------------------------------------------------------------------------------------------------------------------------------------

Streaming Player (2019-2020)

• 開發整合不同家廠商的 streaming (hls, webrtc... )的 h5 客戶端視訊播放器。
• 使用 react context API (after v16.3) 整合不同廠商的 player state。
• 使用 webRTC peer connection API 和 canvas 2d api 結合實作出可以顯示 video/audio bitrate 跟 fps 的統計曲線面板，讓使用者能即時預覽 3 分鐘內的網路連線品質。(類似 youtube 的 stats for nerds 滑鼠右鍵的統計資料功能)。

 --------------------------------------------------------------------------------------------------------------------------------------------------------

CI / CD (2018-2020) 

• 使用 docker image 包裝 nodejs / yarn / texture-packer 環境, 並寫 shell script 執行自動搬移編譯的檔案內容至指定硬碟路徑。 接著使用 drone CI 自動編譯部署前端專案，透過 gitlab -> drone (create docker container and build project)-> notify slack channel, 實現 RD 能在 git commit 時自動編譯程式測試, 用 npm 打版號 push 到 gitlab 時便能自動編譯 prod 版本部署至跳板。 
• 後期統一改為 gitlab runner 實現. 

使用技術 

• docker / docker compose / shell script 
• Drone CI
• gitlab runner 

 --------------------------------------------------------------------------------------------------------------------------------------------------------

 All slot game / table game / card game client architecture (2013-2020) 

• 2013 年開始獨自研發 h5 canvas game + h5 UI layout (build by react) , 設計並實作 slot game 引擎(FSM 架構) , table game, card game fullscreen RWD 等前端架構，建立 js shared library 架構，並開發部署多樣不同平台的設計應用, 包含 mobile (landscape / portrait) / tablet / desktop / mini-desktop 共計 30+ web h5 games.  
• 實作 mobile fullscreen RWD canvas application, 並針對不同 android / iOS browser 實現 fullscreen layout. 
  
• 從 pixi.js v1 開始使用並持續更新至 v5, 保持穩定版本升級並優化架構。 
• 從 angularJS -> react (v0.13 -> v16 ) / flux -> react / redux 持續優化架構流程。 
• 利用 yeoman 建立專案腳手架, RD 無需自行手動安裝專案並能迅速開發。
• 開發 game library / pixi.js mvc 架構 / 各種 pixi & react 元件供同事開發使用。 
• 協助 flash RD 轉型，並開教育課程定期訓練。
• 建立 coding style guide, 並定期幫同事 code review 做流程優化並保持各項專案一致性。

使用技術 

• pixi.js ( v1 -> v5 ) 
• angular 1 -> react / flux -> react-redux 
• sass -> post-css 
• webpack / gulp 
• rx.js 
• websocket

--------------------------------------------------------------------------------------------------------------------------------------------------------

  React native code push Demo (2020)  

• 研究 react native code push 並實作 prototype 更換 app 內容。 

使用技術 

•  react native ms code push 

--------------------------------------------------------------------------------------------------------------------------------------------------------

Easy game board site (2020)  

• 開發簡易的 restful API 及排行榜相關頁面供 client RD 做測試使用。 

Splashtop(DeviceVM), Senior Engineer, Jun 2007 ~ Jun 2010

工作室接案, Jun 2005 ~ Jun 2007

主要使用 js + css + flash 開發各類型活動網頁。