Rails 前後端分離方案的良好作法與利弊分析

Transcript

1. Components are Everywhere !! Rails 前後端分離⽅案的良好作法與利弊分析 TSECHINGHO 何澤清 @ 2023 - 03 - 28
2. 前端 / 後端︖分離︖
3. Frontend - 前端 • JavaScript Framework: React.js , Vue.js • CSS Utility: TailwindCSS, Bootstrap, PostCSS • UI Render: HTML, CSS, Javascript • CSR (Client Site Render) • SSR (Server Site Render) • UX • SEO (Search Engine Optimization) • Testing • Security • Hacking
4. Backend - 後端 • Application Server: Puma, Sidekiq • Database: PostgreSQL, MySQL • APIs • Services • OAuth Sign In / Out • Payment Gateway • Presenter / Form • Component • Permissions • Testing • Security • CORS • Hacking
5. DevOps - 維運 • Cloud System: AWS, GCP, Azure • Repository: Github, Gitlab • Deploy • Container: Docker • Automation • CI (Continue Integration) • CD (Continue Delivery) : Feature Deploy • QA (Quality Assurance) • Safety • Hacking
6. PM & Design - 專案經理 & 設計 • Communication • Blueprint for UI, Data, Service • ⾴⾯規劃 • 流程規劃 • 資料架構 • 服務架構 • Speci fi cation • Flow chart • Create Issues • UI Layout • Figma • Color theme ⾊票 • Component 元件 • Page & Page fl ow ⾴⾯, ⾴⾯流
8. Easy Maintenance UI Render
9. Namespace
10. Shared || Specific
11. Tree & Leaf
12. Recap UI Render • Good Namespace & Naming, Good Finding 好的命名才好找 • Copy & Paste is Good 剪剪貼貼萬能 • No Thinking, Speci fi c First 別想太多，先當特殊設計 • Encounter Twice +, Refactor as Shared ⽤習慣了，才做成共⽤設計 • Cut Layout into Sections 學習剪紙的藝術 • Group Sections to Folders 保持整⿑很重要 • Less than 3 Layers of Folders 不要疊超過三層
13. Rails Frontend
14. Figma
15. TailwindCSS
16. View Template & Partial
17. View Template & Partial • View handlers & formats • respond_with / respond_to / redirect_to • send_data / send_ fi le / render( fi le: fi le) • show.html.erb / show.json.jbuilder • View variants • show.html+mobile.erb • render :show, variants: [:mobile, :desktop] • request.variant = :redesign 
 request.variant = :theme • Use as status: success & failure • Use as data source • View helpers • Pre fi x with namespace • No instance variables • Controller helpers • De fi ne requirements in fi rst stage • Controller modules • Group helpers in fi rst stage • Group logics in second stage
18. Fake Data
19. Fake Data • View handlers & formats for JSON API • render fi le: fake_products.json • View variants as data source • render :show, variants: [:fake] • Controller helpers • helper :fake_products • Gems: • faker • Websites: • http://via.placeholder.com/640x360 • https://dummyimage.com/640x360/fff/ aaa
20. View Component
21. View Component • View Component & Lookbook • React & Storybook • Replace View Partial + Controller Module • Less View / Controller Helpers • Less Presenters / Value Objects • Preview with Components • Test with Components • Thousands Components Issue • Support • slot : sub component • collection • variant • view helpers • translation • testing • JavaScript & CSS
22. Hotwire
23. Hotwire Turbo & Stimulus • Turbo: SSR (Server Site Render) • Turbo Frame: Ajax GET • turbo_frame_tag • <turbo-frame id=“xxx”></turbo-frame> • Content-Type: text/html • Turbo Stream: Ajax POST • turbo_stream_tag • <turbo-stream id=“xxx”></turbo-stream> • Content-Type: text/vnd.turbo-stream.html • Component-wise Change • Single Page Application • Turbo Cache & Navigation • Preload & Reload • Turbo redirect: status options • redirect_to url, status: :see_other • No more Hide, Be Alive • <div class=“hidden”></div>
24. Hotwire Turbo & Stimulus • Stimulus: enhance static or server- rendered HTML • Work with Turbo: MutationObserver API • Javascript worked in scoped DOM • <div data-controller=“clipboard”>…</div> • Auto initialized via connect() • Focus on behaviors of controller • Data Attributes • data-controller : this.element • data-xxx-target : this.xxxTarget • data-xxx-value : this.xxxValue • data-action • <button data-action=“clipboard#copy”> 
 Copy to Clipboard</button>
25. JS Bundling
26. CSS Bundling
27. Recap Rails Frontend • Figma • TailwindCSS • View template & partial • Fake Data • View Component • Hotwire - Turbo & Stimulus • JS bundling • CSS bundling • Life Cycle of Work • Figma design completed • Create issue • Create controllers & views (template/ partial) with fake data • Create view components • Apply turbo-frame/turbo-stream if needed • Go next sprint/issue
28. Rails Backend
29. Route & Controller • Route • Use namespace / scope • Use concern • Use mount (Engine) • Split routes to fi les • con fi g.paths[‘con fi g/routes.rb’].concat (Dir[Rails.root.join(‘con fi g/routes/*.rb’)].sort) • Well designed controllers & actions • Controller helpers • De fi ne requirements in fi rst stage • Refactor into methods & associations of model • Controller modules • Group helpers in fi rst stage • Group logics in second stage • Rewrite into Services
30. APIs • 清楚的 Web API 規格與⽂件 • 包含 JSON 結構，HTTP request/response headers 需求、Response status • 任何更動，前後端都能儘早得知 • 測試，可確保更動造成的影響 • 假資料，容易讓⼈⼯測試發現問題 • Swagger Online Doc UI • gem: rswag-api, rswag-ui
31. Recap Rails Backend • Routes 規劃 • 善⽤ namespace 分離 page 和 api 端點 • 可運作的 Controller 和 Action 與假資料 • 善⽤ accessor 和 pseudo methods • 良好的 DB 物件設計，可減少其他物件的撰寫 • 良好的 Form / Form Builder 物件，可處理複雜的表單設計 • 良好的 Service 物件，可抽離複雜的操作邏輯
32. Bomb & Lesson
33. Bomb & Lesson • 清楚的資料流 • 減少無謂的前後端程式設計 • ⼀個 request 可以拿到哪些資料 • ⼀組 data change 要更動哪些 UI • 清楚的互動流程 • 減少不同 UI 片段整合的問題 • 減少不必要的 Web API 設計
34. Bomb & Lesson • 共⽤元件和⾴⾯專屬元件要切割乾淨 • 過於分散的程式碼，會讓 RD 找不到相關的程式，增加 debug 的困難 • monolithic 比較好找 code，但要額外考慮好部署的問題 • 主要的 namespace 是否夠獨立 • namespace 切太細碎，造成 class / module 資料夾太多層 • API 測試環境太晚建立 • 寫測試的動⼒會降低，包含單元測試、Feature 測試、端對端測試
35. Bomb & Lesson • 命名的重要，包含單複數、形容詞、動詞、動詞過去式 • Model 定義和各欄位說明不清楚 • 英⽂⽤詞無法表達中⽂意思 • 翻譯檔的重要 • README 的重要