Creating Hyper Performant Web Apps with React
1 like153 views
The document discusses creating high performing web apps with React. It emphasizes reliability over speed, noting that reliability means the experience works under different circumstances like without JavaScript. It lists challenges to reliability like poor networks or outdated browsers. It recommends using HTML, CSS, and JavaScript responsibly, using HTML for initial content delivery and JavaScript for interactivity. Server-side rendering with Node.js is suggested to deliver meaningful initial HTML with React components for both reliability and SEO. Caching techniques like versioning assets are also recommended to improve performance.
Creating Hyper Performant Web Apps with React
- 1. ⚡ Creating Hyper Performant Web Apps with React 🌏🌐🌍🌐🌎
- 2. What is Performance? • As an industry, we misuse the word “performance” as an analogy for speed • There is no Speed in Web Performance • Web Performance has more to do with reliability than it does speed • But don’t worry, we’ll talk about speed too performance: performing a task or function ⁉
- 3. What is reliability? • Under what circumstances does your experience perform? • How reliable is your experience as raw HTML? • What happens when JavaScript breaks or is unavailable? (it happens 1.1% of the time) • Does your experience weather the storms of the web? 🤞
- 4. storms of the web • poor network connectivity 📵 • outdated browsers 👾 • conflicts with browser plugins 😔 • firewalls 🔥 • unreachable CDNs 👋 • uncaught errors ⁉ ⛈
- 5. the www Authoring the world–wide web is a great power. With it comes a responsibility to strive for experiences that can be accessed anywhere by anyone 🌐
- 6. The Front End “stack” • HTML provides us with reliability, optimal delivery, and accessibility • CSS allows us to style our documents • JavaScript enhances our documents by adding asynchronous features • Use the stack responsibly. Use the right tool for the right job. It is no more appropriate to use HTML for styling (ew) than it is to use JavaScript to deliver initial content. 🛠
- 7. The Back End “stack” • Node is awesome • Node is far and away the most well suited back end stack for isomorphic progress enhancement • With a Node backend, we can serve meaningful initial HTML content from the same JavaScript source files used on the front end (React components) 🛠
- 8. delivering content • Sending content initially as part of a semantic HTML document is the quickest and most reliable way to deliver it to web users ⚡ • Content first delivery is best practice for a great SEO score 📈 • Do not use JavaScript to initially deliver content • But how do we do that with React? 📑
- 9. Markup.Tips • Only load polyfills if needed (fail feature detection) • Don’t bundle common libraries and framework in your app.js. Seriously, just don’t • Leverage the Browser Cache, expiry headers • Cache bust assets w/ version # or hash (app.1.2.0.min.js) • Use Sass silent classes to keep CSS weight down ⚡
- 10. Time for Coding • Get started with this Glitch, the front end code of a simple React component • Test the Glitch without script. Notice it cakes its pants • Remix this Glitch and follow along as we add server side rendering • Appendix: final working source code 🤓