The JAM Stack - Speaker Deck

The JAM Stack

by Mathias Biilmann

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

@biilmann netlify.com The New Front-end stack Git centric workﬂow, Front-end build tools, API Economy

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

@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

Slide 7

Slide 7 text

@biilmann netlify.com API Economy

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

@biilmann netlify.com

Slide 11

Slide 11 text

@biilmann netlify.com Browser Server

Slide 12

Slide 12 text

@biilmann netlify.com Browser Server

Slide 13

Slide 13 text

@biilmann netlify.com Server Program Browser

Slide 14

Slide 14 text

@biilmann netlify.com Server Program Browser

Slide 15

Slide 15 text

@biilmann netlify.com Server Program Database Browser

Slide 16

Slide 16 text

@biilmann netlify.com Server Program Database Browser

Slide 17

Slide 17 text

@biilmann netlify.com Server Cache Program Database Cache Browser

Slide 18

Slide 18 text

@biilmann netlify.com Server Cache Program Database Cache Browser

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

@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

Slide 22

Slide 22 text

@biilmann netlify.com

Slide 23

Slide 23 text

@biilmann netlify.com

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

@biilmann netlify.com • Security • Reliability • Performance

Slide 26

Slide 26 text

@biilmann netlify.com • Security • Reliability • Performance

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

@biilmann netlify.com • Security • Reliability • Performance

Slide 31

Slide 31 text

@biilmann netlify.com

Slide 32

Slide 32 text

@biilmann netlify.com

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

@biilmann netlify.com • Security • Reliability • Performance

Slide 35

Slide 35 text

@biilmann netlify.com Tealeaf/Harris Interactive

Slide 36

Slide 36 text

@biilmann netlify.com Tealeaf/Harris Interactive

Slide 37

Slide 37 text

@biilmann netlify.com An Excuse for Walled Gardens

Slide 38

Slide 38 text

@biilmann netlify.com How do we solve this?

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Slide 41

Slide 41 text

@biilmann netlify.com CDN Browser

Slide 42

Slide 42 text

@biilmann netlify.com CDN Browser

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

@biilmann netlify.com CDN APIs

Slide 47

Slide 47 text

@biilmann netlify.com CDN APIs

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

@biilmann netlify.com Pre-bake the markup and enhance with JavaScript Build out all public facing pages. Performance that no other approach can beat.

Slide 50

Slide 50 text

@biilmann netlify.com JavaScript, APIs and Markup

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

@biilmann netlify.com

Slide 53

Slide 53 text

@biilmann netlify.com Static

Slide 54

Slide 54 text

@biilmann netlify.com Static

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

@biilmann netlify.com

Slide 57

Slide 57 text

@biilmann netlify.com

Slide 58

Slide 58 text

@biilmann netlify.com

Slide 59

Slide 59 text

@biilmann netlify.com 15,000+ HTML pages

Slide 60

Slide 60 text

@biilmann netlify.com Active Content Strategy

Slide 61

Slide 61 text

@biilmann netlify.com 4 Regions, 3 Locales

Slide 62

Slide 62 text

@biilmann netlify.com Live Search & Filters

Slide 63

Slide 63 text

@biilmann netlify.com Built on 2 APIs

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

@biilmann netlify.com Deﬁnitively not static!

Slide 66

Slide 66 text

@biilmann netlify.com

Slide 67

Slide 67 text

@biilmann netlify.com

Slide 68

Slide 68 text

@biilmann netlify.com Daily Global News

Slide 69

Slide 69 text

@biilmann netlify.com As Dynamic as it Gets

Slide 70

Slide 70 text

@biilmann netlify.com No Moving Parts

Slide 71

Slide 71 text

@biilmann netlify.com Static Front-end + Static JSON ﬁles

Slide 72

Slide 72 text

@biilmann netlify.com Not Static!

Slide 73

Slide 73 text

@biilmann netlify.com

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

@biilmann netlify.com Single Page Apps • Git Based ﬂow  Pull -> Watch -> Commit -> Push • Build Tools  Grunt, Gulp, Broccoli, Webpack • Frameworks  React, Angular, Ember, etc… • APIs  Home-brewed APIs

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

@biilmann netlify.com Hybrids • Git Based ﬂow  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…

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

@biilmann netlify.com

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

@biilmann netlify.com

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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