有價值的影音內容怎麼管理？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/reactconftv

「內容為王」在資訊科技高速發展的這十幾年一直是個不斷被提起的概念。載體的典範轉移或串流平台的蓬勃發展，一有新的技術迭代就會帶來新的思考角度及方向。

當然這是很大的議題，不是三言兩語能夠討論清楚的，但挑個小的範圍來切入觀察應該也是蠻有趣的。那不如就來想像一下，如果你手上有很多高價值的影音檔案，想要為它們開發一個聚合器該怎麼做呢？

這篇文章簡單紀錄了忻旅的開源專案 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 作為我們一個嘗試性的總結，裡頭還有很多方向可以思考，

比如

1. 假如加入後端支援我們還能做些什麼？除了單純的多裝置的共通及會員這種常見的功能之外，工程面上就可考慮多種微服務的接入。
2. 假如將場景延伸到 APP 之上，有哪些部件適合復用、哪些又需要重新實作？
3. 微前端 (micro-fronted)會是個趨勢，考量到影音作為一個相對獨立的模組，該如何做配置及抽象化？

開源就是一場永遠持續下去的旅程，這篇文章便是這次旅程途中的某個小註。

RevtelTech 忻旅科技 https://www.revtel.tech/

email：contact@revteltech.com

facebook：https://www.facebook.com/RevtelTech/