Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Front-end For Your Drupal 8 Back-end
Search
Bassam Ismail
October 04, 2016
Technology
2
650
React Front-end For Your Drupal 8 Back-end
Bassam Ismail
October 04, 2016
Tweet
Share
More Decks by Bassam Ismail
See All by Bassam Ismail
CSS Architecture with OOCSS, SMACSS, and BEM
skippednote
3
180
Other Decks in Technology
See All in Technology
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
410
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
200
サンドボックス技術でAI利活用を促進する
koh_naga
0
200
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
200
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
480
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
170
研究開発と製品開発、両利きのロボティクス
youtalk
1
510
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
1
340
2025年にHCP Vaultを学び直して見えた景色 / Lessons and New Perspectives from Relearning HCP Vault in 2025
aeonpeople
0
230
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
420
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
560
ガチな登山用デバイスからこんにちは
halka
1
230
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Typedesign – Prime Four
hannesfritz
42
2.8k
A Tale of Four Properties
chriscoyier
160
23k
The Pragmatic Product Professional
lauravandoore
36
6.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Transcript
React Front-end for You Drupal 8 Back-end Bassam Ismail &
Aliya Khan Front-end | Intermediate
None
MArkETING 101
None
None
None
DUBLIN
None
“How to build a Headless Drupal WeBsite”
@skippednote bassam.co
@ALIYA_KHAN
None
✋
AGENDA • Exposing Drupal • React: Building Composable UIs •
Redux: Unidirectional Data Flow • React with Drupal
Exposing Drupal
None
None
None
None
None
None
Library ≄ Framework
None
UI Logic Markup Styling
None
None
Session List
Session
Session Fields
None
Destructured Props props = { title: “React & Drupal”, speaker:
“Bassam”, experience: “Intermediate” } React Components Pure Component
⨐(state) = UI React Component UI is function of the
Application state
Lifecycle Methods Event Handlers State and bindings No Mutations (Vdom)
MVC Controller 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 Controlle View Model
None
n items On Delete
“Redux is a predictable state container for JavaScript apps”
Components Application State
State Tree
• Actions and Action Creators • Reducer • Store
Increment DECREMENT Current Value
Action Action Creator
Action Creator Action OBJECT
Reducer
Action No Mutations
⨐(action, state) => newstate { type: “INCREMENT” } 1 0
Store
Create a store Get current state Dispatch Actions
React & Redux
Wrapper Component Provider with Store Root Component
None
connect Function Store State To Component Props
Dispatch Actions on onClick event React Component connected to Store
• Immutability • Composition • Pure Functions
*Disclaimer
React with Drupal
Use 8.2.0
None
None
None
None
Progressive Decoupling
Inside Theme
React Components Transpiled Files Includes Transpiled Files
Sessions Components Dependencies (React, ReactDOM, etc)
GET data from Drupal Update Component State Session Props
Destructured Session Props
None
None
None
Inside Module
React Components Templates to mount component Page Path Get initial
state
On visiting this URI Will be called Page title
Guzzle to Get view export data Called on ‘/sessions’ Pass
data to template Attach React Component
Mounted Component Initial State
Guzzle to Get view export data Called on ‘/sessions’ Pass
data to drupalSettings Attach React Component
Check for initial State
None
Fully Decoupled
JSON API
JSON API specification
Cleaner Output
Nested data
CLEANER OUTPUT
Sparse Fields
Sparse Fieldset Limited Fields
None
http: //con.dd/api/node/session?_format=api_json Namespace Entity Type Bundle Format Params
None
None
Apache
None
Getting Entity Collection
Getting SPECIFIC ID
ID
Authentication for CREATE, UPDATE & DELETE
OAUTH for Authentication
Post Data To Collection URL
Data to Update id = NID Session URL TO Update
Components Based on Routes on “/sessions/new” Load NewSession Component
Wrapper Component For Authenticated Routes
None
None
Demo
Thank You
Rate Our Session