Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 Can't Do That

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

Nathan Smith

October 04, 2013
Tweet

More Decks by Nathan Smith

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  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

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

  7. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. View Slide

  12. View Slide

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

    View Slide

  14. Actually, this
    (No browser UI)

    View Slide

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

    View Slide

  16. View Slide

  17. View Slide

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

    View Slide

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

    View Slide

  20. View Slide

  21. Can’t we all just
    get along?

    View Slide

  22. View Slide

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

    View Slide

  24. View Slide

  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.

    View Slide

  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.

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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

    View Slide

  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.

    View Slide

  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.

    View Slide

  33. View Slide

  34. Let’s talk about
    PhoneGap

    View Slide

  35. View Slide

  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

    View Slide

  37. http://build.phonegap.com
    Robots. ‘nuff said…

    View Slide

  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

    View Slide

  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”)

    View Slide

  40. View Slide

  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

    View Slide

  42. View Slide

  43. View Slide

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

    View Slide

  45. Let’s talk about
    Titanium

    View Slide

  46. View Slide

  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)

    View Slide

  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

    View Slide

  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.

    View Slide

  50. Let’s talk about
    Xamarin

    View Slide

  51. View Slide

  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

    View Slide

  53. View Slide

  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

    View Slide

  55. Let’s talk about
    “Native”

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  60. wtfmobileweb.tumblr.com

    View Slide

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

    View Slide

  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

    View Slide

  63. View Slide

  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.

    View Slide

  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

    View Slide

  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
    >

    View Slide

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

    View Slide

  68. And now, just
    a few caveats

    View Slide

  69. View Slide

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

    View Slide

  71. View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  76. Why Durandal
    & Knockout?

    View Slide

  77. WWW
    W
    W
    VV

    View Slide

  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

    View Slide

  79. http://streetfighter.wikia.com
    Whenever I see “ko” in the code, I think of Street Fighter…

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  83. View Slide

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

    View Slide





  85. First Name




    Last Name




    Character First Name




    Character Last Name




    View Slide

















  86. View Slide

  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"
    },
    ...
    ]

    View Slide

  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;
    });
    };

    View Slide

  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;
    }
    },
    ...

    View Slide

  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);
    });
    },

    View Slide

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

    View Slide