$30 off During Our Annual Pro Sale. View Details »

The JAM Stack

The JAM Stack


THE NEW FRONT-END STACK: JAVASCRIPT, APIS AND MARKUP

The emergence of Git centered workflows, around modern build tools, static site generators and modern browsers, have changed the way most front-enders work.


THE NEW FRONT-END STACK: JAVASCRIPT, APIS AND MARKUP

The emergence of Git centered workflows, around modern build tools, static site generators and modern browsers, have changed the way most front-enders work.

Matt Biilmann covers how a new stack is emerging and how this will change how web sites and web apps are built in the future.

Mathias Biilmann

April 06, 2016
Tweet

More Decks by Mathias Biilmann

Other Decks in Programming

Transcript

  1. @biilmann netlify.com The JAM Stack JavaScript, APIs and Markup

  2. @biilmann netlify.com Matt Biilmann www.netlify.com

  3. @biilmann netlify.com The New Front-end stack Git centric workflow, Front-end

    build tools, API Economy
  4. @biilmann netlify.com Google Trends, Interest Over Time 2015 2014 2013

    2012 2011
  5. @biilmann netlify.com Google Trends, Interest Over Time 2015 2014 2013

    2012 2011 FTP Git
  6. @biilmann netlify.com Downloads of Gulp and Grunt 0 13,333,333 26,666,667

    40,000,000 2013 2014 2015 2015 2014 2013 29.7 Million
  7. @biilmann netlify.com API Economy

  8. @biilmann netlify.com Disrupting the way we’re building the web

  9. @biilmann netlify.com The Old Stack The problems, and how we

    got here
  10. @biilmann netlify.com

  11. @biilmann netlify.com Browser Server

  12. @biilmann netlify.com Browser Server

  13. @biilmann netlify.com Server Program Browser

  14. @biilmann netlify.com Server Program Browser

  15. @biilmann netlify.com Server Program Database Browser

  16. @biilmann netlify.com Server Program Database Browser

  17. @biilmann netlify.com Server Cache Program Database Cache Browser

  18. @biilmann netlify.com Server Cache Program Database Cache Browser

  19. @biilmann netlify.com CDN Server Cache Program Database Cache Sync

  20. @biilmann netlify.com CDN Server Cache Program Database Cache Sync

  21. @biilmann netlify.com CDN Server Cache Program Database Cache Sync Cache

    Invalidation Cloud Provisioning Monitoring Fingerprinting Versioning Consistent Hashing Replication Migration Tuning Release Engineering Auto-scaling Security Updates
  22. @biilmann netlify.com

  23. @biilmann netlify.com

  24. @biilmann netlify.com The Old Stack Is breaking down!

  25. @biilmann netlify.com • Security • Reliability • Performance

  26. @biilmann netlify.com • Security • Reliability • Performance

  27. @biilmann netlify.com – EnableSecurity “According to statistics From 40,000+ WordPress

    Websites in Alexa Top 1 Million, more than 70% of WordPress installations are vulnerable to hacker attacks.”
  28. @biilmann netlify.com – Drupal Core “Proceed under the assumption that

    every Drupal 7 website was compromised unless updated or patched before Oct 15th, 11pm UTC, that is 7 hours after the announcement.”
  29. @biilmann netlify.com Building secure sites is hard! Need deep knowledge

    of both complex browser issues, and back-end security patterns
  30. @biilmann netlify.com • Security • Reliability • Performance

  31. @biilmann netlify.com

  32. @biilmann netlify.com

  33. @biilmann netlify.com Empowering front-end developers to accidentally DDOS the entire

    system!
  34. @biilmann netlify.com • Security • Reliability • Performance

  35. @biilmann netlify.com Tealeaf/Harris Interactive

  36. @biilmann netlify.com Tealeaf/Harris Interactive

  37. @biilmann netlify.com An Excuse for Walled Gardens

  38. @biilmann netlify.com How do we solve this?

  39. @biilmann netlify.com Decouple Building & Hosting Generate Markup, decorate with

    JavaScript, Consume APIs
  40. @biilmann netlify.com CDN Server Cache Program Database Cache Sync Cache

    Invalidation Cloud Provisioning Monitoring Fingerprinting Versioning Consistent Hashing Replication Migration Tuning Release Engineering Auto-scaling Security Updates
  41. @biilmann netlify.com CDN Browser

  42. @biilmann netlify.com CDN Browser

  43. @biilmann netlify.com CDN Build Tool Git APIs When a user

    requests a page When you push your code
  44. @biilmann netlify.com CDN Build Tool Git APIs When a user

    requests a page When you push your code
  45. @biilmann netlify.com Decouple Front-end and Back-end Backend limited to APIs.

    Front-end generated with modern build tools
  46. @biilmann netlify.com CDN APIs

  47. @biilmann netlify.com CDN APIs

  48. @biilmann netlify.com – Thomas Reynolds, Technical Director, Instrument “We are

    down to two back-end developers out of thirty-something engineers. Clients are paying for something they can see and back-end is like the glue that makes it all work.”
  49. @biilmann netlify.com Pre-bake the markup and enhance with JavaScript Build

    out all public facing pages. Performance that no other approach can beat.
  50. @biilmann netlify.com JavaScript, APIs and Markup

  51. @biilmann netlify.com So are we back to “Static Sites” Is

    Static the Answer?
  52. @biilmann netlify.com

  53. @biilmann netlify.com Static

  54. @biilmann netlify.com Static

  55. @biilmann netlify.com Hyper Dynamic Much more so than the sites

    we built with the LAMP stack years ago
  56. @biilmann netlify.com

  57. @biilmann netlify.com

  58. @biilmann netlify.com

  59. @biilmann netlify.com 15,000+ HTML pages

  60. @biilmann netlify.com Active Content Strategy

  61. @biilmann netlify.com 4 Regions, 3 Locales

  62. @biilmann netlify.com Live Search & Filters

  63. @biilmann netlify.com Built on 2 APIs

  64. @biilmann netlify.com Thousands of lines of Ruby and JS

  65. @biilmann netlify.com Definitively not static!

  66. @biilmann netlify.com

  67. @biilmann netlify.com

  68. @biilmann netlify.com Daily Global News

  69. @biilmann netlify.com As Dynamic as it Gets

  70. @biilmann netlify.com No Moving Parts

  71. @biilmann netlify.com Static Front-end + Static JSON files

  72. @biilmann netlify.com Not Static!

  73. @biilmann netlify.com

  74. @biilmann netlify.com A New Stack JavaScript, APIs and Markup

  75. @biilmann netlify.com The JAM Stack The stack has moved up

    a level
  76. @biilmann netlify.com 100m+ Build tool Downloads 12m+ Github Users Exponential

    usage growth
  77. @biilmann netlify.com JAM philosophy • Decouple Building & Hosting •

    Decouple Front-end & Back-end • API’s rather than Databases • Pre-baked Markup, enhanced with JS
  78. @biilmann netlify.com JAM philosophy • Decouple Building & Hosting •

    Decouple Front-end & Back-end • API’s rather than Databases • Pre-baked Markup, enhanced with JS
  79. @biilmann netlify.com JAM philosophy • Decouple Building & Hosting •

    Decouple Front-end & Back-end • API’s rather than Databases • Pre-baked Markup, enhanced with JS
  80. @biilmann netlify.com JAM philosophy • Decouple Building & Hosting •

    Decouple Front-end & Back-end • API’s rather than Databases • Pre-baked Markup, enhanced with JS
  81. @biilmann netlify.com JAM philosophy • Decouple Building & Hosting •

    Decouple Front-end & Back-end • API’s rather than Databases • Pre-baked Markup, enhanced with JS
  82. @biilmann netlify.com JAM Stack Git Build Tools Frameworks APIs CDN

  83. @biilmann netlify.com Single Page Apps • Git Based flow
 Pull

    -> Watch -> Commit -> Push • Build Tools
 Grunt, Gulp, Broccoli, Webpack • Frameworks
 React, Angular, Ember, etc… • APIs
 Home-brewed APIs
  84. @biilmann netlify.com Websites • Git Based flow
 Pull -> Watch

    -> Commit -> Push • Build Tools
 Middleman, Hugo, Jekyll, Roots, Gatsby, Metalsmith, Hexo, etc… • APIs
 Disqus, Intercom, Contentful, Swiftype, static JSON, etc…
  85. @biilmann netlify.com Hybrids • Git Based flow
 Pull -> Watch

    -> Commit -> Push • Pre-bake Markup
 Middleman, Hugo, Roots, Gatsby, etc… • Enhance with SPAs
 React Components, Angular, no framework • Combine with APIs
 Discourse, Lunrjs, Stripe, etc…
  86. @biilmann netlify.com JAM Stack Git Build Tools Frameworks APIs CDN

  87. @biilmann netlify.com Why are they all doing this? Cost Security

    Speed Git Control
  88. @biilmann netlify.com Best Practices • Entire site on a CDN

    • Atomic Deploys • Instant Cache Invalidation • Everything lives in Git • Automated Builds
  89. @biilmann netlify.com Best Practices • Entire site on a CDN

    • Atomic Deploys • Instant Cache Invalidation • Everything lives in Git • Automated Builds
  90. @biilmann netlify.com 6x faster Hosted on netlify.com smashingmagazine.com

  91. @biilmann netlify.com 6x faster Hosted on netlify.com smashingmagazine.com

  92. @biilmann netlify.com Amazon—1.6 Billion in lost sales/year Google—20 million lost

    searches/year What does 1 second cost?
  93. @biilmann netlify.com

  94. @biilmann netlify.com Want success with a toy startup?

  95. @biilmann netlify.com Get your toy to star in Star Wars!

  96. @biilmann netlify.com And then watch your servers burn!

  97. @biilmann netlify.com Unless you entire site is on a CDN

  98. @biilmann netlify.com

  99. @biilmann netlify.com Best Practices • Entire site on a CDN

    • Atomic Deploys • Instant Cache Invalidation • Everything lives in Git • Automated Builds
  100. @biilmann netlify.com Best Practices • Entire site on a CDN

    • Atomic Deploys • Instant Cache Invalidation • Everything lives in Git • Automated Builds
  101. @biilmann netlify.com Best Practices • Entire site on a CDN

    • Atomic Deploys • Instant Cache Invalidation • Everything lives in Git • Automated Builds
  102. @biilmann netlify.com Best Practices • Entire site on a CDN

    • Atomic Deploys • Instant Cache Invalidation • Everything lives in Git • Automated Builds
  103. @biilmann netlify.com Let’s continue the talk! #JAMStack jamstack.org matt@netlify.com