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.

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