LAMPstack vs. JAMstack

5d5677253f5910f6053845178cbf143c?s=47 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.

5d5677253f5910f6053845178cbf143c?s=128

Andrew Welch

September 20, 2019
Tweet

Transcript

  1. - A TALE OF TWO STACKS - nystudio107 / @nystudio107

    by Andrew Welch devMode podcast / devMode.fm
  2. None
  3. Lammy Jammy

  4. Everything presented here is a fact.*

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

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

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

  8. L A M P J A M

  9. Linux A M P J A M

  10. Linux Apache M P J A M

  11. Linux Apache MySQL P J A M

  12. Linux Apache MySQL PHP J A M

  13. Linux Apache MySQL PHP JavaScript A M

  14. Linux Apache MySQL PHP JavaScript APIs M

  15. Linux Apache MySQL PHP JavaScript APIs Markup

  16. Linux Apache MySQL PHP JavaScript APIs Markup

  17. JavaScript has a superpower.

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

    client.
  19. Linux Apache MySQL PHP JavaScript APIs Markup

  20. LEMP

  21. LEMP WIMP

  22. LEMP WIMP

  23. LEMP WIMP MEAN

  24. LEMP WIMP MEAN GLASS

  25. LEMP WIMP MEAN GLASS LLMP

  26. LEMP WIMP MEAN GLASS LLMP LYCE

  27. LEMP WIMP MEAN GLASS LLMP LYCE MERN

  28. LEMP WIMP MEAN GLASS LLMP LYCE MERN STAR

  29. Phew.

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

  32. LAMP LLMP

  33. LAMP acronym LLMP

  34. LAMP acronym LLMP initialism

  35. LAMPstack vs. JAMstack

  36. A fork in the road.

  37. Me JAMstack LAMPstack

  38. JAMstack is for you if:

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

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

    You love JavaScript
  41. LAMPstack Lifecycle of a request

  42. LAMPstack Lifecycle of a request • Apache/Nginx

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

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

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

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

    process • Twig compiled • PHP is executed • db query
  47. • Apache/Nginx • PHP worker process • Twig compiled •

    PHP is executed LAMPstack Lifecycle of a request • db query • HTML returned
  48. JAMstack Lifecycle of a request

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

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

    of a request
  51. Wait, wut?

  52. LAMPstack Step: Build

  53. • Build CSS/JS LAMPstack Step: Build

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

    Step: Build
  55. LAMPstack Step: Serve

  56. • db Query LAMPstack Step: Serve

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

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

    • Dynamically images
  59. • db Query • Twig -> HTML • Dynamically images

    Where: production server LAMPstack Step: Serve
  60. JAMstack Step: Build

  61. JAMstack Step: Build • Build CSS/JS

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

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

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

    “Markup” -> HTML • Resize images
  65. • Build CSS/JS • db Query • “Markup” -> HTML

    • Resize images Where: local dev or build server JAMstack Step: Build
  66. JAMstack Step: Serve

  67. n/a JAMstack Step: Serve

  68. We didn’t change what happened.

  69. We just changed where it happened.

  70. APIs

  71. APIs • “Query APIs for dynamic data”

  72. APIs • “Query APIs for dynamic data” • That API

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

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

    be Cra CMS • Element API • GraphQL API APIs
  75. API queries can happen:

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

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

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

    • At runtime in a “thick” client • Client/server hybrid aren’t really “JAMstack”
  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:
  80. It’s not a binary decision.

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

  82. LAMPstack Pros

  83. LAMPstack Pros • Familiarity with processes

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

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

    and infrastructure • Dynamic content per request
  86. LAMPstack Cons

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

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

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

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

    needs JavaScript • Some devops required • Job opportunities LAMPstack Cons
  91. JAMstack Pros

  92. JAMstack Pros • Scales wonderfully

  93. JAMstack Pros • Scales wonderfully • Interactivity via JavaScript

  94. JAMstack Pros • Scales wonderfully • Interactivity via JavaScript •

    No devops required
  95. • Scales wonderfully • Interactivity via JavaScript • No devops

    required • Job opportunities JAMstack Pros
  96. JAMstack Cons

  97. JAMstack Cons • Painful rebuild & deployment times

  98. JAMstack Cons • Painful rebuild & deployment times • Thick

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

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

    can be slow • Devops -> optimizing your pipeline • Not all old pa erns are solved JAMstack Cons
  101. JAMstack Myths

  102. JAMstack Myths • Your site will be faster

  103. JAMstack Myths • Your site will be faster • TTFB

    will be be er but that’s it
  104. None
  105. None
  106. None
  107. JAMstack Myths • Your site will be faster • TTFB

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

    be er but that’s it • No more devops • Devops -> build / deployment pipeline JAMstack Myths
  109. So we’re left with a different way to do the

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

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

    same thing. • Twig -> React/Vue/Svelte • Element queries -> GraphQL queries
  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.
  113. It’s new.

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

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

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

    of tech • You’re not throwing away knowledge
  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
  118. <a href=“{{ variable.url }}”> Twig:

  119. <a href=“{{ variable.url }}”> Twig: Vue: <a :href=“variable.url”>

  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
  121. {% set entries = craft.entries.section(“news") .limit(2) .all() %} Element query:

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

    GraphQL query: { queryEntries (section: "news", limit: 2 { title } }
  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.
  124. You don’t like mixing HTML and JavaScript?

  125. <div> <script> $("button").click(function(){ $("p").hide(); }); </script> </div> You don’t like

    mixing HTML and JavaScript?
  126. <div class="woof"> <p> You’ve been alive for {{ days }}

    days! </p> </div> Twig code:
  127. <div class="woof"> <p> You’ve been alive for {{ days }}

    days! </p> </div> Vue JS code:
  128. {% set days = 12 * 365.25 %} <div class="woof">

    <p> You’ve been alive for {{ days }} days! </p> </div> Twig code:
  129. // line 2 $context["days"] = (12 * 365.25); // line

    3 echo "<div class=\"woof\"> <p> 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! </p> </div> "; Compiled PHP code:
  130. “It’s all just code, man” —BK

  131. There are advantages to the JAMstack

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

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

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

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

    frameworks • Separate your content from rendering • Serve up an API • Consume an API
  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
  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
  138. But there are disadvantages, too.

  139. What do these phrases have in common?

  140. Fat Free

  141. All Natural

  142. Full Stack

  143. Fat Free Marketing terms. All Natural Full Stack

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

  145. Build awesome stuff.

  146. by Andrew Welch / @gaijinity - A TALE OF TWO

    STACKS - devMode podcast / devMode.fm nystudio107.com @nystudio107 SpeakerDeck.com/
 nystudio107