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

React Native and D3 Workshop

React Native and D3 Workshop


Harry Wolff

January 19, 2017


  1. React Native, SVG, and D3 hswolff @hswolff

  2. Harry Wolff Senior UI Engineer @ MongoDB.com Blog @ hswolff.com

    Twitter @ hswolff GitHub @ hswolff
  3. What do I know about React Native?

  4. Chartbeat iOS http://blog.chartbeat.com/2016/04/07/say-hello-to-the-all-new-chartbeat-ios-app/

  5. None
  6. React Native D3JS D3JS and React Native Project

  7. Exercise

  8. Exercise 1 Let’s install some prerequisites. https://facebook.github.io/react-native/docs/ getting-started.html Everything up

    to “Testing your React Native Installation” section.
  9. What is React Native?

  10. A framework for building native apps with React

  11. React Native is built on top of React

  12. None
  13. None
  14. None
  15. None
  16. How does this work?

  17. React Native …creates a bridge between JavaScript and Native Code

    (iOS / Android) …and handles passing information between the two environments More details: http://tadeuzagallo.com/ blog/react-native-bridge/
  18. How is React Native different than React?

  19. JavaScript Environment

  20. No DOM

  21. React Native Packager https://github.com/facebook/react- native/tree/master/packager

  22. npm friendly

  23. Exercise

  24. Exercise 1 1. You should have node, watchman, and either

    Xcode or Android Studio installed. 2. Install React Native CLI: npm install -g react- native-cli 3. react-native init ReactNativeAndD3Workshop 4. cd ReactNativeAndD3Workshop/ 5. react-native run-ios (or react-native run-android)
  25. Exercise 1

  26. What is SVG?

  27. SVG XML-based vector image format

  28. SVG • XML: markup language • Human and machine readable

    • Vector image: use of polygons to represent images • Can be resized without losing quality
  29. SVG Elements • Root element: SVG • Creates an SVG

    fragment, own viewport and coordinate system • Graphic elements: <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use>
  30. Exercise

  31. Exercise 2 https://codepen.io/hswolff/pen/ZLpgzy

  32. SVG <path> https://developer.mozilla.org/en-US/docs/Web/SVG/ Tutorial/Paths “Paths create complex shapes by combining

    multiple straight lines or curved lines” “The shape of a path element is defined by one attribute: d.”
  33. SVG <path> Create graphics using line commands Move to x

    10, y 10 Horizontal line of 90 Vertical line of 90 Horizontal line of 10 Line to x 10, y 10
  34. SVG <path>

  35. What is D3JS?

  36. “a JavaScript library for manipulating documents based on data” https://d3js.org/

  37. “D3 helps you bring data to life using HTML, SVG,

    and CSS.” https://d3js.org/
  38. https://d3js.org/

  39. D3 4.0 Now Modular

  40. None
  41. None
  42. d3-scale https://github.com/d3/d3-scale “Continuous scales map a continuous, quantitative input domain

    to a continuous output range.” Continuous Scales “Given a value from the domain, returns the corresponding value from the range.”
  43. d3-scale https://github.com/d3/d3-scale

  44. d3-scale https://github.com/d3/d3-scale “Time scales are a variant of linear scales

    that have a temporal domain: domain values are coerced to dates rather than numbers" Time Scales
  45. d3-scale https://github.com/d3/d3-scale

  46. d3-shape https://github.com/d3/d3-shape

  47. d3-shape https://github.com/d3/d3-shape “line generator can then be used to compute

    the d attribute of an SVG path element”
  48. d3-shape https://github.com/d3/d3-shape

  49. d3-shape https://github.com/d3/d3-shape

  50. Exercise

  51. Exercise 3 https://codepen.io/hswolff/pen/qRaGOE

  52. Exercise 3 Answer https://codepen.io/hswolff/pen/egdqbL

  53. How does D3JS work with React Native?

  54. ART https://github.com/sebmarkbage/art “ART is a retained mode vector drawing API”

  55. ART https://github.com/sebmarkbage/art

  56. ART https://github.com/sebmarkbage/art

  57. React ART https://github.com/reactjs/react-art “React ART is a JavaScript library for

    drawing vector graphics using React.” “It provides declarative and reactive bindings to the ART library.”
  58. React ART https://github.com/reactjs/react-art

  59. React Native ART https://github.com/facebook/react-native/tree/master/

  60. None
  61. Exercise

  62. Exercise 4 Let’s get React Native ART working!

  63. Link ART https://facebook.github.io/react-native/docs/linking- libraries-ios.html#manual-linking

  64. Exercise 4 Link React Native ART: http://facebook.github.io/react- native/docs/linking-libraries-ios.html $ open

    node_modules/react-native/Libraries/ART $ react-native run-ios
  65. Exercise 4 Use the React Native ART Component

  66. Exercise 4

  67. Exercise 4

  68. Exercise 4

  69. Project

  70. None
  71. None
  72. index.ios.js js/ Page.js Graph.js Part 1: App structure

  73. index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js Part 2: Graph

  74. index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js Part 3: X Axis

  75. index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js Part 4: Y Axis

  76. index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js ControlButton.js Part 5: Buttons

  77. index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js ControlButton.js Part 6: Animate!

  78. Full featured app

  79. None
  80. Open Sourced https://github.com/hswolff/ BetterWeather

  81. Resources https://speakerdeck.com/hswolff/react-native- and-d3js https://d3js.org/ http://hswolff.com/blog/react-native-art-and-d3/ https://github.com/hswolff/BetterWeather

  82. React Native, SVG, and D3 hswolff @hswolff https://speakerdeck.com/hswolff/react-native-and-d3js