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

The JAM Stack

Mathias Biilmann
April 06, 2016
Programming
21
11k

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

See All by Mathias Biilmann
React and the JAMstack - Reactathon Fundamentals 2018
biilmann
1
510
The JAMstack - Smashing Conf Freiburg 2017
biilmann
1
670
Hide Your Keys
biilmann
0
220
Rise of the JAMstack
biilmann
0
530
New Stack Lunch Presentation
biilmann
1
380
Comparing static site generators and how to onboard from a dynamic workflow
biilmann
3
1.7k

Other Decks in Programming

See All in Programming
「defineCustomElement」を活用した サービス共通のUIコンポーネントライブラリ
piyoppi
0
210
ポイントサービス設計の異常な挑戦 または我々は如何にして心配するのを止めてドメイン駆動設計を愛するようになったか - NIFTY Tech Day 2023
niftycorp
0
120
Scala Left Fold Parallelisation - Three Approaches
philipschwarz
PRO
0
270
非同期ツールキット「Vert.x」のご紹介
masatoshiitoh
0
120
Kaggle-Vesuvius-Challenge-Ink-Detection-2nd-Solution
mipypf
0
1k
ゆめみの Flutter エンジニア育成方法
morikann
0
250
ニフティ社内ISUCON開催への道のり - NIFTY Tech Day 2023
niftycorp
0
130
LLMを使ったアプリケーション開発の基本とLangChain超入門
os1ma
16
6.5k
アーキテクチャ刷新の現場 / Scene of architectural renewal
nrslib
2
510
Vue & Vite Rustify
kazupon
4
810
Intro to Stateful Services or How to get 1 million RPS from a single node
antyadev
0
140
ちょうぜつ本の紹介 (クリーンアーキテクチャとパッケージ原則)
suzukimar
0
270

Featured

See All Featured
Clear Off the Table
cherdarchuk
81
300k
Ruby is Unlike a Banana
tanoku
93
10k
In The Pink: A Labor of Love
frogandcode
135
21k
The Mythical Team-Month
searls
214
41k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
349
18k
Code Reviewing Like a Champion
maltzj
511
38k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
26
5.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
318
20k
Automating Front-end Workflow
addyosmani
1354
200k
A Philosophy of Restraint
colly
194
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  7. @biilmann netlify.com
    API Economy

    View Slide

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

    View Slide

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

    View Slide

  10. @biilmann netlify.com

    View Slide

  11. @biilmann netlify.com
    Browser Server

    View Slide

  12. @biilmann netlify.com
    Browser Server

    View Slide

  13. @biilmann netlify.com
    Server Program
    Browser

    View Slide

  14. @biilmann netlify.com
    Server Program
    Browser

    View Slide

  15. @biilmann netlify.com
    Server Program Database
    Browser

    View Slide

  16. @biilmann netlify.com
    Server Program Database
    Browser

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  22. @biilmann netlify.com

    View Slide

  23. @biilmann netlify.com

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  29. @biilmann netlify.com
    Building secure sites is hard!
    Need deep knowledge of both complex browser issues, and
    back-end security patterns

    View Slide

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

    View Slide

  31. @biilmann netlify.com

    View Slide

  32. @biilmann netlify.com

    View Slide

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

    View Slide

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

    View Slide

  35. @biilmann netlify.com
    Tealeaf/Harris Interactive

    View Slide

  36. @biilmann netlify.com
    Tealeaf/Harris Interactive

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  41. @biilmann netlify.com
    CDN
    Browser

    View Slide

  42. @biilmann netlify.com
    CDN
    Browser

    View Slide

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

    View Slide

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

    View Slide

  45. @biilmann netlify.com
    Decouple Front-end and Back-end
    Backend limited to APIs. Front-end generated with
    modern build tools

    View Slide

  46. @biilmann netlify.com
    CDN
    APIs

    View Slide

  47. @biilmann netlify.com
    CDN
    APIs

    View Slide

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

    View Slide

  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.

    View Slide

  50. @biilmann netlify.com
    JavaScript, APIs
    and Markup

    View Slide

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

    View Slide

  52. @biilmann netlify.com

    View Slide

  53. @biilmann netlify.com
    Static

    View Slide

  54. @biilmann netlify.com
    Static

    View Slide

  55. @biilmann netlify.com
    Hyper Dynamic
    Much more so than the sites we built with the
    LAMP stack years ago

    View Slide

  56. @biilmann netlify.com

    View Slide

  57. @biilmann netlify.com

    View Slide

  58. @biilmann netlify.com

    View Slide

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

    View Slide

  60. @biilmann netlify.com
    Active Content Strategy

    View Slide

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

    View Slide

  62. @biilmann netlify.com
    Live Search & Filters

    View Slide

  63. @biilmann netlify.com
    Built on 2 APIs

    View Slide

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

    View Slide

  65. @biilmann netlify.com
    Definitively not static!

    View Slide

  66. @biilmann netlify.com

    View Slide

  67. @biilmann netlify.com

    View Slide

  68. @biilmann netlify.com
    Daily Global News

    View Slide

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

    View Slide

  70. @biilmann netlify.com
    No Moving Parts

    View Slide

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

    View Slide

  72. @biilmann netlify.com
    Not Static!

    View Slide

  73. @biilmann netlify.com

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  82. @biilmann netlify.com
    JAM Stack
    Git
    Build Tools Frameworks
    APIs CDN

    View Slide

  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

    View Slide

  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…

    View Slide

  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…

    View Slide

  86. @biilmann netlify.com
    JAM Stack
    Git
    Build Tools Frameworks
    APIs CDN

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  92. @biilmann netlify.com
    Amazon—1.6 Billion in lost sales/year
    Google—20 million lost searches/year
    What does 1 second cost?

    View Slide

  93. @biilmann netlify.com

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  98. @biilmann netlify.com

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  103. @biilmann netlify.com
    Let’s continue the talk!
    #JAMStack
    jamstack.org
    [email protected]

    View Slide