Transcription - Can't Get Out of This Mood by Oscar Peterson
HTML5 Can't Do That
-
Upload
nathan-smith -
Category
Technology
-
view
107 -
download
0
description
Transcript of HTML5 Can't Do That
HTML5 Can’t Do ThatSurveying the Mobile Landscape
Matt BaxterUX Designer
Nathan SmithPrincipal UI Architect
Take notes if you like. Or, you can get the slides here…
http://j.mp/html5-cant
Obligatory Intro Slide…
— on Twitter: @mbxtr & @nathansmith
— UI Developers (caffeine ⇒ code)
— We do UX/web/mobile stuff at
— We have mixed feelings about HTML5
I BUILD THE LEGACYAPPS OF TOMORROW!
In all honesty…
And hey, so do you. We’re creating software UI in adocument language. It’s a wonder anything works.
http://flickr.com/photos/djwudi/382030798
State of mobile in 2007, before the iPhone was introduced…
NON-SCIENTIFIC SURVEY:
What is the most frequentlyused app on your phone?
(Ironically, probably not the “phone” app.)
What is the most frequently used app on your phone?
(Tough to say)
NON-SCIENTIFIC SURVEY:
What is the most frequentlyused app on your computer?
http://paulirish.com/2010/high-res-browser-icons
What is the most frequently used app on your computer?
Probably one of these…
This is what the Web would look like if there were no native apps.
The browser is arguably the most important native app.
Actually, this(No browser UI)
Or, how would things lookif native “beat” the Web?
…asked the headline, on a sitewith an HTML5 doctype.
Are we seriously saying that native versus HTML5 is like this?
VS.
Can’t we all just get along?
Firefox can run the Unrealgame engine in native JS!
Okay, so it’s not mobile.But it’s still cool, right?
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.
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 expensesof 45.9B, that’s a gross profit of approximately 15.1B.
So, at the very least…
HTML5 is what you use to buy things that don’t run in HTML5.
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.
So what?
Hopefully by now we can all agree that HTML5 needn’t fail for native apps to be considered successful, or vice versa.
How we see the mobile landscape…
Business Logic and Data Aggregation
Approaches to Mobile Development
TitaniumJavaScript API
Android, iOS
XamarinCross-platform C# API
Android, iOS,Windows Phone
NativeC#, Java, or Objective-C
Android, Blackberry, iOS,Windows Phone, etc.
PhoneGapHTML, 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 ServerOracle PostgreSQL
Web Development Native Development
Java .NET PHP Python Ruby
or or or or
MySQL
Node.js
*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.
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.
Let’s talk about
PhoneGap
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
http://build.phonegap.com
Robots. ‘nuff said…
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
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”)
“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
http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story
Side-by-side comparison: Native vs. HTML5
Let’s talk about
Titanium
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)
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
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.
Let’s talk about
Xamarin
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
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
Let’s talk about
“Native”
http://developer.android.com — http://developer.apple.com — http://developer.windowsphone.com
Developer Sites for Various Platforms
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
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
Let’s talk about
The Web(This applies to PhoneGap, too)
wtfmobileweb.tumblr.com
Page Layout, Today
X960.gs unsemantic.com
*When IE11+ is prevalent. After IE8, IE9, and IE10 finally die off.
Page Layout, Tomorrow*
Xunsemantic.com philipwalton.github.io/solved-by-flexbox
http://www.dafont.com/idautomationhc39m.font
A serendipitous use of HTML5
HTML5 Cant Do ThatLast 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.
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
*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
>
We’ve dabbled in these JS frameworks at projekt202…
&
And now, justa few caveats
http://sealedabstract.com/rants/why-mobile-web-apps-are-slow
SunSpider JS benchmarks, circa 2010 (lower is better)
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
Safari on iOS 6 vs. Safari on iOS 7
So… Web, Cross-Platform, or Native?
Key Considerations:— Features needed— Target market— Existing skill-sets— Talent availability— User experience
How we see the mobile landscape (revised)…
Business Logic and Data Aggregation
Approaches to Mobile Development
TitaniumJavaScript API
Android, iOS
XamarinCross-platform C# API
Android, iOS,Windows Phone
NativeC#, Java, or Objective-C
Android, Blackberry, iOS,Windows Phone, etc.
PhoneGapHTML, 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 ServerOracle PostgreSQL
Web Development Native Development
Java .NET PHP Python Ruby
or or or or
MySQL
Node.js
XUncanny valley
http://www.hdwallpapers.in/tag/tron.html
Why? Because: “I fight for the users.” — Tron
Why Durandal& Knockout?
WWWW WVV
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
http://streetfighter.wikia.com
Whenever I see “ko” in the code, I think of Street Fighter…
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
http://fanart.tv/artist/1a1cd7f3-e5df-4eca-bae2-2757c9e656b5/duran-duran
Around the office, we refer to Durandal.js as “Duran Durandal”
DEMOhttp://github.com/nathansmith/ko-table
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.
<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>
<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>
// 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" },
...]
// Extend KO array, to make it sortableko.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; });};
// APP.modelsmodels: { // 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; }},...
// APP.init.sort_bysort_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); });},
Questions? Comments?
Get the slideshttp://j.mp/html5-cant
Say hi on Twitter@mbxtr@nathansmith