LAMPstack vs. JAMstack - Speaker Deck

Slide 1

Slide 1 text

- A TALE OF TWO STACKS - nystudio107 / @nystudio107 by Andrew Welch devMode podcast / devMode.fm

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Lammy Jammy

Slide 4

Slide 4 text

Everything presented here is a fact.*

Slide 5

Slide 5 text

Everything presented here is a fact.* *In my opinion

Slide 6

Slide 6 text

If you don’t understand your  stack, you’ll grow to resent it.

Slide 7

Slide 7 text

Understanding is seeing the true nature of a thing.

Slide 8

Slide 8 text

L A M P J A M

Slide 9

Slide 9 text

Linux A M P J A M

Slide 10

Slide 10 text

Linux Apache M P J A M

Slide 11

Slide 11 text

Linux Apache MySQL P J A M

Slide 12

Slide 12 text

Linux Apache MySQL PHP J A M

Slide 13

Slide 13 text

Linux Apache MySQL PHP JavaScript A M

Slide 14

Slide 14 text

Linux Apache MySQL PHP JavaScript APIs M

Slide 15

Slide 15 text

Linux Apache MySQL PHP JavaScript APIs Markup

Slide 16

Slide 16 text

Linux Apache MySQL PHP JavaScript APIs Markup

Slide 17

Slide 17 text

JavaScript has a superpower.

Slide 18

Slide 18 text

JavaScript can run both on the server and on the client.

Slide 19

Slide 19 text

Linux Apache MySQL PHP JavaScript APIs Markup

Slide 20

Slide 20 text

LEMP

Slide 21

Slide 21 text

LEMP WIMP

Slide 22

Slide 22 text

LEMP WIMP

Slide 23

Slide 23 text

LEMP WIMP MEAN

Slide 24

Slide 24 text

LEMP WIMP MEAN GLASS

Slide 25

Slide 25 text

LEMP WIMP MEAN GLASS LLMP

Slide 26

Slide 26 text

LEMP WIMP MEAN GLASS LLMP LYCE

Slide 27

Slide 27 text

LEMP WIMP MEAN GLASS LLMP LYCE MERN

Slide 28

Slide 28 text

LEMP WIMP MEAN GLASS LLMP LYCE MERN STAR

Slide 29

Slide 29 text

Phew.

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

There’s more than one way to skin a cat.

Slide 32

Slide 32 text

LAMP LLMP

Slide 33

Slide 33 text

LAMP acronym LLMP

Slide 34

Slide 34 text

LAMP acronym LLMP initialism

Slide 35

Slide 35 text

LAMPstack vs. JAMstack

Slide 36

Slide 36 text

A fork in the road.

Slide 37

Slide 37 text

Me JAMstack LAMPstack

Slide 38

Slide 38 text

JAMstack is for you if:

Slide 39

Slide 39 text

JAMstack is for you if: • You hate devops

Slide 40

Slide 40 text

JAMstack is for you if: • You hate devops • You love JavaScript

Slide 41

Slide 41 text

LAMPstack Lifecycle of a request

Slide 42

Slide 42 text

LAMPstack Lifecycle of a request • Apache/Nginx

Slide 43

Slide 43 text

LAMPstack Lifecycle of a request • Apache/Nginx • PHP worker process

Slide 44

Slide 44 text

LAMPstack Lifecycle of a request • Apache/Nginx • PHP worker process • Twig compiled

Slide 45

Slide 45 text

LAMPstack Lifecycle of a request • Apache/Nginx • PHP worker process • Twig compiled • PHP is executed

Slide 46

Slide 46 text

LAMPstack Lifecycle of a request • Apache/Nginx • PHP worker process • Twig compiled • PHP is executed • db query

Slide 47

Slide 47 text

• Apache/Nginx • PHP worker process • Twig compiled • PHP is executed LAMPstack Lifecycle of a request • db query • HTML returned

Slide 48

Slide 48 text

JAMstack Lifecycle of a request

Slide 49

Slide 49 text

JAMstack Lifecycle of a request • Static host (CDN, etc.)

Slide 50

Slide 50 text

• Static host (CDN, etc.) • HTML returned JAMstack Lifecycle of a request

Slide 51

Slide 51 text

Wait, wut?

Slide 52

Slide 52 text

LAMPstack Step: Build

Slide 53

Slide 53 text

• Build CSS/JS LAMPstack Step: Build

Slide 54

Slide 54 text

• Build CSS/JS Where: local dev or build server LAMPstack Step: Build

Slide 55

Slide 55 text

LAMPstack Step: Serve

Slide 56

Slide 56 text

• db Query LAMPstack Step: Serve

Slide 57

Slide 57 text

LAMPstack Step: Serve • db Query • Twig -> HTML

Slide 58

Slide 58 text

LAMPstack Step: Serve • db Query • Twig -> HTML • Dynamically images

Slide 59

Slide 59 text

• db Query • Twig -> HTML • Dynamically images Where: production server LAMPstack Step: Serve

Slide 60

Slide 60 text

JAMstack Step: Build

Slide 61

Slide 61 text

JAMstack Step: Build • Build CSS/JS

Slide 62

Slide 62 text

JAMstack Step: Build • Build CSS/JS • db Query

Slide 63

Slide 63 text

JAMstack Step: Build • Build CSS/JS • db Query • “Markup” -> HTML

Slide 64

Slide 64 text

JAMstack Step: Build • Build CSS/JS • db Query • “Markup” -> HTML • Resize images

Slide 65

Slide 65 text

• Build CSS/JS • db Query • “Markup” -> HTML • Resize images Where: local dev or build server JAMstack Step: Build

Slide 66

Slide 66 text

JAMstack Step: Serve

Slide 67

Slide 67 text

n/a JAMstack Step: Serve

Slide 68

Slide 68 text

We didn’t change what happened.

Slide 69

Slide 69 text

We just changed where it happened.

Slide 70

Slide 70 text

APIs

Slide 71

Slide 71 text

APIs • “Query APIs for dynamic data”

Slide 72

Slide 72 text

APIs • “Query APIs for dynamic data” • That API can be Cra CMS

Slide 73

Slide 73 text

APIs • “Query APIs for dynamic data” • That API can be Cra CMS • Element API

Slide 74

Slide 74 text

• “Query APIs for dynamic data” • That API can be Cra CMS • Element API • GraphQL API APIs

Slide 75

Slide 75 text

API queries can happen:

Slide 76

Slide 76 text

API queries can happen: • At build time for SSGs

Slide 77

Slide 77 text

API queries can happen: • At build time for SSGs • At runtime in a “thick” client

Slide 78

Slide 78 text

API queries can happen: • At build time for SSGs • At runtime in a “thick” client • Client/server hybrid aren’t really “JAMstack”

Slide 79

Slide 79 text

• At build time for SSGs • At runtime in a “thick” client • Client/server hybrid aren’t really “JAMstack” • Google “Rendering on the Web” API queries can happen:

Slide 80

Slide 80 text

It’s not a binary decision.

Slide 81

Slide 81 text

But it is a change in mentality and methodology.

Slide 82

Slide 82 text

LAMPstack Pros

Slide 83

Slide 83 text

LAMPstack Pros • Familiarity with processes

Slide 84

Slide 84 text

LAMPstack Pros • Familiarity with processes • Maturity of tools and infrastructure

Slide 85

Slide 85 text

LAMPstack Pros • Familiarity with processes • Maturity of tools and infrastructure • Dynamic content per request

Slide 86

Slide 86 text

LAMPstack Cons

Slide 87

Slide 87 text

LAMPstack Cons • Doesn’t scale without static caching or $$

Slide 88

Slide 88 text

LAMPstack Cons • Doesn’t scale without static caching or $$ • Interactivity needs JavaScript

Slide 89

Slide 89 text

LAMPstack Cons • Doesn’t scale without static caching or $$ • Interactivity needs JavaScript • Some devops required

Slide 90

Slide 90 text

• Doesn’t scale without static caching or $$ • Interactivity needs JavaScript • Some devops required • Job opportunities LAMPstack Cons

Slide 91

Slide 91 text

JAMstack Pros

Slide 92

Slide 92 text

JAMstack Pros • Scales wonderfully

Slide 93

Slide 93 text

JAMstack Pros • Scales wonderfully • Interactivity via JavaScript

Slide 94

Slide 94 text

JAMstack Pros • Scales wonderfully • Interactivity via JavaScript • No devops required

Slide 95

Slide 95 text

• Scales wonderfully • Interactivity via JavaScript • No devops required • Job opportunities JAMstack Pros

Slide 96

Slide 96 text

JAMstack Cons

Slide 97

Slide 97 text

JAMstack Cons • Painful rebuild & deployment times

Slide 98

Slide 98 text

JAMstack Cons • Painful rebuild & deployment times • Thick clients that can be slow

Slide 99

Slide 99 text

JAMstack Cons • Painful rebuild & deployment times • Thick clients that can be slow • Devops -> optimizing your pipeline

Slide 100

Slide 100 text

• Painful rebuild & deployment times • Thick clients that can be slow • Devops -> optimizing your pipeline • Not all old pa erns are solved JAMstack Cons

Slide 101

Slide 101 text

JAMstack Myths

Slide 102

Slide 102 text

JAMstack Myths • Your site will be faster

Slide 103

Slide 103 text

JAMstack Myths • Your site will be faster • TTFB will be be er but that’s it

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

JAMstack Myths • Your site will be faster • TTFB will be be er but that’s it • No more devops

Slide 108

Slide 108 text

• Your site will be faster • TTFB will be be er but that’s it • No more devops • Devops -> build / deployment pipeline JAMstack Myths

Slide 109

Slide 109 text

So we’re left with a different way to do the same thing.

Slide 110

Slide 110 text

So we’re left with a different way to do the same thing. • Twig -> React/Vue/Svelte

Slide 111

Slide 111 text

So we’re left with a different way to do the same thing. • Twig -> React/Vue/Svelte • Element queries -> GraphQL queries

Slide 112

Slide 112 text

• Twig -> React/Vue/Svelte • Element queries -> GraphQL queries • Cra CMS plugins -> NPM packages So we’re left with a different way to do the same thing.

Slide 113

Slide 113 text

It’s new.

Slide 114

Slide 114 text

It’s new. I’m scared.

Slide 115

Slide 115 text

It’s new. I’m scared. • Learning & evolving the deﬁnition of tech

Slide 116

Slide 116 text

It’s new. I’m scared. • Learning & evolving the deﬁnition of tech • You’re not throwing away knowledge

Slide 117

Slide 117 text

It’s new. I’m scared. • Learning & evolving the deﬁnition of tech • You’re not throwing away knowledge • “It’s all just code”—BK

Slide 118

Slide 118 text

Twig:

Slide 119

Slide 119 text

Twig: Vue:

Slide 120

Slide 120 text

It’s new. I’m scared. • Learning & evolving the deﬁnition of tech • You’re not throwing away knowledge • “It’s all just code”—BK • Much of what you know already applies

Slide 121

Slide 121 text

{% set entries = craft.entries.section(“news") .limit(2) .all() %} Element query:

Slide 122

Slide 122 text

{% set entries = craft.entries.section(“news") .limit(2) .all() %} Element query: GraphQL query: { queryEntries (section: "news", limit: 2 { title } }

Slide 123

Slide 123 text

• Learning & evolving the deﬁnition of tech • You’re not throwing away knowledge • “It’s all just code”—BK • Much of what you know already applies • Don’t be scared. Be bold. It’s new. I’m scared.

Slide 124

Slide 124 text

You don’t like mixing HTML and JavaScript?

Slide 125

Slide 125 text

$("button").click(function(){ $("p").hide(); });

You don’t like mixing HTML and JavaScript?

Slide 126

Slide 126 text

You’ve been alive for {{ days }} days!

Twig code:

Slide 127

Slide 127 text

You’ve been alive for {{ days }} days!

Vue JS code:

Slide 128

Slide 128 text

{% set days = 12 * 365.25 %}

You’ve been alive for {{ days }} days!

Twig code:

Slide 129

Slide 129 text

// line 2 $context["days"] = (12 * 365.25); // line 3 echo "

You’ve been alive for "; // line 5 echo twig_escape_filter($this->env, (isset($context["days"]) || array_key_exists("days", $context) ? $context["days"] : (function () { throw new RuntimeError('Variable "days" does not exist.', 5, $this->source); })()), "html", null, true); echo " days!

"; Compiled PHP code:

Slide 130

Slide 130 text

“It’s all just code, man” —BK

Slide 131

Slide 131 text

There are advantages to the JAMstack

Slide 132

Slide 132 text

There are advantages to the JAMstack • Leverage modern frontend frameworks

Slide 133

Slide 133 text

There are advantages to the JAMstack • Leverage modern frontend frameworks • Separate your content from rendering

Slide 134

Slide 134 text

There are advantages to the JAMstack • Leverage modern frontend frameworks • Separate your content from rendering • Serve up an API

Slide 135

Slide 135 text

There are advantages to the JAMstack • Leverage modern frontend frameworks • Separate your content from rendering • Serve up an API • Consume an API

Slide 136

Slide 136 text

There are advantages to the JAMstack • Leverage modern frontend frameworks • Separate your content from rendering • Serve up an API • Consume an API • Use NPM packages

Slide 137

Slide 137 text

• Leverage modern frontend frameworks • Separate your content from rendering • Serve up an API • Consume an API • Use NPM packages • JavaScript massive talent pool There are advantages to the JAMstack

Slide 138

Slide 138 text

But there are disadvantages, too.

Slide 139

Slide 139 text

What do these phrases have in common?

Slide 140

Slide 140 text

Fat Free

Slide 141

Slide 141 text

All Natural

Slide 142

Slide 142 text

Full Stack

Slide 143

Slide 143 text

Fat Free Marketing terms. All Natural Full Stack

Slide 144

Slide 144 text

Your stack doesn’t matter, what you build matters.

Slide 145

Slide 145 text

Build awesome stuff.

Slide 146

Slide 146 text

by Andrew Welch / @gaijinity - A TALE OF TWO STACKS - devMode podcast / devMode.fm nystudio107.com @nystudio107 SpeakerDeck.com/  nystudio107