rails talk-5
TRANSCRIPT
善⽤用RAILS特性設計系統
RAILS 的好
• 豐富的 helper (form helper, url helper, datetime .. etc)
• 超強的 ORM
• ⽅方便好⽤用的 routing 機制
• 重複使⽤用 partial (SRJ)
• 最 ”前” 到最 ”後” 無縫整合 (form helper => routing => controller => model)
需要注意的 …
• View Render 很慢* fragment cache
• response time / concurrent 能⼒力 * unicorn* puma
• 有些只適⽤用於專案還沒那麼複雜的時候* nested model* 複雜的 callbacks / validations ( 拆出 layer )
常⽤用的 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 ( 軟刪除⼯工具 )
SIMPLE ENUM #1
SIMPLE ENUM #2
ACTIVE LINK TO #1
ACTIVE LINK TO #2
ACTIVE LINK TO #3
* ⼀一般選單
* 搭配 simple_enum 做 status tab
JQUERY-RAILS #1 -
* scaffold 會看到的 code ( 學到 method & confirm)
* remote options (改⽤用 ajax 送出) * 會⾃自動判斷 json or javascript
JQUERY-RAILS #2 - ⼀一鍵更新
/admin/orders/index.html.haml
Admin::OrderController
simple_enum 變更資料狀態 + 共⽤用 update action 邏輯
SRJ #1 範例
* (Server-generated JavaScript Responses)
* PostsController
* posts/index.html.haml
* posts/destroy.js.erb
SRJ #2 FORM 也可以
* PostsController
* posts/create.js.erb
* pages/_form.html.haml
SRJ #3 - $.GET / $.POST 也可以
* PostsController
* posts/index.js.erb
* posts/index.html.haml
JQUERY-UJS - AJAX EVENT https://github.com/rails/jquery-ujs/wiki/ajax
SRJ #4 - BOOTSTRAP 應⽤用
• Modalnew.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 設定為 loadingajax:success - 找到該 form 的 submit button 還原ajax:error - $(‘#error-modal’).modal();
SRJ #5 - 搭配 PUSHER • https://pusher.com/
• 是⼀一個專⾨門處理 realtime communication 的雲端服務
• 1. front-end 提供 web socket endpoint
• 2. back-end 提供 API 作通知
• 當收到 event ⽤用 SRJ 做資料更新
⽤用這樣的開發⽅方式⾮非常快
但是 render view 的成本很⾼高
Fragment cache
⼀一次 cache 全部
cache key 有⻑⾧長度限制
太多 record 分批 cache
好⽤用的東⻄西效能通常不好，也要 cache ⼀一下
我的設計原則
V1 開發效率第⼀一
• 軟體效能⽤用 cache 先擋，撐幾個版本在⼤大改版
• 管理者後台以 “可以⽤用就好” 的標準
• 不⾃自⼰己發明 UI，把 bootstrap⽤用到淋漓盡致
⽤用 SRJ 提升開發效率
• ⼩小技巧避免做更多⾴頁⾯面、功能 e.g. nested form (has_many association)
• 避免 redirect 不必要的 render view 成本CP值⾼高，不⽤用花太多時間，多拖幾個版本遇到效能問題，等公司賺錢再請⼤大神來改版
常⽤用的 UI COMPONENT
• navbar (網站選單）
• navs (橫的、直的)
• form (inline, 橫的, 直的)
• panel
後台設計 PATTERN #INDEX
• 表格 - 呈現資料
• filter - 過濾資料
• 分⾴頁
• 新增按鈕
後台設計 PATTERN #INDEX
• 表格 - 呈現資料
• 顯⽰示夠多資料，就不⽤用做 #show action
• 區分固定寬度、不固定寬度
• filter - 過濾資料
• 分⾴頁
• 新增按鈕
後台設計 PATTERN #INDEX
• 表格 - 呈現資料
• filter - 過濾資料
• 關鍵字搜尋
• 分類 (看情況要做)
• 區間搜尋 (只有資料超級多才會做 e.g. 訂單管理)
• 分⾴頁
• 新增按鈕
後台設計 PATTERN #INDEX 範例 1
後台設計 PATTERN #INDEX 範例 2
後台設計 PATTERN #INDEX 範例 3
後台設計 PATTERN #INDEX 範例 3
其他好⽤用的東⻄西
• activerecord - nested form (拆 form layer 前的⼟土砲解法)
• activerecord - serialize / store 不確定結構、和資料未來如何應⽤用？
• activerecord - callbacks (拆 operation layer 前的⼟土砲解法)
結論
• 新事業摸索過程沒有固定模式，哪來的 clean code?
• startup 寧可閒閒沒事，也不要把時間花在技術上(除⾮非是提供技術的公司)
• 花 5 倍時間開發可能只換來 “節省⼀一半” 效能划算嗎換個⾓角度「多花⼀一倍伺服器租任預算可以省五倍時間划算嗎？」
成果
• 需求：
• 能製作 landing page ⾴頁⾯面
• 可客製化 domain
• 對 mobile device 做優化
• 可新增產品 / 促銷
• 使⽤用者能在看完 landing page 直接訂購
• 後台可管理 landing page 的訂單
• 訂單畫⾯面必須即時同步 (多⼈人編輯時免重整同步)
• 可匯出貨運單
• ⼯工時：15天 * 4 ⼩小時 = 60⼩小時
