HTML5 Can't Do That - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Actually, this (No browser UI)

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Can’t we all just get along?

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

http://ﬁnance.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 proﬁt of approximately 15.1B.

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Let’s talk about PhoneGap

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

“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

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Let’s talk about Titanium

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

Let’s talk about Xamarin

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

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 ﬁle size, due to Mono framework — Commercial, has licensing fees

Slide 55

Slide 55 text

Let’s talk about “Native”

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

wtfmobileweb.tumblr.com

Slide 61

Slide 61 text

Page Layout, Today X 960.gs unsemantic.com

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

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.

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

And now, just a few caveats

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Why Durandal & Knockout?

Slide 77

Slide 77 text

WWW W W VV

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

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.

Slide 85

Slide 85 text

Slide 86

Slide 86 text

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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