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. 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
  2. 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
  3. 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.”
  4. 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.”
  5. 29.

    @biilmann netlify.com Building secure sites is hard! Need deep knowledge

    of both complex browser issues, and back-end security patterns
  6. 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
  7. 43.

    @biilmann netlify.com CDN Build Tool Git APIs When a user

    requests a page When you push your code
  8. 44.

    @biilmann netlify.com CDN Build Tool Git APIs When a user

    requests a page When you push your code
  9. 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.”
  10. 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.
  11. 55.
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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…
  19. 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…
  20. 88.

    @biilmann netlify.com Best Practices • Entire site on a CDN

    • Atomic Deploys • Instant Cache Invalidation • Everything lives in Git • Automated Builds
  21. 89.

    @biilmann netlify.com Best Practices • Entire site on a CDN

    • Atomic Deploys • Instant Cache Invalidation • Everything lives in Git • Automated Builds
  22. 99.

    @biilmann netlify.com Best Practices • Entire site on a CDN

    • Atomic Deploys • Instant Cache Invalidation • Everything lives in Git • Automated Builds
  23. 100.

    @biilmann netlify.com Best Practices • Entire site on a CDN

    • Atomic Deploys • Instant Cache Invalidation • Everything lives in Git • Automated Builds
  24. 101.

    @biilmann netlify.com Best Practices • Entire site on a CDN

    • Atomic Deploys • Instant Cache Invalidation • Everything lives in Git • Automated Builds
  25. 102.

    @biilmann netlify.com Best Practices • Entire site on a CDN

    • Atomic Deploys • Instant Cache Invalidation • Everything lives in Git • Automated Builds