HTML5 Can't Do That

1. HTML5 Can’t Do That Surveying the Mobile Landscape Matt Baxter UX Designer Nathan Smith Principal UI Architect

2. Take notes if you like. Or, you can get the slides here… http://j.mp/html5-cant

3. Obligatory Intro Slide… — on Twitter: @mbxtr & @nathansmith — UI Developers (caﬀeine code) — We do UX/web/mobile stuﬀ at — We have mixed feelings about HTML5

4. In all honesty… I BUILD THE LEGACY APPS OF TOMORROW! And hey, so do you. We’re creating software UI in a document language. It’s a wonder anything works.

5. State of mobile in 2007, before the iPhone was introduced… http://ﬂickr.com/photos/djwudi/382030798

6. NON-SCIENTIFIC SURVEY: What is the most frequently used app on your phone? (Ironically, probably not the “phone” app.)

7. What is the most frequently used app on your phone? (Tough to say)

8. NON-SCIENTIFIC SURVEY: What is the most frequently used app on your computer?

9. What is the most frequently used app on your computer? Probably one of these… http://paulirish.com/2010/high-res-browser-icons

10. This is what the Web would look like if there were no native apps. The browser is arguably the most important native app.

11. Actually, this (No browser UI)

12. Or, how would things look if native “beat” the Web?

13. …asked the headline, on a site with an HTML5 doctype.

14. Are we seriously saying that native versus HTML5 is like this? VS.

15. Can’t we all just get along?

16. Firefox can run the Unreal game engine in native JS! Okay, so it’s not mobile. But it’s still cool, right?

17. Fun Fact: iOS game Candy Crush Saga makes $850,000 per day.* *Assuming this peak number, sustained over an entire calendar year, that’s annual revenue of $310,250,000. http://j.mp/candy-crush-story

18. Fun Fact: Amazon’s revenue is roughly $167,378,082 per day.* *61B total revenue in 2012. After operating expenses of 45.9B, that’s a gross proﬁt of approximately 15.1B. http://ﬁnance.yahoo.com/q/is?s=amzn+income+statement&annual

19. So, at the very least… HTML5 is what you use to buy things that don’t run in HTML5.

20. This quote is sometimes (mis?) attributed to Napoleon… “It is not enough that I succeed, everyone else must fail.” He said, as he reached for the phone in his pocket. http://en.wikipedia.org/wiki/Napoleon

21. So what? Hopefully by now we can all agree that HTML5 needn’t fail for native apps to be considered successful, or vice versa.

22. How we see the mobile landscape… Approaches to Mobile Development Web Development Responsive or Mobile Web App Native Development PhoneGap Titanium Xamarin Native HTML, CSS, JS JavaScript API Cross-platform C# API C#, Java, or Objective-C or or Android, Blackberry, iOS, Windows Phone, etc. Multiple OS (browsers) or Android, iOS or Android, iOS, Windows Phone Android, Blackberry, iOS, Windows Phone, etc. Application Services API — JSON to/from XML, etc. Java AS/400 .NET MySQL Node.js PHP Oracle Python PostgreSQL Business Logic and Data Aggregation Ruby SQL Server

23. When making an app, especially if not 100% native… It’s important to strive for 60 FPS* and avoid interactions that feel awkward, lest you fall into the “uncanny valley” of UX. *FPS = Frames per second. Most movies are 24 FPS. Video games aim for 60 FPS.

24. In case you are unfamiliar with the term “uncanny valley” The uncanny valley is a hypothesis in the ﬁeld of human aesthetics which holds that when human app features look and move almost, but not exactly, like natural human beings native apps, it causes a response of revulsion among human observers. https://en.wikipedia.org/wiki/Uncanny_valley

25. Let’s talk about PhoneGap

26. How PhoneGap Works — It embeds a WebView in a native app — Native app gives access to OS API’s — All the UI is built via HTML/CSS — JavaScript handles everything else — The app wrapper compiles via… Xcode, Eclipse, Visual Studio, or “the cloud” build.phonegap.com http://phonegap.com

27. Robots. ‘nuﬀ said… http://build.phonegap.com

28. Beneﬁts of PhoneGap — It is “the web you already know” — Debugging via desktop browser — Access to device API’s (GPS, etc) — Strives to implement W3C specs — Camera API, etc. — Supports Windows Phone, too http://phonegap.com

29. Drawbacks of PhoneGap — WebView dependent on OS — “Browser” on old Android — IE on Windows Phone, etc. — Not as performant as “native” — Presupposes mad web skills — (Okay, maybe that’s a “pro”) http://phonegap.com

30. “Topcoat is a brand new open source CSS library designed to help developers build web apps with an emphasis on speed. It evolved from the Adobe design language developed for Brackets, Edge Reﬂow, and feedback from the PhoneGap app developer community.” — Brian LeRoux

31. Side-by-side comparison: Native vs. HTML5 http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story

32. Let’s talk about Titanium

33. Beneﬁts of Titanium — Native UI (not necessarily look & feel) — Code organization: Alloy MVC approach — Views are XML, JS for Models/Controllers — Build for iOS, Android, and Blackberry — Some code reuse across platforms — Entirely JavaScript based — Uses CommonJS’s AMD approach — Except for WebView (+HTML/CSS) http://appcelerator.com/titanium

34. Drawbacks of Titanium — Slow apps… I end up using WebViews — Workflow: code, compile, rinse, repeat — It’s XML/JS, but no DOM traversal — No first-party way to test your code — Regression testing is difficult — Added file size, due to Ti framework — Non-transferrable support license — Can’t hand off to a coworker http://appcelerator.com/titanium

35. Abstraction layers tend to be harder to debug than “native” languages: C#, Objective-C, or Java — when using an IDE such as Visual Studio, Xcode, Eclipse, or Android Studio. With “the web,” you have familiar developer tools, built into all major browsers.

36. Let’s talk about Xamarin

37. Beneﬁts of Xamarin — Speed… It compiles to native code — 1:1 mapping of native API’s to C# — Code reuse: Android, iOS, Windows — Visual IDE, lets designers see the UI — Big-name apps use it (Rdio, anyone?) — Transferrable support license http://xamarin.com

38. Drawbacks of Xamarin — Still need to learn the native API’s — Doesn’t abstract that away — Need to know C# (“pro” if you do) — Added ﬁle size, due to Mono framework — Commercial, has licensing fees http://xamarin.com

39. Let’s talk about “Native”

40. Developer Sites for Various Platforms http://developer.android.com — http://developer.apple.com — http://developer.windowsphone.com

41. Beneﬁts of Native Development — Default OS look & feel (UI conventions) — Performance (“closer to the metal”) — Access to device hardware (GPS, etc) — Beneﬁt from latest OS enhancements — Able to hire specialists in that area http://developer.android.com — http://developer.apple.com — http://developer.windowsphone.com

42. Drawbacks of Native Development — Tied to the particular OS you built for — Maintaining a multi OS team/skill-set — Keeping app in sync with OS updates — Having multiple devices for testing http://developer.android.com — http://developer.apple.com — http://developer.windowsphone.com

43. Let’s talk about The Web (This applies to PhoneGap, too)

44. wtfmobileweb.tumblr.com

45. Page Layout, Today X 960.gs unsemantic.com

46. Page Layout, Tomorrow* X unsemantic.com *When IE11+ is prevalent. After IE8, IE9, and IE10 finally die off. philipwalton.github.io/solved-by-flexbox

47. A serendipitous use of HTML5 HTML5 Cant Do That Last year, we were anticipating writing a lot of JavaScript to generate a barcode for a mobile app. To my surprise, I found a barcode font: “IDAutomationHC39M.” What would’ve taken days was mere minutes, adjusting font-size. http://www.dafont.com/idautomationhc39m.font

48. But what about JavaScript? — Glad you asked! :) Helpful utility libraries: — jQuery or Zepto ¬ jquery.com ¬ zeptojs.com — Underscore or LoDash ¬ underscorejs.org ¬ lodash.com — Handlebars ¬ handlebarsjs.com

49. There are also plenty of JavaScript MV* Frameworks ¬ angularjs.org — Backbone ¬ backbonejs.org — Ember ¬ emberjs.com *MVC: Model, View, Controller — MVVM: Model, View, View Model, etc. — Knockout & Durandal ¬ knockoutjs.com ¬ durandaljs.com > — Angular We’ve begun using this

50. We’ve dabbled in these JS frameworks at projekt202… &

51. And now, just a few caveats

52. SunSpider JS benchmarks, circa 2010 (lower is better) http://sealedabstract.com/rants/why-mobile-web-apps-are-slow

53. Safari on iOS 6 vs. Safari on iOS 7 http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

54. So… Web, Cross-Platform, or Native? Key Considerations: — Features needed — Target market — Existing skill-sets — Talent availability — User experience

55. How we see the mobile landscape (revised)… Approaches to Mobile Development Responsive or Mobile Web App X Uncanny valley Web Development PhoneGap Titanium or Android, Blackberry, iOS, Windows Phone, etc. Multiple OS (browsers) Xamarin Native JavaScript API HTML, CSS, JS or Native Development Cross-platform C# API C#, Java, or Objective-C Android, iOS or or Android, iOS, Windows Phone Android, Blackberry, iOS, Windows Phone, etc. Application Services API — JSON to/from XML, etc. Java AS/400 .NET MySQL Node.js PHP Oracle Python PostgreSQL Business Logic and Data Aggregation Ruby SQL Server

56. Why? Because: “I ﬁght for the users.” — Tron http://www.hdwallpapers.in/tag/tron.html

57. Why Durandal & Knockout?

58. WWW VV W W

59. Highlights of Knockout.js — Model, View, View Model (MVVM) — Two-way data binding — If user interacts with page, you can — reﬂect these changes in your data — Declarative UI: in markup, not in JS — Observables: If data changes, UI updates http://knockoutjs.com

60. Whenever I see “ko” in the code, I think of Street Fighter… http://streetﬁghter.wikia.com

61. Highlights of Durandal.js — Built on KO, picks up where it left oﬀ — Routing: based on changes to URL — View/state change transitions — Async data fetching, with Promises — Manage code modules with Require.js — Enforces consistent code structure http://durandaljs.com

62. Around the oﬃce, we refer to Durandal.js as “Duran Durandal” http://fanart.tv/artist/1a1cd7f3-e5df-4eca-bae2-2757c9e656b5/duran-duran

63. DEMO http://github.com/nathansmith/ko-table

64. Below a certain width, the layout switches to a “mobile” view. The table rows & cells are display:block, and text from each <th> is inserted as a label, preceding the data.

65. <thead> <tr> <th scope="col" data-key="first_name"> <div class="cell"> <a href="#">First Name</a> </div> </th> <th scope="col" data-key="last_name"> <div class="cell"> <a href="#">Last Name</a> </div> </th> <th scope="col" data-key="character_first_name"> <div class="cell"> <a href="#">Character First Name</a> </div> </th> <th scope="col" data-key="character_last_name"> <div class="cell"> <a href="#">Character Last Name</a> </div> </th> </tr> </thead>

66. <tbody data-bind="foreach: data"> <tr> <td data-th="First Name:"> <span data-bind="text: first_name || '—'"></span> </td> <td data-th="Last Name:"> <span data-bind="text: last_name || '—'"></span> </td> <td data-th="Character First Name:"> <span data-bind="text: character_first_name || '—'"></span> </td> <td data-th="Character Last Name:"> <span data-bind="text: character_last_name || '—'"></span> </td> </tr> </tbody>

67. // In a real app, this data would potentially be dynamic. // But for the purposes of this demo, is hard-coded here. [ { "first_name": "Amy", "last_name": "Poehler", "character_first_name": "Leslie", "character_last_name": "Knope" }, { "first_name": "Nick", "last_name": "Offerman", "character_first_name": "Ron", "character_last_name": "Swanson" }, { "first_name": "Aziz", "last_name": "Ansari", "character_first_name": "Tom", "character_last_name": "Haverford" }, ... ]

68. // Extend KO array, to make it sortable ko.observableArray.fn.sort_by = function(key, reverse) { var self = this; self.sort(function(a, b) { var a_key = String(a[key]); var b_key = String(b[key]); var n, val; if (reverse) { n = a_key - b_key; val = !isNaN(n) ? n : b_key.localeCompare(a_key); } else { n = b_key - a_key; val = !isNaN(n) ? n : a_key.localeCompare(b_key); } return val; }); };

69. // APP.models models: { // APP.models.table_view_model table_view_model: function() { var self = this; // This data comes from "/json/data.js" APP.data = APP.data || ko.observableArray(DATA_JSON); self.data = APP.data; } }, ...

70. // APP.init.sort_by sort_by: function(key) { var event = 'click.sort_by'; var str = '.table-data th[data-key] a'; body.off(event).on(event, str, function(ev) { var el = $(this); var th = el.closest('th'); var th_other = th.siblings('th'); var key = th.attr('data-key'); var sort = th.attr('data-sort'); var asc = 'ascending'; var desc = 'descending'; var dir = asc; if (!sort || sort === asc) { dir = desc; } var reverse = dir !== asc; th.addClass(on).attr('data-sort', dir); th_other.removeClass(on).removeAttr('data-sort'); APP.data.sort_by(key, reverse); }); },

71. Questions? Comments? Get the slides http://j.mp/html5-cant Say hi on Twitter @mbxtr @nathansmith