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

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

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