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
7.9k
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
AI Centric
koriym
0
280
app-state-diagram
koriym
0
52
OOP, Double Dispatch and Visitor Pattern
koriym
2
130
BEAR.Sunday 2014-2024
koriym
0
62
イベント駆動コンテンツ (a.k.a Webアプリケーションの効率を再定義するBEAR.Sundayの分散キャッシングフレームワーク)
koriym
4
7.7k
Unconf: RWA読書会
koriym
0
550
REST 6+4の制約
koriym
2
2.8k
RESTful Web API 読書会 #1
koriym
3
290
RESTの力 / The Power of REST
koriym
10
7.8k
Other Decks in Technology
See All in Technology
アジャイル脅威モデリング#1(脅威モデリングナイト#8)
masakane55
3
200
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
6
5.6k
4/16/25 - SFJug - Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
1
100
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
160
AIで進化するソフトウェアテスト:mablの最新生成AI機能でQAを加速!
mfunaki
0
140
Recap of Next - Google Cloud で実践する クラウドネイティブ最前線 / The Frontlines of Cloud-Native with Insights from Google Cloud
aoto
PRO
1
100
ソフトウェア開発現代史: "LeanとDevOpsの科学"の「科学」とは何か? - DORA Report 10年の変遷を追って - #DevOpsDaysTokyo
takabow
0
380
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
710
LLM as プロダクト開発のパワードスーツ
layerx
PRO
1
240
OpenSearchでレガシーな検索処理の大幅改善をやってやろう
dznbk
2
170
AIと開発者の共創: エージェント時代におけるAIフレンドリーなDevOpsの実践
bicstone
1
310
AI AgentOps LT大会(2025/04/16) Algomatic伊藤発表資料
kosukeito
0
140
Featured
See All Featured
Designing for humans not robots
tammielis
252
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
4 Signs Your Business is Dying
shpigford
183
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
BBQ
matthewcrist
88
9.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Code Reviewing Like a Champion
maltzj
522
40k
Designing for Performance
lara
608
69k
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