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. Components are Everywhere !!
    Rails 前後端分離⽅案的良好作法與利弊分析
    TSECHINGHO 何澤清 @ 2023
    -
    03
    -
    28

    View full-size slide

  2. 前端 / 後端︖分離︖

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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 ⾴⾯, ⾴⾯流

    View full-size slide

  7. Easy Maintenance
    UI Render

    View full-size slide

  8. Shared || Specific

    View full-size slide

  9. 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 不要疊超過三層

    View full-size slide

  10. Rails Frontend

    View full-size slide

  11. View Template & Partial

    View full-size slide

  12. 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

    View full-size slide

  13. 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

    View full-size slide

  14. View Component

    View full-size slide

  15. 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

    View full-size slide

  16. Hotwire


    Turbo & Stimulus
    • Turbo: SSR (Server Site Render)


    • Turbo Frame: Ajax GET


    • turbo_frame_tag





    • Content-Type: text/html


    • Turbo Stream: Ajax POST


    • turbo_stream_tag





    • 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



    View full-size slide

  17. Hotwire


    Turbo & Stimulus
    • Stimulus: enhance static or server-
    rendered HTML


    • Work with Turbo: MutationObserver API


    • Javascript worked in scoped DOM


    • …


    • 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




    Copy to Clipboard

    View full-size slide

  18. CSS Bundling

    View full-size slide

  19. 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

    View full-size slide

  20. Rails Backend

    View full-size slide

  21. 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

    View full-size slide

  22. APIs
    • 清楚的 Web API 規格與⽂件


    • 包含 JSON 結構,HTTP request/response headers 需求、Response status


    • 任何更動,前後端都能儘早得知


    • 測試,可確保更動造成的影響


    • 假資料,容易讓⼈⼯測試發現問題


    • Swagger Online Doc UI


    • gem: rswag-api, rswag-ui

    View full-size slide

  23. Recap Rails Backend
    • Routes 規劃


    • 善⽤ namespace 分離 page 和 api 端點


    • 可運作的 Controller 和 Action 與假資料


    • 善⽤ accessor 和 pseudo methods


    • 良好的 DB 物件設計,可減少其他物件的撰寫


    • 良好的 Form / Form Builder 物件,可處理複雜的表單設計


    • 良好的 Service 物件,可抽離複雜的操作邏輯

    View full-size slide

  24. Bomb & Lesson

    View full-size slide

  25. Bomb & Lesson
    • 清楚的資料流


    • 減少無謂的前後端程式設計


    • ⼀個 request 可以拿到哪些資料


    • ⼀組 data change 要更動哪些 UI


    • 清楚的互動流程


    • 減少不同 UI 片段整合的問題


    • 減少不必要的 Web API 設計

    View full-size slide

  26. Bomb & Lesson
    • 共⽤元件和⾴⾯專屬元件要切割乾淨


    • 過於分散的程式碼,會讓 RD 找不到相關的程式,增加 debug 的困難


    • monolithic 比較好找 code,但要額外考慮好部署的問題


    • 主要的 namespace 是否夠獨立


    • namespace 切太細碎,造成 class / module 資料夾太多層


    • API 測試環境太晚建立


    • 寫測試的動⼒會降低,包含單元測試、Feature 測試、端對端測試

    View full-size slide

  27. Bomb & Lesson
    • 命名的重要,包含單複數、形容詞、動詞、動詞過去式


    • Model 定義和各欄位說明不清楚


    • 英⽂⽤詞無法表達中⽂意思


    • 翻譯檔的重要


    • README 的重要

    View full-size slide