Firebase and React + d3:
WEEKEND LEARNINGS
from
🍐 A Pair Feedback 🍐 Visualizer
maria Schreiber
What I'll be Sharing
- Inspiration / the problem
- Walk-through
-
How I built it / challenges
- Firebase
- React
- D3
- Summary
- What next?
Inspiration / the problem
- Feedback fed to an algorithm
- Those who could benefit from it most never get it!
Here it is!
How I built it
Firebase
Why it was great for my hack:
- BaaS -- no need to manage servers, APIs, or data store
- JSON data store -- no need for an ORM
- Minimal set-up -- great for prototyping/hacks!
What it was not great for my hack:
- Database is realtime by default (everything is hooked up to the cloud through web socket)
REACT + D3
React
Addresses inefficient updating by using a virtual DOM
REACT + D3
D3
Allows you to bind arbitrary data to the DOM, using a select. enter, exit, and update pattern
- D3 modifies the actual DOM
- React modifies its virtual DOM
- When React re-renders a node of the actual DOM, D3 modification are lost or cause bugs
Inspiration / the problem
Approach 1
Approach 2
Approach 3
- React takes care of display
- D3 takes care of the math
Pros
- Difficult integrations are taken care of for you
Cons
- Limited customizability
Winner: approach 3
Great for me:
- Did not have any D3 code pre-written
Customizability issues:
- E.g. Tooltip
Summary / Outcomes
Issues
- NPM modules are not as customizable as true D3
- It's difficult to get people to give feedback as it is
Technical learnings
- Firebase!
- React and D3 can play nice together,
and there's many ways to make it happen
What next ?
- Play with react-d3-radar src code
- Integration
- Data Management with cloud functions