Speaker Deck

Card UI Architecture Design

by Chris Tse

Published July 1, 2014 in Technology

*** 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