Card UI Architecture Design Deck PDF

Card UI
Architecture
Design Chris Tse
Presented by
Building Embeddable JavaScript Event Location

Apps for Web and Mobile Devices
Thoughtworks NYC
Meetup Organizer
TECHNICAL TRACK
NYC Meteor Meetup
Presentation Date
Follow @christse on Twitter July 1, 2014
agenda
.
1. What are cards?
2. How to build them?
3. Why is this important?
p
ca
Re
ick
Qu
Card metaphor
What are cards?
Card metaphor
On Mobile:
Google Now Apple Passbook Tinder Pinterest Facebook Paper
via @khoi
Citia Storehouse Flipboard
Evernote Salesforce1 Cloud Magic
via @khoi
Card metaphor
On The Web:
Twitter Stack Exchange Vox
via @khoi
New MySpace Google+
Burger King / Rebel Mouse Pinterest Storify

Card metaphor
On The Desktop:
Windows 8 Os X
So, what makes something a ‘card’?
Size
X L
R G E
LA
I U M
MED
L L
SMA
Power
a k e
To M gt hi n
o me
S
A ct
To on i t
Up
S ee
o t
T he gis
T
Card metaphor
Cards
Have
Different
Sizes &
Powers
Cards Containers
Have Have
Different Different
Sizes & structure &
Powers Mixture
Cards Containers
Like Pinterest
Cards “Board”
Like Pinterest
Cards “Board”
Like Pinterest
Photo
Photo Photo Photo
Photo
Photo
Photo
Photo
Photo
Photo
Photo
Photo
Structure
Cards “feed”
Like Facebook
Ads
Video
Events
Text
Messages
Photo Album
Cards “Stack”
Like Google Now
Map
REMINDER
NEXT APPOINTMENT
WEATHER
BOARDING PASS
Cards “Stack”
Like Apple Passbook
United BOARDING PASS
Starbucks Card
AMC Movie Ticket
Target Coupon
Starwood Loyalty Card

Cards “Collage”
Like FlipBoard
IMAGE FACEBOOK POST
Photo ALBUM
VIDEO BLOG POST
ARTICLE TWEET ARTICLE
mixture
Cards “Page”
Like Storify
HEADLINE
Text
VIDEO
TWEET
PODCAST
Card Architecture
How to Build Them?

Aren’t I already building ‘cards’?
Aren’t I already building ‘cards’?
(Well, yes and no.)
5 Levels of
Card Architecture
5 Levels of
Card Architecture 5 Organize
4 Externalize
3 Synthesize
2 Modularize
1 Visualize
5 Levels of
4 Externalize
3 Synthesize
2 Modularize
1 Visualize
This screen looks
like a card.
5 Levels of
4 Externalize
3 Synthesize
2 Modularize
I, the good
developer, am
1 Visualize
This screen looks
like a card.
reusing this card
as a component
in my app.
5 Levels of
4 Externalize
3 Synthesize
My app supports
2
multiple types of
Modularize cards for user to
I, the good create, edit, or
developer, am trigger actions.
1 Visualize
This screen looks
like a card.
reusing this card
as a component
in my app.
5 Levels of
4 Externalize
The user or the
system can turn
3 Synthesize
My app supports
a piece of my
app into a card
or a widget and
2
multiple types of
Modularize cards for user to embed it in
create, edit, or another app.
I, the good
1 Visualize
This screen looks
like a card.
reusing this card
as a component
in my app.
5 Levels of
The user, not you
the developer,
4 Externalize
The user or the
system can turn
can mix and
match cards
from different
3 Synthesize
My app supports
a piece of my
app into a card
or a widget and
vendors, chain
them together,
to fit their
2
multiple types of workflow.
Modularize cards for user to embed it in
create, edit, or another app.
I, the good
1 Visualize
This screen looks
like a card.
reusing this card
as a component
in my app.
1 Visualize cards
Ionic Framework HTML+CSS
Look & Feel

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

1 Visualize cards
Google’s Material Design
Look & Feel

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

Sandbox
+
Look & Feel
2 Modularize cards
DOM
<post-card><h3>Hello!</h3></post-card>
Shadow DOM Sandbox
<polymer-element name="post-card">
<template>
<style>
Sandbox :host {
display: block;
position: relative;
+ background-color: white;
padding: 20px;
Look & Feel width: 100%;
font-size: 1.2rem;
2 Modularize cards Shadow DOM Sandbox
<polymer-element name="post-card">
<template>
Polymer by Google <style>
:host {
HTML + Web Components
display: block;
position: relative;
DOM background-color: white;
padding: 20px;
width: 100%;
<post-card><h3>Hello!</h3></post-card>
font-size: 1.2rem;
font-weight: 300;
}
</style>
!

<div class="card-header" layout
horizontal center>
<content select="img"></content>
Sandbox <content select="h2"></content>
</div>
+ …
<content></content>
</polymer-element>
Look & Feel
2 Modularize cards
DOM
<post-card>
<img width="70" height="70"
src="../images/avatar-07.svg">
<h2>Another Developer</h2>
<h3>I'm composing with shadow DOM
</h3>
</post-card>
Sandbox
+ Shadow DOM Sandbox
Look & Feel <polymer-element name="post-card">

<template>
2 Modularize cards
Shadow DOM As Marked Up
Sandbox
+
Look & Feel
2 Modularize cards
Shadow DOM As Rendered
Sandbox
+
Look & Feel
2 Modularize cards
Leaky!
Leaks:
- CSS
Sandbox - JavaScript
+
Look & Feel
2 Modularize cards
Leaky!
Leaks:
- CSS
Sandbox - JavaScript (!)
+ - Be nice, ok?
Look & Feel
2 Modularize cards
Seamless Sandbox IFrame HTML5 Spec
You get:
- Your own real DOM
Sandbox - Any JS Libraries
+ - Peace of Mind
Look & Feel
2 Modularize cards
Seamless Sandbox IFrame HTML5 Spec
<iframe seamless sandbox="allow-same-origin allow-scripts allow-popups

allow-forms” src=“https://some-third-party.com/embedded-card.html"> 
</iframe>
Cross-IFrame communications with postMessage()
var iframe = document.querySelector('iframe');

var button = document.querySelector('button');
!
var clickHandler = function(){
Sandbox // 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);
Look & Feel
2 Modularize cards
Web Components Seamless Sandbox IFrame
Shadow DOM Real DOM
Trusted Code Untrusted Code
Shared JavaScript Context Isolated JavaScript Context
JS Calls and Callbacks PostMessage Only
Polymer as Polyfill Oasis.js as Polyfill
Sandbox
+ polymer
Look & Feel
2 Modularize cards
Oasis.js helps you structure communication

between multiple untrusted sandboxes.
Sandbox
+
Look & Feel
3 Synthesize cards
Oasis.js uses the concepts in capability-based security

Contracts to help you safely expose capabilities and data to
+ untrusted code, secure in the knowledge that the
Sandbox sandboxes can only communicate with each other and
the outside world through those capabilities.
+
Look & Feel
3 Synthesize cards
Oasis.js Events Request / Resolve
Contracts
+
Sandbox
+
Look & Feel
3 Synthesize cards
Contracts
+
Sandbox
+
Look & Feel
3 Synthesize cards
Contracts
+
Sandbox
+
Look & Feel
3 Synthesize cards
Contracts
+
Sandbox
+
Look & Feel
3 Synthesize cards
Contracts
+
Sandbox
+
Look & Feel
3 Synthesize cards
Contracts
+
Sandbox
+
Look & Feel
3 Synthesize cards
Contracts
+
Sandbox
+
Look & Feel
3 Synthesize cards
Contracts
+
Sandbox
+
Look & Feel
3 Synthesize cards
Oasis.js Host says:
var PingService = Oasis.Service.extend({
initialize: function() {
this.request('ping').then(function(data) {
console.log(data);
});
}
});
Contracts
Oasis.js Sandbox says:
+
var PingConsumer = Oasis.Consumer.extend({
requests: {
Sandbox ping: function(resolver) {
resolver.resolve('pong');
}
+ }
});
Look & Feel
3 Synthesize cards
Oasis.js Host says:
var PingService = Oasis.Service.extend({
initialize: function() {
- JS Promises!
this.request('ping').then(function(data) { Actually Promise/A+ va RSVP.js
console.log(data);
});
}
});
Contracts
Oasis.js Sandbox says:
+
var PingConsumer = Oasis.Consumer.extend({
requests: {
Sandbox ping: function(resolver) {
resolver.resolve('pong');
}
+ }
});
Look & Feel
Render SMALL Medium Large
To Size/Mode List Size: Grabbable Inline Size: Embeddable Full Size: Readable, Editable
Image
Image Title Title  
Description Partial Content
Title
Image
Full Content
Contracts
+
Sandbox
+
Look & Feel
Render Shrink Expand Fill Screen
Image
Title
Image
Full Content
Contracts
+
Sandbox
+
Look & Feel
Render Shrink Expand Fill
EditScreen
mode
Image
SAVE
Title
Image
Full Content
Contracts
+
Sandbox
+
Look & Feel
Video Playlist as Host
React Vimeo Card in Sandbox Start

Playback IF
playback finishes
To Action/Events Current
Time THEN
start playing next video
Playback
ALWAYS
finished
remember the time
of the playback time
Contracts
YouTube Card VEVO Card
+
Sandbox CNN Video Card HBO GO Card
+
Look & Feel
4 Externalize cards
Card Container
Video Survey
Packaging Chat map
+
Game Article
Contracts
+
Web Platform
Sandbox
+
Look & Feel
4 Externalize cards
Card Container
Packaging
polymer
+
Contracts
+
Web Platform
Sandbox
+
Look & Feel
4 Externalize cards
Conductor.js Library
<html>6
<head>6
66<script6src="/conductorT0.3.0.js"6></script>6
66<script6src="youtube_card.js"6></script>6
</head>6
Packaging <body>6
</body>6
</html>
+
Contracts Conductor.js YouTube Card Wrapper
+ Conductor.require('/vendor/jquery.js');6
Conductor.requireCSS('/example/cards/tutorial/youtube_card.css');6
!
Sandbox Conductor.card({6
66videoId:6null,6
!
+ 66activate:6function6(data)6{6
6666Conductor.Oasis.RSVP.EventTarget.mixin(this);6
6666this.consumers.height.autoUpdate6=6false;6
Look & Feel 6666this.videoId6=6data.videoId;6

66},6
!
66initializeDOM:6function6()6{6
6666this.videoId6=6data.videoId;6
66},6
!
4 Externalize cards
66initializeDOM:6function6()6{6
6666$('body').html('<img6id="thumbnail"6/><div6id="player"></div>');6
6666$('head').append('<script6src="https://www.youtube.com/iframe_api"></script>');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
Packaging 6666if6(!this._dimensions)6{6this.setDimensions();6}6
6666return6this._dimensions;6
66},6
+ !
66setDimensions:6function6(dimensions)6{6
6666if6(dimensions6!==6undefined)6{6
Contracts 666666this._dimensions6=6dimensions;6
6666}6else6{6
666666this._dimensions6=6{6
+ 66666666height:6window.innerHeight,6
66666666width:6window.innerWidth6
666666};6
6666}6
Sandbox !
6666this.trigger('resize');6
66}6
+ });
Look & Feel Full Tutorial: https://github.com/tildeio/conductor.js/blob/master/doc/Tutorial.md

Report
REPORT
My Trip to New York

Metadata REQUESTER: Tom Dale @tomdale
09/07/2012
09/07/2013
APPROVER: Christopher Tse @christse Change $1,223.41 USD
PURPOSE: Onsite Work with MHE Labs
09/01/2013
STATUS: DRAFT Last saved on September 10, 2013 at 4:30 PM PDT
$336.87 USD
EXPENSE ITEMS (0) New Blank Item

Packaging 08/23/2013
$981.08 USD
+ Drop receipts here

to add to expense report
Contracts
+ TOTAL AMOUNT REQUESTED
Sandbox Submit for Approval $0.00 USD

+
Look & Feel
Report
REPORT
My Trip to New York

Metadata REQUESTER: Tom Dale @tomdale
09/07/2012
APPROVER: Christopher Tse @christse Change $1,223.41 USD
PURPOSE: Onsite Work with MHE Labs
09/01/2013
STATUS: DRAFT Last saved on September 10, 2013 at 4:30 PM PDT
$336.87 USD
EXPENSE ITEMS (0) New Blank Item

Packaging 08/23/2013
$981.08 USD
+ Drop receipts here 09/07/2013
to add to expense report $1,223.41 USD
Contracts
+ TOTAL AMOUNT REQUESTED
Sandbox Submit for Approval $0.00 USD

+
Look & Feel
REPORT
My Trip to New York

Report REQUESTER: Tom Dale @tomdale
Metadata APPROVER:
PURPOSE:
Christopher Tse @christse
Onsite Work with MHE Labs

Change
09/07/2013
REPORTED
STATUS: DRAFT Last saved on September 10, 2013 at 4:30 PM PDT $1,223.41 USD
EXPENSE ITEMS (0) New Blank Item 09/01/2013
$336.87 USD
W Hotels
Packaging VENDOR: W Hotels DATE: 09/07/2013
08/23/2013
$981.08 USD
CATEGORY: Lodging REFERENCE #: 8886747766
+ PAID VIA: Pay with Square AMOUNT: $1,223.41 USD
Contracts Drop receipts here

+
Sandbox TOTAL AMOUNT REQUESTED
+
Submit for Approval $0.00 USD
Look & Feel
REPORT
My Trip to New York

Report REQUESTER: Tom Dale @tomdale
Metadata APPROVER:
PURPOSE:

Change
09/07/2013
REPORTED
STATUS: DRAFT Last saved on September 10, 2013 at 4:30 PM PDT $1,223.41 USD
$336.87 USD
W Hotels
Packaging VENDOR: W Hotels DATE: 09/07/2013
08/23/2013
$981.08 USD
CATEGORY: Lodging REFERENCE #: 8886747766
+ PAID VIA: Pay with Square AMOUNT: $1,223.41 USD
Contracts Drop receipts here

+
Sandbox TOTAL AMOUNT REQUESTED
+
Submit for Approval $0.00 USD
Look & Feel
RECEIPT
W Hotels NYC @WHotelsNYC REPORT
Thank you for your stay from 9/4 to 9/7. Hope to see you again!
My Trip to New York
Report VENDOR:
CATEGORY:
REQUESTER:
PAID VIA:
W Hotels
Lodging
Tom Dale @tomdale
Pay with Square
DATE:
REFERENCE #:
AMOUNT:
09/07/2013
8886747766
$1,223.41 USD
Metadata APPROVER:
PURPOSE:

Change
09/07/2012
09/07/2013
STATUS: W New
DRAFTYork Last saved on September 10, 2013 at 4:30 PM PDT $1,223.41 USD
541 Lexington Avenue, New York, New York 10022 • United States • Map
Phone: (212) 755 1200 Fax: (212) 319 8344
$336.87 USD
Packaging
W Hotels
Aloft Milwaukee Downtown
1230 Old World Third St 25 08/23/2013
Downtown W Hotels 09/07/2013
25
Milwaukee, WIVENDOR:
Aloft Milwaukee 53212 DATE:
414-226-0122 / 414-266-0133 $981.08 USD
1230 Old World Third St Lodging
CATEGORY: REFERENCE #: 8886747766
http://www.starwood.com/
+
Milwaukee, WI 53212
PAID VIA: Pay with Square AMOUNT: $1,223.41 USD
414-226-0122 / 414-266-0133
Thank you for staying with us.
http://www.starwood.com/
Mr. Stoltz, Robert Page Number 4 Invoice Nbr 1000009494
Contracts
1515 N Wakefield St Guest Number 58912 Arrive Date 07-01-2011
Arlington, VA 22207- Folio ID A Depart Date 07-05-2011
Mr.
2137Dale, Tom
San Francisco, CA
Page
Guest
No.
Drop receipts here
Number
Of Number
Guest
1
2 58912
Invoice Nbr
Arrive Date
1000321123
09-01-2012
to add to2001
expense report Depart Date
A 09-06-2012
+
FolioNumber
Room ID
Club Account SPG - A41911610734
No. Of Guest
Time 2
07-06-2011 03:08
Room Number 2001
Sandbox Club Account SPG - A419321810734

Duplicate Invoice
TOTAL AMOUNT REQUESTEDTime EXPENSE SUMMARY 09-06-2012
REPORT 03:08
Currency: USD
Date Food/Bev Telephone Misc Room/Tax Other Total Payment
+ 09-01-2012
09-02-2012
$ 0.00
$ 0.00
$ 0.00
$ 0.00
$ 23.00
$ 23.00
$ 159.16
$ 57.25
$ 0.83
$ 0.30
$ 182.99
$ 80.55
$ 0.00
$ 0.00
09-03-2012
DateSubmit
09-04-2012
$ 4.71
Food/Bev
$ 0.00
$ 0.00
for ApprovalTelephone
$ 0.00
$ 23.00
$ 23.00
Misc $ 216.41
Room/Tax
$ 216.41 $ 1.13 $ 240.54
$0.00 USD
$ 1.42Other $ 245.54Total $ 0.00 Payment
$ 0.00
Look & Feel
09-01-2012
09-05-2012 $ 0.00
$ 0.00 $ 0.00
$ 0.00 $ $0.00
23.00 $ 159.16
$ -171.75 $
$ -0.90 0.83 $ 182.99
$ -172.65 $ -576.97$ 0.00
09-02-2012
09-06-2012 $ $0.00
0.00 $ 0.00
$ 0.00 $ $0.00
23.00 $ $0.00
57.25 $ 0.30 $ 0.00
$ 0.00 $ 80.55 $ -0.00 $ 0.00
09-03-2012 $ 4.71 $ 0.00 $ 23.00 $ 216.41 $ 1.42 $ 245.54 $ 0.00
Total $ 4.71 $ 0.00 $ 92.00 $ 477.48 $ 2.78 $ 576.97 $ -576.97
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
5 Organize cards
Developers End-Users
Give your power to mix and match… to people who don’t want to code
Packaging
+
Contracts
+
Sandbox
+
Look & Feel
5 Organize cards
Packaging
+
Contracts
+
Sandbox
+
Look & Feel
5 Organize cards
Packaging
+
Contracts
+
Sandbox
+
Look & Feel
Developed By Designed by
197 GRAND ST, 6S IN

NEW YORK, NY 10013 W
Card Runtime
The Last Step

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

To Saved State
AAPL Stock Price
Snapshot
+
Packaging
From 2006 To 2010
+
+ {
“symbol”: “AAPL”, Store into
“to”: “2010”,
+ }
Look & Feel

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

Restore Ben Jolley [email protected] Apr 25, 2014
To Saved State 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 Snapshot
Live Data
+
Packaging
+
Contracts
+
Sandbox
+
Look & Feel
Restore Ben Jolley [email protected] Apr 25, 2014
To Saved State 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 Snapshot
Live Data
+
Packaging
+
Contracts
+
Sandbox Card SNAPSHOT
Payment Terms Unpaid Count Paid Count
+ 0 29 0
1 17 2
Look & Feel 2
3
14
15
3
5
3 21 0
A card is:
A card is:
A PAGE
A card is:
A PAGE
An APP
A card is:
A PAGE
An APP A FILE
A card is:
A PAGE An API
An APP A FILE
A card is:
A PAGE An API
An APP A FILE
A card is:
+ famo.us
+ Web Components A PAGE An API
An APP A FILE
A card is:
+ famo.us
+ Atmosphere JS An APP A FILE

A card is:
+ famo.us
JS N
+ MongoDB
+ Atmosphere JS An APP A FILE + Device Storage
A card is:
+ famo.us + Run at Server
+ Web Components A PAGE An API + Private Folder
JS N
+ MongoDB
+ Atmosphere JS An APP A FILE + Device Storage
5 Levels of
Snapshot
4 Externalize
Packaging
+
Packaging
3 Synthesize
Contracts
+
Contracts
+
Contracts
2 Modularize
Sandbox
+
Sandbox
+
Sandbox
+
Sandbox
1 Visualize
Look & Feel

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

+
Look & Feel
+
Look & Feel
+
Look & Feel
+
Look & Feel
Card Ecosystem
Why is this important?
Open EcoSystems Closed EcoSystems
vs
Open Closed
Open Closed
Web Windows
Web
Web
The most open, amazing,
transformative human-made
ecosystem ever.
Web
ecosystem ever.
This is not going to last…

Web Apps
ecosystem ever.

Web Apps
The most open, amazing, The greatest breakthrough in
transformative human-made how we use technology in our
ecosystem ever. everyday lives.

Web Apps
The most open, amazing, The greatest breakthrough in
transformative human-made how we use technology in our
ecosystem ever. everyday lives.
This is not going to last… We can’t stay here for ever……

Open Web Native Apps
Open Web Native Apps
Cards
Mobile Web mobile Apps
Cards
Mobile Web mobile Apps
Cards
Card Ecosystem
Coming Soon
CardStack.io
Everything you need to build HTML5 Cards and Containers
5 Card Organizer Glazier (Reference container implementation)

4 Card Packaging GitHub (All cards are separate projects)
3 Card Contracts Conductor.js (JS framework-agnostic)
2 Card Sandbox Polymer (For trusted code) & Oasis.js (For untrusted code)
1 Card Material Design or Grid Style Sheet
Card Ecosystem
Step 1 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
Card Ecosystem
Step 1 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
Card Ecosystem
Step 2 Make some cards that are useful and share

the source, allow derivatives
HTML5
HTML5
HTML5
Card OAuth / JSON
HTML5
Card
HTML5
Card
Card
Card
Fresh Card UI Existing APIs

Card Ecosystem
Step 2 Make some cards that are useful and share

the source, allow derivatives
HTML5
HTML5
HTML5
Card OAuth / JSON
HTML5
Card
HTML5
Card
Card
Card
Fresh Card UI Existing APIs

Card Ecosystem
Step 3 Building an open Card Catalog based on

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

open source reputation
Cards Code
for End-Users From Developers
Learn More
Card UI Polymer Project

http://www.polymer-project.org
Architecture Glazier (incl. Oasis.js and Conductor.js)

https://github.com/yapplabs/glazier
Design Chris Tse Presented by
Building Embeddable JavaScript

TECHNICAL TRACK
Follow @christse on Twitter

Learn More
Card UI Polymer Project

http://www.polymer-project.org
Architecture Glazier (incl. Oasis.js and Conductor.js)

https://github.com/yapplabs/glazier
Design Chris Tse Presented by
Building Embeddable JavaScript Next Talk

Patterns of Card UI Design
bit.ly/card-patterns
TECHNICAL TRACK
TUESDAY 7/8 @ 7 PM
NYC UX ACROBATICS MEETUP
!
AMPLIFY DUMBO
55 WASHINGTON STREET, BROOKLYN
Follow @christse on Twitter
@christse
Thank you!

Card UI Architecture Design Deck PDF

Uploaded by

Copyright:

Available Formats

Card UI Architecture Design Deck PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Card UI Architecture Design Deck PDF

Uploaded by

Copyright:

Available Formats

What is a card metaphor?

What is a card metaphor?

What are the different levels of card architecture?

What are the different levels of card architecture?

Card UI

Building Embeddable JavaScript Event Location

Evernote Salesforce1 Cloud Magic

Burger King / Rebel Mouse Pinterest Storify

United BOARDING PASS

AMC Movie Ticket

Starwood Loyalty Card

IMAGE FACEBOOK POST

VIDEO BLOG POST

ARTICLE TWEET ARTICLE

How to Build Them?

Look & Feel

Look & Feel

Look & Feel

Shadow DOM Sandbox

Shadow DOM Sandbox

Shadow DOM Sandbox

Shadow DOM Sandbox

Shadow DOM Sandbox

Look & Feel <polymer-element name="post-card">

<iframe seamless sandbox="allow-same-origin allow-scripts allow-popups

Cross-IFrame communications with postMessage()

var iframe = document.querySelector('iframe');

Oasis.js helps you structure communication

Oasis.js uses the concepts in capability-based security

React Vimeo Card in Sandbox Start

Packaging Chat map

Look & Feel 6666this.videoId6=6data.videoId;6

Look & Feel Full Tutorial: https://github.com/tildeio/conductor.js/blob/master/doc/Tutorial.md

My Trip to New York

EXPENSE ITEMS (0) New Blank Item

+ Drop receipts here

Sandbox Submit for Approval $0.00 USD

My Trip to New York

EXPENSE ITEMS (0) New Blank Item

+ Drop receipts here 09/07/2013

to add to expense report $1,223.41 USD

Sandbox Submit for Approval $0.00 USD

My Trip to New York

Onsite Work with MHE Labs

EXPENSE ITEMS (0) New Blank Item 09/01/2013

+ PAID VIA: Pay with Square AMOUNT: $1,223.41 USD

Contracts Drop receipts here

My Trip to New York

Onsite Work with MHE Labs

EXPENSE ITEMS (0) New Blank Item 09/01/2013

+ PAID VIA: Pay with Square AMOUNT: $1,223.41 USD

Contracts Drop receipts here

W Hotels NYC @WHotelsNYC REPORT

Onsite Work with MHE Labs

Sandbox Club Account SPG - A419321810734

197 GRAND ST, 6S IN

The Last Step

Look & Feel

Look & Feel