How Marzee Labs implemented a decoupled solution with Drupal 8 and react components for ARTE.tv

1. D R U P A L D E C O U P L E D O N A R T E
J O Ã O B E L C H I O R
M A R Z E E L A B S 2 0 1 7

2. W H O A M I ?

3. D R U P A L D E C O U P L E D O N A R T E
Husband, father, science guy, front-end ninja developer
with a strong background in design.
W H O A M I ?
{ O r i g i n S t o r y }
S t r e n g h t s :
Marzee Labs co-founder.
H T M L / C S S / J S
J o ã o B e l c h i o r
0 3

4. W O R K I N G W I T H A R T E

5. D R U P A L D E C O U P L E D O N A R T E
W O R K I N G W I T H A R T E
{ W h o a n d W h a t }
Many Drupal Platforms in the past , internal
restructure is killing most of them.
Moving to symphony backend and nodejs
based frontend.
4 year relatioship with MZ
0 5

6. T H E P R O J E C T

7. T H E N E E D S
{ R e c i p e }
D R U P A L D E C O U P L E D O N A R T E
0 4

8. P R O J E C T
{ M a c r o V i e w }
D R U P A L D E C O U P L E D O N A R T E
P A P A
DRUPAL 8
P A P A - F R O N T
REACT
A R T E
S T Y L E G U I D E
REACT
0 9

9. D R U P A L 8
R E ACT
A RT E S TY L E G U I D E
P R O J E C T
{ I n D e p t h }
R E ACT
PA PA- F RO N T
• Handles URL’s and SEO;
• Has a single content type;
• Several paragraphs types available;
• Provides DATA in JSON format;
• Loads PAPA-FRONT when needed;
• Loads CSS as a bundle;
• Provides admin ui elements.
•Uses JSON structure to load
required components;
•Passes JSON data as props;
•Imports and renders StyleGuide
components from node module.
• Provides react Components
and corresponding styles.
D R U P A L D E C O U P L E D O N A R T E
P A P A W E B S I T E
1 0

10. P R O J E C T
{ S u m m i n g - U p }
F A S T E R D E V E LO P M E N T
E D I TO R S H AV E A C M S
R E U S A B L E CO M PO N E N T S
R E U S A B L E A P I
H A P PY C L I E N T
H A P PY D E V E LO P E R S
D R U P A L D E C O U P L E D O N A R T E
0 9

11. T H E L I N K S
H T T P S : / / M A RZ E E LA B S . O RG /
WWW. D R U PA L . O RG / U / J O L I D O G
H T T P S : / / WWW. A RT E .TV /

12. M A R Z E E L A B S 2 0 1 6
T h a n k y o u .