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

The JAM Stack

Mathias Biilmann
April 06, 2016
Programming
21
10k

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
460
The JAMstack - Smashing Conf Freiburg 2017
biilmann
1
600
Hide Your Keys
biilmann
0
220
Rise of the JAMstack
biilmann
0
490
New Stack Lunch Presentation
biilmann
1
340
Comparing static site generators and how to onboard from a dynamic workflow
biilmann
3
1.7k

Other Decks in Programming

See All in Programming
Migrating From Spring Boot 2 To Spring Boot 3 - What's Jakarta EE Got To Do with It?
ivargrimstad
0
740
サロンアプリの技術的負債解消への取り組み
k_torishima
0
130
自己紹介と手放せないTUIツール達
sfus
0
140
LlamaIndex で Text-to-SQL 100 本ノック！
os1ma
2
810
Look Back Over Deep Links
jmatsu
0
230
LLMによるプロット生成の試み（スターウォーズ）
hitokun
0
1.2k
SPAでもデータをURLでシェアしたい / Kyoto.js 19
utgwkk
1
170
Yla's #Kaigieffect
little_rubyist
0
1.1k
フロントエンドエンジニアの友人と“型”で話がすれ違った原因 YUMEMI.grow合同LT会in横浜 @Kaito-Dogi
doggy
1
380
コンテナ環境でのJavaチューニング
kazumura
2
410
MicroProfileのススメ～ なぜぼくはコレを使うのか～
ogiwarat
2
140
ColorFiltered で カメラフィルタを実装する
kumamotone
1
110

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
Music & Morning Musume
bryan
37
4.9k
How to name files
jennybc
51
80k
GitHub's CSS Performance
jonrohan
1022
430k
How STYLIGHT went responsive
nonsquared
89
4.3k
Documentation Writing (for coders)
carmenintech
53
3.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
341
18k
Designing with Data
zakiwarfel
92
4.3k
Support Driven Design
roundedbygravity
88
9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
16
1.2k
It's Worth the Effort
3n
179
26k
In The Pink: A Labor of Love
frogandcode
133
21k

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