React Native and D3 Workshop

Transcript

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