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
Creating rich universal React apps powered by R...
Search
Akihito Koriyama
September 30, 2017
Technology
1
8k
Creating rich universal React apps powered by RESTful PHP
phpnw17 unconf session
See more about BEAR.Sunday
http://bearsunday.github.io
Akihito Koriyama
September 30, 2017
Tweet
Share
More Decks by Akihito Koriyama
See All by Akihito Koriyama
Be Framework: 生命システムとしての存在理解
koriym
0
63
新世界の理解
koriym
0
170
AI Centric
koriym
0
400
app-state-diagram
koriym
0
110
OOP, Double Dispatch and Visitor Pattern
koriym
2
150
BEAR.Sunday 2014-2024
koriym
0
71
イベント駆動コンテンツ (a.k.a Webアプリケーションの効率を再定義するBEAR.Sundayの分散キャッシングフレームワーク)
koriym
4
8.6k
Unconf: RWA読書会
koriym
0
620
REST 6+4の制約
koriym
2
2.9k
Other Decks in Technology
See All in Technology
20251029_Cursor Meetup Tokyo #02_MK_「あなたのAI、私のシェル」 - プロンプトインジェクションによるエージェントのハイジャック
mk0721
PRO
6
2.4k
Raycast AI APIを使ってちょっと便利なAI拡張機能を作ってみた
kawamataryo
1
250
AIで急増した生産「量」の荒波をCodeRabbitで乗りこなそう
moongift
PRO
0
480
OPENLOGI Company Profile for engineer
hr01
1
46k
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
430
AI連携の新常識! 話題のMCPをはじめて学ぶ!
makoakiba
0
180
今のコンピュータ、AI にも Web にも 向いていないので 作り直そう!!
piacerex
0
630
datadog-incident-management-intro
tetsuya28
0
120
組織全員で向き合うAI Readyなデータ利活用
gappy50
5
2.1k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
260
[AWS 秋のオブザーバビリティ祭り 2025 〜最新アップデートと生成 AI × オブザーバビリティ〜] Amazon Bedrock AgentCore で実現!お手軽 AI エージェントオブザーバビリティ
0nihajim
1
350
データとAIで明らかになる、私たちの課題 ~Snowflake MCP,Salesforce MCPに触れて~ / Data and AI Insights
kaonavi
0
330
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Being A Developer After 40
akosma
91
590k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
8
720
The Invisible Side of Design
smashingmag
302
51k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
How STYLIGHT went responsive
nonsquared
100
5.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Transcript
Creating rich universal React apps powered by RESTful PHP Akihito
Koriyama (@koriym) phpnw17 12.00 @ Manchester Conference Centre
None
None
GET /menu
None
8FC
$POTPMF
GET /menu .. 200 OK Then ?
IUUQTFOXJLJQFEJBPSHXJLJ"⒎PSEBODF
no affordance 8IBUJTUIFQPTTJCJMJUZPGUIFBDUJPO
None
None
rel=“order” ! *U`TUIFQPTTJCJMJUZPGUIFBDUJPOz
/order but how ?
None
OPTIONS /order
None
(FOFSBUFGSPNQIQEPD
POST /order?name=latte ☕
None
GET /order?id=123
None
OPTIONS /payment
PUT: the payment should be idempotent
IUUQTXXXJOGPRDPNKQBSUJDMFTXFCCFSSFTUXPSLqPX Resource interface for state machine URI as a state
" " "
None
CURIEs (Compact URI) IUUQTFOXJLJQFEJBPSHXJLJ$63*&
GET rels/?rel=todo
None
201 POST /order/?name=latte 200 PUT /payment?order_id&card_num=123&expire=101018 URIs as an event
source BQQMJDBUJPOSFTPVSDFMPH
Hypermedia API
= REST API
None
REST != CRUD over HTTP
REST != Return JSON with pretty URI
REST should be hypermedia driven
Hypermedia Driven Development
None
IUUQTXXXXPSHJOUFHSBUJPOXPSLTIPQQIZQFSNFEJBPSJFOUFEEFTJHOQEG
IUUQTXXXJOGPRDPNKQBSUJDMFTXFCCFSSFTUXPSLqPX
IUUQKTPOTDIFNBPSH
JOQVUWBMJEBUJPO
None
Backend Frontend
REST API • Discoverable • Self Descriptive • Hypermedia constraint
Separation of Responsibilities
200 GET / Get the link of APIs 200
OPTIONS /todo Get the communication options available 201 POST /todo?title=run Create new resource and get the URI of new resource in location header 200 GET /todo?id=1 Get the created resource = headless application REST App
Headless REST application / CMS + template engine =
HTML application
Headless REST application / CMS + JS UI application
= ?
None
SSR (Sever Side Rendering)
None
None
None
None
$MJFOU4JEF3FOEFSJOH 4FSWFS4JEF3FOEFSJOH
$43 443
4FSWFS4JEF
1)13&45"QQ +46*"QQ
None
PHP First Rich UI App • PHP - Routing
- Application logic - Domain logic • JS (SSR + CSR) - View logic - UI logic
Benefit • Performance + Caching • HTTP Status Code, Header
• HTML Header (OGP / Twitter card) • SEO • Only when needed
SSR Performance
None
IUUQTUFTJFHJUIVCJPTOBQTIPUQFSGPSNBODF
7KT 4PVSDF$PEF 7KT *OUFSOBM 4OBQTIPU &YUFSOBM 4OBQTIPU /P 4OBQTIPU TOBQTIPU
+4MJCSBSJFT 3FBDUBQQ 4OBQTIPU 7KT
IUUQTHJUIVCDPNLPSJZN,PSJZN#BSBDPB JOEFYKT #BSBDPB 5XJH A framework agnostic SSR interface
Other REST Oriented Framework
BEAR.Sunday • “Everything is a resource” • 100% DI, Multi
application at once • No BC break
@koriym Thanks @BEARSunday