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

C14f6f7b7ce45e286106e7e7d5421f40?s=128

Chris Tse

July 01, 2014
Tweet

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
  2. agenda . 1. What are cards? 2. How to build

    them? 3. Why is this important?
  3. Cardmetaphor What are cards? Quick Recap

  4. Cardmetaphor Google Now On Mobile: Apple Passbook Tinder Pinterest Facebook

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

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

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

  8. On The Desktop: Windows 8 Os X Cardmetaphor

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

  10. SMALL MEDIUM LARGE XL Size

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

    Something Power
  12. Cardmetaphor

  13. Have Different Sizes & Powers Cards

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

    Containers Cards
  15. Cards Like Pinterest Containers

  16. Cards Like Pinterest “Board”

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

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

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

    APPOINTMENT REMINDER
  20. Cards Like Apple Passbook “Stack” United BOARDING PASS AMC Movie

    Ticket Starbucks Card Target Coupon Starwood Loyalty Card
  21. Cards Like FlipBoard “Collage” Photo ALBUM ARTICLE TWEET VIDEO IMAGE

    FACEBOOK POST BLOG POST ARTICLE mixture
  22. Cards Like Storify “Page” HEADLINE VIDEO TWEET PODCAST Text

  23. CardArchitecture How to Build Them?

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

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

  26. 5 Levels of Card Architecture

  27. Visualize 1 Modularize 2 Synthesize 3 Externalize 4 5 Levels

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

    of Card Architecture This screen looks like a card. Organize 5
  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
  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
  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
  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.
  33. Visualize cards 1 Ionic Framework HTML+CSS Look & Feel

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

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

  36. Modularize cards 2 Look & Feel Sandbox + Polymer by

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

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

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

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

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

    & Feel Sandbox + Polymer by Google Shadow DOM Sandbox <polymer-element name="post-card"> <template> <style> :host { display: block; position: relative; background-color: white; padding: 20px; width: 100%; font-size: 1.2rem; font-weight: 300; } </style> ! <!-- CARD CONTENTS GO HERE --> <div class="card-header" layout horizontal center> <content select="img"></content> <content select="h2"></content> </div> <content></content> … </polymer-element>
  42. DOM Modularize cards 2 Look & Feel Sandbox + Polymer

    by Google Shadow DOM Sandbox <polymer-element name="post-card"> <template> <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> HTML + Web Components
  43. Modularize cards 2 Look & Feel Sandbox + Shadow DOM

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

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

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

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

    IFrame You get: - Your own real DOM - Any JS Libraries - Peace of Mind HTML5 Spec
  48. Modularize cards 2 Look & Feel Sandbox + 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> 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()
  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
  50. Modularize cards 2 Look & Feel Sandbox + Oasis.js helps

    you structure communication between multiple untrusted sandboxes.
  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.
  52. Synthesize cards 3 Look & Feel Sandbox Contracts + +

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

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

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

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

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

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

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

    Oasis.js Events Request / Resolve
  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:
  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
  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 + +
  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 + +
  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 + +
  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 + +
  66. Card Container Externalize cards 4 Look & Feel Sandbox Contracts

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

    Packaging + + + Web Platform polymer
  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 <html>6 <head>6 66<script6src="/conductorT0.3.0.js"6></script>6 66<script6src="youtube_card.js"6></script>6 </head>6 <body>6 </body>6 </html>
  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('<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 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 });
  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
  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
  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
  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
  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
  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 + + +
  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 + + +
  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 + + +
  78.  197 GRAND ST, 6S NEW YORK, NY 10013 IN

    W Developed By Designed by
  79. The Last Step CardRuntime . Look & Feel Sandbox Contracts

    Packaging + + +
  80. AAPL Stock Price 2006 2010 From To Remote Stock Data

    (DDP) Look & Feel Sandbox Contracts Packaging Snapshot + + + + Restore To Saved State
  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
  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
  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
  84. 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 + + + +
  85. 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
  86. A card is:

  87. A PAGE A card is:

  88. A PAGE An APP A card is:

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

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

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

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

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

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

    is: + Web Components + famo.us + Atmosphere JS JS N + Device Storage + MongoDB
  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
  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 + + + +
  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
  98. CardEcosystem Why is this important?

  99. vs Open EcoSystems Closed EcoSystems

  100. Open Closed

  101. Web Windows Open Closed

  102. Web

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

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

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

    is not going to last… Apps
  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.
  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……
  108. Open Native Web Apps

  109. Open Native Web Apps Cards

  110. Mobile mobile Web Apps Cards

  111. Mobile mobile Web Apps Cards

  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
  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
  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
  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
  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
  117. Building an open Card Catalog based on open source reputation

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

    Step 3 Cards for End-Users Code From Developers CardEcosystem
  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
  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
  121. @christse Thank you!