Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JAMstack

370 views

Published on

Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

JAMstack

  1. 1. JAMstack May 29, 2018 Tomasz Bąk t.bak@selleo.com
  2. 2. Agenda What is JAMstack? Why JAMstack? Popular tools Demo
  3. 3. What is JAMstack? JavaScript APIs Markup it’s not about specific technologies, it’s a new way of building websites and apps https://jamstack.org
  4. 4. Why JAMstack? ● performance & scaling ● updates & portability ● developer experience ● higher security ● cheaper
  5. 5. Faster page load == Higher conversion rate
  6. 6. Static Site Generator At Scale Obama’s 2012 fundraising platform Performance ● $250 million dollars, 4,276,463 donations ● 81,548,259 pageviews ● 17,807,917 unique visitors ● 60% faster time to paint than previous platform ● 23% of traffic was mobile (including tablet)
  7. 7. Static Site Generator At Scale Obama’s 2012 fundraising platform Tech Stack ● Static HTML pages generated by Jekyll ● Hosted on Amazon S3 ● Version control with GitHub ● 1,101 frontend deploys ● 4,000 lines of JavaScript ● Conversion optimization with Optimizely (240 a/b tests, 49% increase in donation conversion rate)
  8. 8. Static Site Generator At Scale Smashing Magazine just got 10x faster ● moved from WordPress to JAMstack (Hugo) ● content editing with open soruce git-based NetlifyCMS ● APIs: Algolia for search, Cloudinary for responsive images, comments & ecommerce moved to API (GoCommerce & GoTell) from Netlify Source: https://www.smashingmagazine.com/2017/03/a-little-surprise-is-waiting-for-you-here/
  9. 9. Getting started with JAMstack ● static site generator ● content management (git-based vs API based) ● deployment automation ● other APIs
  10. 10. https://www.staticgen.com - A List of Static Site Generators for JAMstack Sites ● Jekyll (Ruby) ● Hugo (Go) ● Next (JavaScript) ● Hexo (JavaScript) ● Gatsby (JavaScript)
  11. 11. https://headlesscms.org - A List of Content Management Systems for JAMstack Sites Git-based ● your IDE or GitHub Edit :-) ● Netlify CMS API driven ● Contentful ● GraphCMS / Prisma
  12. 12. Deployment automation ● Netlify ● GitHub Pages ● Zeit both are free and support SSL certificate via https://letsencrypt.org
  13. 13. Other APIs ● Assets (CDNs) : Uploadcare, Cloudinary ● Forms: Netlify Forms, Wufoo, Typeform, Google Forms ● Search : Google, Swiftype, AddSearch, Algolia ● Comments: Disqus, Facebook ● Shopping Carts : Ecwid, Snipcart, GoCommerce ● Serverless: Amazon Lambda Source: https://devopedia.org/static-site-generators
  14. 14. Pros Cons ● simple, fast, reliable ● modern frontend tools ● developer friendly ● structured content ● versioning ● minimal sysadmin ● basic access control (i.e. git repo) ● non-tech authoring
  15. 15. Demo https://gatsby-netlify-cms.netlify.com
  16. 16. Q&A

×