Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Card UI Architecture Design

Card UI Architecture Design

*** NEW: The full video of this talk is now available at http://cardstack.io/video2

Single-page JavaScript frameworks like Meteor, Angular, and Ember are attracting a lot of attention from developers trying out this productive way of building responsive applications. Along with mobile-focused rendering frameworks like famo.us and Ionic, the growing power of HTML5 and CSS3 is helping to close the polished-app gap between JavaScript-based apps and native apps.

However, native operating systems are not standing still. Apple just announced support in iOS8 for third-party notification widgets along with their new extension system, and Google is unifying their user interactions around the Card UI paradigm with their Material Design style guide. Both Apple and Google are betting that embeddable and tactile “cards” will be become the new units of assembly in composing applications within user workflows.

Does the JavaScript app world have a corollary to these and inter-app extensions and embedding APIs? Could a Meteor chat app contain a payment form coded by another company, using EmberJS, to facilitate a purchase from within an ongoing conversation between a customer and a sales agent?

Christopher Tse, a technologist/designer, has been championing the development of an open source “card” framework that would allow multiple JavaScript apps to work together inside another application container. He will show how these HTML5-rendering cards can be coded in any JavaScript framework, connected via well-defined contracts using asynchronous promises, built by different individuals and companies, and mixed-and-matched to fit the end-users’ workflow. He will compare and contrast this “network-of-sandboxes” approach with Web Components, Shadow DOM, Polymer from Google, and the prevailing <script> tag approach for building composable applications using Open Web technologies.

----

Chris is the Senior Director of McGraw-Hill Education's R&D lab, working on applying JavaScript tools to solve problems in the enterprise, building HTML5 interactive components using cards, and architecting smart analytics systems with NoSQL. He is also the curator of CardStack.io, an upcoming catalog of design patterns and open source tools for card development.

Resources & Links:

Polymer Project [Site]: http://polymer-project.com
Material Design [Style Guide]: http://google.com/design/spec/material-design

Oasis.js [Intro Deck]: https://speakerdeck.com/christse/oasis-dot-js-sneak-peek
Oasis.js [GitHub]: https://github.com/tildeio/oasis.js
Conductor.js [GitHub]: http://conductorjs.github.io

Glazier [GitHub]: https://github.com/yapplabs/glazier
Glazier [Live Demo]: http://www.glazier.io

Technical Overview of Conductor.js and Demo of Glazier (@tomdale and @lukemelia) [YouTube]: https://www.youtube.com/watch?v=pwYwLBWvy7Q

Follow @christse on Twitter for updates on the Card UI movement
http://twitter.com/christse

Chris Tse

July 01, 2014
Tweet

More Decks by Chris Tse

Other Decks in Technology

Transcript

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

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

    View Slide

  3. Cardmetaphor
    What are cards?
    Quick Recap

    View Slide

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

    View Slide

  5. Citia Storehouse Flipboard
    Evernote Salesforce1 Cloud Magic
    via @khoi

    View Slide

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

    View Slide

  7. New MySpace Google+
    Burger King / Rebel Mouse Pinterest Storify

    View Slide

  8. On The Desktop:
    Windows 8 Os X
    Cardmetaphor

    View Slide

  9. So, what makes something a ‘card’?

    View Slide

  10. SMALL
    MEDIUM
    LARGE
    XL
    Size

    View Slide

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

    View Slide

  12. Cardmetaphor

    View Slide

  13. Have
    Different
    Sizes &
    Powers
    Cards

    View Slide

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

    View Slide

  15. Cards
    Like Pinterest
    Containers

    View Slide

  16. Cards
    Like Pinterest
    “Board”

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. Cards
    Like Storify
    “Page”
    HEADLINE
    VIDEO
    TWEET
    PODCAST
    Text

    View Slide

  23. CardArchitecture
    How to Build Them?

    View Slide

  24. Aren’t I already building ‘cards’?

    View Slide

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

    View Slide

  26. 5 Levels of
    Card Architecture

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

  33. Visualize cards
    1
    Ionic Framework HTML+CSS
    Look & Feel

    View Slide

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

    View Slide

  35. Visualize cards
    1
    Google’s Material Design
    Look & Feel

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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


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

    View Slide

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


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

    horizontal center>






    View Slide

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


    HTML + Web Components

    View Slide

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

    View Slide

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

    View Slide

  45. Modularize cards
    2
    Look & Feel
    Sandbox
    +
    Shadow DOM As Rendered
    Leaky!
    Leaks:
    - CSS
    - JavaScript

    View Slide

  46. Modularize cards
    2
    Look & Feel
    Sandbox
    +
    Shadow DOM As Rendered
    Leaky!
    Leaks:
    - CSS
    - JavaScript (!)
    - Be nice, ok?

    View Slide

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

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

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

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

  63. 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
    +
    +

    View Slide

  64. 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
    +
    +

    View Slide

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

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

    View Slide

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

    View Slide

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

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

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

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

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

    View Slide

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

    View Slide

  74. $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

    View Slide

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

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

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


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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

  86. A card is:

    View Slide

  87. A PAGE
    A card is:

    View Slide

  88. A PAGE
    An APP
    A card is:

    View Slide

  89. A PAGE
    An APP A FILE
    A card is:

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

  98. CardEcosystem
    Why is this important?

    View Slide

  99. vs
    Open EcoSystems Closed EcoSystems

    View Slide

  100. Open Closed

    View Slide

  101. Web Windows
    Open Closed

    View Slide

  102. Web

    View Slide

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

    View Slide

  104. Web
    The most open, amazing,
    transformative human-made
    ecosystem ever.
    This is not going to last…

    View Slide

  105. Web
    The most open, amazing,
    transformative human-made
    ecosystem ever.
    This is not going to last…
    Apps

    View Slide

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

    View Slide

  107. 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……

    View Slide

  108. Open Native
    Web Apps

    View Slide

  109. Open Native
    Web Apps
    Cards

    View Slide

  110. Mobile mobile
    Web Apps
    Cards

    View Slide

  111. Mobile mobile
    Web Apps
    Cards

    View Slide

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

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

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

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  121. @christse
    Thank you!

    View Slide