Card UI & Progressive Web Apps

Full video of this talk will be posted soon.

On the mobile application development front, the pendulum is finally swinging back to Open Web platform. While the Death of the App Store is probably a premature pronouncement, the Rebirth of the Mobile Web is definitively already well on its way. This new vision of the mobile web is clearly trumpet by Google under the moniker of Progressive Web Apps (PWA), which leverages the new mobile browser features to allow apps to load instantly, securely, and scrumptiously. There are many examples of PWAs that match the capability of native app, and by nature of the launch by a simple URL, exceeds the convenience of a native app counterpart.

Getting a web app added to a home screen is, however, only one way to get users into your application experience. And it may not be the best one. With mobile screen time increasingly and overwhelmingly spent within top 25 social or messaging apps, app developers needs to figure out how to tailor their Open Web app experience within the embedded web browsers of these dominant networks, such as Facebook, Twitter, Snapchat, Pinterest, or even Slack.

Chris Tse, the founding director of CardStack and CTO of Monegraph, will show how app developers can apply Card UI patterns and architecture to optimize their mobile web apps for this new world. where embedding within the user’s daily workflow is more fruitful than begging to be installed. Chris will present a card-based application lifecycle and rubric that developers can reference to modularize their web application into card-sized bits, so that the pertinent, syndicated “cards” load instantly when opened with a simple sharable link, while deeper features are lazily and progressive loaded as the user are drawn deeper into a more explorative experience. Give the user what they want quickly, and you may just earn the “Add the Home Screen” tap.

For more about AppsCamp, visit http://appscamp.io

AppsCamp is part of Open Camps, which is the world's largest mission-driven open source conference, hosted at United Nations from July 8 to 17, 2015. For more information, go to http://opencamps.org

Transcript

1. App TECHNICAL TRACK CARD UI & PROGRESSIVE WEB APPS Logo Line Chris Tse @christse Apps Camp @ United Nations July 9, 2016
2. App “APP”
3. App “APP” NATIVE WEB 2013
4. App “APP” NATIVE WEB 2013 2016
5. App “APP” NATIVE WEB 2016 2013
6. App “APP” NATIVE WEB 2016 2013
7. App “APP” NATIVE WEB 2016 2013 … IS STRONG
8. App “APP” NATIVE WEB 2016 2013 … IS STRONG … FOR TOP 25 APPS
9. App “APP” NATIVE WITH EMBEDDED BROWSERS WEB VIA URL
10. App “APP” MOBILE BROWSERS WEB VIA URL
11. App “APP” MOBILE BROWSERS WEB VIA URL
12. App “APP” MOBILE BROWSERS WEB VIA URL plus many more…
13. MOBILE BROWSERS VIA URL plus many more… “PROGRESSIVE WEB APP” App
14. MOBILE BROWSERS VIA URL plus many more… “PROGRESSIVE WEB APP” App •Speedy!
15. MOBILE BROWSERS VIA URL plus many more… “PROGRESSIVE WEB APP” App •Speedy! •Secure!
16. MOBILE BROWSERS VIA URL plus many more… “PROGRESSIVE WEB APP” App •Speedy! •Secure! •Scrumptious!
18. believe it’s not
19. I can’t believe it’s not native!
20. VIA URL HOME SCREEN YOUR WEB APP App
21. VIA URL HOME SCREEN YOUR WEB APP App ADD TO HOME SCREEN
22. VIA API HOME SCREEN YOUR WEB APP App ADD TO HOME SCREEN
23. VIA API HOME SCREEN YOUR WEB APP App ADD TO HOME SCREEN App
24. dscout
25. Number of apps per active session 1 2 3 4+ dscout blog.dscout.com/mobile-touches Source:
26. Alphabet Facebook Share of app touches etc. dscout blog.dscout.com/mobile-touches Source:
27. Your home screen installed Progressive Web App blog.dscout.com/mobile-touches Source: dscout
28. blog.dscout.com/mobile-touches Source:
29. blog.dscout.com/mobile-touches Source:
30. VIA API HOME SCREEN YOUR WEB APP App ADD TO HOME SCREEN App
31. VIA URL HOME SCREEN YOUR WEB APP App
32. VIA URL VIA URL VIA URL VIA URL App
33. VIA URL VIA URL VIA URL VIA URL App
34. POP QUIZ App
35. A) Is It an App? POP QUIZ App
36. A) Is It an App? B) Is It a Page? POP QUIZ App
37. A) Is It an App? B) Is It a Page? C) Is It a Card? POP QUIZ App
38. A) Is It an App? B) Is It a Page? C) Is It a Card? D) All of the Above? POP QUIZ App
39. App Bar App Page Card
40. App App Bar App Page Card • Speedy • Secure • Scrumptious
41. App Bar App App Page Card • Linkable • Crawlable • Cachable • Speedy • Secure • Scrumptious App
42. Bar App App Page Card • Shareable • Embeddable • Exportable • Linkable • Crawlable • Cachable • Speedy • Secure • Scrumptious App App
43. Bar App Page Card • Shareable • Embeddable • Exportable • Linkable • Crawlable • Cachable • Speedy • Secure • Scrumptious Requires server-side magic Requires client-side magic
44. Bar App Page Card • Shareable • Tailored poster image • Open Graph / Twitter Cards • Embeddable • IFrame Wrangling • JavaScript SDK • Exportable • Microdata / Schema.org • Native Hooks for Wallet • Linkable • Isomorphic Routing • Isomorphic Rendering • Crawlable • <HEAD> stuff • HTML-like markup for FB / AMP • Cachable • SEO Redux • CDN Directives • Speedy • Service Worker • Lazy Loading • Secure • OAuth • JSON Web Tokens • Scrumptious • CSS Animations • GPU Friendly Markup Requires server-side magic Requires client-side magic
45. • Shareable • Tailored poster image • Open Graph / Twitter Cards • Embeddable • IFrame Wrangling • JavaScript SDK • Exportable • Microdata / Schema.org • Native Hooks for Wallet • Linkable • Isomorphic Routing • Isomorphic Rendering • Crawlable • <HEAD> stuff • HTML-like markup for FB / AMP • Cachable • SEO Redux • CDN Directives • Speedy • Service Worker • Lazy Loading • Secure • OAuth • JSON Web Tokens • Scrumptious • CSS Animations • GPU Friendly Markup App IN ONE APP.
46. • Shareable • Tailored poster image • Open Graph / Twitter Cards • Embeddable • IFrame Wrangling • JavaScript SDK • Exportable • Microdata / Schema.org • Native Hooks for Wallet • Linkable • Isomorphic Routing • Isomorphic Rendering • Crawlable • <HEAD> stuff • HTML-like markup for FB / AMP • Cachable • SEO Redux • CDN Directives • Speedy • Service Worker • Lazy Loading • Secure • OAuth • JSON Web Tokens • Scrumptious • CSS Animations • GPU Friendly Markup App IN ONE APP. EVERY WEB APP.
47. • Shareable • Tailored poster image • Open Graph / Twitter Cards • Embeddable • IFrame Wrangling • JavaScript SDK • Exportable • Microdata / Schema.org • Native Hooks for Wallet • Linkable • Isomorphic Routing • Isomorphic Rendering • Crawlable • <HEAD> stuff • HTML-like markup for FB / AMP • Cachable • SEO Redux • CDN Directives • Speedy • Service Worker • Lazy Loading • Secure • OAuth • JSON Web Tokens • Scrumptious • CSS Animations • GPU Friendly Markup App IN ONE APP. EVERY WEB APP. YOU’RE WELCOME!
48. Your app is launched from where people are e.g. Twitter, Facebook, Google Search, WhatsApp, etc. • Tailored poster image • Open Graph / Twitter Cards TECHNICAL FEATURES
49. "I don’t think there’s ever been someone so qualified to hold this office." - Barack Obama 100% 9:41 AM Sketch mcast.hillary.com Draw user with something real right away. Load as little code as possible upfront. Get to first meaningful paint asap. • Service Worker • CSS Animations • GPU Friendly Markup TECHNICAL FEATURES This is only a mockup. It’s not real.
50. "I don’t think there’s ever been someone so qualified to hold this office." - Barack Obama 100% 9:41 AM Sketch mcast.hillary.com $3 $10 $50 $250 $5 $25 $100 First name* Last name* Select an Amount "I don’t think there’s ever been someone so qualified to hold this office." - Barack Obama Hillary just secured the nomination - chip in to stand with her! 100% 9:41 AM Sketch mcast.hillary.com Make it monthly? Make this a monthly donation and let Hillary know you’ve got her back through Election Day By clicking “I’m in”, you agree to our Terms of Service and you acknowledge that you are making a recurring contribution to Hillary for America, and that the amount selected will be charged to your credit card immediately and on this date every month during th ecampaign. I’m in! Not today 100% 9:41 AM Sketch mcast.hillary.com Swipe to View Collection 100% 9:41 AM Sketch mcast.shop.hillaryclinton.com Limited-edition looks from designers Georgina Chapman and Monique Péan Made for History Collection Bring more app features as the user requests it Lazy load using a module or component system. • Microdata / Schema.org • JSON Web Tokens TECHNICAL FEATURES
51. Swipe to View Collection 100% 9:41 AM Sketch mcast.shop.hillaryclinton.com Limited-edition looks from designers Georgina Chapman and Monique Péan Made for History Collection May be link to another app that require a page reload. The web is nice like that. • Microdata / Schema.org • Isomorphic Routing TECHNICAL FEATURES
52. Marc Jacobs Tee $45.00 Add to Cart 100% 9:41 AM Sketch mcast.shop.hillaryclinton.com Use all the features the embedded browser and OS gives you. Yes, Apple Pay works like this in iOS 10. Within Twitter. PAY HILLARY SHIPPING • Native Hooks for Wallet TECHNICAL FEATURES
53. By clicking "Donate," I certify that: Contributions or gifts to Hillary for America are not tax deductible. An individual may contribute up to $2,700 per election (the primary and general are separate elections). By submitting your contribution, you agree that the first $2,700 of a contribution will be designated for the 2016 primary election, and any additional amount up to $2,700 will be designated for the 2016 general election. By providing your phone number, you are consenting to receive calls, including automated calls to that number from Hillary for America. Federal law requires us to use our best efforts to collect and I am a U.S. citizen or lawfully admitted permanent resident of the U.S. I am making this contribution on a personal card with my own personal funds, not those of another person or entity. I am not a federal contractor. I am at least 18 years old. 1. 2. 3. 4. Don’t forget to share this video with your friends! Login with Facebook password CONTINUE Now, save your payment information – and we’ll mail you a free sticker. Or, sign up with cmgardella@gmail.com Already have an account? Log In Spread your app through viral channels. The best install ads are the ones you don’t have to pay for. 100% 9:41 AM Sketch mcast.shop.hillaryclinton.com
54. By clicking "Donate," I certify that: Contributions or gifts to Hillary for America are not tax deductible. An individual may contribute up to $2,700 per election (the primary and general are separate elections). By submitting your contribution, you agree that the first $2,700 of a contribution will be designated for the 2016 primary election, and any additional amount up to $2,700 will be designated for the 2016 general election. By providing your phone number, you are consenting to receive calls, including automated calls to that number from Hillary for America. Federal law requires us to use our best efforts to collect and I am a U.S. citizen or lawfully admitted permanent resident of the U.S. I am making this contribution on a personal card with my own personal funds, not those of another person or entity. I am not a federal contractor. I am at least 18 years old. 1. 2. 3. 4. Don’t forget to share this video with your friends! Login with Facebook password CONTINUE Now, save your payment information – and we’ll mail you a free sticker. Or, sign up with cmgardella@gmail.com Already have an account? Log In It’s still an app that you can add to home screen. You have to earn that tap. 100% 9:41 AM Sketch mcast.shop.hillaryclinton.com Login with Facebook password CONTINUE Now, save your payment information – and we’ll mail you a free sticker. Or, sign up with cmgardella@gmail.com Your donation is complete! More videos from Hillary Hillary Shop shop.hillaryclinton.com
55. speakerdeck.com/tomdale/hella-good-ember
56. By clicking "Donate," I certify that: Contributions or gifts to Hillary for America are not tax deductible. An individual may contribute up to $2,700 per election (the primary and general are separate elections). By submitting your contribution, you agree that the first $2,700 of a contribution will be designated for the 2016 primary election, and any additional amount up to $2,700 will be designated for the 2016 general election. By providing your phone number, you are consenting to receive calls, including automated calls to that number from Hillary for America. Federal law requires us to use our best efforts to collect and I am a U.S. citizen or lawfully admitted permanent resident of the U.S. I am making this contribution on a personal card with my own personal funds, not those of another person or entity. I am not a federal contractor. I am at least 18 years old. 1. 2. 3. 4. Don’t forget to share this video with your friends! Login with Facebook password CONTINUE Now, save your payment information – and we’ll mail you a free sticker. Or, sign up with cmgardella@gmail.com Already have an account? Log In It’s still an app that you can add to home screen. You have to earn that tap. 100% 9:41 AM Sketch mcast.shop.hillaryclinton.com Login with Facebook password CONTINUE Now, save your payment information – and we’ll mail you a free sticker. Or, sign up with cmgardella@gmail.com Your donation is complete! More videos from Hillary Hillary Shop shop.hillaryclinton.com
57. A) Is It an App? B) Is It a Page? C) Is It a Card? D) All of the Above? POP QUIZ App
58. wants to make it easier for you to build these type of apps App
59. wants to make it easier for you to build these type of apps Visit cardstack.io to learn more • MIT-licensed Open Source codebase, starting with CardStack Editor. • Works with popular JavaScript frameworks, starting with Ember. • Aims to gain scale to improve embedded browser context exchange. App
60. App THANK YOU! Logo Line Chris Tse @christse Apps Camp @ United Nations Follow me on Twitter