Web Front-End 菜鳥筆記：在 2018 Q4 的小型 Single Page React App 函式庫 / 框架選擇

採用 create-react-app、react-router、axios、semantic-ui，暫不採用 redux / redux-saga、react-i18next，下階段預定採用 react-fns

人生中第一份前端工程的全職滿五個月了～公司還是沒倒喔（灑花）

從開始學 React 到現在，做過不少小型的 single page app，但畢竟都是自己的 toy project，從沒認真以 production quality 為基準做技術研究。這次負責公司 app 改版，爭取到一兩週的時間，把之前打馬虎眼欠下的知識債一口氣還完，覺得整個人神清氣爽～非常開心 :D

結果如下：

State Management / Patterns

發現

1. theme / language 這類頂層全域性的 state 適合使用 context api（provider pattern）
2. 其他 props drilling 的情境幾乎都適合使用 render props
3. 莫名堅持 functional programming 的人可以去用 high order component（not me）
4. 比較單純的零件群組如 selection group / nav 等可以用 compound component
5. 沒特別需求的話就普通 container
6. 當 app 複雜到 state 難以管理，就適合導入工具（redux || mobx），但成本高，自己算一下合不合

結論

1. 避免未熟調教，暫不導入 state management lib，等有需要時再來煩惱 lib 抉擇的問題
2. 先善用 render props / compound components / providers 等基本 patterns 把結構寫好

參考資料

Overview

• Use React Patterns to Build Large Scalable App
  / Jay Chuang @ Modern Web 2018 (slides)
• Application State Management
  / Feb 2018, Kent C. Dodds

Container vs Stateless

• Stateless Components
  / Mar 2016, Cory House

Compound Components

• Quick guide to React compound components
  / Aug 2018, Aditya Agarwal
• How To Master Advanced React Design Patterns - Compound Components
  / Apr 2018, Shaun David Hutch

High Order Components

• Michael Jackson - Never Write Another HoC
  / Sep 2017, Michael Jackson @ Phoenix ReactJS Meetup (video)

Render Props

• Use Render Props with React
  / Kent C. Dodds (egghead lesson of "Advanced React Component Patterns")
• When to NOT use Render Props
  / Mar 2018, Kent C. Dodds
• Answers to common questions about render props
  / Feb 2018, Kent C. Dodds

Context API / Provider

• Implement the Provider Pattern with React Context
  / Kent C. Dodds (egghead lesson of "Advanced React Component Patterns")
• React’s ⚛️ new Context API
  / Feb 2018, Kent C. Dodds

State Management Library

• You Might Not Need Redux
  / Sep 2016, Dan Abramov
• When to use Redux
  / Apr 2017, Ian Carlson
• When To Use Redux
  / Feb 2018, Josh Branchaud

i18n

發現

1. 最多人用的是 react-intl，生態最齊全的是 react-i18next，語法個人最喜歡的是 js-lingui

結論

1. 避免未熟調教，沒迫切需求的話暫不導入 i18n lib，等有需要時再來煩惱 lib 抉擇的問題
2. 先預留暗樁，app 內文字不直接 hard coded 在程式碼裡面，而是集中寫在某個設定檔

參考資料

• The Best Libraries for React i18n
• i18next vs js-lingui

Test / Validation

發現

1. TL;DR; Use Jest for unit and integration tests and TestCafe for UI tests.
2. Create React App 已內建 Jest

結論

1. 功能做完有空的話會補 Jest 的 unit test || integration test 的好人版（正常路徑）
2. 壞人版（edge cases）就更有空的話再說 www
3. 但至少會有 propTypes 的 validation
4. 至於 UI test 這等艱鉅的任務就交給老鳥去煩惱ㄅ

參考資料

• An Overview of JavaScript Testing in 2018
• Validate Component Input with Prop Types in React

Environment

發現

1. Create React App (by Facebook) is production ready, with code splitting, source mapping… basically everything you need
2. CRA 從今年初開始準備 v2，看起來近日內會上（webpack 3 -> 4, babel 6 -> 7）（結果這篇文章寫到一半的時候它就發佈了 XD）
3. 跟徒手設定 webpack 相比，至少省下了整整一個禮拜研究跟 debug 的工時吧...

結論

1. 趁 wireframes 階段先拿自己的 side project 當白老鼠試用 create-react-app v2，順便練習前面新學到的 patterns，手感有了以後再來對公司 app 動手

參考資料

• Last call for Create React App v2
• Create React App 2.0: Babel 7, Sass, and More
• Bootstrap a React Application through the CLI with Create React App
• Community discussions on ET's facebook post 

CSS Frameworks

發現

1. Bootstrap 本人雖然陽春，但家族生態完整，有像是 Core UI 這樣的 3rd party themes
2. 但 Bootstrap 的間距跟配色實在很呆，行高用在漢字可能比較剛好，不過我的 app 預設語言是英文...
3. Semantic UI 的好處是寫起來語法漂亮，寫 className 像在寫英文一樣，缺點則是他本人 source code 髒髒的，裡面一堆 !important 神煩 www

結論

1. 看在視覺外觀跟語法外觀的份上，我還是選了 Semantic UI（其實上一階段 prototype 時就先套用了，視覺上同事們非常買單 lol）
2. 拿 Bootstrap 來調外觀，當然也不是不行，但就像買了樂高回家卻要自己把零件重新上漆一樣，實在太讓人疲倦了

其他

React Router 跟 Axios 應該都沒啥好抉擇的，用就對了（欸）... 剩下的比較不影響技術決策的小東西我記在自己的小本本裡面，有興趣參觀的話網址在這 https://hackmd.io/16jVbdW2TTaXm6oRTa0RUg

後記

感謝一路陪著我長大（？）的 open source 社群的朋友們提供好多超實用的資訊，還有感謝室友回答我一堆光怪陸離的問題，總覺得別人家的 CTO 特別好用呢（被揍