Pro Yearly is on sale from $80 to $50! »

Creating rich universal React apps powered by RESTful PHP

Aad26cd7119bd8c0c2bbea107515716d?s=47 Akihito Koriyama
September 30, 2017
Technology
1
2.4k

Creating rich universal React apps powered by RESTful PHP

phpnw17 unconf session

See more about BEAR.Sunday
http://bearsunday.github.io

Aad26cd7119bd8c0c2bbea107515716d?s=128

Akihito Koriyama

September 30, 2017
Tweet

More Decks by Akihito Koriyama

See All by Akihito Koriyama
Aad26cd7119bd8c0c2bbea107515716d?s=48 koriym
0
210
Aad26cd7119bd8c0c2bbea107515716d?s=48 koriym
2
1.8k
Aad26cd7119bd8c0c2bbea107515716d?s=48 koriym
3
240
Aad26cd7119bd8c0c2bbea107515716d?s=48 koriym
8
5.1k
Aad26cd7119bd8c0c2bbea107515716d?s=48 koriym
3
470
Aad26cd7119bd8c0c2bbea107515716d?s=48 koriym
3
530
Aad26cd7119bd8c0c2bbea107515716d?s=48 koriym
0
110
Aad26cd7119bd8c0c2bbea107515716d?s=48 koriym
0
710
Aad26cd7119bd8c0c2bbea107515716d?s=48 koriym
1
730

Other Decks in Technology

See All in Technology
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
1
400
Ab628671841774343b1020f22f712069?s=48 mouson
2
280
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
250
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
180
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
160
F400611942a8b7a695f741f9a720fcf8?s=48 koooootake
4
190
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
340
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
120
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
150
64a4ba69d50590e592cd8e572454daa8?s=48 olegkovalov
0
210
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
280
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
410

Featured

See All Featured
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
6
600
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
146
19k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5.1k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
251
11k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
773
190k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
654
54k
282d599b414022eba5096510f675b6e2?s=48 chrislema
172
14k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
87
3.3k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
5
260
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
400

Transcript

  1. Creating rich universal React apps powered by RESTful PHP Akihito

    Koriyama (@koriym)
 phpnw17 12.00 @ Manchester Conference Centre
  2. None
  3. None

  4. GET /menu

  5. None

  6. 8FC

  7. $POTPMF

  8. GET /menu .. 200 OK
 
 Then ?

  9. IUUQTFOXJLJQFEJBPSHXJLJ"⒎PSEBODF

  10. no affordance 8IBUJTUIFQPTTJCJMJUZPGUIFBDUJPO

  11. None
  12. None

  13. rel=“order” ! *U`TUIFQPTTJCJMJUZPGUIFBDUJPOz

  14. /order
 
 but how ?

  15. None

  16. OPTIONS /order

  17. None

  18. (FOFSBUFGSPNQIQEPD

  19. POST /order?name=latte ☕

  20. None

  21. GET /order?id=123

  22. None

  23. OPTIONS /payment

  24. PUT: the payment should be idempotent

  25. IUUQTXXXJOGPRDPNKQBSUJDMFTXFCCFSSFTUXPSLqPX Resource interface for state machine URI as a state

    " " "
  26. None

  27. CURIEs (Compact URI) IUUQTFOXJLJQFEJBPSHXJLJ$63*&

  28. GET rels/?rel=todo

  29. None

  30. 201 POST /order/?name=latte
 200 PUT /payment?order_id&card_num=123&expire=101018
 URIs as an event

    source BQQMJDBUJPOSFTPVSDFMPH

  31. Hypermedia API

  32. = REST API

  33. None

  34. REST != CRUD over HTTP

  35. REST != Return JSON with pretty URI

  36. REST should be hypermedia driven

  37. Hypermedia Driven Development

  38. None

  39. IUUQTXXXXPSHJOUFHSBUJPOXPSLTIPQQIZQFSNFEJBPSJFOUFEEFTJHOQEG

  40. IUUQTXXXJOGPRDPNKQBSUJDMFTXFCCFSSFTUXPSLqPX

  41. IUUQKTPOTDIFNBPSH

  42. JOQVUWBMJEBUJPO

  43. None

  44. Backend
 Frontend

  45. REST API • Discoverable • Self Descriptive • Hypermedia constraint

  46. Separation of Responsibilities

  47. 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

  48. Headless REST application / CMS + 
 template engine =

    
 HTML application

  49. Headless REST application / CMS + 
 JS UI application

    = 
 ?
  50. None

  51. SSR (Sever Side Rendering)

  52. None
  53. None
  54. None
  55. None

  56. $MJFOU4JEF3FOEFSJOH 4FSWFS4JEF3FOEFSJOH

  57. $43 443

  58. 4FSWFS4JEF

  59. 1)13&45"QQ +46*"QQ

  60. None

  61. PHP First Rich UI App • PHP 
 - Routing


    - Application logic
 - Domain logic • JS (SSR + CSR)
 - View logic
 - UI logic

  62. Benefit • Performance + Caching • HTTP Status Code, Header

    • HTML Header (OGP / Twitter card) • SEO • Only when needed


  63. SSR Performance

  64. None

  65. IUUQTUFTJFHJUIVCJPTOBQTIPUQFSGPSNBODF

  66. 7KT 4PVSDF$PEF 7KT *OUFSOBM
 4OBQTIPU &YUFSOBM
 4OBQTIPU /P
 4OBQTIPU TOBQTIPU

    +4MJCSBSJFT
 3FBDUBQQ 4OBQTIPU 7KT

  67. IUUQTHJUIVCDPNLPSJZN,PSJZN#BSBDPB JOEFYKT #BSBDPB 5XJH A framework agnostic SSR interface

  68. Other REST Oriented Framework

  69. BEAR.Sunday • “Everything is a resource” • 100% DI, Multi

    application at once • No BC break

  70. @koriym Thanks @BEARSunday