Pro Yearly is on sale from $80 to $50! »

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.

A731bc19c3b04919610fcee6d0589914?s=128

Mathias Biilmann

April 06, 2016
Tweet

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