Hosted by Thinkful

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
🤓