Decoupled
Why we’re building
a worse wheel
デカップルドなぜ悪い車輪を構築してしまうのか
Josh Waihi
November 2019

Drupal South Hobart 2019
で、Josh Waihiが話した内容を日本語で発表します

https://drupalsouth.org/

https://www.youtube.com/watch?v=6GwTClYxFmo

Proﬁle自己紹介
Hikaru Maruyama 丸山ひかる
Acquia Technical Translator
Developer Relations
Drupaler Since 2019.08

Ruby / Rails / Web API / Docker / AWSHISTORY
LET’S LOOK AT DRUPAL’S EVOLUTION
Drupalの進化をみてみましょう！

Traditional Drupal
The static web
従来のDrupal - 静的ウェブサイト
Filesystem
Web server

PHP

CSS/JS/IMG

HTMLBrowser“pageview”

DatabaseServer Side

Client SideResource demand
A “mainframe” approach
リソースの需要 - メインフレーム型のアプローチ
Filesystem
Web server

PHP

CSS/JS/IMG

HTMLBrowser“pageview”

Database

Server Side
Dynamic
Resource intensive

Client Side
StaticConservative

Loading Journey
Drupal bound performance
読込時間から見るDrupalの性能限界

Delivery Optimisation
Reverse cache proxies

配信の最適化 - リバースキャッシュプロキシ
CDN

Filesystem

Database

Server Side
Dynamic
Resource intensive

Cache

Web server

PHP

CSS/JS/IMG
Browser

HTMLThe read-onlyworld“pageview”

Client Side
StaticConservative

Loading JourneyServer-side caching shifts performance
focus to client-side
サーバーサイドキャッシュにより、クライアントサイドに焦点をシフトPerformance 1万ページビューの場合のexample 10k pageviews●●●

パフォーマンスSite = 500 pages
サイト = 500ページ数
Average Drupal Response Time = 1.8 seconds 平均レスポンスタイム = 1.8秒
1万ページビュー
10,000 pageviews

ページ配布

Page Distr

20% (100)30% (150)

35% (175)

15% (75)

トラフィックTraffic Distr

70% (7k)

20% (2k)

7% (700)

3% (300)

Cache Hit Rate

98.57%

92.5%

75%

75%

キャッシュヒット率●●●

Cache Hit Rate Avg 85.27% 平均キャッシュヒット率 85.27%
14.73% of traffic > 1.8s TTFB 14.73%のトラフィック > 1.8秒のTTFB(TIme To First Byte)
Assuming no cache invalidation or expiry takes placeキャッシュ無効化なし and 有効期限なしを想定Performance 5千ページビューの場合のexample 5k pageviews●●●

パフォーマンスSite = 500 pages
サイト = 500ページ数
Average Drupal Response Time = 1.8 seconds 平均レスポンスタイム = 1.8秒
5,000ページビュー
5,000 pageviews

ページ配布

Page Distr

20% (100)30% (150)

35% (175)

15% (75)

トラフィックTraffic Distr

70% (7k)

20% (2k)

7% (700)

3% (300)

Cache Hit Rate

97.14%

85%

58.33%

50%

キャッシュヒット率●●●

Cache Hit Rate Avg 72.62% 平均キャッシュヒット率 72.62%
27.38% of traffic > 1.8s TFFB 27.38%のトラフィック > 1.8秒のTTFB(TIme To First Byte)
Assuming no cache invalidation or expiry takes placeキャッシュ無効化なし and 有効期限なしを想定

MO PAGEVIEWS
MO PERFORMANCE

コンテンツの完全性 - キャッシュの無効化

Content Integrity
Cache invalidation
Cache Purge
CDN

Filesystem

Database

Server Side
Dynamic
Resource intensive

Cache

Web server

PHP

CSS/JS/IMG
BrowserHTML

The read-onlyworld“pageview”

Client Side
StaticConservative現代のパラダイムシフト

Modern Paradigm Shifts
In the Web●●●

Data refresh, not page refresh ページの更新ではなくデータの更新
パーソナライズ体験
Personalised experience
イベントドリブンなデータプッシュ
Event-driven data push

JavaScriptは現代の要求に適している

Javascript is naturally suited to modern demands of the web●●●

Pageless DOM manipulation ページレスなDOM操作
Client-side personalisation processing power クライアント側の処理能力
Event-driven backend supports push (websockets) and pull (req)
イベントドリブンなバックエンドはプッシュ(websockets)とプル(リクエスト)をサポート

従来のDrupalのメリット/デメリット

Traditional Drupal
Pros/Cons
Pros メリット

Cons デメリット●

Content Management●

Optimised Content Delivery●

Centralised processing●

Limited frontend leverage
フロントエンドレバレッジの制限

Scale simple content
シンプルなコンテンツのスケール●

Slow TTFB
遅いTTFB●●●

コンテンツマネジメント
コンテンツ配信の最適化
集中処理

Monolithic

モノリシックComplexity with personalisation

パーソナライズの複雑さ

動的クライアント - ローカライズされた処理

Dynamic Client
Localised processing

CDN

Filesystem
Cache

Web server

PHP

Dynamic UX
CSS/JS/IMG
JS EngineHTML“experience”

Database

Server Side
Dynamic

Client Side
StaticLoading Journey

Client-side complexity
クライアント側の複雑さ

JavaScriptは人気

JavaScript - the popularity of

The State of Octoverse results for 2018. Category: languages.
Source: Octoverse

JavaScriptは求人でも人気

JavaScript - the job market

https://www.hiringlab.org/2018/11/29/hottest-skills-tech-job-searches1/

GitHub
Emojisマイクロサービス - ポリリシックなサービス提供

Microservices
Polylithic service delivery
Filesystem

Web server

StaticCSCDN

Filesystem
CacheWeb server

PHP

S/JS

IMGDynamic UX
JS EngineHTML“experience”

Database

Server Side
DynamicClient Side

Loading Journey

Client-side App loading
クライアントサイドのアプリケーション読み込みhttps://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

再発明 - サーバーサイドレンダリング(SSR)

ReinventingServer-side rendering
Filesystem

Web server

CS

Node.js

S/J

S

CDN

Filesystem
Cache

Web server

PHP

StaticHT

ML

Dynamic UX
IMG

JS Engine“experience”

Database

Server Side
Dynamic

Client Side

再発明 - サーバーサイドレンダリング(SSR)

ReinventingServer-side rendering
Filesystem

Web server

CS

Node.js

S/J

S

CDN

Filesystem
Cache

Web server

PHP

StaticHT

ML

Dynamic UX
IMG

JS Engine“experience”

Database

Server Side
Dynamic

Client Side

Loading JourneyThis looks suspiciously familiar...
これは非常に疑わしい...

完全なデカップルド設計 - メリット/デメリット

Fully Decoupled
Pros/Cons
Pros メリット

Cons デメリット●Content Management●

Optimised Content Delivery●

Centralised processing●

Scale simple content
シンプルなコンテンツのスケール●●●●

コンテンツマネジメント
コンテンツ配信の最適化
集中処理

Polylithic

ポリリシック
Backend Complexity

バックエンドの複雑さ
No cache invalidation

キャッシュ無効化なし
Slow TTFB?
遅いTTFB？

車輪の再発明 - サーバーサイドのコンテンツ配信

Reinventing the Wheel
For Server-side Content Delivery

PHP

Node.js

gg
ers

ity

jor

MaLa

teLa

rity

Majos

ter

Ad
oprly

Ea

rly

Ea

Technology Maturity
テクノロジーの成熟度

EOL

Technology Maturity
テクノロジーの成熟度
FeaturecompleteStab

B
Fr uildi
am ng
ew
or
ks

le

PoC

So
lv

ed
Boringggers
Laityjor
Mate
La

Ma
jo
rly
Ea

EarlyAdop

tersrity

UsableEOLTechnology Maturity
テクノロジーの成熟度

Primetime
FeaturecompleteStab

B
Fr uildi
am ng
ew
or
ks

le

PoC

Solv

ed
Boring

ggers
La

ity
jor
Mate
La

Ma
jo
rly
Ea

Early

Ad
op

tersrity

UsableEOLTechnology Maturity
テクノロジーの成熟度

Primetime
NodeFeaturecompleteStab

B
Fr uildi
am ngeworksle

DrupalSolv

ed
JavaPoC

Boringggers
LaityjorMate
La

MajorlyEaEarlyAd
optersrity

Usable

EOLより良い車輪を再発明する

REINVENT A BETTERWHEEL(To the tune of the gambler)
You gotta know when to decouple
know when to couple
know when you need FE dynamecy
know when you don’t

いつ分離するか、いつ結合するか
いつフロントエンド ダイナミズムが必要になるのか知らない時に知っておく必要がある

You gotta count your node_modules
when your setting on the PR merge

PRがマージされる時node_modulesを数える必要がある

They’ll be time enough for rendering コンパイルが完了したらレンダリングに十分な時間になります
when the compiling’s doneデカップリングのヒント

Decoupling tips
●Performance is worse in a fully decoupled architecture.
完全に分離された(デカップルド)設計では、パフォーマンスが低下●●

Start coupled and validate reasons to decouple.

まずはカップルド設計ではじめて、分離する理由を検証する

Polylithic delivery increases operational costs exponentially.
ポリリシック配信は、運用コストを指数関数的に増加させる●

Clarify editorial requirements up front.
編集要件を前もって明確にする○

Editorial layout management is hard in a decoupled architecture.
デカップルド設計では、編集レイアウトの管理は困難●

DO NOT DIY API. Use JSON:API or GraphQL.
DIY(自家製)APIはやめて、JSON:APIまたはGraphQLを使う