Gatsby v2: Faster build times, guess.js, and more!
- 1. Gatsby v2: Faster build times, Guess.js, and More! Webinar September 27, 2018
- 2. Welcome
- 4. Presenters Linda Watkins Director of Marketing Gatsby Kyle Mathews CEO & Co-founder Gatsby Dustin Schau Software Engineer Gatsby
- 5. Panelists Sam Bhagwat Co-founder & Head of Enterprise Gatsby Jason Lengstorf Head of Developer Relations Gatsby Amberley Romo Software Engineer Gatsby
- 6. Overview
- 7. How to use React for *websites*?
- 8. Is there a tool that can solve similar problems as Drupal but with modern engineering practices?
- 9. “All fast websites are alike, but slow websites are slow in different ways.” - Leo Tolstoy (sort of)
- 10. Over 50% of people will abandon a mobile site if it takes more than 3 seconds to load
- 11. Why Gatsby?
- 12. Build blazing fast, modern apps and websites with React
- 13. Modern JavaScript and CSS stack so development is fun and productive
- 14. The Modern Web ● React ● webpack ● babel ● GraphQL ● Modern Javascript ● CSS-In-JS
- 15. Performance is baked in to the framework Gatsby makes it *hard* to build slow sites
- 16. How to solve the “integration problem” of decoupled CMSs
- 17. Traditional Monolithic CMS Presentation Layer Content Backend
- 20. Gatsby: The “presentation layer” for the web
- 21. Decoupled CMS Presentation Layer Headless CMS GraphQL integration layer
- 22. An Integration layer lets you...
- 23. ...use the best tool for the job
- 24. ...experiment with different CMSes without needing to change the development workflow
- 25. There are now source plugins for: ● Drupal ● Contentful ● WordPress ● Airtable ● Trello ● Google Spreadsheets ● and dozens more!
- 26. Gatsby “glues” data and code and compiles it into the fastest website possible
- 27. The Future is Fast Get performance out of the box
- 28. Bring Your Own Content ● CMS (WordPress, Drupal, Contentful, etc) ● Static files ● Markdown ● Database(s)
- 29. Instantly Scalable Hosted on the edge
- 30. ~26k GitHub stars ~600k NPM downloads/month 1133 contributors
- 31. Reactjs.org built with Gatsby
- 32. Use Cases
- 33. Stitch Fix
- 34. Braun
- 36. Yaaaaassss! Gatsby can handle apps with: ● User authentication ● Dynamic data ● Asynchronous requests ● Ecommerce ● Full-blown SaaS
- 40. Hopper.com Website built by Narative.co ● Website was outdated ● Hard time recruiting people ● Wanted to use React
- 41. Hopper.com ● Fast! 58% improvement in page load times ● Instant navigation (from 2s subsequent page loads) ● 1.24M pageviews/month
- 42. ‘Wow, we finally have a world-class website’ -Hopper Investors
- 44. Gatsby v2 is faster!
- 48. Why? ● React 16 ● @reach/router
- 49. Name Size % React 49.8kb -> 34.8 kb 30% react-router -> @reach/router 18.4kb -> 6kb 67%
- 50. 78.5kb -> 53.9kb 31% size reduction
- 52. Small wins add up
- 53. Build tooling is faster
- 55. New speed record 100k pages = 75.38 seconds
- 56. Webpack 1 -> Webpack 4 Babel 6 -> Babel 7 … and!
- 57. Gatsby
- 58. Gatsby
- 60. Up to 75% improvement!
- 63. Gatsby v2 is more accessible
- 64. @reach/router New router from Ryan Florence
- 65. Why should you care?
- 66. Your users care
- 67. Gatsby v2 routes are accessible by default
- 69. Smaller package + better accessibility + simplified APIs
- 71. import { Link } from 'gatsby'; export default function IndexPage() { return ( <Link to="/about">About</Link> ) }
- 72. Keep using the Link component That’s it.
- 74. Highlights of the v2 release
- 75. Power without the pain with performance built-in
- 76. React 16 Complete rewrite w/ new features!
- 77. ● Fragments ● error boundaries ● Portals ● support for custom DOM attributes ● reduced file size https://reactjs.org/blog/2017/09/26/react- v16.0.html React 16
- 78. ● Dramatic improvements to build times ● New code splitting algorithm ● New first-class support for lazy-loading CSS chunks. webpack 4
- 79. Babel helps ensure the JavaScript you write works across different browsers ● Improved build speed ● automatic polyfilling ● Support for more syntax e.g. TypeScript and JSX Fragments Babel 7
- 80. Natively Query GraphQL APIs
- 81. Query for data in components with <StaticQuery /> How can I query for data in my components? Now you can with <StaticQuery /> component
- 82. Improvements to gatsby- plugin-offline Bug fixes & handles more edge cases
- 84. Guess.js + Gatsby Data-driven speed improvements Use Analytics data + machine learning to speed prefetching data needed for the next click
- 86. New Docs IA
- 87. Site showcase
- 88. Upgrade to v2! Migration Guide: https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/ Get Started: https://www.gatsbyjs.org/docs/
- 89. Thank you!