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

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!