NextJS with Drupal - DrupalJam Utrecht 2023

Slide 1

Slide 1 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 1

Slide 2

Slide 2 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 APOLLO 11:   THE MOON LANDING AND 1202 and very brie fl y some musings about   what the hack have Next.js to do with Drupal?! 2 Mladen Đurić   @MacMladen

Slide 3

Slide 3 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 3

Slide 4

Slide 4 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 1202: APOLLO GUIDANCE COMPUTER HAD CRASHED Armstrong had had his wings clipped over Korea; he’d bounced an airplane off the upper atmosphere; he’d rescued Gemini 8 from a violent zero-gravity spin. Now he was piloting a malfunctioning spacecraft to touch down on an alien world. Just 40 seconds after the computer’s fi nal restart, he slowed the lander’s forward momentum, then rotated the legs toward the surface. As the engine kicked up a blinding cloud of dust, Aldrin read aloud a steady stream of fi gures from the console. With almost no fuel to spare, the lander dropped, in slow motion, to kiss the surface upright, and the particles of moon dust hung suspended in the sunlight until the gentle lunar gravity pulled them back to rest. 4

Slide 5

Slide 5 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 5

Slide 6

Slide 6 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 NEXT.JS WITH DRUPAL Mladen Đurić   @MacMladen 6

Slide 7

Slide 7 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 $ whoami 7 A very boring, incompetent guy MLADEN ĐURIĆ a.k.a MacMladen

Slide 8

Slide 8 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 I’ve been in IT since the age of mainframes, 8th year of UNIX epoch. 8

Slide 9

Slide 9 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 I started with Z80 assembly 9

Slide 10

Slide 10 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 I really enjoyed hard core C 10

Slide 11

Slide 11 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 11 As soon as I started learning to code I was so fascinated and wanted to share what I learned. I was hardly into secondary school when I organised fi rst computer club and gave fi rst BASIC course. It was around 1982. In 2016 I started a Professional Web Development School ]{oder.

Slide 12

Slide 12 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 NEXT.JS IS A FRAMEWORK OR A LIBRARY? 12

Slide 13

Slide 13 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 NEXT.JS The React Framework for the Web Next.js is a framework for building interactive, dynamic, and fast web applications. With Next.js, you can build user interfaces using React components. Then, Next.js provides additional structure, features, and optimizations for your application. Under the hood, Next.js also abstracts and automatically con fi gures tooling for you, like bundling, compiling, and more. This allows you to focus on building your application instead of spending time setting up tooling. 13

Slide 14

Slide 14 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 INTRODUCE YOURSELF! Your role? (Visual, Frontend, Backend, DevOps) Your experience? (One, three, more years) Using some Javascript framework already? (React, Next.js) 14

Slide 15

Slide 15 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 TIMETABLE: 1. The JAM stack ~2 min 2. The Reasoning ~2 min 3. The Drupal ~2 min 4. The Next.js ~2 min 5. The Module ~4 min 6. The Package~4 min 7. The Demo ~2 min 8. The Myths ~1 min 9. The Conclusion ~1 min 10. Q & A 10++ min 15

Slide 16

Slide 16 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 16 Chapter 1 THE JAM STACK

Slide 17

Slide 17 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 IT ALL STARTED IN AUGUST 2006 17

Slide 18

Slide 18 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 MODERN LIBRARIES 18

Slide 19

Slide 19 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 FRONTEND OR BACKEND DEVELOPER? 19

Slide 20

Slide 20 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 SERVERLESS 😂 20

Slide 21

Slide 21 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 BACKEND (API) 21

Slide 22

Slide 22 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 MARKUP (?) 22

Slide 23

Slide 23 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 23 Chapter 2 THE REASONING

Slide 24

Slide 24 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 WE WANT TO BE HEADLESS! 24

Slide 25

Slide 25 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 WHY HEADFUL? 25

Slide 26

Slide 26 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 WHY HEADLESS? 26

Slide 27

Slide 27 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 THE MEANING OF DECOUPLED 27

Slide 28

Slide 28 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 FULLY VS PROGRESSIVELY DECOUPLED 28

Slide 29

Slide 29 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 CREATE ONCE, PUBLISH ANYWHERE 29

Slide 30

Slide 30 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 THE CONSUMERS 30

Slide 31

Slide 31 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 APPLICATION LIKE BEHAVIOUR 31

Slide 32

Slide 32 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 32 Chapter 3 THE DRUPAL

Slide 33

Slide 33 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 PARTNER FROM HEAVEN 33

Slide 34

Slide 34 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 API FIRST 34

Slide 35

Slide 35 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 35 Chapter 4 THE NEXT.JS

Slide 36

Slide 36 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 REACT BEST BUDDY 36

Slide 37

Slide 37 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 POPULAR 37

Slide 38

Slide 38 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 RICH ECOSYSTEM 38

Slide 39

Slide 39 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 39 ACTIVELY DEVELOPED

Slide 40

Slide 40 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 40 Chapter 5 THE MODULE

Slide 41

Slide 41 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 41 Chapter 6 THE PACKAGE

Slide 42

Slide 42 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 42 Chapter 7 THE DEMO

Slide 43

Slide 43 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 43 NEVER DO A LIVE DEMO!* -MORTEN BIRCH {{MORTEND.DK}}

Slide 44

Slide 44 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 DDEV FOR LOCAL DEVELOPMENT 44

Slide 45

Slide 45 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 CMS TEMPLATES - DRUPAL 10 45

Slide 46

Slide 46 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 THE DRUPAL 46

Slide 47

Slide 47 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 THE ARTICLE (DRUPAL) 47

Slide 48

Slide 48 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 THE POST (NEXT.JS) 48

Slide 49

Slide 49 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 YOUTUBE DEMO 49

Slide 50

Slide 50 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 50 Chapter 8 THE MYTHS

Slide 51

Slide 51 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 FINALLY, SOMETHING THAT WORKS OUT OF THE BOX! 51

Slide 52

Slide 52 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 I CAN DO THIS EASILY! 52

Slide 53

Slide 53 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 SO NO ONE CAN DO THIS EASILY? 53

Slide 54

Slide 54 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 54 Chapter 9 THE CONCLUSION

Slide 55

Slide 55 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 THE RIGHT TOOL FOR THE JOB Never overthink or over-engineer Never pick latest hype — aim for sustainability Never think Drupal — think architecture Keep it simple, enhance only when required Know well JavaScript, React, Next.js or you’ll suffer 55

Slide 56

Slide 56 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 56 Chapter 9 THE RESOURCES

Slide 57

Slide 57 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 1202: APOLLO GUIDANCE COMPUTER HAD CRASHED 57

Slide 58

Slide 58 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 DECOUPLED DRUPAL WITH NEXT.JS 58

Slide 59

Slide 59 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 INTRODUCTION TO HEADLESS DRUPAL + NEXT.JS 59

Slide 60

Slide 60 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 AUTHOR OF THE MODULE, ARSHAD 60

Slide 61

Slide 61 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 UMAMI DEMO (NEXT.JS RENDERED) 61

Slide 62

Slide 62 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 Q & A Mladen Đurić   @MacMladen 62

Slide 63

Slide 63 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 THANKS! Mladen Đurić   @MacMladen 63

Slide 64

Slide 64 text

@MacMladen ]{ Next.js with Drupal v.1 2023-06-01 64