Post on 30-Jul-2018
transcript
Photons Be Free!The State of Fauxton
2015
ApacheCon: Core Corinthia Hotel Budapest, Hungary
October 2015
Michelle PhungApache 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, 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
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
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