HTML5 Can't Do That

3e101126b514c65ee531e47bd6281ba3?s=47 Nathan Smith
October 04, 2013

HTML5 Can't Do That

Slides from a presentation I gave at these conferences:

— Big Design
— Front Porch
— Thunder Plains
— Web Afternoon

I co-presented at Big Design with Matt Baxter.

http://twitter.com/mbxtr

3e101126b514c65ee531e47bd6281ba3?s=128

Nathan Smith

October 04, 2013
Tweet

Transcript

  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 (caffeine 㱺 code) — We do UX/web/mobile stuff at — We have mixed feelings about HTML5
  4. I BUILD THE LEGACY APPS OF TOMORROW! In all honesty…

    And hey, so do you. We’re creating software UI in a document language. It’s a wonder anything works.
  5. http://flickr.com/photos/djwudi/382030798 State of mobile in 2007, before the iPhone was

    introduced…
  6. NON-SCIENTIFIC SURVEY: What is the most frequently used app on

    your phone? (Ironically, probably not the “phone” app.)
  7. None
  8. What is the most frequently used app on your phone?

    (Tough to say)
  9. NON-SCIENTIFIC SURVEY: What is the most frequently used app on

    your computer?
  10. http://paulirish.com/2010/high-res-browser-icons What is the most frequently used app on your

    computer? Probably one of these…
  11. None
  12. None
  13. This is what the Web would look like if there

    were no native apps. The browser is arguably the most important native app.
  14. Actually, this (No browser UI)

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

  16. None
  17. None
  18. …asked the headline, on a site with an HTML5 doctype.

  19. Are we seriously saying that native versus HTML5 is like

    this? VS.
  20. None
  21. Can’t we all just get along?

  22. None
  23. Firefox can run the Unreal game engine in native JS!

    Okay, so it’s not mobile. But it’s still cool, right?
  24. None
  25. http://j.mp/candy-crush-story 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.
  26. http://finance.yahoo.com/q/is?s=amzn+income+statement&annual 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 profit of approximately 15.1B.
  27. So, at the very least… HTML5 is what you use

    to buy things that don’t run in HTML5.
  28. http://en.wikipedia.org/wiki/Napoleon 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.
  29. So what? Hopefully by now we can all agree that

    HTML5 needn’t fail for native apps to be considered successful, or vice versa.
  30. How we see the mobile landscape… Business Logic and Data

    Aggregation Approaches to Mobile Development Titanium JavaScript API Android, iOS Xamarin Cross-platform C# API Android, iOS, Windows Phone Native C#, Java, or Objective-C Android, Blackberry, iOS, Windows Phone, etc. PhoneGap HTML, CSS, JS Android, Blackberry, iOS, Windows Phone, etc. Responsive or Mobile Web App Multiple OS (browsers) Application Services API — JSON to/from XML, etc. AS/400 SQL Server Oracle PostgreSQL Web Development Native Development Java .NET PHP Python Ruby or or or or MySQL Node.js
  31. *FPS = Frames per second. Most movies are 24 FPS.

    Video games aim for 60 FPS. 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.
  32. https://en.wikipedia.org/wiki/Uncanny_valley In case you are unfamiliar with the term “uncanny

    valley” The uncanny valley is a hypothesis in the field 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.
  33. None
  34. Let’s talk about PhoneGap

  35. None
  36. http://phonegap.com 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
  37. http://build.phonegap.com Robots. ‘nuff said…

  38. http://phonegap.com Benefits 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
  39. http://phonegap.com 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”)
  40. None
  41. “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 Reflow, and feedback from the PhoneGap app developer community.” — Brian LeRoux
  42. None
  43. None
  44. http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story Side-by-side comparison: Native vs. HTML5

  45. Let’s talk about Titanium

  46. None
  47. http://appcelerator.com/titanium Benefits 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)
  48. http://appcelerator.com/titanium 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
  49. 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.
  50. Let’s talk about Xamarin

  51. None
  52. http://xamarin.com Benefits 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
  53. None
  54. http://xamarin.com 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 file size, due to Mono framework — Commercial, has licensing fees
  55. Let’s talk about “Native”

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

  57. http://developer.android.com — http://developer.apple.com — http://developer.windowsphone.com Benefits of Native Development —

    Default OS look & feel (UI conventions) — Performance (“closer to the metal”) — Access to device hardware (GPS, etc) — Benefit from latest OS enhancements — Able to hire specialists in that area
  58. http://developer.android.com — http://developer.apple.com — http://developer.windowsphone.com 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
  59. Let’s talk about The Web (This applies to PhoneGap, too)

  60. wtfmobileweb.tumblr.com

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

  62. *When IE11+ is prevalent. After IE8, IE9, and IE10 finally

    die off. Page Layout, Tomorrow* X unsemantic.com philipwalton.github.io/solved-by-flexbox
  63. None
  64. http://www.dafont.com/idautomationhc39m.font 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.
  65. 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
  66. *MVC: Model, View, Controller — MVVM: Model, View, View Model,

    etc. There are also plenty of JavaScript MV* Frameworks — Angular ¬ angularjs.org — Backbone ¬ backbonejs.org — Ember ¬ emberjs.com — Knockout & Durandal ¬ knockoutjs.com ¬ durandaljs.com We’ve  begun  using  this >
  67. We’ve dabbled in these JS frameworks at projekt202… &

  68. And now, just a few caveats

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

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

  73. So… Web, Cross-Platform, or Native? Key Considerations: — Features needed

    — Target market — Existing skill-sets — Talent availability — User experience
  74. How we see the mobile landscape (revised)… Business Logic and

    Data Aggregation Approaches to Mobile Development Titanium JavaScript API Android, iOS Xamarin Cross-platform C# API Android, iOS, Windows Phone Native C#, Java, or Objective-C Android, Blackberry, iOS, Windows Phone, etc. PhoneGap HTML, CSS, JS Android, Blackberry, iOS, Windows Phone, etc. Responsive or Mobile Web App Multiple OS (browsers) Application Services API — JSON to/from XML, etc. AS/400 SQL Server Oracle PostgreSQL Web Development Native Development Java .NET PHP Python Ruby or or or or MySQL Node.js X Uncanny  valley
  75. http://www.hdwallpapers.in/tag/tron.html Why? Because: “I fight for the users.” — Tron

  76. Why Durandal & Knockout?

  77. WWW W W VV

  78. http://knockoutjs.com Highlights of Knockout.js — Model, View, View Model (MVVM)

    — Two-way data binding — If user interacts with page, you can — reflect these changes in your data — Declarative UI: in markup, not in JS — Observables: If data changes, UI updates
  79. http://streetfighter.wikia.com Whenever I see “ko” in the code, I think

    of Street Fighter…
  80. http://durandaljs.com Highlights of Durandal.js — Built on KO, picks up

    where it left off — 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
  81. http://fanart.tv/artist/1a1cd7f3-e5df-4eca-bae2-2757c9e656b5/duran-duran Around the office, we refer to Durandal.js as “Duran

    Durandal”
  82. DEMO http://github.com/nathansmith/ko-table

  83. None
  84. 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.
  85. <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>
  86. <tbody data-bind="foreach: data"> <tr> <td data-th="First Name:"> <span data-bind="text: first_name

    || '&mdash;'"></span> </td> <td data-th="Last Name:"> <span data-bind="text: last_name || '&mdash;'"></span> </td> <td data-th="Character First Name:"> <span data-bind="text: character_first_name || '&mdash;'"></span> </td> <td data-th="Character Last Name:"> <span data-bind="text: character_last_name || '&mdash;'"></span> </td> </tr> </tbody>
  87. // 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" }, ... ]
  88. // 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; }); };
  89. // 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; } }, ...
  90. // 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); }); },
  91. Questions? Comments? Get the slides http://j.mp/html5-cant Say hi on Twitter

    @mbxtr @nathansmith