有價值的影音內容怎麼管理？ReactConf.TV 開發分享
ReactConf.TV — a place where passionate React developers are able to search & watch organized and up-to-date react conference videos.
Demo site：http://reactconf.tv/
Github repo：https://github.com/revtel/reactconf.tv
MadeWithReactjs：https://madewithreactjs.com/reactconftvReact Native / React 開發顧問：https://consult.revtel.tech/
「內容為王」在資訊科技高速發展的這十幾年一直是個不斷被提起的概念。載體的典範轉移或串流平台的蓬勃發展，一有新的技術迭代就會帶來新的思考角度及方向。
當然這是很大的議題，不是三言兩語能夠討論清楚的，但挑個小的範圍來切入觀察應該也是蠻有趣的。那不如就來想像一下，如果你手上有很多高價值的影音檔案，想要為它們開發一個聚合器該怎麼做呢？
這篇文章簡單紀錄了忻旅的開源專案 ReactConf.TV 的一些思考足跡，此外我們還有不少跨領域及開源的經驗，如果您有興趣也歡迎看看「案例分享」並跟我們交流討論～
開發緣起 — 從 React Conf 學習相關知識
過往曾開發過很多影音相關的互動平台（如 Qritica 思辨教育平台便是基於影片的收看及上傳來進行翻轉教育），幾次合作下來慢慢有了一些體會。再加上在某次內部會議上發現大家都會在工作之餘從 React Conf 等地方吸收 關於 React / React Native 的一些資訊。
既然是這樣乾脆自己動手做個聚合器來收納這些影片，除可以互相交流之外，另方面也作為相關開發的經驗總結。
圍繞於影音之外之外的互動及相關思考
在這次的命題中有個很大的議題已經被解決 — 影音串流的管理問題(已經被代管在 youtube 上了)。可基於到資源及時程的考量，如何適時的借用第三方平台協助託管影音檔案值得好好規劃，畢竟現今的終端影音需求除了看得到之外，看得順、多裝置流暢度及動態品質的調整這都是必須的。
以工程角度在規劃功能的時候首要是先抓出核心，並以該核心為出發點逐步補齊周邊任務及界線。這次嘗試的核心概念在於「人」及「影片」。
以「 人」為核心，主要思考如何有效管理待看及看過的影片；以「影片」為核心，主要思考如何最適當的傳遞資訊到受眾端。把這兩個方向做個分拆跟結合就能列出一些基本的功能列表。
技術選型 — 追求開發及維護的平衡
技術挑選上我們選擇了 React + GatsbyJS。
為什麼這麼做呢？除了達到原本的開發目標之外，還想追求額外幾個點
- 降低上線後的管理成本 — 伺服器端越薄越好
- 盡量追求全站載入的速度 — 因整個系統功能主要圍繞在 youtube 周邊
此外我們也蠻關注 JAMSTACK 的發展路徑，因此這個專案便以此為基底作規劃。
在結合了 CI/CD 工具之後，我們最終可以做到全站緩存到 CDN 並在每個 commit 都能自動部署。
ReactConf.TV — 以 Youtube / Vimeo 為核心的影音互動聚合器
現在我們來看一下 ReactConf.TV 有哪些功能
- 以 youtube playlist 為核心，抓取影片清單來做後續互動
- playlist 能標註標籤做更多的篩選及管理
- 互動上支援標註已讀以及收藏等功能
- 在影片收看時也能在側邊看到其他影片的清單
- 支援 RWD，對於手機播放及顯示有做處理讓其更流暢
ReactConf.TV 也蠻適合基於 youtube / vimeo 並想打造自有的官網的基本 codebase ：）
未來探索
ReactConf.TV 作為我們一個嘗試性的總結，裡頭還有很多方向可以思考，
比如
- 假如加入後端支援我們還能做些什麼？除了單純的多裝置的共通及會員這種常見的功能之外，工程面上就可考慮多種微服務的接入。
- 假如將場景延伸到 APP 之上，有哪些部件適合復用、哪些又需要重新實作？
- 微前端 (micro-fronted)會是個趨勢，考量到影音作為一個相對獨立的模組，該如何做配置及抽象化？
開源就是一場永遠持續下去的旅程，這篇文章便是這次旅程途中的某個小註。
RevtelTech 忻旅科技 https://www.revtel.tech/
email：contact@revteltech.com
facebook：https://www.facebook.com/RevtelTech/
