1. 善⽤用RAILS特性設計系統

2. RAILS 的好
• 豐富的 helper (form helper, url helper, datetime .. etc)
• 超強的 ORM
• ⽅方便好⽤用的 routing 機制
• 重複使⽤用 partial (SRJ)
• 最 ”前” 到最 ”後” 無縫整合
(form helper => routing => controller => model)

3. 需要注意的 …
• View Render 很慢
* fragment cache
• response time / concurrent 能⼒力
* unicorn
* puma
• 有些只適⽤用於專案還沒那麼複雜的時候
* nested model
* 複雜的 callbacks / validations ( 拆出 layer )

4. 常⽤用的 GEM
• simple_enum (讓 active record ⽀支援列舉，⽐比 rails 內建好⽤用)
• active_link_to (處理 link active 狀態的 helper)
• jquery-rails [ujs] (整合前端 + rails routing 機制)
• bh (bootstrap helpers)
• bootstrap-sass (sass 版本 bootstrap，可複寫變數)
• bootstrap_form ( bh 格式的 form helper，整合 activerecord)
• stamp + stamp-i18n ( 簡單的時間格式 helper )
• soft_deletion ( 軟刪除⼯工具 )

5. SIMPLE ENUM #1

6. SIMPLE ENUM #2

7. ACTIVE LINK TO #1

8. ACTIVE LINK TO #2

9. ACTIVE LINK TO #3
* ⼀一般選單
* 搭配 simple_enum 做 status tab

10. JQUERY-RAILS #1
-
* scaffold 會看到的 code ( 學到 method & confirm)
* remote options (改⽤用 ajax 送出)
* 會⾃自動判斷 json or javascript

11. JQUERY-RAILS #2 - ⼀一鍵更新
/admin/orders/index.html.haml
Admin::OrderController
simple_enum 變更資料狀態 + 共⽤用 update action 邏輯

12. SRJ #1 範例
* (Server-generated JavaScript Responses)
* PostsController
* posts/index.html.haml
* posts/destroy.js.erb

13. SRJ #2 FORM 也可以
* PostsController
* posts/create.js.erb
* pages/_form.html.haml

14. SRJ #3 - $.GET / $.POST 也可以
* PostsController
* posts/index.js.erb
* posts/index.html.haml

15. JQUERY-UJS - AJAX EVENT
https://github.com/rails/jquery-ujs/wiki/ajax

16. SRJ #4 - BOOTSTRAP 應⽤用
• Modal
new.js / edit.js 在 modal 裡⾯面 render form
create.js / update.js 成功就關閉 modal，失敗就 re-render & replace html
• Loading Button
綁 ajax 事件
ajax:beforeSend - $(this).button(‘loading’);
ajax:success - $(this).button(‘reset’);
ajax:error - $(‘#error-modal’).modal();
• Form + Loading Button 避免重複送出
ajax:beforeSend - 找到該 form 的 submit button 設定為 loading
ajax:success - 找到該 form 的 submit button 還原
ajax:error - $(‘#error-modal’).modal();

17. SRJ #5 - 搭配 PUSHER
• https://pusher.com/
• 是⼀一個專⾨門處理 realtime communication 的雲端服務
• 1. front-end 提供 web socket endpoint
• 2. back-end 提供 API 作通知
• 當收到 event ⽤用 SRJ 做資料更新

18. ⽤用這樣的開發⽅方式⾮非常快
但是 render view 的成本很⾼高

19. Fragment cache

20. ⼀一次 cache 全部

21. cache key 有⻑⾧長度限制
太多 record 分批 cache

22. 好⽤用的東⻄西效能通常不好，也要 cache ⼀一下

23. 我的設計原則

24. V1 開發效率第⼀一
• 軟體效能⽤用 cache 先擋，撐幾個版本在⼤大改版
• 管理者後台以 “可以⽤用就好” 的標準
• 不⾃自⼰己發明 UI，把 bootstrap⽤用到淋漓盡致

25. ⽤用 SRJ 提升開發效率
• ⼩小技巧避免做更多⾴頁⾯面、功能
e.g. nested form (has_many association)
• 避免 redirect 不必要的 render view 成本
CP值⾼高，不⽤用花太多時間，多拖幾個版本遇到效能問題，等公司賺錢
再請⼤大神來改版

26. 常⽤用的 UI COMPONENT
• navbar (網站選單）
• navs (橫的、直的)
• form (inline, 橫的, 直的)
• panel

27. 後台設計 PATTERN #INDEX
• 表格 - 呈現資料
• filter - 過濾資料
• 分⾴頁
• 新增按鈕

28. 後台設計 PATTERN #INDEX
• 表格 - 呈現資料
• 顯⽰示夠多資料，就不⽤用做 #show action
• 區分固定寬度、不固定寬度
• filter - 過濾資料
• 分⾴頁
• 新增按鈕

29. 後台設計 PATTERN #INDEX
• 表格 - 呈現資料
• filter - 過濾資料
• 關鍵字搜尋
• 分類 (看情況要做)
• 區間搜尋 (只有資料超級多才會做 e.g. 訂單管理)
• 分⾴頁
• 新增按鈕

30. 後台設計 PATTERN #INDEX 範例 1

31. 後台設計 PATTERN #INDEX 範例 2

32. 後台設計 PATTERN #INDEX 範例 3

33. 後台設計 PATTERN #INDEX 範例 3

34. 其他好⽤用的東⻄西
• activerecord - nested form
(拆 form layer 前的⼟土砲解法)
• activerecord - serialize / store
不確定結構、和資料未來如何應⽤用？
• activerecord - callbacks
(拆 operation layer 前的⼟土砲解法)

35. 結論
• 新事業摸索過程沒有固定模式，哪來的 clean code?
• startup 寧可閒閒沒事，也不要把時間花在技術上
(除⾮非是提供技術的公司)
• 花 5 倍時間開發可能只換來 “節省⼀一半” 效能划算嗎
換個⾓角度「多花⼀一倍伺服器租任預算可以省五倍時間划算嗎？」

36. 成果
• 需求：
• 能製作 landing page ⾴頁⾯面
• 可客製化 domain
• 對 mobile device 做優化
• 可新增產品 / 促銷
• 使⽤用者能在看完 landing page 直接訂購
• 後台可管理 landing page 的訂單
• 訂單畫⾯面必須即時同步 (多⼈人編輯時免重整同步)
• 可匯出貨運單
• ⼯工時：15天 * 4 ⼩小時 = 60⼩小時

37. https://bit.ly/huang-ma
我的正職是賣⾁肉燥
歡迎辦公室團購!