此文為用開源專案一起熱血世大運-歷程篇下篇。
專案Source code : https://github.com/nthspace/universiade
前端 — ReactJS + Materia UI+ Webpack + CSS Grid
後端 — Firebase Database
爬蟲 — Python
這篇文章不會寫到很深的技術，主要是寫快速開發prototype的過程和工具們，希望給還不熟悉這塊的朋友們一點經驗分享。
三個人都是開發者，如何分工?
一個產品的推出，除了開發之外，UI要長怎樣? 功能有哪些? 資料哪裡來？milestone怎麼訂?
大家都覺得開發比較酷，但成就一個產品，總有人要犧牲做苦工，一場比賽要贏，是需要團隊合作的
我們三個已經一起共事一段時間，
對於彼此的技能樹和特性都非常了解，
鑑於我是提案者，也是唯一職涯中從事過非開發工作的人，
為了讓同事們可以專心開發，
開發之外的雜事都由我一手負責，包括規格與milestone。
大家各自認領完ticket之後就馬上開工，之後就是誰做完一個功能就去領下一個ticket。
使用現成的Library / Service 縮短開發時間
由於開發時間緊迫，別人已經造好的輪子，就不需要再造。
前端主要使用ReactJS，額外使用到的UI Library有 : material-ui, react-media, bootstrap-grid。
使用material-ui現有的React元件可以省下不少時間，但有時需要修改style也比較痛苦，像是card，由這個網站可看到可用的元件及props。
react-media用來做賽程查詢頁面的RWD，基於行動版和桌面版的介面差異頗大，列資訊的方式也有些許差距(如：男/女賽事在手機版使用icon非文字)，用CSS來調整不符合我們的需求，於是用javascript判斷device width後直接從render level將兩者的UI分開，如下:
import Media from 'react-media';<Media query={{ maxDeviceWidth: 768 }}>
{matches => (matches
? (
<MobileRoot
...props
/>
)
: (
<DesktopRoot
...props
/>
)
)}
</Media>
Landing page由於內容固定排版簡單，直接使用bootstrap-grid css，以定義的className快速完成排版。
後端使用Firebase。
若app本身不需要server做複雜的計算，資料的格式也單純，建議使用這個服務，Firebase database不是關聯式資料庫，內容儲存方式是一個大型JSON tree，前端使用 react-redux-firebase 就可以順利跟此服務結合，當DB有資料更新時，前端會收到通知更新reducer，不需要refresh頁面就會re-render。
目前體驗起來，資料query速度頗快，對於concurrent session超過免費額度時也只要升級plan就好，算是省去很多自己維護server的麻煩。
若需要額外的資料運算，在使用Firebase Database的情況下，就是把所有商業運算邏輯放在前端，在資料量不大的情況下，不論是行動裝置或桌上型裝置的資源應該都還夠用，但資料量大時，請測試行動裝置效能是否會破壞使用者體驗。
產品上線的標準是什麼?
我們採用敏捷開發的方式，用八小時實作完成最核心的功能 ：
“可以使用篩選器過濾，一眼看出一種運動的所有賽程，並知道還有沒有票”
在只有四種運動項目的賽程的情況下，將網站上線，觀察使用者，看我們是否深切解決了他們的問題。
上線確認方向正確後，開始瘋狂補上賽程，趕工RWD，並加入Google Analytics觀測是否有很少用到的功能，之後就不針對那塊改進，每完成一個功能就馬上部署一個版本。
於是，世大運期間上commit數量分佈呈現為一個完美normal distribution狀態。
Build code and hosting
用Github Pages服務直接host Github project的網頁是最快的，為了方便每一個人build & deploy，在 package.json中直接寫好script :
"scripts": {
"build": "NODE_ENV=production webpack -p",
"deploy": "git push -f origin `git subtree split --prefix dist develop`:gh-pages",
},每次要部署就在console跑
npm run build
npm run deploy就會自動把build好的static bundle files推到gh-pages這個branch裡，再在專案設定中設定Github Pages的source branch即可。
本來還想繼續寫前端專案多模組架構的說明，不過內容有點長，決定發在下一篇文章，這架構是我和 Chia-Wei Li在工作時為了一個比較大型的React application所設計的，目的為了讓模組和應用程式本身分離，應用程式可以輕鬆掛載/卸載多個模組。
有任何疑問或建議歡迎留言討論，期待聽到高手們的指教，若有對哪邊特別有興趣的也歡迎提出。
