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

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.

Mathias Biilmann

April 06, 2016
Tweet

More Decks by Mathias Biilmann

Other Decks in Programming

Transcript

  1. @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. @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. @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. @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. @biilmann netlify.com Building secure sites is hard! Need deep knowledge

    of both complex browser issues, and back-end security patterns
  6. @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. @biilmann netlify.com CDN Build Tool Git APIs When a user

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

    requests a page When you push your code
  9. @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. @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. @biilmann netlify.com JAM philosophy • Decouple Building & Hosting •

    Decouple Front-end & Back-end • API’s rather than Databases • Pre-baked Markup, enhanced with JS
  12. @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. @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. @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. @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. @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
  17. @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…
  18. @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…
  19. @biilmann netlify.com Best Practices • Entire site on a CDN

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

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

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

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

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

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