Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating rich universal React apps powered by RESTful PHP

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

Akihito Koriyama

September 30, 2017
Tweet

More Decks by Akihito Koriyama

Other Decks in Technology

Transcript

  1. Creating rich universal React apps
    powered by RESTful PHP
    Akihito Koriyama (@koriym)

    phpnw17
    12.00 @ Manchester Conference Centre

    View Slide

  2. View Slide

  3. View Slide

  4. GET /menu

    View Slide

  5. View Slide

  6. 8FC

    View Slide

  7. $POTPMF

    View Slide

  8. GET /menu .. 200 OK


    Then ?

    View Slide

  9. IUUQTFOXJLJQFEJBPSHXJLJ"⒎PSEBODF

    View Slide

  10. no affordance
    8IBUJTUIFQPTTJCJMJUZPGUIFBDUJPO

    View Slide

  11. View Slide

  12. View Slide

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

    View Slide

  14. /order


    but how ?

    View Slide

  15. View Slide

  16. OPTIONS /order

    View Slide

  17. View Slide

  18. (FOFSBUFGSPNQIQEPD

    View Slide

  19. POST /order?name=latte

    View Slide

  20. View Slide

  21. GET /order?id=123

    View Slide

  22. View Slide

  23. OPTIONS /payment

    View Slide

  24. PUT: the payment should be idempotent

    View Slide

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

    View Slide

  26. View Slide

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

    View Slide

  28. GET rels/?rel=todo

    View Slide

  29. View Slide

  30. 201 POST /order/?name=latte

    200 PUT /payment?order_id&card_num=123&expire=101018

    URIs as an event source
    BQQMJDBUJPOSFTPVSDFMPH

    View Slide

  31. Hypermedia API

    View Slide

  32. = REST API

    View Slide

  33. View Slide

  34. REST != CRUD over HTTP

    View Slide

  35. REST != Return JSON with pretty URI

    View Slide

  36. REST should be hypermedia driven

    View Slide

  37. Hypermedia Driven Development

    View Slide

  38. View Slide

  39. IUUQTXXXXPSHJOUFHSBUJPOXPSLTIPQQIZQFSNFEJBPSJFOUFEEFTJHOQEG

    View Slide

  40. IUUQTXXXJOGPRDPNKQBSUJDMFTXFCCFSSFTUXPSLqPX

    View Slide

  41. IUUQKTPOTDIFNBPSH

    View Slide

  42. JOQVUWBMJEBUJPO

    View Slide

  43. View Slide

  44. Backend

    Frontend

    View Slide

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

    View Slide

  46. Separation of
    Responsibilities

    View Slide

  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

    View Slide

  48. Headless REST application / CMS
    +

    template engine
    =

    HTML application

    View Slide

  49. Headless REST application / CMS
    +

    JS UI application
    =

    ?

    View Slide

  50. View Slide

  51. SSR (Sever Side Rendering)

    View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. $MJFOU4JEF3FOEFSJOH
    4FSWFS4JEF3FOEFSJOH

    View Slide

  57. $43 443

    View Slide

  58. 4FSWFS4JEF

    View Slide

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

    View Slide

  60. View Slide

  61. PHP First Rich UI App
    • PHP 

    - Routing

    - Application logic

    - Domain logic
    • JS (SSR + CSR)

    - View logic

    - UI logic

    View Slide

  62. Benefit
    • Performance + Caching
    • HTTP Status Code, Header
    • HTML Header (OGP / Twitter card)
    • SEO
    • Only when needed


    View Slide

  63. SSR Performance

    View Slide

  64. View Slide

  65. IUUQTUFTJFHJUIVCJPTOBQTIPUQFSGPSNBODF

    View Slide

  66. 7KT
    4PVSDF$PEF
    7KT
    *OUFSOBM

    4OBQTIPU
    &YUFSOBM

    4OBQTIPU
    /P

    4OBQTIPU
    TOBQTIPU
    +4MJCSBSJFT

    3FBDUBQQ
    4OBQTIPU
    7KT

    View Slide

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

    View Slide

  68. Other REST Oriented Framework

    View Slide

  69. BEAR.Sunday
    • “Everything is a resource”
    • 100% DI, Multi application at once
    • No BC break

    View Slide

  70. @koriym
    Thanks
    @BEARSunday

    View Slide