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”.
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..
• 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
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
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
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
• 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
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
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
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
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
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
know if your optimizations are better, and you certainly won’t know if they make things worse! ForwardJS 2018 | React Optimization: Toolings and Techniques
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
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
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
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
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
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
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
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
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
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
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”
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
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
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!!”
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
tends to forget this when they develop with React …” ForwardJS 2018 | React Optimization: Toolings and Techniques Mary asked with curiosity: “What is that ?”
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
iroy2000
ttskch
javiergs
h0r15h0
tucksaun
makihiro
iwatatomoya
yoshifumi_ishikura
chiroruxx
stoneream
riku929hr
chrisbanes
tasuku43
jnunemaker
lara
rmw
ufuk
chriscoyier
tammyeverts
wjessup
orderedlist
csswizardry
trallard
mojombo
jeffersonlam
