Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

JAMstack

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

  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

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

×