The Power of JAMstack with Nuxt and Static Sites

A presentation at Meetup in September 2019 in Majorca, Balearic Islands, Spain by Debbie O'Brien

Slide 1

Slide 1

The Power of JAMstack with Nuxt and static sites

Slide 2

Slide 2

Debbie O’Brien Frontend Tech Lead @Patterson Agency in Mallorca Mentor @OpenClassrooms Tech Degree Moderator @Treehouse Contributor @webpack Writer @Ultimate Courses Teacher @Vue School debs_obrien

Slide 3

Slide 3

Get rid of the LAMP, Get rid of the MEAN, Let the JAM take over

Slide 4

Slide 4

What I will Cover What is JAMstack? Why should I use it? Examples of JAMstack Serverless functions Frontend Forms

Slide 5

Slide 5

How the Backend works Wordpress, Php, Ruby, Java, .Net ……

Slide 6

Slide 6

What if the Frontend was King Frontend - high performance API’s - Fast Functionality MicroServices - Full Flexibility

Slide 7

Slide 7

The new Frontend has super powers

Slide 8

Slide 8

Modern Architecture What is JAMstack?

Slide 9

Slide 9

What has changed Access data through Api’s Everything is pre-rendered No Execution at request time Functionality client-side

Slide 10

Slide 10

What we gain Improves security Improves performance Better developer experience Easy deployment

Slide 11

Slide 11

Definition of Static lacking in movement, action, or change, especially in an undesirable or uninteresting way

Slide 12

Slide 12

TaeKwonDo Static Dynamic

Slide 13

Slide 13

Static is the new Dynamic The static site just goes to the cdn and delivers it back to the user

Slide 14

Slide 14

Static Site Generators Nuxt, Gatsby, Gridsome, Eleven.ty

Slide 15

Slide 15

Hydration Did you say Hydration?

Slide 16

Slide 16

TaeKwonDo and Static Sites

Slide 17

Slide 17

That’s a lot of Generation with Static Sites

Slide 18

Slide 18

What about api key Serverless to the rescue

Slide 19

Slide 19

Going Serverless Events, webhooks, microservices and apis

Slide 20

Slide 20

Netlify Deploying made easy

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Netlify Forms Super easy forms all in the frontend

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

Netlify Netlify Serverless Functions give you super powers

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

Slide 34

Slide 34

Slide 35

Slide 35

What kind of Services Assets: Cloudinary Commerce: Stripe, snip cart Identity: AuthO, OAuth

Slide 36

Slide 36

What about content Let’s go headless

Slide 37

Slide 37

Benefits of Headless Frontend Separation Separate Hosting Total control over User Experience

Slide 38

Slide 38

Headless in Action

Slide 39

Slide 39

Who is building Static Sites? Documentation sites Blogging Sites E commerce Sites

Slide 40

Slide 40

Example of Static sites

Slide 41

Slide 41

Example of Static sites

Slide 42

Slide 42

Example of Static sites

Slide 43

Slide 43

Example of Static sites

Slide 44

Slide 44

Example of Static sites

Slide 45

Slide 45

Example of Static sites

Slide 46

Slide 46

JAMstack - Do we need it? Hell yeah!

Slide 47

Slide 47

Slide 48

Slide 48

Why Nuxt? debs_obrien

Slide 49

Slide 49

Questions?