Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React + Charts

163 views

Published on

React + Charts talk 9/23/2017

Published in: Software
  • Be the first to comment

  • Be the first to like this

React + Charts

  1. 1. REACT + CHARTS, WITH AND WITHOUT LIBRARIES CHRISTINA HOLLAND
  2. 2. ABOUT ME CHRISTINA HSU HOLLAND ▸ BS in Molecular and Cell Bio ▸ Animator for 10 years ▸ Bootcamp (Hack Reactor) ▸ Front-end Engineer at Pepperdata ▸ 1 open source contribution (I’m very proud)
  3. 3. WHY CHARTS IN REACT WHY CHARTS IN REACT? ▸ There comes a point in everyone’s life when you need charts. ▸ Some charts are the star of the page (NYT Graphics, etc.) but many are just one component of a page. ▸ React and other frameworks organize components neatly. One control center to manage charts and everything else.
  4. 4. WHY CHARTS IN REACT Stephanie Yee & Tony Chu http://www.r2d3.us/ FANCY WHOLE PAGE CHART (D3)
  5. 5. WHY CHARTS IN REACT REACT PAGE WITH MANY CHART COMPONENTS
  6. 6. CHARTING OPTIONS CHARTING OPTIONS ▸ Should I use a charting library, and what kind? ▸ Which browser drawing API should I use?
  7. 7. CHARTING OPTIONS WHICH CHARTING LIBRARY (IF ANY)? custom standard Roll Your OwnLow Level Libraries High Level Libraries
  8. 8. API OPTIONS WHICH BROWSER DRAWING API? regular html SVG canvas WebGL (divs and such) (vector-based DOM elements) (raster-based) (super-low-level) declarative imperative hello
  9. 9. CHARTING OPTIONS FULL PALETTE OF CHOICES REGULAR HTML SVG CANVAS WEBGL LOW LEVEL LIBS HIGH LEVEL LIBSDO IT YOURSELF hello
  10. 10. LIBRARY OPTIONS LET’S TALK LIBRARY OPTIONS custom standard Roll Your OwnLow Level Libraries High Level Libraries
  11. 11. LIBRARY OPTIONS HIGH-LEVEL LIBRARIES
 FOR STANDARD CASES ▸ Examples: Highcharts (right), Flot, C3, NVD3, Plotly, etc. ▸ There are even React-specific libraries, e.g. Victory, Recharts ▸ No need to waste time reinventing the wheel.
  12. 12. LIBRARY OPTIONS LOW-LEVEL LIBRARIES FOR FLEXIBILITY ▸ Examples: D3 dominates. ▸ Gives you “power tools” to create complex interactive and animated data visualizations. http://www.redotheweb.com/CodeFlower/ François Zaninotto
  13. 13. LIBRARY OPTIONS WHEN TO ROLL YOUR OWN CHARTS ▸ Concept not standard enough for a high-level library ▸ Don’t need power of D3 (animation, math helpers)
  14. 14. API OPTIONS EXAMPLE: ROLL YOUR OWN SVG CHART ▸ Blue = running tasks, purple = tasks waiting to run ▸ “Tasks now” is not a standard chart library format but also isn’t very complex to build manually. SVG (MANUAL) SVG (D3)
  15. 15. LIBRARY OPTIONS WHEN TO ROLL YOUR OWN CHARTS (CONT.) ▸ Chart interacts with other things on the page ▸ (More about library/React integration troubles later!) ▸ To minimize dependencies (therefore bundle size & maintenance worries) ▸ Learn some web graphics fundamentals!
  16. 16. API OPTIONS LET’S TALK BROWSER DRAWING APIS regular html SVG canvas WebGL (divs and such) (vector-based DOM elements) (raster-based) (super-low-level) declarative imperative hello
  17. 17. API OPTIONS BASIC HTML ELEMENTS Mostly divs
  18. 18. API OPTIONS EXAMPLE: ROLL YOUR OWN PLAIN DIVS ▸ Great when your chart is just rectangles. ▸ Tip: X/Y axes are annoying as hell, you may want to use a library instead of reinventing the wheel badly (as I did here).
  19. 19. API OPTIONS BASIC HTML ELEMENTS: STRENGTHS & WEAKNESSES ▸ First-class support in React! ▸ Interactivity and accessibility are much simpler. ▸ HTML was born to do text. ▸ You can only draw rectangles (maybe circles and triangles if you’re creative)! ▸ Thousands of DOM elements will choke performance.
  20. 20. API OPTIONS SVG (SCALABLE VECTOR GRAPHICS) A bunch of shapes that are DOM elements
  21. 21. API OPTIONS SVG (SCALABLE VECTOR GRAPHICS) https://www.w3schools.com/graphics/svg_examples.asp
  22. 22. API OPTIONS SVG: STRENGTHS & WEAKNESSES ▸ Each item is a DOM element, can be recognized by React and incorporated into virtual DOM diffing. ▸ Selection and mouse events are easy. Accessibility is doable, but may take some extra effort. ▸ Text is more bothersome than with divs (positioning),
 less bothersome than with canvas. ▸ They are DOM elements, so large numbers = performance issues.
  23. 23. API OPTIONS SVG 5 minutes
 to render
  24. 24. API OPTIONS CANVAS A JavaScript-driven Microsoft Paint window ~10 seconds
 to render
  25. 25. API OPTIONS CANVAS https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API#Example
  26. 26. API OPTIONS CANVAS: STRENGTHS & WEAKNESSES ▸ You can draw as many “items” as you like - they are not stored as individual objects in memory but just pixels. ▸ Canvas has no awareness of different “elements” after they’re drawn, which makes interaction tricky. ▸ Canvas draw commands are imperative, nothing inside a <canvas> is recognized by React. You need to manually track its state and handle when to render/update. ▸ Text is just pixels, so no font optimization.
  27. 27. API OPTIONS EXAMPLE: CANVAS MINIMAP CANVAS DIVS
  28. 28. API OPTIONS WEBGL Web GOOD LUCK (Web Graphics Library) - low-level power PhiloGL LIBRARY Luz Caballero AUTHORS Nicolas Garcia Belmonte
  29. 29. API OPTIONS WEBGL https://threejs.org/examples/#webgl_geometry_cube (using three.js library)
  30. 30. API OPTIONS WEBGL: STRENGTHS & WEAKNESSES ▸ You can pretty much draw anything you can imagine, 2D or 3D. ▸ Best performance. ▸ Same drawbacks as canvas. ▸ It can be very challenging to work with. Even its abstractions (Three.js) tend to be relatively low level. ▸ Overkill for most common cases.
  31. 31. LIBRARY + REACT CONFLICTS LIBRARY + REACT CONFLICTS ▸ Library charts often can only be modified through custom API. ▸ Charting libraries often built with one-way flow in mind. ▸ Charting libraries manipulate the DOM outside of React. ▸ Can be mitigated/avoided by a React library wrapping the charting library. (Inception!)
  32. 32. LIBRARY + REACT CONFLICTS WORKING AROUND LIMITED LIBRARY APIS FLOT LIBRARY CUSTOM DIV TIMELINE REACT TABLE (CANVAS-BASED)
  33. 33. LIBRARY + REACT CONFLICTS MODIFYING REACT COMPONENTS IS EASY ▸ Table and timeline are standard React HTML components. ▸ Very easy for each one to report events up to a shared state, and very easy to read changes in that state and change its own appearance.
  34. 34. LIBRARY + REACT CONFLICTS MODIFYING LIBRARY CHARTS CAN BE TRICKY ▸ We cheat to “highlight” the Flot chart by rendering an absolute positioned area extending from the timeline.
  35. 35. LIBRARY + REACT CONFLICTS WORKING AROUND ONE-WAY FLOW APP CHARTING
 LIBRARY 0 50 100 APRIL JUNE 0 50 100 APRIL JUNE CHARTING
 LIBRARY APP ? Article2
 70 views
  36. 36. LIBRARY + REACT CONFLICTS WORKING AROUND ONE-WAY FLOW CANVAS DIVS FLOT
  37. 37. LIBRARY + REACT CONFLICTS WORKING AROUND ONE-WAY FLOW ▸ The way our code was set up, it was easy to add some global behaviors on hovering on a Flot series, but more cumbersome to add behaviors on the fly (like passing in a method to change React state). ▸ A global variable on the window is “above” React and Flot and accessible by both, but… global variables! No! ▸ We bypassed it by having Flot’s selection callback trigger a CustomEvent (a browser API), which React listens for.
  38. 38. LIBRARY + REACT CONFLICTS WORKING AROUND DOM MANIPULATION CONFLICTS ▸ There’s a lot of talks and articles out there about getting React to work with D3. There’s a reason for that.
  39. 39. LIBRARY + REACT CONFLICTS WORKING AROUND DOM MANIPULATION CONFLICTS ▸ D3 modifies the DOM (like jQuery). Most use cases of charting libraries require both calculating and drawing. ▸ DOM modifications outside of React can confuse and anger React.
  40. 40. LIBRARY + REACT CONFLICTS WORKING AROUND DOM MANIPULATION CONFLICTS ▸ Approach 1: Charting library draws. “Black box” components. Only the container of the chart is defined in React. Everything inside is created/deleted by the charting library. Harder for React to know what’s going on inside. ▸ Approach 2: React draws. Use library for computation only (e.g., use D3 to calculate “d” string for SVG <path>). Define all SVG elements in JSX and set relevant attributes (like “d”) generated by charting library. Lose out on a lot of automated drawing. (Only works for SVG or HTML)
  41. 41. LIBRARY + REACT CONFLICTS AVOIDING DOM MANIPULATION CONFLICTS ▸ Approach 3: React-based libraries. These do mostly Approach 2 (React draws) but the library takes care of it for you. Examples: Victory, Recharts (they both wrap D3). ▸ But where is the joy of discovery ▸ But maybe it’s more important to get a robust working product out in a timely manner
  42. 42. LIBRARY BENEFITS GENERAL LIBRARY BENEFITS ▸ Easy axes. ▸ Quickest way to do standard chart types (high level libs). ▸ Solves problems (conflicts with React, canvas interaction issues) you may not have even known about before this talk. ▸ Tested.
  43. 43. CONCLUSION WHICH BOX(ES) ARE RIGHT FOR YOU? REGULAR HTML SVG CANVAS WEBGL LOW LEVEL LIBS HIGH LEVEL LIBSDO IT YOURSELF hello
  44. 44. CONCLUSION (THIS IS US) REGULAR HTML SVG CANVAS WEBGL LOW LEVEL LIBS HIGH LEVEL LIBSDO IT YOURSELF hello
  45. 45. CONCLUSION CONTACT ▸ Christina Holland (@americanwombat) (hsubox@gmail.com) ▸ Company: www.pepperdata.com

×