React 产品实现 -任务管理工具“氢”
原文地址：https://zhuanlan.zhihu.com/p/...，歡迎轉載 ：-）
? 關于
其實對于這個專欄的訂閱用戶感到非常抱歉，已經停更很久了，也沒啥特別的理由就是懶 orz！不對，畫風不能這樣開頭，是這樣的，我覺得我應該用 React 去做點兒什么，寫文章能夠清晰我的思路，讓我和別人有交流，但是并沒有實際做產品那么性感，于是我決定要用 React 來做一些產品出來，于是就有了 “氫” http://origingroup.tech 相信我在這里對氫的介紹以及實現技術介紹也能對大家有幫助。
所以這篇文章我主要想介紹一些做這個東西的思路、想法和一些技術實現以及用到的一些工具。
? “氫” 是什么鬼
這個名字聽著就很奇怪，為什么是個 H 元素作為名字，對，是這樣的，先不管氫是什么東西，我的想法是我要用 React 去做一些產品出來那總得取個名字吧，“一些產品” 意味著我得費好多經歷去想產品名稱，好了，不如就按照元素周期表的順序取名字吧，于是“氫”這個名字就這樣定了。 ：- ） （我都覺得我是天才了，hhhhhh ? ）
好了，說正經的，其實做氫這個東西早有預謀，很久很久以前我做了一些產品，然后夭折了，eee...... 于是現在我決定把它們撿起來（感覺哪里不對。。）！
其中的一個夭折的是 “一個針對個人的項目管理工具”，本想提供 saas 的服務，結果被我改來改去最后tm很長時間沒空理它不玩了，于是最終被改到現在的 “針對個人的筆記，任務，待辦離線管理工具” ,于是就有了這個叫氫的家伙（當然之前給它取的名字不叫這個。。）
? 那氫提供的核心功能有哪些呢？
提供 workflowy 功能的強大列表，能夠將日常的瑣碎的事情，用極致簡單的交互去做增刪改查
核心目標基于任務管理來打造，所以參考了很多任務管理工具的 UX 以及自己的想法-結合 scrum 模型，讓它在任務管理上也能簡單極致（最開始核心目標太多，導致產品幾乎難產，其實最后的氫是一個刪減吧，這也讓我懂得了做產品需要克制）
最后我需要有一個 powerful 的編輯器，因為平時記錄事情的時候總的寫點兒什么呀，于是任務詳情被打造成了一個 wysiwyg 編輯器，并且支持用 markdown 語法，可以直接粘貼 markdown 生成樣式，后面還會提供導出 markdown 功能
當然得漂亮
好了，說了辣么多，先上幾個圖，畢竟有句名言叫-meitushuogejb
第一張圖就是我說的 列表 ，具體怎么好用可能還得自己體驗過才知道，所見即所得，回車就創建一個任務，tab 一下任務就變為子任務，ctrl + command + up/down
? 說一說技術實現
如你所見，上面的這個東西是一個 Desktop app ，具體實現方式是：
Electron + React
最開始的時候只是針對 web 版本的，所以技術全是圍繞 React 來，后來決定該為 Desktop app ，當然第一選擇是 electron，過程中也是遇到了不少坑的地方，下面分幾個方便來分享一下
React 技術棧的選擇
項目結構與 Webpack 打包編譯
Electron 相關的使用細節
如何用 Electron 做 i18n
React 技術棧選擇
基本的技術使用和我在本專欄中提到的無差，具體為：
ES6 + JSX + Less ：作為基本的語言層選擇，這套路基本還是很常用的了
Ant.design: 使用 ant.design 作為基礎庫，這里感謝玉伯大大團隊的貢獻
Redux + Redux-Saga：現在熟悉了 redux 和 redux-saga 過后很難再改為其他的方式，因為感覺這種配套已經很極致了，在處理數據流轉已經 UI 交互的時候，redux-saga 幾乎是個 magic 的工具
draft.js + draft-plugin-js: 在編輯器的選擇上使用了 Facebook 的 draft.js , 如果你愿意詳細了解其設計和架構的話也會覺得這也是個偉大的項目，同時通過 draft-plugin-js 可以很快的將編輯器功能組件化，很容易通過 hook 定制自己的編輯器，氫中的編輯器有兩個，第一個是列表項每個都是一個編輯器實例，任務詳情，定制化的一個富文本編輯器
Immutable.js: 不可變數據，這對于列表來說真是太重要了，React 如果不進行優化的在特殊情況下會有嚴重的性能問題，氫種的列表就是這種特殊情況，一編輯某一個任務，處理不好會卡，會抖動。因此我在做列表的時候就決定由 immutable 重構了整個項目，同時列表的數據結構也是做了特殊的設計和優化的。（比如一個小問題，上下移動，如何確定順序呢？）
React-intl：氫做了基本的國際化，也就支持英文，當然現在應該有很多語法錯誤還沒檢查，使用的是 React-intl。
React-vitualized：這個項目也是為了做性能優化用的，不過現在的版本因為優化了數據結構不需要了
項目結構與 Webpack 打包編譯
項目的目錄結構設計和 webpack 打包編譯才是頭痛的問題，當 webpack 遇上 electron，各種環境不一致導致的奇怪 bug 我是不會跟別人說的，??個人默默的承受。。。
先上個項目結構的圖
好長的目錄，其中關鍵的地方是 containers 的設計，項目中 containers 目前的設計是一個 cotainer 包含
reducer.js
sagas.js
index.jsx
styles.less
components
當然圖中的項目結構中有專門的 reducers 目錄和 sagas 目錄，這是因為之前的設計沒改，后面的 reducer ，style，sagas 都是組件自包含的。
說說 webpack 的打包
感謝這個項目幫我解決了不少坑 chentsulin/electron-react-boilerplate 正常情況下的 Electron ，React 項目基本就按照這個 boilerplate 來就行了，不過我自己在打包上做了很多自定義的修改，所以才會出現很多 webpack 的問題。
其中的一個優化點是，不使用 dll ，無論 production 還是 dev 都會使用 vendors.js ，而這個 vendors 是預先打包壓縮好了的，所以每次打包實際都是只打包了業務代碼。具體方式是看圖就知道了
通過定義 externals 讓打包過程忽略這些模塊的打包，使用 external 方式引用
專門打包 vendor 的webpack 配置，一定要注意 libraryTarget
Electron 相關的使用細節
這里不想列舉太多細節，說說其中的一個，初始化 loading 加載，因為 electron 每次打開都幾乎是打開一個瀏覽器，在執行大的js 上也會花很多時間，所以會出現1s到2s的停頓，顯得應用很卡。
氫中解決這個問題的方式使用一個專門負責 loading 的 window ，這個頁面極其簡單，很快就可以加載出來了，然后這個時候打開主要的 window，當這個window 加載完了再顯示出來，再關閉負責 loading 的 window， 下面我直接貼出 main.js 的代碼，有需要的可以拿走
app.on('ready', createWindow);function createWindow () {locale = app.getLocale();landingWindow = new BrowserWindow({show: false,frame: false,width: 490,height: 400})landingWindow.once("show", () => {// Create the browser window.mainWindow = new BrowserWindow({width: 1000, height: 740,titleBarStyle: 'hidden',icon: `file://${__dirname}/assets/imgs/logo.png`,show: false})mainWindow.once("show", () => {landingWindow.hide()landingWindow.close()landingWindow.removeAllListeners();mainWindow.show()landingWindow = null})mainWindow.webContents.on('did-finish-load', () => {if (!mainWindow) {throw new Error('"mainWindow" is not defined');}mainWindow.show();mainWindow.focus();});// Emitted when the window is closed.mainWindow.on('closed', function () {// Dereference the window object, usually you would store windows// in an array if your app supports multi windows, this is the time// when you should delete the corresponding element.mainWindow.removeAllListeners();mainWindow = null;})// and load the index.html of the app.mainWindow.loadURL(`file://${__dirname}/app.html`);const menuBuilder = new MenuBuilder(mainWindow);menuBuilder.buildMenu(locale);})landingWindow.loadURL(`file://${__dirname}/landing.html`)landingWindow.once('ready-to-show', () => {landingWindow.show()}) }如何用 Electron 做 i18n
在做國際化版本的時候有兩種情況
main.js 主進程的國際化
window 內 renderer 進程的國際化
在 main.js 可以通過
locale = app.getLocale();
來獲取當前系統的語言，不過需要注意的是，獲取的地方一定要在 app.on('ready') 的注冊函數中獲取，不然默認會一直取到 “en-US”
在 window 中, 這就真的是前端的天下了
locale = navigator.language
和在 chrome 中無差，可以如上獲取語言，然后再通過設置到 react-intl 的 provider 中，接下來就是瑣碎的翻譯工作了。。。
最后
氫還是花了我不少時間的，目前沒打算 open source， 積累到了一定程度應該會開源，最后說一說做這個東西的收獲：
設計和 UX 是很重要的
克制，在做產品上，在設計上一定要克制
linux 哲學，讓產品只完成一個功能，不要想太多，想太多了什么都做不成
哪怕還是個渾身 bug 的東西，也要盡快的推出來，不然你都找不到理由繼續做下去
總結
以上是生活随笔為你收集整理的React 产品实现 -任务管理工具“氢”的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql的explain怎么看_mys
- 下一篇： Jenkins + gitlab we