Gatsby, fast content based websites with React

Transcript

1. Gatsby Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps
2. Gatsby is a "static" website generator
5. 1. Modern web tech without the headache 2. Speed past the competition 3. Progressive Web App by default 4. Bring your own data https://www.gatsbyjs.org/
6. Content is the king (Data sources)
8. https://www.gatsbyjs.org/docs/how-plugins-apis-are-run/
9. Node runner Data sources Create node (reducer) Call onCreateNode Provide data to query Build
10. How to query the data
14. Data can be queried inside pages, components, or the gatsby-node.js file, using one of these options: 1. The pageQuery component 2. The StaticQuery component 3. The useStaticQuery hook
16. Performance Optimization Performance is hard. Let’s make Gatsby do the work.
17. https://www.gatsbyjs.org/blog/2017-09-13-why-is-gatsby-so-fast/#reach-skip-nav
18. Image performance Ohhh myyyyy
19. https://using-gatsby-image.gatsbyjs.org/ The problem: Large, unoptimized images dramatically slow down your site.
21. Everything is a plugin 1480 plugins today
24. Nothing is perfect Pages (solves with a plugin), variables inside query), cache and build time problems on deploy (netlify)
25. Why we should use at CKL?
26. Real world projects
27. Questions?
28. Thanks