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

React Front-end For Your Drupal 8 Back-end

Avatar for Bassam Ismail Bassam Ismail
October 04, 2016
Technology
2
650

React Front-end For Your Drupal 8 Back-end

Avatar for Bassam Ismail

Bassam Ismail

October 04, 2016
Tweet

More Decks by Bassam Ismail

See All by Bassam Ismail
CSS Architecture with OOCSS, SMACSS, and BEM
Avatar for Bassam Ismail skippednote
3
180

Other Decks in Technology

See All in Technology
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
Avatar for hogelog hogelog
3
1.9k
「技術負債にならない・間違えない」 権限管理の設計と実装
Avatar for naro143 naro143
36
11k
VCC 2025 Write-up
Avatar for bata_24 bata_24
0
180
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
Avatar for Satoru Ishikawa ishikawa_satoru
1
300
Green Tea Garbage Collector の今
Avatar for zchee zchee
PRO
2
390
OpenAI gpt-oss ファインチューニング入門
Avatar for kmotohas kmotohas
2
940
「Verify with Wallet API」を アプリに導入するために
Avatar for hinakko hinakko
1
230
PLaMoの事後学習を支える技術 / PFN LLMセミナー
Avatar for Preferred Networks pfn
PRO
9
3.8k
Sidekiq その前に：Webアプリケーションにおける非同期ジョブ設計原則
Avatar for morihirok morihirok
17
7.3k
How to achieve interoperable digital identity across Asian countries
Avatar for Naohiro Fujie fujie
0
110
AWSにおけるTrend Vision Oneの効果について
Avatar for shima shimak
0
120
From Prompt to Product @ How to Web 2025, Bucharest, Romania
Avatar for Jan Werner janwerner
0
120

Featured

See All Featured
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
209
24k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
139
7.1k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
232
18k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.2k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
71
11k

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. ✋

  14. AGENDA • Exposing Drupal • React: Building Composable UIs •

    Redux: Unidirectional Data Flow • React with Drupal

  15. Exposing Drupal

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None

  22. Library ≄ Framework

  23. None

  24. UI Logic Markup Styling

  25. None
  26. None

  27. Session List

  28. Session

  29. Session Fields

  30. None

  31. Destructured Props props = { title: “React & Drupal”, speaker:

    “Bassam”, experience: “Intermediate” } React Components Pure Component

  32. ⨐(state) = UI React Component UI is function of the

    Application state

  33. Lifecycle Methods Event Handlers State and bindings No Mutations (Vdom)

  34. MVC Controller View Model

  35. 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
  36. None

  37. n items On Delete

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

  39. Components Application State

  40. State Tree

  41. • Actions and Action Creators • Reducer • Store

  42. Increment DECREMENT Current Value

  43. Action Action Creator

  44. Action Creator Action OBJECT

  45. Reducer

  46. Action No Mutations

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

  48. Store

  49. Create a store Get current state Dispatch Actions

  50. React & Redux

  51. Wrapper Component Provider with Store Root Component

  52. None

  53. connect Function Store State To Component Props

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

  55. • Immutability • Composition • Pure Functions

  56. *Disclaimer

  57. React with Drupal

  58. Use 8.2.0

  59. None
  60. None
  61. None
  62. None

  63. Progressive Decoupling

  64. Inside Theme

  65. React Components Transpiled Files Includes Transpiled Files

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

  67. GET data from Drupal Update Component State Session Props

  68. Destructured Session Props

  69. None
  70. None
  71. None

  72. Inside Module

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

    state

  74. On visiting this URI Will be called Page title

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

    data to template Attach React Component

  76. Mounted Component Initial State

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

    data to drupalSettings Attach React Component

  78. Check for initial State

  79. None

  80. Fully Decoupled

  81. JSON API

  82. JSON API specification

  83. Cleaner Output

  84. Nested data

  85. CLEANER OUTPUT

  86. Sparse Fields

  87. Sparse Fieldset Limited Fields

  88. None

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

  90. None
  91. None

  92. Apache

  93. None

  94. Getting Entity Collection

  95. Getting SPECIFIC ID

  96. ID

  97. Authentication for CREATE, UPDATE & DELETE

  98. OAUTH for Authentication

  99. Post Data To Collection URL

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

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

  102. Wrapper Component For Authenticated Routes

  103. None
  104. None

  105. Demo

  106. Thank You

  107. Rate Our Session