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

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. 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://flickr.com/photos/djwudi/382030798

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

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. What is the most frequently used app on your computer?
Probably one of these…
http://paulirish.com/2010/high-res-browser-icons

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?

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

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

21. Can’t we all just
get along?

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

25. 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

26. 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.
http://finance.yahoo.com/q/is?s=amzn+income+statement&annual

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

28. 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

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

31. 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.

32. 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.
https://en.wikipedia.org/wiki/Uncanny_valley

34. Let’s talk about
PhoneGap

36. 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

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

38. 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
http://phonegap.com

39. 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

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

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

45. Let’s talk about
Titanium

47. 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)
http://appcelerator.com/titanium

48. 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

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

52. 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
http://xamarin.com

54. 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
http://xamarin.com

55. Let’s talk about
“Native”

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

57. 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
http://developer.android.com — http://developer.apple.com — http://developer.windowsphone.com

58. 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

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. Page Layout, Tomorrow*
X
unsemantic.com
*When IE11+ is prevalent. After IE8, IE9, and IE10 finally die off.
philipwalton.github.io/solved-by-flexbox

64. 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

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

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

68. And now, just
a few caveats

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

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

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

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

76. Why Durandal
& Knockout?

77. WWW
VV
W
W

78. 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
http://knockoutjs.com

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

80. 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
http://durandaljs.com

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

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

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