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
8.1k
1
Share
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
存在論的プログラミング: 時間と存在を記述する
koriym
5
930
BEAR.Sunday Framework Masterclass
koriym
0
58
Be Framework: 生命システムとしての存在理解
koriym
0
140
新世界の理解
koriym
0
220
AI Centric
koriym
0
520
app-state-diagram
koriym
0
150
OOP, Double Dispatch and Visitor Pattern
koriym
3
200
BEAR.Sunday 2014-2024
koriym
0
96
イベント駆動コンテンツ (a.k.a Webアプリケーションの効率を再定義するBEAR.Sundayの分散キャッシングフレームワーク)
koriym
5
9.6k
Other Decks in Technology
See All in Technology
「背中を見て育て」からの卒業 〜専門技術としてのテスト設計を軸に、品質保証のバトンを繋ぐ〜 #genda_tech_talk
nihonbuson
PRO
3
1.3k
ワールドカフェ再び、そしてゴール・ルール・ロール・ツール / World Café Revisited, and the Goals-Rules-Roles-Tools
ks91
PRO
0
150
「強制アップデート」か「チームの自律」か?エンタープライズが辿り着いたプラットフォームのハイブリッド運用/cloudnative-kaigi-hybrid-platform-operations
mhrtech
0
180
Agent Skillsで実現する記憶領域の運用とその後
yamadashy
2
1.8k
古今東西SRE
okaru
2
180
生成AI時代に信頼性をどう保ち続けるか - Policy as Code の実践
akitok_
1
210
Modernizing Your HCL Connections Experience: Visual Report to chain, Profile Enhancements, and AI Integration
wannesrams
0
300
Tachikawa.any 運営挨拶
daitasu
0
160
QAエンジニアはどうやって プロダクト議論の場に入れるのか?
moritamasami
2
420
拝啓、あの夏の僕へ〜あなたも知っているApp Runnerの世界〜
news_it_enj
0
240
AI対話分析の夢と、汚いデータの現実 Looker / Dataplex / Dataform で実現する品質ファーストな基盤設計
waiwai2111
0
430
freeeで運用しているAIQAについて
qatonchan
0
550
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
141
7.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
180
Code Reviewing Like a Champion
maltzj
528
40k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
540
Unsuck your backbone
ammeep
672
58k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
530
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
140
RailsConf 2023
tenderlove
30
1.4k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
65
54k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
170
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.2k
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