👋 Hi HelsinkiJS
I'm Georgi Yanev
💜 the Web, #perfmatters 🚀
JAMstack with:
Gatsby and Netlify
/agenda/
1. What is the JAMstack?
2. Netlify overview
3. Gatsby deeper look
4. Examples & Demos
Before we begin...
What is JAMstack?
const { J } = JAM
"Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework, library, or even vanilla JavaScript."
const { A } = JAM
"All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript. These can be custom-built or leverage third-party services."
const { M } = JAM
"Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps."
Some examples
Core ideas
📈 Better Performance
🔐 Higher Security
💵 Cheaper, Easier Scaling
😍 Better Developer Experience
What the JAMstack is NOT?
- Not a silver bullet
- Not about specific framework or library (bring your own)
Consider the Trade-offs
- Engineering is all about making the right trade offs based on your requirements
- Choose the right approach for your project
Comparison of different rendering strategies
30 sec deploy demo
Auto deploy from a repository
- GitHub, Gitlab, Bitbucket
- Auto deploys from branch with a build command
But seriously, how fast is Gatsby?
Performance matters!
- Your users and Your business
- Performance, Speed, User Satisfaction translate to Money
- SEO benefits as of July 2018
- Users are impatient
- Alternatively slow sites lead to increased bounce rates
- The next 1 billion users on the internet are coming
- Bandwidth is expensive
WebP image support
How does Gatsby help?
- images could be up up to 70% of your site weight
- gatsby-image is a highly optimized lazy loading image component
- can serve WebP to browsers that support it
- WebP could be up to half the size
One of the easiest ways to try out React and/or GraphQL with no prior experience
All of React
How to get started?
CLI
CodeSandbox.io
Look for the green Netlify deploy button
Or pass a starter repository to Netlify via:
https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default
Data Sources
Let's try out GraphQL
Demo
Plugins
Plugins
- Reusable common functionality
- Source plugins
- Transformer plugins
- Public vs Private
Starters
Showcase
What can you build with Gatsby?
Simple sites
justdoit.nike.com
Sites with plenty of high quality imagery
kirstennoelle.com
Data visualization heavy apps
2018.stateofjs.com
Ecommerce
store.gatsbyjs.org
Blog
airbnb.io
Documentation sites
reactjs.org
My projects and learnings
fpvtips.com
Gatsby, Contentful, Netlify, Google Maps, Open Weather Map, Material UI, Markdown, JSON
georgiyanev.dev
Gatsby, Netlify, Markdown, Styled Components, Sitemap, RSS feed
baehrbg.com
Gatsby, Contentful, Netlify, React Reveal, React Icons
All these projects are open source
Demo
If you want to learn more
- Official Tutorial
- Gatsby Docs
- By example from other projects
Contribute
Consider contributing and get awesome swag.
Great way to learn. The community is super helpful!
Conclusion
- Performance matters
- Building things with Gatsby and Netlify is fun
- Go build something
Thank you!
Let's continue the discussion on
Happy to also talk about
🚁 Flying FPV drones
✍ Writing a book
🔁 Contributing to OSS
