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 RESTful PHP
Search
Akihito Koriyama
September 30, 2017
Technology
1
7.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
OOP, Double Dispatch and Visitor Pattern
koriym
2
77
BEAR.Sunday 2014-2024
koriym
0
44
イベント駆動コンテンツ (a.k.a Webアプリケーションの効率を再定義するBEAR.Sundayの分散キャッシングフレームワーク)
koriym
4
6.3k
Unconf: RWA読書会
koriym
0
500
REST 6+4の制約
koriym
2
2.6k
RESTful Web API 読書会 #1
koriym
3
280
RESTの力 / The Power of REST
koriym
10
7.2k
全てを結ぶ力 (2019)
koriym
3
790
REST 6+4=9の制約
koriym
3
950
Other Decks in Technology
See All in Technology
Classmethod Odyssey 登壇資料
yamahiro
0
390
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
How to Think Like a Performance Engineer
csswizardry
4
590
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
スレットハンティングについて知っておきたいこと
hacket
0
130
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
Azure AI ことはじめ
tsubakimoto_s
0
130
Featured
See All Featured
Embracing the Ebb and Flow
colly
81
4.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Web development in the modern age
philhawksworth
203
10k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
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