Creating rich universal React apps powered by RESTful PHP

phpnw17 unconf session

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

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