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
• ne 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

Fauxton Futon

How to Contribute

github repo: apache/couchdb-fauxton

Thank You!