$30 off During Our Annual Pro Sale. View Details »

React App Optimization - Toolings and Techniques ( ( ForwardJS 2018 )

Roy Yu
March 22, 2018

React App Optimization - Toolings and Techniques ( ( ForwardJS 2018 )

React App Optimization - Toolings and Techniques ( ( ForwardJS 2018 )

Roy Yu

March 22, 2018
Tweet

More Decks by Roy Yu

Other Decks in Programming

Transcript

  1. View Slide

  2. WHO AM I ?
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  3. JOURNEY BEGINS …
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  4. JOURNEY BEGINS …
    ForwardJS 2018 | React Optimization: Toolings and Techniques
    Here is Ben
    • He has been using React for about a year.
    • Performance is his passion ¯\_(ツ)_/¯
    • He just don’t have much about HOW

    View Slide

  5. JOURNEY BEGINS …
    ForwardJS 2018 | React Optimization: Toolings and Techniques
    Here is Mary
    • She is Ben’s manager.
    • She cares about number, and she thinks the first priority of Ben is to
    help business build more products.
    • Whenever Ben says he wants to investigate performance issue, Mary
    translates it as “I want to take a few days off and do nothing”.

    View Slide

  6. SO … THE FIRST STEP
    ForwardJS 2018 | React Optimization: Toolings and Techniques
    As developer, we need to understand NOT JUST the techniques of tuning performance. We also
    need to understand the REASON behind our actions and inspire others to care about
    performance as well..

    View Slide

  7. HOW TO TALK TO YOUR MANAGER 101
    PERFORMANCE IS IMPORTANT
    • Performance > Impact User Experience > Impact YOUR Revenue
    • SEO ranking makes performance a contributing factor
    • Mobile usage is more than ever, but everything will be slower in mobile
    • Lead to failure of marketing campaign as well as losing your product insight
    • Impact branding and losing customer loyalty
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  8. HOW TO TALK TO YOUR MANAGER 101
    PERFORMANCE IS IMPORTANT
    Studies show in 2012 by Econsultancy, 74% of mobile users will abandon the site
    if it takes more than 5 seconds to load
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  9. HOW TO TALK TO YOUR MANAGER 101
    PERFORMANCE IS IMPORTANT
    Up to 79% of customers who are dissatisfied with a website's performance
    say they're less likely to buy from the same site again.
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  10. HOW TO TALK TO YOUR MANAGER 101
    PERFORMANCE IS IMPORTANT
    Amazon found that every 100 milliseconds of downtime
    cost them 1% in sales
    Google found that an extra 0.5 seconds in search page generation time
    dropped site traffic by 20%
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  11. HOW TO TALK TO YOUR MANAGER 101
    PERFORMANCE IS IMPORTANT
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  12. HOW TO TALK TO YOUR MANAGER 101
    PERFORMANCE IS IMPORTANT
    • Performance > Impact User Experience > Impact YOUR Revenue
    • SEO ranking makes performance a contributing factor
    • Mobile usage is more than ever, but everything will be slower in mobile
    • Lead to failure of marketing campaign , because you lost your product insight
    • Impact branding and losing customer loyalty
    Performance will impact business
    The above list is not exhaustive, you can always MAKE UP your own
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  13. BUT WAIT …
    ForwardJS 2018 | React Optimization: Toolings and Techniques
    Mary said:
    “Isn’t React is very fast out of the box?
    So now you said it is NOT??”

    View Slide

  14. MYTH OF REACT IS VERY FAST …
    What React helps is the virtualDom and reconciliation process that removed expensive DOM
    operation.
    • If you are doing simple application, you probably don’t need to think about performance.
    • But you need to realize the React state will be more complicated accordingly based on your
    application complexity which will impact the reconciliation process.
    • How about your business logic? It is also out of reach of React but also contributed to the
    complexity of your application.
    But let’s define what FAST means …
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  15. WHAT FAST MEANS ?
    • Fast load speed
    – How to make your assets load faster on client
    • Smooth User interaction
    – How to make sure you are not wasting render cycle and block UI thread
    • User perceived experience
    – How to make sure user feel your application is fast enough
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  16. WHAT FAST MEANS ?
    • In general, fast is a relative term. You should ask
    – How does my customer define “fast”
    – How does my company define “fast”
    – How do I define ”fast”
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  17. WHAT FAST MEANS ?
    • In general, fast is a relative term. You should ask
    – How does my customer define “fast”
    – How does my company define “fast”
    – How do I define ”fast”. (No people will care this one)
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  18. DATA, DATA, DATA
    • We shouldn’t treat optimization a “guessing” game, in order for us to understand what is
    going on, we need data to give us insight
    Data > Knowledge > Insight > Perform Informed Actions
    In short, we need ways to measure
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  19. DATA, DATA, DATA
    If you aren’t measuring, you can’t even know if your
    optimizations are better, and you certainly won’t know if
    they make things worse!
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  20. DISCLAIMER: REACT FOCUS ONLY
    • Today we will be focusing on performance optimization specific ONLY to React
    • There are a lot of useful information about optimization strategies, like using CDN, turning on
    GZIP … etc. But since it is not React specific, those will NOT cover in this presentation.
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  21. TOOLINGS FOR OPTIMIZATION
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  22. TOOLINGS FOR OPTIMIZATION
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  23. TOOLINGS 4 DEVELOPMENT
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  24. TOOLINGS 4 DEVELOPMENT
    • React Devtool
    One of the cool feature it has for
    performance is it allows highlighting in
    UI when components are updating.
    React DevTool will give color
    annotation to indicate the frequency of
    the updates.
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  25. TOOLINGS 4 DEVELOPMENT
    • Chrome DevTool with React 16
    ( development mode )
    React 16 in development mode
    creates “mark and measure” events
    which allows you to audit
    application performance in
    component level.
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  26. TOOLINGS 4 DEVELOPMENT
    • Why did you update
    This tool notifies you in the console
    when potentially unnecessary re-
    renders occur.
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  27. TOOLINGS 4 ARTIFACTS
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  28. TOOLINGS 4 ARTIFACTS
    • Babel React Optimize plugin
    – A Babel preset and plugins for optimizing
    React code for production.
    – Hoisting React elements to higher scope
    to speed up reconciliation and reduce
    garbage collection
    – Remove prop type checks to reduce
    overhead
    – Convert your stateless class into stateless
    function
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  29. TOOLINGS 4 ARTIFACTS
    • Webpack Bundle Analyzer
    This tool generate a visualization from your
    bundle meta data, which helps you to
    • Realize what's really inside your bundle
    • Find out what modules make up the most of
    its size
    • Find modules that got there by mistake
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  30. TOOLINGS 4 ARTIFACTS
    • React Loadable
    This tool ( a React component ) provides
    an interface that makes component centric
    code splitting as easy as possible. This will
    allow you to separate your expensive
    component out, and support lazy loading
    and Above the Fold optimization.
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  31. TOOLINGS 4 USER EXPERIENCE
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  32. TOOLINGS 4 USER EXPERIENCE
    • WebPageTest
    This tool tests your web page’s loading time
    and allow you to choose multiple locations
    around the world using different browsers like
    IE, Firefox, Safari. And it will give out detail
    information about your web performance.
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  33. TOOLINGS 4 USER EXPERIENCE
    • SiteSpeed.io
    This tool, composed of multiple open source
    project, makes it easy to monitor and
    measure the performance of your web site,
    and allow you to have full control of your
    metrics.
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  34. TOOLINGS 4 USER EXPERIENCE
    • GTMetrix
    GTmetrix's Report Page neatly
    summarizes your page performance based
    off key indicators of page load speed.
    Analyze your page with Google
    PageSpeed andYahoo! YSlow rulesets.
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  35. DEMO TIME
    • Now you know the tools to measure and collecting your application performance data.
    • Also remember to create a baseline for future comparison. So next time when you claim that
    you site run faster, show me the data.
    Let’s DEMO – Using the tools we’ve just mentioned
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  36. IS THAT ALL ?
    ForwardJS 2018 | React Optimization: Toolings and Techniques
    Mary said:
    “Okay, so seems like everything is quite automated! Please setup this
    once and we are done, right?”
    Ben replied:
    “Not yet, performance is a practice, not just about tools, there are some
    best practice out there developers need to follow”

    View Slide

  37. DEVELOPERS DO’S AND DON’TS
    • DO’s
    – Always set your Node environment to “production” during deployment
    – Separate your application in meaningful chunks and load them on demand ( e.g. Above the Fold )
    – Import dependencies directly and only export things you need
    – Use PureComponent to minimize render() cycles ( if your props are primitives )
    – Use shouldComponentUpdate to prevent re-render a component when not necessary
    – Making data Immutable for easy diffing
    – Use normalized state if possible ( e.g. make component smart when needed )
    – Cache expensive computations ( e.g. localstorage, in-memeory cache, reselect )
    – Use Optimistic Update to fake instant feedback
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  38. DEVELOPERS DO’S AND DON’TS
    • Don’ts
    – Don’t assign JSX to variables, instead use stateless function
    – Avoid bind and inline functions inside render
    – Avoid passing in complex data structure as component property
    – Minimize direct mutating DOM operation at all
    – Avoid complicated logic in shouldComponentUpdate
    – Don’t use index as key when rendering a list
    – Don’t overuse setState() especially for something you don’t need in render()
    – Don’t load everything all at once, try lazy loading or code splitting
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  39. IS THAT ALL ?
    ForwardJS 2018 | React Optimization: Toolings and Techniques
    Ben finally inspired Mary how performance could impact business, how
    toolings can help in this process and common practice developers can
    follow. Because of her understanding of WHY, she now trust her
    developers to take care of the HOW and WHAT.
    Mary continued:
    “If it is impacting business, this will need to be part of development
    process. Let’s do some performance tuning NOW!!”

    View Slide

  40. NOT YET …
    Ben replied: “Not Yet!!”
    • We don’t need to do anything until we have evidence that there
    is a performance problem
    • Don’t optimize prematurely for performance
    • Because you might hurt code cleanness and introduce weird
    bugs while targeting the wrong things
    ForwardJS 2018 | React Optimization: Toolings and Techniques

    View Slide

  41. ONE MORE …
    Ben continued: “One last thing, nowadays developers
    tends to forget this when they develop with React
    …”
    ForwardJS 2018 | React Optimization: Toolings and Techniques
    Mary asked with curiosity: “What is that ?”

    View Slide

  42. ForwardJS 2018 | React Optimization: Toolings and Techniques
    The End

    View Slide

  43. QUESTION ?!
    ForwardJS 2018 | React Optimization: Toolings and Techniques
    https://iroy2000.github.io
    https://www.linkedin.com/in/iroy2000
    We are hiring!
    If you are interested in going deeper in React ecosystem, feel free to check out this repo
    https://github.com/iroy2000/react-redux-boilerplate

    View Slide