Slide 1
Slide 1 text
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
Slide 2
Slide 2 text
agenda
. 1. What are cards?
2. How to build them?
3. Why is this important?
Slide 3
Slide 3 text
Cardmetaphor
What are cards?
Quick Recap
Slide 4
Slide 4 text
Cardmetaphor
Google Now
On Mobile:
Apple Passbook Tinder Pinterest Facebook Paper
via @khoi
Slide 5
Slide 5 text
Citia Storehouse Flipboard
Evernote Salesforce1 Cloud Magic
via @khoi
Slide 6
Slide 6 text
On The Web:
Twitter Stack Exchange Vox
via @khoi
Cardmetaphor
Slide 7
Slide 7 text
New MySpace Google+
Burger King / Rebel Mouse Pinterest Storify
Slide 8
Slide 8 text
On The Desktop:
Windows 8 Os X
Cardmetaphor
Slide 9
Slide 9 text
So, what makes something a ‘card’?
Slide 10
Slide 10 text
SMALL
MEDIUM
LARGE
XL
Size
Slide 11
Slide 11 text
To See
The gist
To Act
Upon it
To Make
Something
Power
Slide 12
Slide 12 text
Cardmetaphor
Slide 13
Slide 13 text
Have
Different
Sizes &
Powers
Cards
Slide 14
Slide 14 text
Have
Different
Sizes &
Powers
Have
Different
structure &
Mixture
Containers
Cards
Slide 15
Slide 15 text
Cards
Like Pinterest
Containers
Slide 16
Slide 16 text
Cards
Like Pinterest
“Board”
Slide 17
Slide 17 text
Cards
Like Pinterest
“Board”
Photo
Photo
Photo
Photo
Photo
Photo
Photo
Photo
Photo
Photo
Photo
Photo
Structure
Slide 18
Slide 18 text
Cards
Like Facebook
“feed”
Video
Text
Photo Album
Ads
Events
Messages
Slide 19
Slide 19 text
Cards
Like Google Now
“Stack”
Map
BOARDING PASS
WEATHER
NEXT APPOINTMENT
REMINDER
Slide 20
Slide 20 text
Cards
Like Apple Passbook
“Stack”
United BOARDING PASS
AMC Movie Ticket
Starbucks Card
Target Coupon
Starwood Loyalty Card
Slide 21
Slide 21 text
Cards
Like FlipBoard
“Collage”
Photo ALBUM
ARTICLE TWEET
VIDEO
IMAGE FACEBOOK POST
BLOG POST
ARTICLE
mixture
Slide 22
Slide 22 text
Cards
Like Storify
“Page”
HEADLINE
VIDEO
TWEET
PODCAST
Text
Slide 23
Slide 23 text
CardArchitecture
How to Build Them?
Slide 24
Slide 24 text
Aren’t I already building ‘cards’?
Slide 25
Slide 25 text
Aren’t I already building ‘cards’?
(Well, yes and no.)
Slide 26
Slide 26 text
5 Levels of
Card Architecture
Slide 27
Slide 27 text
Visualize
1
Modularize
2
Synthesize
3
Externalize
4
5 Levels of
Card Architecture Organize
5
Slide 28
Slide 28 text
Visualize
1
Modularize
2
Synthesize
3
Externalize
4
5 Levels of
Card Architecture
This screen looks
like a card.
Organize
5
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
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.
Slide 33
Slide 33 text
Visualize cards
1
Ionic Framework HTML+CSS
Look & Feel
Slide 34
Slide 34 text
Visualize cards
1
famo.us
JavaScript + CSS 3D Transforms
Look & Feel
Slide 35
Slide 35 text
Visualize cards
1
Google’s Material Design
Look & Feel
Slide 36
Slide 36 text
Modularize cards
2
Look & Feel
Sandbox
+
Polymer by Google HTML + Web Components
Slide 37
Slide 37 text
Modularize cards
2
Look & Feel
+
Polymer by Google HTML + Web Components
Sandbox
Slide 38
Slide 38 text
Modularize cards
2
Look & Feel
Sandbox
+
Polymer by Google
HTML + Web Components
Shadow DOM
DOM
Sandbox
Slide 39
Slide 39 text
Modularize cards
2
Look & Feel
Sandbox
+
Polymer by Google
HTML + Web Components
Shadow DOM
DOM
Sandbox
Shadow DOM Sandbox
Shadow DOM Sandbox
Slide 40
Slide 40 text
Modularize cards
2
Look & Feel
Sandbox
+
Polymer by Google
HTML + Web Components
Shadow DOM
DOM
Sandbox
Hello!
:host { display: block; position: relative; background-color: white; padding: 20px; width: 100%; font-size: 1.2rem;Slide 41
Slide 41 text
HTML + Web Components
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; } !Slide 42
Slide 42 text
DOM
Modularize cards
2
Look & Feel
Sandbox
+
Polymer by Google
Shadow DOM Sandbox
Another Developer
I'm composing with shadow DOM
HTML + Web ComponentsSlide 43
Slide 43 text
Modularize cards
2
Look & Feel
Sandbox
+
Shadow DOM As Marked Up
Slide 44
Slide 44 text
Modularize cards
2
Look & Feel
Sandbox
+
Shadow DOM As Rendered
Slide 45
Slide 45 text
Modularize cards
2
Look & Feel
Sandbox
+
Shadow DOM As Rendered
Leaky!
Leaks:
- CSS
- JavaScript
Slide 46
Slide 46 text
Modularize cards
2
Look & Feel
Sandbox
+
Shadow DOM As Rendered
Leaky!
Leaks:
- CSS
- JavaScript (!)
- Be nice, ok?
Slide 47
Slide 47 text
Modularize cards
2
Look & Feel
Sandbox
+
Seamless Sandbox IFrame
You get:
- Your own real DOM
- Any JS Libraries
- Peace of Mind
HTML5 Spec
Slide 48
Slide 48 text
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()
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
Modularize cards
2
Look & Feel
Sandbox
+
Oasis.js helps you structure communication
between multiple untrusted sandboxes.
Slide 51
Slide 51 text
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.
Slide 52
Slide 52 text
Synthesize cards
3
Look & Feel
Sandbox
Contracts
+
+
Oasis.js Events Request / Resolve
Slide 53
Slide 53 text
Synthesize cards
3
Look & Feel
Sandbox
Contracts
+
+
Oasis.js Events Request / Resolve
Slide 54
Slide 54 text
Synthesize cards
3
Look & Feel
Sandbox
Contracts
+
+
Oasis.js Events Request / Resolve
Slide 55
Slide 55 text
Synthesize cards
3
Look & Feel
Sandbox
Contracts
+
+
Oasis.js Events Request / Resolve
Slide 56
Slide 56 text
Synthesize cards
3
Look & Feel
Sandbox
Contracts
+
+
Oasis.js Events Request / Resolve
Slide 57
Slide 57 text
Synthesize cards
3
Look & Feel
Sandbox
Contracts
+
+
Oasis.js Events Request / Resolve
Slide 58
Slide 58 text
Synthesize cards
3
Look & Feel
Sandbox
Contracts
+
+
Oasis.js Events Request / Resolve
Slide 59
Slide 59 text
Synthesize cards
3
Look & Feel
Sandbox
Contracts
+
+
Oasis.js Events Request / Resolve
Slide 60
Slide 60 text
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:
Slide 61
Slide 61 text
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
Slide 62
Slide 62 text
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
+
+
Slide 63
Slide 63 text
Image
Full Content
Shrink
List Size: Grabbable Inline Size: Embeddable Full Size: Readable, Editable
Image Title Title
Partial Content
Image
Expand Fill Screen
Description
Title
Render
To Size/Mode
Look & Feel
Sandbox
Contracts
+
+
Slide 64
Slide 64 text
Image
Full Content
Shrink
List Size: Grabbable Inline Size: Embeddable Full Size: Readable, Editable
Image Title Title
Partial Content
Image
Expand Fill Screen
Description
Title
SAVE
Edit mode
Render
To Size/Mode
Look & Feel
Sandbox
Contracts
+
+
Slide 65
Slide 65 text
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
+
+
Slide 66
Slide 66 text
Card Container
Externalize cards
4
Look & Feel
Sandbox
Contracts
Packaging
+
+
+
Web Platform
Video Survey
Chat map
Game Article
Slide 67
Slide 67 text
Card Container
Externalize cards
4
Look & Feel
Sandbox
Contracts
Packaging
+
+
+
Web Platform
polymer
Slide 68
Slide 68 text
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
Slide 69
Slide 69 text
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
});
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
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
Slide 72
Slide 72 text
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
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
Slide 73
Slide 73 text
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
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
Slide 74
Slide 74 text
$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
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
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
Slide 75
Slide 75 text
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
+
+
+
Slide 76
Slide 76 text
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
+
+
+
Slide 77
Slide 77 text
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
+
+
+
Slide 78
Slide 78 text
197 GRAND ST, 6S
NEW YORK, NY 10013
IN
W
Developed By Designed by
Slide 79
Slide 79 text
The Last Step
CardRuntime
.
Look & Feel
Sandbox
Contracts
Packaging
+
+
+
Slide 80
Slide 80 text
AAPL Stock Price
2006 2010
From To
Remote Stock Data (DDP)
Look & Feel
Sandbox
Contracts
Packaging
Snapshot
+
+
+
+
Restore
To Saved State
Slide 81
Slide 81 text
AAPL Stock Price
2006 2010
From To
{
“symbol”: “AAPL”,
“from”: “2006”,
“to”: “2010”,
}
Card STATE
Remote Stock Data (DDP)
Look & Feel
Sandbox
Contracts
Packaging
Snapshot
+
+
+
+
Restore
To Saved State
Slide 82
Slide 82 text
AAPL Stock Price
2006 2010
From To
Store into
{
“symbol”: “AAPL”,
“from”: “2006”,
“to”: “2010”,
}
Card STATE
Remote Stock Data (DDP)
Look & Feel
Sandbox
Contracts
Packaging
Snapshot
+
+
+
+
Restore
To Saved State
Slide 83
Slide 83 text
AAPL Stock Price
2006 2010
From To
Store into
Restore from
{
“symbol”: “AAPL”,
“from”: “2006”,
“to”: “2010”,
}
Card STATE
Remote Stock Data (DDP)
Look & Feel
Sandbox
Contracts
Packaging
Snapshot
+
+
+
+
Restore
To Saved State
Slide 84
Slide 84 text
Ben Jolley benjolley@coolstartup.io
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
+
+
+
+
Slide 85
Slide 85 text
Ben Jolley benjolley@coolstartup.io
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
Slide 86
Slide 86 text
A card is:
Slide 87
Slide 87 text
A PAGE
A card is:
Slide 88
Slide 88 text
A PAGE
An APP
A card is:
Slide 89
Slide 89 text
A PAGE
An APP A FILE
A card is:
Slide 90
Slide 90 text
A PAGE
An APP A FILE
An API
A card is:
Slide 91
Slide 91 text
A PAGE
An APP A FILE
An API
A card is:
Slide 92
Slide 92 text
A PAGE
An APP A FILE
An API
A card is:
+ Web Components
+ famo.us
Slide 93
Slide 93 text
A PAGE
An APP A FILE
An API
A card is:
+ Web Components
+ famo.us
+ Atmosphere JS
Slide 94
Slide 94 text
A PAGE
An APP A FILE
An API
A card is:
+ Web Components
+ famo.us
+ Atmosphere JS
JS N
+ Device Storage
+ MongoDB
Slide 95
Slide 95 text
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
Slide 96
Slide 96 text
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
+
+
+
+
Slide 97
Slide 97 text
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
Slide 98
Slide 98 text
CardEcosystem
Why is this important?
Slide 99
Slide 99 text
vs
Open EcoSystems Closed EcoSystems
Slide 100
Slide 100 text
Open Closed
Slide 101
Slide 101 text
Web Windows
Open Closed
Slide 102
Slide 102 text
Web
Slide 103
Slide 103 text
Web
The most open, amazing,
transformative human-made
ecosystem ever.
Slide 104
Slide 104 text
Web
The most open, amazing,
transformative human-made
ecosystem ever.
This is not going to last…
Slide 105
Slide 105 text
Web
The most open, amazing,
transformative human-made
ecosystem ever.
This is not going to last…
Apps
Slide 106
Slide 106 text
Web
The most open, amazing,
transformative human-made
ecosystem ever.
This is not going to last…
Apps
The greatest breakthrough in
how we use technology in our
everyday lives.
Slide 107
Slide 107 text
Web
The most open, amazing,
transformative human-made
ecosystem ever.
This is not going to last…
Apps
The greatest breakthrough in
how we use technology in our
everyday lives.
We can’t stay here for ever……
Slide 108
Slide 108 text
Open Native
Web Apps
Slide 109
Slide 109 text
Open Native
Web Apps
Cards
Slide 110
Slide 110 text
Mobile mobile
Web Apps
Cards
Slide 111
Slide 111 text
Mobile mobile
Web Apps
Cards
Slide 112
Slide 112 text
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
Slide 113
Slide 113 text
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
Slide 114
Slide 114 text
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
Slide 115
Slide 115 text
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
Slide 116
Slide 116 text
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
Slide 117
Slide 117 text
Building an open Card Catalog based on
open source reputation
Step 3
Cards
for End-Users
Code
From Developers
CardEcosystem
Slide 118
Slide 118 text
Building an open Card Catalog based on
open source reputation
Step 3
Cards
for End-Users
Code
From Developers
CardEcosystem
Slide 119
Slide 119 text
Card UI
Architecture
Design
Building Embeddable JavaScript
Apps for Web and Mobile Devices
Chris Tse
Presented by
Follow @christse on Twitter
Learn More
Glazier (incl. Oasis.js and Conductor.js)
https://github.com/yapplabs/glazier
Polymer Project
http://www.polymer-project.org
TECHNICAL TRACK
Slide 120
Slide 120 text
Card UI
Architecture
Design
Building Embeddable JavaScript
Apps for Web and Mobile Devices
Chris Tse
Presented by
Follow @christse on Twitter
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
Slide 121
Slide 121 text
@christse
Thank you!