Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building High Performance React Applications

Building High Performance React Applications

React is built with performance in mind. But when is React slow? In this talk we’ll discuss common bottlenecks in React and when you might be making your program work harder than it should. We will discuss how Best Buy builds components that stay fast, even during the enormous stress of Black Friday traffic. You will learn practical ways to speed up your real world React applications today.

This workshop is for developers curious to learn how to make high performance React applications. You may or may not have already used React, but to get most out of the talk, you should be familiar with the basics of JavaScript.

Joe Karlsson

August 09, 2018
Tweet

More Decks by Joe Karlsson

Other Decks in Programming

Transcript

  1. 40% OF USERS ABANDON AN ARTICLE IF IT DOESN'T LOAD

    AFTER SIX SECONDS - DANNY BERNSTEIN, GOOGLE
  2. OPTIMIZING
 ON THE CLIENT ‣ SIMPLER THAN OPTIMIZING ON THE

    SERVER ‣ YOU SEE IMMEDIATE RESULTS ‣ MORE "BANG FOR YOUR BUCK"
  3. class Item extends Component { shouldComponentUpdate(nextProps, nextState) { if (this.props.title

    !== nextProps.title) { return true; } return false; } render() { return <h3>{ this.props.title }</h3> } };
  4. class Item extends Component { shouldComponentUpdate(nextProps, nextState) { if (this.props.title

    !== nextProps.title) { return true; } return false; } render() { return <h3>{ this.props.title }</h3> } };
  5. MEMORY REGISTERS Object 1 OBJECT 1 Foo Bar Baz Thud

    Grunt Object 2 OBJECT 2 Lorem Ipsum
  6. MEMORY REGISTERS Object 1 OBJECT 1 Foo Bar Baz Thud

    Grunt Object 2 OBJECT 2 Lorem Ipsum
  7. MEMORY REGISTERS Object 1 OBJECT 1 Foo Bar Baz Thud

    Grunt Object 2 OBJECT 2 Lorem Ipsum
  8. ‣ BUILD FOR ⚡ PRODUCTION ⚡ ‣ ANALYZE WEBPACK BUNDLE

    ‣ RENDER WHEN REALLY NEEDED ‣ MAKE IT WORK, THEN MAKE IT FAST
  9. ‣ BUILDING HIGH PERFORMANCE REACT APPLICATIONS DEMO PROJECT [GITHUB] ‣

    WEBPACK BUNDLE ANALYZER [NPM] ‣ OPTIMIZING PERFORMANCE [OFFICAL REACT DOCS] RESOURCES