Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LAMPstack vs. JAMstack

Andrew Welch
September 20, 2019

LAMPstack vs. JAMstack

In this talk the pros and cons of LAMPstack vs. JAMstack are discussed, with a walk-through of a request lifecycle for both stacks. We then go on to discuss the commonalities as well as the differences between the two stacks, and when to choose each.

Andrew Welch

September 20, 2019
Tweet

More Decks by Andrew Welch

Other Decks in Technology

Transcript

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

    View Slide

  2. View Slide

  3. Lammy Jammy

    View Slide

  4. Everything
    presented here
    is a fact.*

    View Slide

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

    View Slide

  6. If you don’t understand your

    stack, you’ll grow to resent it.

    View Slide

  7. Understanding is seeing
    the true nature of a thing.

    View Slide

  8. L
    A
    M
    P
    J
    A
    M

    View Slide

  9. Linux
    A
    M
    P
    J
    A
    M

    View Slide

  10. Linux
    Apache
    M
    P
    J
    A
    M

    View Slide

  11. Linux
    Apache
    MySQL
    P
    J
    A
    M

    View Slide

  12. Linux
    Apache
    MySQL
    PHP
    J
    A
    M

    View Slide

  13. Linux
    Apache
    MySQL
    PHP
    JavaScript
    A
    M

    View Slide

  14. Linux
    Apache
    MySQL
    PHP
    JavaScript
    APIs
    M

    View Slide

  15. Linux
    Apache
    MySQL
    PHP
    JavaScript
    APIs
    Markup

    View Slide

  16. Linux
    Apache
    MySQL
    PHP
    JavaScript
    APIs
    Markup

    View Slide

  17. JavaScript has
    a superpower.

    View Slide

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

    View Slide

  19. Linux
    Apache
    MySQL
    PHP
    JavaScript
    APIs
    Markup

    View Slide

  20. LEMP

    View Slide

  21. LEMP
    WIMP

    View Slide

  22. LEMP
    WIMP

    View Slide

  23. LEMP
    WIMP
    MEAN

    View Slide

  24. LEMP
    WIMP
    MEAN
    GLASS

    View Slide

  25. LEMP
    WIMP
    MEAN
    GLASS
    LLMP

    View Slide

  26. LEMP
    WIMP
    MEAN
    GLASS
    LLMP
    LYCE

    View Slide

  27. LEMP
    WIMP
    MEAN
    GLASS
    LLMP
    LYCE
    MERN

    View Slide

  28. LEMP
    WIMP
    MEAN
    GLASS
    LLMP
    LYCE
    MERN
    STAR

    View Slide

  29. Phew.

    View Slide

  30. View Slide

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

    View Slide

  32. LAMP LLMP

    View Slide

  33. LAMP
    acronym
    LLMP

    View Slide

  34. LAMP
    acronym
    LLMP
    initialism

    View Slide

  35. LAMPstack vs. JAMstack

    View Slide

  36. A fork in the road.

    View Slide

  37. Me
    JAMstack
    LAMPstack

    View Slide

  38. JAMstack
    is for you if:

    View Slide

  39. JAMstack
    is for you if:
    • You hate devops

    View Slide

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

    View Slide

  41. LAMPstack
    Lifecycle of a request

    View Slide

  42. LAMPstack
    Lifecycle of a request
    • Apache/Nginx

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  48. JAMstack
    Lifecycle of a request

    View Slide

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

    View Slide

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

    View Slide

  51. Wait, wut?

    View Slide

  52. LAMPstack
    Step: Build

    View Slide

  53. • Build CSS/JS
    LAMPstack
    Step: Build

    View Slide

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

    View Slide

  55. LAMPstack
    Step: Serve

    View Slide

  56. • db Query
    LAMPstack
    Step: Serve

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  60. JAMstack
    Step: Build

    View Slide

  61. JAMstack
    Step: Build
    • Build CSS/JS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  66. JAMstack
    Step: Serve

    View Slide

  67. n/a
    JAMstack
    Step: Serve

    View Slide

  68. We didn’t change
    what happened.

    View Slide

  69. We just changed
    where it happened.

    View Slide

  70. APIs

    View Slide

  71. APIs
    • “Query APIs for dynamic data”

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  75. API queries can happen:

    View Slide

  76. API queries can happen:
    • At build time for SSGs

    View Slide

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

    View Slide

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

    View Slide

  79. • 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:

    View Slide

  80. It’s not a binary decision.

    View Slide

  81. But it is a change in
    mentality and methodology.

    View Slide

  82. LAMPstack
    Pros

    View Slide

  83. LAMPstack
    Pros
    • Familiarity with processes

    View Slide

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

    View Slide

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

    View Slide

  86. LAMPstack
    Cons

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  91. JAMstack
    Pros

    View Slide

  92. JAMstack
    Pros
    • Scales wonderfully

    View Slide

  93. JAMstack
    Pros
    • Scales wonderfully
    • Interactivity via JavaScript

    View Slide

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

    View Slide

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

    View Slide

  96. JAMstack
    Cons

    View Slide

  97. JAMstack
    Cons
    • Painful rebuild & deployment times

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  101. JAMstack
    Myths

    View Slide

  102. JAMstack
    Myths
    • Your site will be faster

    View Slide

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

    View Slide

  104. View Slide

  105. View Slide

  106. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  112. • 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.

    View Slide

  113. It’s new.

    View Slide

  114. It’s new.
    I’m scared.

    View Slide

  115. It’s new.
    I’m scared.
    • Learning & evolving the definition of tech

    View Slide

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

    View Slide

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

    View Slide


  118. Twig:

    View Slide


  119. Twig:
    Vue:

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  123. • Learning & evolving the definition 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.

    View Slide

  124. You don’t like mixing
    HTML and JavaScript?

    View Slide


  125. <br/>$("button").click(function(){<br/>$("p").hide();<br/>});<br/>

    You don’t like mixing
    HTML and JavaScript?

    View Slide



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


    Twig code:

    View Slide



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


    Vue JS code:

    View Slide

  128. {% set days = 12 * 365.25 %}


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


    Twig code:

    View Slide

  129. // 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:

    View Slide

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

    View Slide

  131. There are advantages
    to the JAMstack

    View Slide

  132. There are advantages
    to the JAMstack
    • Leverage modern frontend frameworks

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  136. 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

    View Slide

  137. • 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

    View Slide

  138. But there are
    disadvantages, too.

    View Slide

  139. What do these phrases
    have in common?

    View Slide

  140. Fat Free

    View Slide

  141. All Natural

    View Slide

  142. Full Stack

    View Slide

  143. Fat Free
    Marketing terms.
    All Natural Full Stack

    View Slide

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

    View Slide

  145. Build awesome stuff.

    View Slide

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

    nystudio107

    View Slide