Download to read offline
More Related Content
Similar to Gatsby v2: Faster build times, guess.js, and more!
Gatsby v2: Faster build times, guess.js, and more!
- 1. Gatsby v2: Faster buildtimes, Guess.js, and More! Webinar September 27, 2018
- 2.
- 4. Presenters Linda Watkins Director of Marketing Gatsby KyleMathews 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.
- 7. How to useReact for *websites*?
- 8. Is there atool that can solve similar problems as Drupal but with modern engineering practices?
- 9. “All fast websitesare alike, but slow websites are slow in different ways.” - Leo Tolstoy (sort of)
- 10. Over 50% ofpeople will abandon a mobile site if it takes more than 3 seconds to load
- 11.
- 12. Build blazing fast,modern apps and websites with React
- 13. Modern JavaScript andCSS stack so development is fun and productive
- 14. The Modern Web ●React ● webpack ● babel ● GraphQL ● Modern Javascript ● CSS-In-JS
- 15. Performance is bakedin to the framework Gatsby makes it *hard* to build slow sites
- 16. How to solvethe “integration problem” of decoupled CMSs
- 17. Traditional Monolithic CMS PresentationLayer Content Backend
- 18.
- 19.
- 20. Gatsby: The “presentation layer”for the web
- 21. Decoupled CMS Presentation Layer HeadlessCMS GraphQL integration layer
- 22.
- 23. ...use the besttool for the job
- 24. ...experiment with differentCMSes without needing to change the development workflow
- 25. There are nowsource plugins for: ● Drupal ● Contentful ● WordPress ● Airtable ● Trello ● Google Spreadsheets ● and dozens more!
- 26. Gatsby “glues” dataand code and compiles it into the fastest website possible
- 27. The Future isFast Get performance out of the box
- 28. Bring Your OwnContent ● CMS (WordPress, Drupal, Contentful, etc) ● Static files ● Markdown ● Database(s)
- 29. Instantly Scalable Hosted onthe edge
- 30. ~26k GitHub stars ~600kNPM downloads/month 1133 contributors
- 31. Reactjs.org built withGatsby
- 32.
- 33.
- 34.
- 35.
- 36. Yaaaaassss! Gatsby can handleapps with: ● User authentication ● Dynamic data ● Asynchronous requests ● Ecommerce ● Full-blown SaaS
- 37.
- 38.
- 39.
- 40. Hopper.com Website built byNarative.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 finallyhave a world-class website’ -Hopper Investors
- 43.
- 44. Gatsby v2 isfaster!
- 45.
- 48. Why? ● React 16 ●@reach/router
- 49. Name Size % React49.8kb -> 34.8 kb 30% react-router -> @reach/router 18.4kb -> 6kb 67%
- 50. 78.5kb -> 53.9kb 31%size reduction
- 52.
- 53. Build tooling isfaster
- 55. New speed record 100kpages = 75.38 seconds
- 56. Webpack 1 ->Webpack 4 Babel 6 -> Babel 7 … and!
- 57.
- 58.
- 59.
- 60. Up to 75%improvement!
- 62.
- 63. Gatsby v2 ismore accessible
- 64. @reach/router New router fromRyan Florence
- 65. Why should youcare?
- 66.
- 67. Gatsby v2 routesare 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 theLink component That’s it.
- 73.
- 74. Highlights of thev2 release
- 75. Power without thepain with performance built-in
- 76. React 16 Complete rewritew/ new features!
- 77. ● Fragments ● errorboundaries ● Portals ● support for custom DOM attributes ● reduced file size https://reactjs.org/blog/2017/09/26/react- v16.0.html React 16
- 78. ● Dramatic improvementsto build times ● New code splitting algorithm ● New first-class support for lazy-loading CSS chunks. webpack 4
- 79. Babel helps ensurethe 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.
- 81. Query for datain components with <StaticQuery /> How can I query for data in my components? Now you can with <StaticQuery /> component
- 82. Improvements to gatsby- plugin-offline Bugfixes & handles more edge cases
- 83.
- 84. Guess.js + Gatsby Data-drivenspeed improvements Use Analytics data + machine learning to speed prefetching data needed for the next click
- 85.
- 86.
- 87.
- 88. Upgrade to v2! MigrationGuide: https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/ Get Started: https://www.gatsbyjs.org/docs/
- 89.