Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Decoupled System with Turbo Frame
Search
wtnabe
January 20, 2024
Programming
1
88
Decoupled System with Turbo Frame
Kanazawa.rb meetup 137で話したTurbo Frameを使ってHeadless CMSとは異なる形で実現するDecoupledな仕組みについて
wtnabe
January 20, 2024
Tweet
Share
More Decks by wtnabe
See All by wtnabe
Effective Jekyll
wtnabe
0
22
5 min Jekyll/Liquid Plugin cooking
wtnabe
0
11
Ruby de Wasm
wtnabe
0
32
Cloud Native Buildpacksって結局どうなの?
wtnabe
0
25
join-kanazawarb-or-7years-passed-since-it-was-borned
wtnabe
0
750
let-me-edit-with-editor
wtnabe
0
310
google-photos-and-storage-and-rclone
wtnabe
0
410
one case of how to begin vuejs
wtnabe
2
440
Kanazawa.rb meetup #56 Coderetreat Intro
wtnabe
0
420
Other Decks in Programming
See All in Programming
CI改善もDatadogとともに
taumu
0
110
技術を根付かせる / How to make technology take root
kubode
1
250
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
180
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
240
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
410
CNCF Project の作者が考えている OSS の運営
utam0k
6
710
Software Architecture
hschwentner
6
2.1k
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.9k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
890
Immutable ActiveRecord
megane42
0
140
Honoとフロントエンドの 型安全性について
yodaka
6
830
WebDriver BiDiとは何なのか
yotahada3
1
140
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Gamification - CAS2011
davidbonilla
80
5.1k
How STYLIGHT went responsive
nonsquared
98
5.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
A designer walks into a library…
pauljervisheath
205
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Transcript
Decoupled System with Turbo Frame wtnabe Kanazawa.rb meetup #137 2024-01-20
(Sat)
目次 Headless CMS とは Headless CMS の導入はちょっとむずい 発想を逆にしてみる 〜 Headless
Rails ? 〜 構成例
まとめ Rails (いわゆるWeb MVC )とCMS で得意領域が違う decoupled という考え方は採用しつつ、実現方法はHeadless CMS だ
けとは限らない より自由度の高い仕組み(汎用Web MVC )をglue に、それぞれの 得意を活かす rb な文脈なのでRails で進めるけどいわゆるWeb MVC なら通用する
Headless CMS とは
その昔 10 年ほど前にJamstack やHeadless CMS という言葉が流行った 2013 年 Contentful 創業
2014 年 Netlify 創業
伝統的な CMS コンテンツもデザインも全部一つの仕組みで実現する メリット WordPress など超メジャーな存在のおかげで制作依頼しやすい 管理画面もなんとなく触ったことがある デメリット 例えばWordPress は安全性や互換性の維持がそこそこ大変
力のあるホスティング業者に協力してほしくなる WordPress を魔改造してアップデートできなくなるとかあるある
Headless CMS の考え方 コンテンツ管理とフロントの画面はユーザーも利用目的も違う → decoupled が重要なのでは? ↓ コンテンツ管理だけを担う仕組みがHeadless CMS
フロントエンドの進化をCMS から独立して進めることができる 静的に出力すればパフォーマンス改善の選択肢も増える CMS がユーザーアクセスから分離されることで安全性も向上
Headless CMS の例 サービスもOSS もある Contentful / CloudCannon / Prismic
JekyllAdmin / NetlifyCMS microCMS / Kuroco collections
構成としてはこう Headless CMS サイト コンテンツ ユーザー ここに作り込みを⾏う 静的サイトで事前ビルド 動的サイトで動的に取得 概ねJSON
関係者を置くとこう Headless CMS サイト コンテンツ ユーザー コンテンツ担当 デザイナー エンジニア 概ねJSON
? デザインと コーディング JSON ⾊付け CMS の理解
あれ、システムの境界と担当領域の境界 合ってなくない?
Headless CMS の導入はちょっとむずい
必要な準備 Headless CMS そのものの理解 コンテンツの定義 サイト上でJSON を取得してビルドする仕組み
困りごと 作り込んでみないと使い勝手のいいCMS に仕上がるか分かりにくい 書きながらデザイン込みのプレビューはやりにくい 伝統的なCMS ならコンテンツ定義はコンテンツ担当とデザイナーで 完結できるのにHeadless CMS はエンジニアがいないと困りがち
Headless CMS が向いているケース コンテンツはコンテンツのみに集中、デザインは度外視 数千ページとか明らかに伝統的CMS の性能的に厳しいボリューム エンジニア兼デザイナ兼ライターが伝統的CMS を持ちたくない 逆に向いているケースにマッチしない場合はコスパが悪いのでは?
とは言え 機能的にCMS で十分なものをフルRails 開発もコスパが悪い Web 制作の領域なので制作の人の活躍の最大化を目指すべき
そこで 逆に Headless CMS の位置に Rails を置いてみる
表に⾒える サイト 検索など システム HTML HTML 断⽚ Rails ユーザー Turbo
Frame 必要なパーツのみ Turbo Frame で必要なコンテンツを取得(JSON→DOM 変換不要) セキュリティや保守はホスティングの力量に期待
表に⾒える サイト 検索など システム HTML HTML 断⽚ Rails ユーザー デザイナー
エンジニア コンテンツ担当 Turbo Frame 必要なパーツのみ
担当領域が素直
フロントエンドで気にすること 全体の構成、デザイン Turbo Frame 記法 所定の位置に正しく所定のコードを貼ること デザイン(CSS ) <turbo-frame id="xxx"
src="https://xxx.xxx/xxxx"> </turbo-frame>
バックエンドで気にすること 提供するHTML 断片に必要なデータ 提供するHTML 断片 Turbo Frame に対するケア
構成例
サイト Netlify (Jekyll など) Heroku (Rails) ユーザー 基本はこっち Netlify +
Heroku インフラ管理ほぼ不要 ユーザーは(Heroku 一本よ り)低レイテンシで快適 monorepo で開発でき、内製 なら柔軟な対応が可能 Jekyll のページの増減、改修 はRails よりカジュアル wtnabe/example-rails-and- jekyll-monorepo
サイト CMS Rails ユーザー 基本はこっち CMS + Rails 更新は更新担当だけで可能 CMS
は制作会社で、仕組み は内製のパターンも可 Rails 側は前ページと一緒
サイト CMS Rails SaaS ユーザー コンテンツ担当 エンジニア 何らかの 業務担当 基本はこっち
CMS + Rails + SaaS glue としての Rails & Turbo Frame
まとめ Rails (いわゆるWeb MVC )とCMS で得意領域が違う decoupled という考え方を踏襲しつつ、実現方法はHeadless CMS だ
けとは限らない より自由度の高い仕組み(汎用Web MVC )をglue に、それぞれの 得意を活かす