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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Akihito Koriyama
September 30, 2017
Technology
8.1k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
More Decks by Akihito Koriyama
See All by Akihito Koriyama
BEAR.Sunday — リソース指向 PHP アプリケーションフレームワーク
koriym
0
51
存在論的プログラミング: 時間と存在を記述する
koriym
5
1.2k
Be Framework: 生命システムとしての存在理解
koriym
0
180
新世界の理解
koriym
0
260
AI Centric
koriym
0
810
app-state-diagram
koriym
0
180
OOP, Double Dispatch and Visitor Pattern
koriym
3
220
BEAR.Sunday 2014-2024
koriym
0
100
イベント駆動コンテンツ (a.k.a Webアプリケーションの効率を再定義するBEAR.Sundayの分散キャッシングフレームワーク)
koriym
5
9.8k
Other Decks in Technology
See All in Technology
Windows の互換機能 - 古いプログラムはなぜ動作できるのか
murachiakira
PRO
0
120
型落ちシンクライアント端末のPoEモジュールを自作したかった話
logica0419
0
500
atproto spaces概要
yamarten
0
110
1000⼈規模のClaude Enterprise運⽤を「Oktaのグループ」と「Slack」に集約する
sansantech
PRO
0
480
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
120
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
54k
AI時代の「OAuth認証」にどう物申すか?(OAuth/OIDC Numa (Immersion) Workshop 2026)
oidfj
PRO
0
330
会計事務所と顧問先の契約関係をOIDC・OAuthで表現する
terara
0
480
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
20k
dbt と Snowflake と tag
kevinrobot34
2
290
エージェント化するAI:現在地とその先に起きる変化 / AI as Agents: The Current State and the Changes Ahead
ks91
PRO
0
150
カーネルまで探検して理解するふたつの自動計装
sumiyae
0
330
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
340
58k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.9k
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
300
Navigating Team Friction
lara
192
16k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
250
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
630
Rebuilding a faster, lazier Slack
samanthasiow
85
9.6k
Making Projects Easy
brettharned
120
6.7k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
220
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
390
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.4k
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