React Front-end For Your Drupal 8 Back-end

React Front-end For Your Drupal 8 Back-end

1531f49d089ab9062e86fe2f589d3edc?s=128

Bassam Ismail

October 04, 2016
Tweet

Transcript

  1. React Front-end for You Drupal 8 Back-end Bassam Ismail &

    Aliya Khan Front-end | Intermediate
  2. None
  3. MArkETING 101

  4. None
  5. None
  6. None
  7. DUBLIN

  8. None
  9. “How to build a Headless Drupal WeBsite”

  10. @skippednote bassam.co

  11. @ALIYA_KHAN

  12. None
  13. AGENDA • Exposing Drupal • React: Building Composable UIs •

    Redux: Unidirectional Data Flow • React with Drupal
  14. Exposing Drupal

  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. Library ≄ Framework

  22. None
  23. UI Logic Markup Styling

  24. None
  25. None
  26. Session List

  27. Session

  28. Session Fields

  29. None
  30. Destructured Props props = { title: “React & Drupal”, speaker:

    “Bassam”, experience: “Intermediate” } React Components Pure Component
  31. ⨐(state) = UI React Component UI is function of the

    Application state
  32. Lifecycle Methods Event Handlers State and bindings No Mutations (Vdom)

  33. MVC Controller View Model

  34. Controlle View Model Controlle View Model Controlle View Model Controlle

    View Model Controlle View Model Controlle View Model Controlle View Model Controlle View Model Controlle View Model
  35. None
  36. n items On Delete

  37. “Redux is a predictable state container for JavaScript apps”

  38. Components Application State

  39. State Tree

  40. • Actions and Action Creators • Reducer • Store

  41. Increment DECREMENT Current Value

  42. Action Action Creator

  43. Action Creator Action OBJECT

  44. Reducer

  45. Action No Mutations

  46. ⨐(action, state) => newstate { type: “INCREMENT” } 1 0

  47. Store

  48. Create a store Get current state Dispatch Actions

  49. React & Redux

  50. Wrapper Component Provider with Store Root Component

  51. None
  52. connect Function Store State To Component Props

  53. Dispatch Actions on onClick event React Component connected to Store

  54. • Immutability • Composition • Pure Functions

  55. *Disclaimer

  56. React with Drupal

  57. Use 8.2.0

  58. None
  59. None
  60. None
  61. None
  62. Progressive Decoupling

  63. Inside Theme

  64. React Components Transpiled Files Includes Transpiled Files

  65. Sessions Components Dependencies (React, ReactDOM, etc)

  66. GET data from Drupal Update Component State Session Props

  67. Destructured Session Props

  68. None
  69. None
  70. None
  71. Inside Module

  72. React Components Templates to mount component Page Path Get initial

    state
  73. On visiting this URI Will be called Page title

  74. Guzzle to Get view export data Called on ‘/sessions’ Pass

    data to template Attach React Component
  75. Mounted Component Initial State

  76. Guzzle to Get view export data Called on ‘/sessions’ Pass

    data to drupalSettings Attach React Component
  77. Check for initial State

  78. None
  79. Fully Decoupled

  80. JSON API

  81. JSON API specification

  82. Cleaner Output

  83. Nested data

  84. CLEANER OUTPUT

  85. Sparse Fields

  86. Sparse Fieldset Limited Fields

  87. None
  88. http: //con.dd/api/node/session?_format=api_json Namespace Entity Type Bundle Format Params

  89. None
  90. None
  91. Apache

  92. None
  93. Getting Entity Collection

  94. Getting SPECIFIC ID

  95. ID

  96. Authentication for CREATE, UPDATE & DELETE

  97. OAUTH for Authentication

  98. Post Data To Collection URL

  99. Data to Update id = NID Session URL TO Update

  100. Components Based on Routes on “/sessions/new” Load NewSession Component

  101. Wrapper Component For Authenticated Routes

  102. None
  103. None
  104. Demo

  105. Thank You

  106. Rate Our Session