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

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!