Flux+ReactJS Development

讓網⾴頁變成畫布
Flux架構+ReactJS開發實作

201510

Transcript

1. 讓網⾴頁變成畫布 Flux架構+ReactJS開發實作 Laura Lee CSBU . FED
2. ⼤大綱 ⾃自我介紹 ⼯工作⼼心得分享 ReactJS開發⼼心得分享
3. Laura Lee 畢業於清⼤大資⼯工系 興趣是⼈人機互動網⾴頁開發 ⾃自我介紹
4. ⼩小學三年級 第⼀一次寫網⾴頁
5. ⼩小學四年級 做了⼈人⽣生中第⼀一個個⼈人網站
8. 這是⼀一個... 流⾏行烘焙雞(FrontPage)⾴頁框 和網⾴頁素材的時代
11. 上了⼤大學才知道 html, css, JavaScript 是⼀一種叫做”程式語⾔言”的東⻄西
13. 之後因為⼀一些緣份 我幸運的來到了叡揚 開始前端設計師的奇幻旅程
14. 學習sass語法 農委會專案成果 撰寫README, Change Log ⼯工作⼼心得分享
15. basic.scss … _mixin.scss basic.css SASS Compiler SASS讓CSS變得⽅方便管理！
16. scss/ basic.scss _block.scss _col.scss _main.scs _mixin.scss _mod.scss _utility.scss … scss/ basic.scss core/ _variable.scss _main.scss … module/ _col.scss … pages/ map.scss … 整理農委會專案架構
20. 撰寫讀我⽂文件, Change Log
21. ReactJS開發⼼心得分享 React簡介 Flux架構 VS MVC架構 React + Flux開發實作
22. Facebook開發的JavaScript Library ⽤用於設計網⾴頁介⾯面 What’s React
23. 即時反應 重複使⽤用 效能強⼤大 Why React
24. 即時反應 this.setState()
25. CommentBox CommentList Comment CommentForm 重複使⽤用 React.creatClass()
26. 效能強⼤大 Virtual Dom 資料來源: React vs AngularJS vs KnockoutJS: a Performance Comparison by Chris Harrington 2015/01/13
27. 效能強⼤大 Virtual Dom 資料來源
28. 效能強⼤大 Virtual Dom
29. 傳統HTML + JS + CSS VS React + CSS 同時控制 UI 和 Function 元件個別分開設計 可重複使⽤用 彈性增減 JS 和 UI 分開 不易管理 html code要⼀一再複製
30. 傳統HTML + JS + CSS VS React + CSS
32. Flux VS MVC 只多了Dispatcher?
33. Flux MVC 多對多互動 不容易追蹤資料流 難Debug view階層不明確 Action以API的⽅方式運作 ⼀一對多/多對⼀一 單向資料流 容易追朔bug位置
34. React + Flux Flux 為了 React 開發環境打造 發揮了 React ⽗父⼦子階層的好處 當 Store 改變 會觸發 Top-level View 由上⽽而下檢查更新
35. CommentBox CommentList Comment CommentForm Store
36. React + Flux 飯糰樹 實作
37. Action <Tick> <CreateChild> <CreateSibling> View <TreeApp> Store <CounterStore> Dispatcher Store <TreeStore> View <CounterApp>
38. 和後端如何銜接？
39. Thanks for listening
40. Q & A