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