JAMstack with gatsby, contentful and netlify aka the dream stack
0 likes293 views
Zane Staggs gave a presentation on using the JAMstack with Gatsby, Contentful, and Netlify (the "Dream Stack"). He began with an overview of what the JAMstack is and how it differs from traditional web development. He then discussed each piece of the Dream Stack in more detail - how Gatsby allows building fast, secure sites; how Contentful provides a headless CMS; and how Netlify handles hosting and deployments. Overall, he argued that the JAMstack and Dream Stack make developing websites easier and focus more on user experience rather than infrastructure concerns.
JAMstack with gatsby, contentful and netlify aka the dream stack
- 1. Zane Staggs - Senior Software Engineer JAMstack SF Meetup - July 2019 JAMstack with Gatsby, Contentful and Netlify (aka the Dream Stack)
- 2. Hi, Im Zane All opinions are my own and not of my employer. Web developer / Software engineer for 15+ years Win2000/XP + IE6 was my original development platform :) Before The Cloud and we had to spin up our own co lo hardware. I share web dev related links on Twitter @zanedev This talk is a High level overview of JAMstack and what I consider to be great options for the JAMstack using Gatsby, Contentful and Netlify.
- 3. What is the JAMstack?
- 4. JAMstack?
- 5. JAMstack?
- 6. JAMstack "A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup" Mathias Biilmann (CEO & Co-founder of Netlify). https://jamstack.wtf/
- 7. JAMstack wayOld way Tightly coupled with front and backend code (monolith). Deploy by modifying website code and uploading via SFTP. Manage your own cms server and/or software. Data is pulled and rendered along with every single response. More work needed for speed and security. Loosely coupled can swap out any piece for another with ease. Deploy process involves a static/SSR rendered website via git push. No server to manage, preferably all serverless. All data needed for initial render is pulled and assembled at build time. Site lives in CDN no server software to hack and zero security concerns for most sites.
- 8. Before JAMstack Is the server down?
- 9. After JAMstack Piece of mind and happy stakeholders!
- 10. Dream Stack Hosting and automationContent administration and apiWebsite / application code In React + +
- 11. Fun to develop and maintain Transpilation and hot reload Modern component-based framework Doesnt get in the way Easy to extend and add features Based on existing tech Easy to update Dream Stack
- 12. Helps create a modern fast application Dream Stack Loading speed SEO friendly Mobile friendly Single Page Application Client and SSR Routes Modern front end capabilities Pre-rendered/SSR
- 13. Flexible and decoupled Dream Stack Code base versatility Choice of frameworks Portable, not locked into any one service
- 14. Saves time so the focus is on creating the best user experience Dream Stack Accessibility Animations / Transitions Usability Portability
- 15. Gatsby is a react based static site Generator (SSG) www.gatsbyjs.com
- 16. Static site generator Saves time Modern features out of the box Less con鍖guration Theme/templating support Common website paradigms solved for you
- 17. Gatsby - Abstracts the complicated concepts like routing and pre-rendering - Write React components in the /pages directory and you get automatic single page website with all modern features and enhanced speed. - Enhanced template/theming built right into core. - Wealth of plugins available, o鍖ine, seo support etc. - Doesnt get in the way. It uses existing website tools like webpack and allows you to extend easily. - Has speed built into it automatically. - Uses GraphQL under the hood allowing for endless possibilities of working with data in a fun way.
- 18. Gatsby is lightning fast out of the box! Server-side rendering (SSR) at build time Route-based code splitting Modern browser APIs in Gatsby: IntersectionObserver for navigation - an API to conditionally perform some action when an element enters the viewport/view Gatsby-link - link rel="prefetch" an API to prefetch resources in the background when the browser is idle Gatsy-Image - srcset powering responsive images - a API to load the smallest possible image that matches the viewport of the requesting device More info: https://www.gatsbyjs.org/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/
- 19. Contentful is a Headless CMS www.contenful.com
- 20. Headless CMS? API 鍖rst Decoupled Less con鍖guration Less bloat
- 21. Contentful - Free for most static site use cases. - Admin / developer can create api nodes and manage data associations. - Content admin can login and manage content. - Use the api to pull your data during build time. - For gatsby use the Gatsby Source Contentful plugin - transforms api data to graphql queries used by gatsby pages. - Tons of features, plugins, build hooks, website previews, internationalization, the feature list grows by the day. - Data import/export capabilities.
- 23. Content model
- 26. Editing content
- 27. Media management
- 29. Netlify is a JAMstack platform www.netlify.com
- 30. Why Netlify? Up and running with static hosting in 5 mins Free SSL support and deployment pipelines Webhook support for contentful publish Great interface and support Enterprise scale features
- 31. Netlify - Sign up at netlify.com - Import your git repo - Choose your build options - Run the build and deploy - Setup free ssl - Pro鍖t!
- 32. Conclusion JAMstack is a collection of services surrounding the deployment of a static website and serverless APIs that all work seamlessly together to provide an unprecedented level of reliability, quality and ultimately piece of mind. Static websites and cloud based services are a dream combination because there are less moving parts in the rendering pipeline meaning less stress and more time to focus on what matters: User Experience The dream stack is based on Gatsby, Contentful, and Netlify and has all the features and 鍖exibility that lead to happiness for developers and happy stakeholders.
- 33. Thank You!