Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

tsechingho

April 06, 2023
Tweet

More Decks by tsechingho

Other Decks in Programming

Transcript

  1. 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
  2. Backend - 後端 • Application Server: Puma, Sidekiq • Database:

    PostgreSQL, MySQL • APIs • Services • OAuth Sign In / Out • Payment Gateway • Presenter / Form • Component • Permissions • Testing • Security • CORS • Hacking
  3. 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
  4. 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 ⾴⾯, ⾴⾯流
  5. 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 不要疊超過三層
  6. 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
  7. 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
  8. 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
  9. 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>
  10. 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>
  11. 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
  12. 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
  13. APIs • 清楚的 Web API 規格與⽂件 • 包含 JSON 結構,HTTP

    request/response headers 需求、Response status • 任何更動,前後端都能儘早得知 • 測試,可確保更動造成的影響 • 假資料,容易讓⼈⼯測試發現問題 • Swagger Online Doc UI • gem: rswag-api, rswag-ui
  14. Recap Rails Backend • Routes 規劃 • 善⽤ namespace 分離

    page 和 api 端點 • 可運作的 Controller 和 Action 與假資料 • 善⽤ accessor 和 pseudo methods • 良好的 DB 物件設計,可減少其他物件的撰寫 • 良好的 Form / Form Builder 物件,可處理複雜的表單設計 • 良好的 Service 物件,可抽離複雜的操作邏輯
  15. Bomb & Lesson • 清楚的資料流 • 減少無謂的前後端程式設計 • ⼀個 request

    可以拿到哪些資料 • ⼀組 data change 要更動哪些 UI • 清楚的互動流程 • 減少不同 UI 片段整合的問題 • 減少不必要的 Web API 設計
  16. Bomb & Lesson • 共⽤元件和⾴⾯專屬元件要切割乾淨 • 過於分散的程式碼,會讓 RD 找不到相關的程式,增加 debug

    的困難 • monolithic 比較好找 code,但要額外考慮好部署的問題 • 主要的 namespace 是否夠獨立 • namespace 切太細碎,造成 class / module 資料夾太多層 • API 測試環境太晚建立 • 寫測試的動⼒會降低,包含單元測試、Feature 測試、端對端測試