Creating rich universal React apps powered by RESTful PHP

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 8IBU
    JT
    UIF
    QPTTJCJMJUZ
    PG
    UIF
    BDUJPO
    

11. None
12. None

13. rel=“order” ! *U`T
    UIF
    QPTTJCJMJUZ
    PG
    UIF
    BDUJPOz

14. /order
 
 but how ?

15. None

16. OPTIONS /order

17. None

18. (FOFSBUF
    GSPN
    QIQEPD

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 BQQMJDBUJPO
    
    SFTPVSDF
    MPH

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. JOQVU
    WBMJEBUJPO

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. $MJFOU
    4JEF
    3FOEFSJOH 4FSWFS
    4JEF
    3FOEFSJOH

57. $43 443

58. 4FSWFS
    4JEF

59. 1)1
    3&45
    "QQ +4
    6*
    "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
    

    +4
    MJCSBSJFT
 3FBDU
    BQQ 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