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 full-size slide

  2. GET /menu .. 200 OK


    Then ?

    View full-size slide

  3. IUUQTFOXJLJQFEJBPSHXJLJ"⒎PSEBODF

    View full-size slide

  4. no affordance
    8IBUJTUIFQPTTJCJMJUZPGUIFBDUJPO

    View full-size slide

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

    View full-size slide

  6. /order


    but how ?

    View full-size slide

  7. OPTIONS /order

    View full-size slide

  8. (FOFSBUFGSPNQIQEPD

    View full-size slide

  9. POST /order?name=latte

    View full-size slide

  10. GET /order?id=123

    View full-size slide

  11. OPTIONS /payment

    View full-size slide

  12. PUT: the payment should be idempotent

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. GET rels/?rel=todo

    View full-size slide

  16. 201 POST /order/?name=latte

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

    URIs as an event source
    BQQMJDBUJPOSFTPVSDFMPH

    View full-size slide

  17. Hypermedia API

    View full-size slide

  18. REST != CRUD over HTTP

    View full-size slide

  19. REST != Return JSON with pretty URI

    View full-size slide

  20. REST should be hypermedia driven

    View full-size slide

  21. Hypermedia Driven Development

    View full-size slide

  22. IUUQTXXXXPSHJOUFHSBUJPOXPSLTIPQQIZQFSNFEJBPSJFOUFEEFTJHOQEG

    View full-size slide

  23. IUUQTXXXJOGPRDPNKQBSUJDMFTXFCCFSSFTUXPSLqPX

    View full-size slide

  24. IUUQKTPOTDIFNBPSH

    View full-size slide

  25. JOQVUWBMJEBUJPO

    View full-size slide

  26. Backend

    Frontend

    View full-size slide

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

    View full-size slide

  28. Separation of
    Responsibilities

    View full-size slide

  29. 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 full-size slide

  30. Headless REST application / CMS
    +

    template engine
    =

    HTML application

    View full-size slide

  31. Headless REST application / CMS
    +

    JS UI application
    =

    ?

    View full-size slide

  32. SSR (Sever Side Rendering)

    View full-size slide

  33. $MJFOU4JEF3FOEFSJOH
    4FSWFS4JEF3FOEFSJOH

    View full-size slide

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

    View full-size slide

  35. PHP First Rich UI App
    • PHP 

    - Routing

    - Application logic

    - Domain logic
    • JS (SSR + CSR)

    - View logic

    - UI logic

    View full-size slide

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


    View full-size slide

  37. SSR Performance

    View full-size slide

  38. IUUQTUFTJFHJUIVCJPTOBQTIPUQFSGPSNBODF

    View full-size slide

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

    4OBQTIPU
    &YUFSOBM

    4OBQTIPU
    /P

    4OBQTIPU
    TOBQTIPU
    +4MJCSBSJFT

    3FBDUBQQ
    4OBQTIPU
    7KT

    View full-size slide

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

    View full-size slide

  41. Other REST Oriented Framework

    View full-size slide

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

    View full-size slide

  43. @koriym
    Thanks
    @BEARSunday

    View full-size slide