Photons Be Free! The State of Fauxton 2015 Photons Be Free! The - PowerPoint PPT Presentation

Photons Be Free! The State of Fauxton 2015

Photons Be Free! The State of Fauxton 2015 ApacheCon: Core Corinthia Hotel Budapest, Hungary October 2015

Michelle Phung Apache Software Foundation Committer michellep@apache.org CouchDB Fauxton (Admin Console UI) IBM Cloudant (Dashboard UX Engineer) Originally from San Francisco, California

What do I do for the ASF? • Daily: • I fix bugs and build features using Javascript, BackboneJS, ReactJS, for CouchDB (Fauxton) • Meta: • I study Data Visualization and UI interactions • Moderator for design@couchdb.apache.org

design@couchdb.apache • NEW!!! • To subscribe to the list, send a message to: <design-subscribe@couchdb.apache.org • Mailing list for Designers & design enthusiasts! • Coming soon: space to showcase design

Intentions for design@couchdb • In engineering school, I always loved how we shared our ideas with one another • One engineer would have an idea, share it with the group, then another engineer would suggest improvements, and another, and another. The seed of an idea would proliferate. • We became better engineers through openness and sharing • I wanted to bring this type of camaraderie to the design community • warning: “but designing by consensus takes forever!” • good news: software takes forever!!

CouchDB • NoSQL database system • Document store (JSON documents) • HTTP RESTful API to access database • Replications

Fauxton

Fauxton, a database UI • Tool for interacting with CouchDB • Provides insight - used as debugging tool • A visualization of your databases • Clarifies database actions through UI design • Teaches new people the structure of CouchDB

How does an administrative console help people learn CouchDB? • API, clear concept (GET/POST/PUT/DELETE) • Creates a mental model for information hierarchy • Visual Information is universal • UX is inviting

The State of Fauxton, 2015 • Currently gearing up for eminent release of CouchDB 2.0!! • Conversion of code base from - BackboneJS to ReactJS • NightwatchJS, automated UI browser testing

The Code, Dev Stack • Grunt Newer Libraries: • ReactJS Older Libraries: • Backbone , jQuery , Bootstrap Always: • Javascript , Less (CSS) , UnderscoreJS

The Code, testing • How we test • Travis - Continous Integration • Sinon/Mocha - Unit tests • NightwatchJS - automated browser testing

NightwatchJS + Fauxton

Other Fauxtons PouchDB - Chrome Debugging Console IBM Cloudant UI - Primary Admin UI

Fauxton

PouchDB

Cloudant

Part 2: UX, UI and Designing for Engineers • Visual Communications • people grasp concepts faster when data is presented visually • working with large amounts of data: • what if you could visualize it? test it? • preview changes? “what happens when …” ?

Recommendations for UX Improvement • Responsive Design - http://mediaqueri.es/ • End-User programmable UI • Keyboard Shortcuts

Responsive Design http://mediaqueri.es/

What do engineers want from UI? • Clear what controls are input and output • Clear how to achieve desired output • Robust / fine-grained controls • Bulk of information presented at once • Overview monitoring • Ability to quickly scan is important

Futon Fauxton

How to Contribute github repo: apache/couchdb-fauxton

Thank You!