Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rails talk-5

736 views

Published on

  • Be the first to comment

Rails talk-5

  1. 1. 善⽤用RAILS特性設計系統
  2. 2. RAILS 的好 • 豐富的 helper (form helper, url helper, datetime .. etc) • 超強的 ORM • ⽅方便好⽤用的 routing 機制 • 重複使⽤用 partial (SRJ) • 最 ”前” 到最 ”後” 無縫整合 
 (form helper => routing => controller => model)
  3. 3. 需要注意的 … • View Render 很慢
 * fragment cache • response time / concurrent 能⼒力 
 * unicorn
 * puma • 有些只適⽤用於專案還沒那麼複雜的時候
 * nested model
 * 複雜的 callbacks / validations ( 拆出 layer )
  4. 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. 5. SIMPLE ENUM #1
  6. 6. SIMPLE ENUM #2
  7. 7. ACTIVE LINK TO #1
  8. 8. ACTIVE LINK TO #2
  9. 9. ACTIVE LINK TO #3 * ⼀一般選單 * 搭配 simple_enum 做 status tab
  10. 10. JQUERY-RAILS #1 - * scaffold 會看到的 code ( 學到 method & confirm) * remote options (改⽤用 ajax 送出) * 會⾃自動判斷 json or javascript
  11. 11. JQUERY-RAILS #2 - ⼀一鍵更新 /admin/orders/index.html.haml Admin::OrderController simple_enum 變更資料狀態 + 共⽤用 update action 邏輯
  12. 12. SRJ #1 範例 * (Server-generated JavaScript Responses) * PostsController * posts/index.html.haml * posts/destroy.js.erb
  13. 13. SRJ #2 FORM 也可以 * PostsController * posts/create.js.erb * pages/_form.html.haml
  14. 14. SRJ #3 - $.GET / $.POST 也可以 * PostsController * posts/index.js.erb * posts/index.html.haml
  15. 15. JQUERY-UJS - AJAX EVENT https://github.com/rails/jquery-ujs/wiki/ajax
  16. 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. 17. SRJ #5 - 搭配 PUSHER • https://pusher.com/ • 是⼀一個專⾨門處理 realtime communication 的雲端服務 • 1. front-end 提供 web socket endpoint • 2. back-end 提供 API 作通知 • 當收到 event ⽤用 SRJ 做資料更新
  18. 18. ⽤用這樣的開發⽅方式⾮非常快 但是 render view 的成本很⾼高
  19. 19. Fragment cache
  20. 20. ⼀一次 cache 全部
  21. 21. cache key 有⻑⾧長度限制 太多 record 分批 cache
  22. 22. 好⽤用的東⻄西效能通常不好,也要 cache ⼀一下
  23. 23. 我的設計原則
  24. 24. V1 開發效率第⼀一 • 軟體效能⽤用 cache 先擋,撐幾個版本在⼤大改版 • 管理者後台以 “可以⽤用就好” 的標準 • 不⾃自⼰己發明 UI,把 bootstrap⽤用到淋漓盡致
  25. 25. ⽤用 SRJ 提升開發效率 • ⼩小技巧避免做更多⾴頁⾯面、功能 
 e.g. nested form (has_many association) • 避免 redirect 不必要的 render view 成本
 CP值⾼高,不⽤用花太多時間,多拖幾個版本遇到效能問題,等公司賺錢 再請⼤大神來改版
 

  26. 26. 常⽤用的 UI COMPONENT • navbar (網站選單) • navs (橫的、直的) • form (inline, 橫的, 直的) • panel
  27. 27. 後台設計 PATTERN #INDEX • 表格 - 呈現資料 • filter - 過濾資料 • 分⾴頁 • 新增按鈕
  28. 28. 後台設計 PATTERN #INDEX • 表格 - 呈現資料 • 顯⽰示夠多資料,就不⽤用做 #show action • 區分固定寬度、不固定寬度 • filter - 過濾資料 • 分⾴頁 • 新增按鈕
  29. 29. 後台設計 PATTERN #INDEX • 表格 - 呈現資料 • filter - 過濾資料 • 關鍵字搜尋 • 分類 (看情況要做) • 區間搜尋 (只有資料超級多才會做 e.g. 訂單管理) • 分⾴頁 • 新增按鈕
  30. 30. 後台設計 PATTERN #INDEX 範例 1
  31. 31. 後台設計 PATTERN #INDEX 範例 2
  32. 32. 後台設計 PATTERN #INDEX 範例 3
  33. 33. 後台設計 PATTERN #INDEX 範例 3
  34. 34. 其他好⽤用的東⻄西 • activerecord - nested form 
 (拆 form layer 前的⼟土砲解法) • activerecord - serialize / store
 不確定結構、和資料未來如何應⽤用? • activerecord - callbacks
 (拆 operation layer 前的⼟土砲解法)
  35. 35. 結論 • 新事業摸索過程沒有固定模式,哪來的 clean code? • startup 寧可閒閒沒事,也不要把時間花在技術上
 (除⾮非是提供技術的公司) • 花 5 倍時間開發可能只換來 “節省⼀一半” 效能划算嗎
 換個⾓角度「多花⼀一倍伺服器租任預算可以省五倍時間划算嗎?」
  36. 36. 成果 • 需求: • 能製作 landing page ⾴頁⾯面 • 可客製化 domain • 對 mobile device 做優化 • 可新增產品 / 促銷 • 使⽤用者能在看完 landing page 直接訂購 • 後台可管理 landing page 的訂單 • 訂單畫⾯面必須即時同步 (多⼈人編輯時免重整同步) • 可匯出貨運單 • ⼯工時:15天 * 4 ⼩小時 = 60⼩小時
  37. 37. https://bit.ly/huang-ma 我的正職是賣⾁肉燥 歡迎辦公室團購!

×