No content

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

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

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 

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”. 

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.. 

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 

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 

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 

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 

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

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 

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??” 

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 

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 

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 

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 

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 

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 

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 

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

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

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

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 

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 

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 

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

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 

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 

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 

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

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 

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 

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 

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 

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” 

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 

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 

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!!” 

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 

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 ?” 

ForwardJS 2018 | React Optimization: Toolings and Techniques The End 

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