Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native and D3 Workshop
Search
Harry Wolff
January 19, 2017
Programming
1
420
React Native and D3 Workshop
Harry Wolff
January 19, 2017
Tweet
Share
More Decks by Harry Wolff
See All by Harry Wolff
Evergreen Legacy Applications
hswolff
1
580
Benchpress your Legacy Applications With React
hswolff
0
260
Reach for the Stars with Apollo
hswolff
0
170
React Native and D3JS
hswolff
3
9.8k
Going Native with React Native
hswolff
5
1.2k
From Closure To Angular
hswolff
0
3.7k
EmberJS Hacker Hours - Ghost
hswolff
0
190
Getting Hacking With Ghost
hswolff
0
220
Other Decks in Programming
See All in Programming
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
時計仕掛けのCompose
mkeeda
1
280
Featured
See All Featured
Unsuck your backbone
ammeep
669
57k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Side Projects
sachag
452
42k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
The World Runs on Bad Software
bkeepers
PRO
67
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Producing Creativity
orderedlist
PRO
343
39k
Embracing the Ebb and Flow
colly
84
4.6k
Transcript
React Native, SVG, and D3 hswolff @hswolff
Harry Wolff Senior UI Engineer @ MongoDB.com Blog @ hswolff.com
Twitter @ hswolff GitHub @ hswolff
What do I know about React Native?
Chartbeat iOS http://blog.chartbeat.com/2016/04/07/say-hello-to-the-all-new-chartbeat-ios-app/
None
React Native D3JS D3JS and React Native Project
Exercise
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.
What is React Native?
A framework for building native apps with React
React Native is built on top of React
None
None
None
None
How does this work?
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/
How is React Native different than React?
JavaScript Environment
No DOM
React Native Packager https://github.com/facebook/react- native/tree/master/packager
npm friendly
Exercise
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)
Exercise 1
What is SVG?
SVG XML-based vector image format
SVG • XML: markup language • Human and machine readable
• Vector image: use of polygons to represent images • Can be resized without losing quality
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>
Exercise
Exercise 2 https://codepen.io/hswolff/pen/ZLpgzy
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.”
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
SVG <path>
What is D3JS?
“a JavaScript library for manipulating documents based on data” https://d3js.org/
“D3 helps you bring data to life using HTML, SVG,
and CSS.” https://d3js.org/
https://d3js.org/
D3 4.0 Now Modular
None
None
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.”
d3-scale https://github.com/d3/d3-scale
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
d3-scale https://github.com/d3/d3-scale
d3-shape https://github.com/d3/d3-shape
d3-shape https://github.com/d3/d3-shape “line generator can then be used to compute
the d attribute of an SVG path element”
d3-shape https://github.com/d3/d3-shape
d3-shape https://github.com/d3/d3-shape
Exercise
Exercise 3 https://codepen.io/hswolff/pen/qRaGOE
Exercise 3 Answer https://codepen.io/hswolff/pen/egdqbL
How does D3JS work with React Native?
ART https://github.com/sebmarkbage/art “ART is a retained mode vector drawing API”
ART https://github.com/sebmarkbage/art
ART https://github.com/sebmarkbage/art
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.”
React ART https://github.com/reactjs/react-art
React Native ART https://github.com/facebook/react-native/tree/master/
None
Exercise
Exercise 4 Let’s get React Native ART working!
Link ART https://facebook.github.io/react-native/docs/linking- libraries-ios.html#manual-linking
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
Exercise 4 Use the React Native ART Component
Exercise 4
Exercise 4
Exercise 4
Project
None
None
index.ios.js js/ Page.js Graph.js Part 1: App structure
index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js Part 2: Graph
index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js Part 3: X Axis
index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js Part 4: Y Axis
index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js ControlButton.js Part 5: Buttons
index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js ControlButton.js Part 6: Animate!
Full featured app
None
Open Sourced https://github.com/hswolff/ BetterWeather
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
React Native, SVG, and D3 hswolff @hswolff https://speakerdeck.com/hswolff/react-native-and-d3js