Card UI Architecture Design

Thoughtworks NYC
Event Location
NYC Meteor Meetup
Meetup Organizer
Presentation Date
July 1, 2014
Building Embeddable JavaScript
Apps for Web and Mobile Devices
Chris Tse
Presented by
Follow @christse on Twitter
TECHNICAL TRACK
Card UI
Architecture
Design

View Slide

agenda
. 1. What are cards?
2. How to build them?
3. Why is this important?

View Slide

Cardmetaphor
What are cards?
Quick Recap

View Slide

Cardmetaphor
Google Now
On Mobile:
Apple Passbook Tinder Pinterest Facebook Paper
via @khoi

View Slide

Citia Storehouse Flipboard
Evernote Salesforce1 Cloud Magic
via @khoi

View Slide

On The Web:
Twitter Stack Exchange Vox
via @khoi
Cardmetaphor

View Slide

New MySpace Google+
Burger King / Rebel Mouse Pinterest Storify

View Slide

On The Desktop:
Windows 8 Os X
Cardmetaphor

View Slide

So, what makes something a ‘card’?

View Slide

SMALL
MEDIUM
LARGE
XL
Size

View Slide

To See
The gist
To Act
Upon it
To Make
Something
Power

View Slide

Cardmetaphor

View Slide

Have
Different
Sizes &
Powers
Cards

View Slide

Have
Different
Sizes &
Powers
Have
Different
structure &
Mixture
Containers
Cards

View Slide

Cards
Like Pinterest
Containers

View Slide

Cards
Like Pinterest
“Board”

View Slide

Cards
Like Pinterest
“Board”
Photo
Photo
Photo
Photo
Photo
Photo
Photo
Photo
Photo
Photo
Photo
Photo
Structure

View Slide

Cards
Like Facebook
“feed”
Video
Text
Photo Album
Ads
Events
Messages

View Slide

Cards
Like Google Now
“Stack”
Map
BOARDING PASS
WEATHER
NEXT APPOINTMENT
REMINDER

View Slide

Cards
Like Apple Passbook
“Stack”
United BOARDING PASS
AMC Movie Ticket
Starbucks Card
Target Coupon
Starwood Loyalty Card

View Slide

Cards
Like FlipBoard
“Collage”
Photo ALBUM
ARTICLE TWEET
VIDEO
IMAGE FACEBOOK POST
BLOG POST
ARTICLE
mixture

View Slide

Cards
Like Storify
“Page”
HEADLINE
VIDEO
TWEET
PODCAST
Text

View Slide

CardArchitecture
How to Build Them?

View Slide

Aren’t I already building ‘cards’?

View Slide

Aren’t I already building ‘cards’?
(Well, yes and no.)

View Slide

5 Levels of
Card Architecture

View Slide

Visualize
1
Modularize
2
Synthesize
3
Externalize
4
5 Levels of
Card Architecture Organize
5

View Slide

Visualize
1
Modularize
2
Synthesize
3
Externalize
4
5 Levels of
Card Architecture
This screen looks
like a card.
Organize
5

View Slide

Visualize
1
Modularize
2
Synthesize
3
Externalize
4
5 Levels of
Card Architecture
This screen looks
like a card.
I, the good
developer, am
reusing this card
as a component
in my app.
Organize
5

View Slide

Visualize
1
Modularize
2
Synthesize
3
Externalize
4
5 Levels of
Card Architecture
This screen looks
like a card.
I, the good
developer, am
reusing this card
as a component
in my app.
My app supports
multiple types of
cards for user to
create, edit, or
trigger actions.
Organize
5

View Slide

Visualize
1
Modularize
2
Synthesize
3
Externalize
4
5 Levels of
Card Architecture
This screen looks
like a card.
I, the good
developer, am
reusing this card
as a component
in my app.
My app supports
multiple types of
cards for user to
create, edit, or
trigger actions.
The user or the
system can turn
a piece of my
app into a card
or a widget and
embed it in
another app.
Organize
5

View Slide

Visualize
1
Modularize
2
Synthesize
3
Externalize
4
5 Levels of
Card Architecture
This screen looks
like a card.
I, the good
developer, am
reusing this card
as a component
in my app.
My app supports
multiple types of
cards for user to
create, edit, or
trigger actions.
The user or the
system can turn
a piece of my
app into a card
or a widget and
embed it in
another app.
Organize
5
The user, not you
the developer,
can mix and
match cards
from different
vendors, chain
them together,
to fit their
workflow.

View Slide

Visualize cards
1
Ionic Framework HTML+CSS
Look & Feel

View Slide

Visualize cards
1
famo.us
JavaScript + CSS 3D Transforms
Look & Feel

View Slide

Visualize cards
1
Google’s Material Design
Look & Feel

View Slide

Modularize cards
2
Look & Feel
Sandbox
+
Polymer by Google HTML + Web Components

View Slide

Modularize cards
2
Look & Feel
+
Polymer by Google HTML + Web Components
Sandbox

View Slide

Modularize cards
2
Look & Feel
Sandbox
+
Polymer by Google
HTML + Web Components
Shadow DOM
DOM
Sandbox

View Slide

Modularize cards
2
Look & Feel
Sandbox
+
Polymer by Google
Shadow DOM
DOM
Sandbox
Shadow DOM Sandbox
Shadow DOM Sandbox

View Slide

Modularize cards
2
Look & Feel
Sandbox
+
Polymer by Google
Shadow DOM
DOM
Sandbox
Hello!

 :host { display: block; position: relative; background-color: white; padding: 20px; width: 100%; font-size: 1.2rem; 

View Slide

DOM
Hello!
Modularize cards
2
Look & Feel
Sandbox
+
Polymer by Google
Shadow DOM Sandbox

 :host { display: block; position: relative; background-color: white; padding: 20px; width: 100%; font-size: 1.2rem; font-weight: 300; } 
!

horizontal center>

…

View Slide

DOM
Modularize cards
2
Look & Feel
Sandbox
+
Polymer by Google
Shadow DOM Sandbox

src="../images/avatar-07.svg">
Another Developer
I'm composing with shadow DOM


View Slide

Modularize cards
2
Look & Feel
Sandbox
+
Shadow DOM As Marked Up

View Slide

Modularize cards
2
Look & Feel
Sandbox
+
Shadow DOM As Rendered

View Slide

Modularize cards
2
Look & Feel
Sandbox
+
Leaky!
Leaks:
- CSS
- JavaScript

View Slide

Modularize cards
2
Look & Feel
Sandbox
+
Leaky!
Leaks:
- CSS
- JavaScript (!)
- Be nice, ok?

View Slide

Modularize cards
2
Look & Feel
Sandbox
+
Seamless Sandbox IFrame
You get:
- Your own real DOM
- Any JS Libraries
- Peace of Mind
HTML5 Spec

View Slide

Modularize cards
2
Look & Feel
Sandbox
+
Seamless Sandbox IFrame HTML5 Spec
 

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');
!
var clickHandler = function(){
// iframe.contentWindow refers to the iframe's window object.
iframe.contentWindow.postMessage('The message to send.','http://dev.opera.com');
}
!
button.addEventListener('click',clickHandler,false);
Cross-IFrame communications with postMessage()

View Slide

Modularize cards
2
Look & Feel
Sandbox
+
Seamless Sandbox IFrame
Web Components
Shadow DOM Real DOM
Trusted Code Untrusted Code
Shared JavaScript Context Isolated JavaScript Context
JS Calls and Callbacks
Polymer as Polyfill Oasis.js as Polyfill
PostMessage Only
polymer

View Slide

Modularize cards
2
Look & Feel
Sandbox
+
Oasis.js helps you structure communication
between multiple untrusted sandboxes.

View Slide

Synthesize cards
3
Look & Feel
Sandbox
Contracts
+
+
Oasis.js uses the concepts in capability-based security
to help you safely expose capabilities and data to
untrusted code, secure in the knowledge that the
sandboxes can only communicate with each other and
the outside world through those capabilities.

View Slide

Synthesize cards
3
Look & Feel
Sandbox
Contracts
+
+
Oasis.js Events Request / Resolve

View Slide

Synthesize cards
3
Look & Feel
Sandbox
Contracts
+
+
Oasis.js Host says:
var PingService = Oasis.Service.extend({
initialize: function() {
this.request('ping').then(function(data) {
console.log(data);
});
}
});
var PingConsumer = Oasis.Consumer.extend({
requests: {
ping: function(resolver) {
resolver.resolve('pong');
}
}
});
Oasis.js Sandbox says:

View Slide

Synthesize cards
3
Look & Feel
Sandbox
Contracts
+
+
Oasis.js Host says:
var PingService = Oasis.Service.extend({
initialize: function() {
this.request('ping').then(function(data) {
console.log(data);
});
}
});
var PingConsumer = Oasis.Consumer.extend({
requests: {
ping: function(resolver) {
resolver.resolve('pong');
}
}
});
Oasis.js Sandbox says:
- JS Promises!
Actually Promise/A+ va RSVP.js

View Slide

Image
Full Content
SMALL
List Size: Grabbable Inline Size: Embeddable Full Size: Readable, Editable
Image Title Title  
Partial Content
Image
Medium Large
Description
Title
Render
To Size/Mode
Look & Feel
Sandbox
Contracts
+
+

View Slide

Image
Full Content
Shrink
Partial Content
Image
Expand Fill Screen
Description
Title
Render
To Size/Mode
Look & Feel
Sandbox
Contracts
+
+

View Slide

Image
Full Content
Shrink
Partial Content
Image
Expand Fill Screen
Description
Title
SAVE
Edit mode
Render
To Size/Mode
Look & Feel
Sandbox
Contracts
+
+

View Slide

Current
Time
Playback
finished
IF
playback finishes
THEN
start playing next video
ALWAYS
remember the time
of the playback time
Video Playlist as Host
Vimeo Card in Sandbox Start
Playback
YouTube Card VEVO Card
CNN Video Card HBO GO Card
React
To Action/Events
Look & Feel
Sandbox
Contracts
+
+

View Slide

Card Container
Externalize cards
4
Look & Feel
Sandbox
Contracts
Packaging
+
+
+
Web Platform
Video Survey
Chat map
Game Article

View Slide

Card Container
Externalize cards
4
Look & Feel
Sandbox
Contracts
Packaging
+
+
+
Web Platform
polymer

View Slide

Externalize cards
4
Look & Feel
Sandbox
Contracts
Packaging
+
+
+
Conductor.js YouTube Card Wrapper
Conductor.require('/vendor/jquery.js');6
Conductor.requireCSS('/example/cards/tutorial/youtube_card.css');6
!
Conductor.card({6
66videoId:6null,6
!
66activate:6function6(data)6{6
6666Conductor.Oasis.RSVP.EventTarget.mixin(this);6
6666this.consumers.height.autoUpdate6=6false;6
6666this.videoId6=6data.videoId;6
66},6
!
66initializeDOM:6function6()6{6
Conductor.js Library
6
6
666
666
6
6
6

View Slide

Externalize cards
4
Look & Feel
Sandbox
Contracts
Packaging
+
+
+
Full Tutorial: https://github.com/tildeio/conductor.js/blob/master/doc/Tutorial.md
6666this.videoId6=6data.videoId;6
66},6
!
66initializeDOM:6function6()6{6
6666$('body').html('');6
6666$('head').append('');6
!
6666this.on('resize',6this.resizeThumbnail);6
66},6
!
66render:6function6(intent,6dimensions)6{6
6666this.setDimensions(dimensions);6
!
6666$('#thumbnail').attr('src',6'http://img.youtube.com/vi/'6+6this.videoId6+6'/0.jpg');6
66},6
!
66resizeThumbnail:6function6()6{6
6666var6dimensions6=6this.getDimensions();6
6666$('#thumbnail').css(6dimensions6);6
66},6
!
66getDimensions:6function6()6{6
6666if6(!this._dimensions)6{6this.setDimensions();6}6
6666return6this._dimensions;6
66},6
!
66setDimensions:6function6(dimensions)6{6
6666if6(dimensions6!==6undefined)6{6
666666this._dimensions6=6dimensions;6
6666}6else6{6
666666this._dimensions6=6{6
66666666height:6window.innerHeight,6
66666666width:6window.innerWidth6
666666};6
6666}6
!
6666this.trigger('resize');6
66}6
});

View Slide

Packaging
+
My Trip to New York
EXPENSE ITEMS (0)
PURPOSE:
$0.00 USD
STATUS: DRAFT
Submit for Approval
Onsite Work with MHE Labs
REQUESTER: Tom Dale @tomdale
Drop receipts here
to add to expense report
TOTAL AMOUNT REQUESTED
APPROVER: Christopher Tse @christse
Last saved on September 10, 2013 at 4:30 PM PDT
Change
REPORT
New Blank Item
$336.87 USD
09/01/2013
$981.08 USD
08/23/2013
$1,223.41 USD
09/07/2012
$1,223.41 USD
09/07/2013
Look & Feel
Sandbox
Contracts
+
+
Report
Metadata

View Slide

My Trip to New York
EXPENSE ITEMS (0)
PURPOSE:
$0.00 USD
STATUS: DRAFT
Submit for Approval
Drop receipts here
Change
New Blank Item
$336.87 USD
09/01/2013
$981.08 USD
08/23/2013
CATEGORY:
PAID VIA:
Lodging
Pay with Square
VENDOR: W Hotels
REFERENCE #:
AMOUNT:
8886747766
$1,223.41 USD
DATE: 09/07/2013
W Hotels
REPORT
Packaging
+
Look & Feel
Sandbox
Contracts
+
+
Report
Metadata
$1,223.41 USD
09/07/2013
REPORTED

View Slide

$336.87 USD
09/01/2013
$981.08 USD
08/23/2013
$1,223.41 USD
09/07/2012
$1,223.41 USD
09/07/2013
My Trip to New York
EXPENSE ITEMS (0)
PURPOSE:
$0.00 USD
STATUS: DRAFT
Submit for Approval
Drop receipts here
Change
New Blank Item
CATEGORY:
PAID VIA:
Lodging
Pay with Square
VENDOR: W Hotels
REFERENCE #:
AMOUNT:
8886747766
$1,223.41 USD
DATE: 09/07/2013
W Hotels
REPORT
Packaging
+
Look & Feel
Sandbox
Contracts
+
+
Report
Metadata
25
25
W Hotels NYC @WHotelsNYC
Thank you for your stay from 9/4 to 9/7. Hope to see you again!
CATEGORY:
PAID VIA:
Lodging
Pay with Square
VENDOR: W Hotels
REFERENCE #:
AMOUNT:
8886747766
$1,223.41 USD
DATE: 09/07/2013
W New York
541 Lexington Avenue, New York, New York 10022 • United States • Map
Phone: (212) 755 1200 Fax: (212) 319 8344
Thank you for staying with us.
RECEIPT
Aloft Milwaukee Downtown
1230 Old World Third St
Milwaukee, WI 53212
414-226-0122 / 414-266-0133
http://www.starwood.com/
Mr. Stoltz, Robert Page Number 4 Invoice Nbr 1000009494
1515 N Wakefield St Guest Number 58912 Arrive Date 07-01-2011
Arlington, VA 22207-
2137
Folio ID A Depart Date 07-05-2011
No. Of Guest 2
Room Number 2001
Club Account SPG - A41911610734
Time 07-06-2011 03:08
Duplicate Invoice
EXPENSE SUMMARY REPORT
Currency: USD
Date Food/Bev Telephone Misc Room/Tax Other Total Payment
09-01-2012 $ 0.00 $ 0.00 $ 23.00 $ 159.16 $ 0.83 $ 182.99 $ 0.00
09-02-2012 $ 0.00 $ 0.00 $ 23.00 $ 57.25 $ 0.30 $ 80.55 $ 0.00
09-03-2012 $ 4.71 $ 0.00 $ 23.00 $ 216.41 $ 1.42 $ 245.54 $ 0.00
09-04-2012 $ 0.00 $ 0.00 $ 23.00 $ 216.41 $ 1.13 $ 240.54 $ 0.00
09-05-2012 $ 0.00 $ 0.00 $ 0.00 $ -171.75 $ -0.90 $ -172.65 $ -576.97
09-06-2012 $ 0.00 $ 0.00 $ 0.00 $ 0.00 $ 0.00 $ 0.00 $ -0.00
Total $4.71 $0.00 $92.00 $477.48 $2.78 $576.97 $ -576.97
Aloft Milwaukee Downtown
1230 Old World Third St
Milwaukee, WI 53212
414-226-0122 / 414-266-0133
http://www.starwood.com/
Mr. Dale, Tom Page Number 1 Invoice Nbr 1000321123
San Francisco, CA Guest Number 58912 Arrive Date 09-01-2012
Folio ID A Depart Date 09-06-2012
No. Of Guest 2
Room Number 2001
Club Account SPG - A419321810734
Time 09-06-2012 03:08
Date Food/Bev Telephone Misc Room/Tax Other Total Payment
09-01-2012 $ 0.00 $ 0.00 $ 23.00 $ 159.16 $ 0.83 $ 182.99 $ 0.00
09-02-2012 $ 0.00 $ 0.00 $ 23.00 $ 57.25 $ 0.30 $ 80.55 $ 0.00
09-03-2012 $ 4.71 $ 0.00 $ 23.00 $ 216.41 $ 1.42 $ 245.54 $ 0.00
09-04-2012 $ 0.00 $ 0.00 $ 23.00 $ 216.41 $ 1.13 $ 240.54 $ 0.00
09-05-2012 $ 0.00 $ 0.00 $ 0.00 $ -171.75 $ -0.90 $ -172.65 $ -576.97

View Slide

Organize cards
5
Developers End-Users
Give your power to mix and match… to people who don’t want to code
Look & Feel
Sandbox
Contracts
Packaging
+
+
+

View Slide

197 GRAND ST, 6S
NEW YORK, NY 10013
IN
W
Developed By Designed by

View Slide

The Last Step
CardRuntime
.
Look & Feel
Sandbox
Contracts
Packaging
+
+
+

View Slide

AAPL Stock Price
2006 2010
From To
Remote Stock Data (DDP)
Look & Feel
Sandbox
Contracts
Packaging
Snapshot
+
+
+
+
Restore
To Saved State

View Slide

AAPL Stock Price
2006 2010
From To
{
“symbol”: “AAPL”,
“from”: “2006”,
“to”: “2010”,
}
Card STATE
Look & Feel
Sandbox
Contracts
Packaging
Snapshot
+
+
+
+
Restore
To Saved State

View Slide

AAPL Stock Price
2006 2010
From To
Store into
{
“from”: “2006”,
“to”: “2010”,
}
Card STATE
Look & Feel
Sandbox
Contracts
Packaging
Snapshot
+
+
+
+
Restore
To Saved State

View Slide

AAPL Stock Price
2006 2010
From To
Store into
Restore from
{
“from”: “2006”,
“to”: “2010”,
}
Card STATE
Look & Feel
Sandbox
Contracts
Packaging
Snapshot
+
+
+
+
Restore
To Saved State

View Slide

Ben Jolley [email protected]
I have noticed that our invoices are not getting paid on time. Are we following up
to with your client to remind them? Let me know when you have done that.
INVOICE AGE CARD
Snapshot
Live Data
Apr 25, 2014
Restore
To Saved State
Look & Feel
Sandbox
Contracts
Packaging
Snapshot
+
+
+
+

View Slide

Ben Jolley [email protected]
I have noticed that our invoices are not getting paid on time. Are we following up
to with your client to remind them? Let me know when you have done that.
INVOICE AGE CARD
Snapshot
Live Data
Apr 25, 2014
Restore
To Saved State
Look & Feel
Sandbox
Contracts
Packaging
Snapshot
+
+
+
+
Card SNAPSHOT
Payment Terms Unpaid Count Paid Count
0 29 0
1 17 2
2 14 3
3 15 5
3 21 0

View Slide

A card is:

View Slide

A PAGE
A card is:

View Slide

A PAGE
An APP
A card is:

View Slide

A PAGE
An APP A FILE
A card is:

View Slide

A PAGE
An APP A FILE
An API
A card is:

View Slide

A PAGE
An APP A FILE
An API
A card is:
+ Web Components
+ famo.us

View Slide

A PAGE
An APP A FILE
An API
A card is:
+ Web Components
+ famo.us
+ Atmosphere JS

View Slide

A PAGE
An APP A FILE
An API
A card is:
+ Web Components
+ famo.us
+ Atmosphere JS
JS N
+ Device Storage
+ MongoDB

View Slide

A PAGE
An APP A FILE
An API
A card is:
+ Web Components
+ famo.us
+ Atmosphere JS
JS N
+ Run at Server
+ Private Folder
+ Device Storage
+ MongoDB

View Slide

Visualize
1
Modularize
2
Synthesize
3
Externalize
4
Organize
5
5 Levels of
Card Architecture
Look & Feel Look & Feel
Sandbox
+
Look & Feel
Sandbox
Contracts
+
+
Look & Feel
Sandbox
Contracts
Packaging
+
+
+
Look & Feel
Sandbox
Contracts
Packaging
Snapshot
+
+
+
+

View Slide

Visualize
1
Modularize
2
Synthesize
3
Externalize
4
Organize
5
5 Levels of
Card Architecture
Look & Feel Look & Feel
Sandbox
+
Look & Feel
Sandbox
Contracts
+
+
Look & Feel
Sandbox
Contracts
Packaging
+
+
+
Look & Feel
Sandbox
Contracts
Packaging
Snapshot
+
+
+
+
The Web
is Here

View Slide

CardEcosystem
Why is this important?

View Slide

vs
Open EcoSystems Closed EcoSystems

View Slide

Open Closed

View Slide

Web Windows
Open Closed

View Slide

Web

View Slide

Web
The most open, amazing,
transformative human-made
ecosystem ever.

View Slide

Web
ecosystem ever.
This is not going to last…

View Slide

Web
ecosystem ever.
Apps

View Slide

Web
ecosystem ever.
Apps
The greatest breakthrough in
how we use technology in our
everyday lives.

View Slide

Web
ecosystem ever.
Apps
The greatest breakthrough in
how we use technology in our
everyday lives.
We can’t stay here for ever……

View Slide

Open Native
Web Apps

View Slide

Open Native
Web Apps
Cards

View Slide

Mobile mobile
Web Apps
Cards

View Slide

CardStack
Card Organizer
Card Packaging
Card Contracts
Card Sandbox
Card
Glazier (Reference container implementation)
GitHub (All cards are separate projects)
Conductor.js (JS framework-agnostic)
Polymer (For trusted code) & Oasis.js (For untrusted code)
Material Design or Grid Style Sheet
Coming Soon
Everything you need to build HTML5 Cards and Containers
.io
5
4
3
2
1
CardEcosystem

View Slide

Show the World what a Card-centric world
looks like
Card-based e-commerce
Card-based collaboration
Card-based games
Card-based communications
Card-based governance
card-based learning
Step 1
CardEcosystem

View Slide

Make some cards that are useful and share
the source, allow derivatives
Step 2
Existing APIs
Fresh Card UI
HTML5
Card
HTML5
Card
HTML5
Card
HTML5
Card
HTML5
Card
OAuth / JSON
CardEcosystem

View Slide

Building an open Card Catalog based on
open source reputation
Step 3
Cards
for End-Users
Code
From Developers
CardEcosystem

View Slide

Card UI
Architecture
Design
Chris Tse
Presented by
Learn More
Glazier (incl. Oasis.js and Conductor.js)
https://github.com/yapplabs/glazier
Polymer Project
http://www.polymer-project.org
TECHNICAL TRACK

View Slide

Card UI
Architecture
Design
Chris Tse
Presented by
Learn More
Glazier (incl. Oasis.js and Conductor.js)
https://github.com/yapplabs/glazier
Polymer Project
http://www.polymer-project.org
Next Talk
Patterns of Card UI Design
bit.ly/card-patterns
TUESDAY 7/8 @ 7 PM
NYC UX ACROBATICS MEETUP
!
AMPLIFY DUMBO
55 WASHINGTON STREET, BROOKLYN
TECHNICAL TRACK

View Slide

@christse
Thank you!

View Slide

Card UI Architecture Design

Card UI Architecture Design

Chris Tse

More Decks by Chris Tse

Other Decks in Technology

Featured

Transcript