HTML5 Tree
Differences from flash tree
- No Flash required; built on HTML5 standards
- Built on top of our very well-documented API
- Works in all modern browsers: mobile, desktop, refrigerator, etc.
- Not feature-complete as compared to the Flash tree
Adoption
- Only entry points are link on the "No Flash Installed" page and on the Profile of the Day blog post
- Steady increase in usage since release, now averaging about 2,100 pageviews/day
What's left?
- Transfer features from Flash tree to HTML5 Tree, weeding out unused features along the way, which include:
- Full-fledged Add Node and Edit Card
- Increases in API speed; eg. returning partial layouts for large trees, caching positions for trees which don't change often, etc.
- Define the look and feel, and enhance the UI
Technologies Used
- Front-end powered by Backbone.js
- Back-end powered by Geni API (nearly 100% modular from main Geni app)
- Kinetic dragging powered by Geni open source javascript library called Pep
- Uses standard Javascript libraries like jQuery and Modernizr
- Ajax used for all communication with back-end
- Tree movement powered by CSS3 translate function
- HTML5 is fully responsive
DEMO
geni html5 tree
By briangonzalez
