SlideShare a Scribd company logo
1 of 91
Download to read offline
HTML5 Can’t Do That
Surveying the Mobile Landscape
Matt Baxter
UX Designer

Nathan Smith
Principal 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
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.
State of mobile in 2007, before the iPhone was introduced…

http://flickr.com/photos/djwudi/382030798
NON-SCIENTIFIC SURVEY:
What is the most frequently
used 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 frequently
used app on your computer?
What is the most frequently used app on your computer?

Probably one of these…

http://paulirish.com/2010/high-res-browser-icons
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 look
if native “beat” the Web?
…asked the headline, on a site
with 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 Unreal
game engine in native JS!
Okay, so it’s not mobile.
But it’s still cool, right?
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
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
So, at the very least…
HTML5 is what you use to buy
things that don’t run in HTML5.
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
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…
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
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.
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
Let’s talk about

PhoneGap
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
Robots. ‘nuff said…

http://build.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”)
http://phonegap.com
“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
Side-by-side comparison: Native vs. HTML5

http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story
Let’s talk about

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

http://xamarin.com
Let’s talk about

“Native”
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

http://developer.android.com — http://developer.apple.com — http://developer.windowsphone.com
Let’s talk about

The Web
(This applies to PhoneGap, too)
wtfmobileweb.tumblr.com
Page Layout, Today

X
960.gs

unsemantic.com
Page Layout, Tomorrow*

X
unsemantic.com

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

philipwalton.github.io/solved-by-flexbox
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
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
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
We’ve dabbled in these JS frameworks at projekt202…

&
And now, just
a few caveats
SunSpider JS benchmarks, circa 2010 (lower is better)

http://sealedabstract.com/rants/why-mobile-web-apps-are-slow
Safari on iOS 6 vs. Safari on iOS 7

http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
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)…
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
Why? Because: “I fight for the users.” — Tron

http://www.hdwallpapers.in/tag/tron.html
Why Durandal
& Knockout?
WWW
VV
W

W
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
Whenever I see “ko” in the code, I think of Street Fighter…

http://streetfighter.wikia.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://durandaljs.com
Around the office, we refer to Durandal.js as “Duran Durandal”

http://fanart.tv/artist/1a1cd7f3-e5df-4eca-bae2-2757c9e656b5/duran-duran
DEMO
http://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 || '&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>
// 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 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;
});
};
// 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;
}
},
...
// 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);
});
},
Questions? Comments?

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

More Related Content

What's hot

Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaFixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaChristian Heilmann
 
Hybrid Apps with Ionic Framework
Hybrid Apps with Ionic FrameworkHybrid Apps with Ionic Framework
Hybrid Apps with Ionic FrameworkBramus Van Damme
 
The Spirit of Opensource - contribution as a strategy for growth and innova...
The Spirit of Opensource   - contribution as a strategy for growth and innova...The Spirit of Opensource   - contribution as a strategy for growth and innova...
The Spirit of Opensource - contribution as a strategy for growth and innova...Parth Lawate
 
PhoneGap: a brief history and apologia
PhoneGap: a brief history and apologiaPhoneGap: a brief history and apologia
PhoneGap: a brief history and apologialorinbeer
 
Cross platform mobile development - you tube videos
Cross platform mobile development - you tube videosCross platform mobile development - you tube videos
Cross platform mobile development - you tube videosColin Eberhardt
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppSt. Petersburg College
 
PhoneGap Talk @ Sencha Con 2010
PhoneGap Talk @ Sencha Con 2010PhoneGap Talk @ Sencha Con 2010
PhoneGap Talk @ Sencha Con 2010alunny
 
Ibm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applicationsIbm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applicationsMark Roden
 
Building Native Mobile Applications with PhoneGap
Building Native Mobile Applications with PhoneGapBuilding Native Mobile Applications with PhoneGap
Building Native Mobile Applications with PhoneGapSimon MacDonald
 
Workshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkWorkshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkAayush Shrestha
 
Building Hybrid Applications using PhoneGap
Building Hybrid Applications using PhoneGapBuilding Hybrid Applications using PhoneGap
Building Hybrid Applications using PhoneGapPrajyot Mainkar
 
Apache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application DevelopmentApache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application Developmentthedumbterminal
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoChristian Heilmann
 
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchJQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchSteve Drucker
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기JungHyuk Kwon
 
multi platform mobile development using titanium
multi platform mobile development using titaniummulti platform mobile development using titanium
multi platform mobile development using titaniumJurgen Coetsiers
 
Cross-platform development frameworks
Cross-platform development frameworksCross-platform development frameworks
Cross-platform development frameworksCarlo Bernaschina
 
Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap InsightsMonaca
 

What's hot (20)

Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaFixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
 
Hybrid Apps with Ionic Framework
Hybrid Apps with Ionic FrameworkHybrid Apps with Ionic Framework
Hybrid Apps with Ionic Framework
 
The Spirit of Opensource - contribution as a strategy for growth and innova...
The Spirit of Opensource   - contribution as a strategy for growth and innova...The Spirit of Opensource   - contribution as a strategy for growth and innova...
The Spirit of Opensource - contribution as a strategy for growth and innova...
 
PhoneGap: a brief history and apologia
PhoneGap: a brief history and apologiaPhoneGap: a brief history and apologia
PhoneGap: a brief history and apologia
 
Cross platform mobile development - you tube videos
Cross platform mobile development - you tube videosCross platform mobile development - you tube videos
Cross platform mobile development - you tube videos
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
 
Apache Cordova
Apache CordovaApache Cordova
Apache Cordova
 
PhoneGap Talk @ Sencha Con 2010
PhoneGap Talk @ Sencha Con 2010PhoneGap Talk @ Sencha Con 2010
PhoneGap Talk @ Sencha Con 2010
 
Ibm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applicationsIbm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applications
 
Building Native Mobile Applications with PhoneGap
Building Native Mobile Applications with PhoneGapBuilding Native Mobile Applications with PhoneGap
Building Native Mobile Applications with PhoneGap
 
Workshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkWorkshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic Framework
 
Building Hybrid Applications using PhoneGap
Building Hybrid Applications using PhoneGapBuilding Hybrid Applications using PhoneGap
Building Hybrid Applications using PhoneGap
 
Apache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application DevelopmentApache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application Development
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
 
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchJQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
 
Phone gap
Phone gapPhone gap
Phone gap
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
 
multi platform mobile development using titanium
multi platform mobile development using titaniummulti platform mobile development using titanium
multi platform mobile development using titanium
 
Cross-platform development frameworks
Cross-platform development frameworksCross-platform development frameworks
Cross-platform development frameworks
 
Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap Insights
 

Viewers also liked

Spider photo album
Spider photo albumSpider photo album
Spider photo albumlandml
 
VietRees_Newsletter_53_Tuan3_Thang10
VietRees_Newsletter_53_Tuan3_Thang10VietRees_Newsletter_53_Tuan3_Thang10
VietRees_Newsletter_53_Tuan3_Thang10internationalvr
 
Krystalite Products PVT Limited
Krystalite Products PVT LimitedKrystalite Products PVT Limited
Krystalite Products PVT Limitedaleemb
 
Bản Tin BĐS Việt Nam Số 67 Tuần 4 Tháng 1 Năm 2009
Bản Tin BĐS Việt Nam Số 67 Tuần 4 Tháng 1 Năm 2009Bản Tin BĐS Việt Nam Số 67 Tuần 4 Tháng 1 Năm 2009
Bản Tin BĐS Việt Nam Số 67 Tuần 4 Tháng 1 Năm 2009internationalvr
 
Erlang抽象数据结构简介
Erlang抽象数据结构简介Erlang抽象数据结构简介
Erlang抽象数据结构简介Xiaozhe Wang
 
TRiO Presentation-example- Edgar Castillo
TRiO Presentation-example- Edgar CastilloTRiO Presentation-example- Edgar Castillo
TRiO Presentation-example- Edgar CastilloEdgar2011
 
I Love Python
I Love PythonI Love Python
I Love Pythonvimalekm
 
18 De Diciembre Bocetos
18 De Diciembre Bocetos18 De Diciembre Bocetos
18 De Diciembre BocetosBloom
 
Kayla ppt whatmakes psych a science psych 1
Kayla ppt whatmakes psych a science psych 1Kayla ppt whatmakes psych a science psych 1
Kayla ppt whatmakes psych a science psych 1Steve Kashdan
 
mCMO Conference 2013 - From Mobile App To Mobile Business
mCMO Conference 2013 - From Mobile App To Mobile BusinessmCMO Conference 2013 - From Mobile App To Mobile Business
mCMO Conference 2013 - From Mobile App To Mobile BusinessHKAIM
 
Erasmus+ blue group presentation spain
Erasmus+ blue group presentation spainErasmus+ blue group presentation spain
Erasmus+ blue group presentation spainmariogomezprieto
 
VietRees_Newsletter_64_Week1_Month1_Year09
VietRees_Newsletter_64_Week1_Month1_Year09VietRees_Newsletter_64_Week1_Month1_Year09
VietRees_Newsletter_64_Week1_Month1_Year09internationalvr
 
Experiences from Digital Archive Development
Experiences from Digital Archive DevelopmentExperiences from Digital Archive Development
Experiences from Digital Archive DevelopmentRachabodin Suwannakanthi
 
eCMO 2010 Doing Branding digital = stealing money from TV
eCMO 2010  Doing Branding digital = stealing money from TVeCMO 2010  Doing Branding digital = stealing money from TV
eCMO 2010 Doing Branding digital = stealing money from TVHKAIM
 
Presentacion Nº1 Wakoo
Presentacion Nº1 WakooPresentacion Nº1 Wakoo
Presentacion Nº1 WakooBloom
 

Viewers also liked (20)

Spider photo album
Spider photo albumSpider photo album
Spider photo album
 
My Open Archive
My Open ArchiveMy Open Archive
My Open Archive
 
VietRees_Newsletter_53_Tuan3_Thang10
VietRees_Newsletter_53_Tuan3_Thang10VietRees_Newsletter_53_Tuan3_Thang10
VietRees_Newsletter_53_Tuan3_Thang10
 
Krystalite Products PVT Limited
Krystalite Products PVT LimitedKrystalite Products PVT Limited
Krystalite Products PVT Limited
 
Bản Tin BĐS Việt Nam Số 67 Tuần 4 Tháng 1 Năm 2009
Bản Tin BĐS Việt Nam Số 67 Tuần 4 Tháng 1 Năm 2009Bản Tin BĐS Việt Nam Số 67 Tuần 4 Tháng 1 Năm 2009
Bản Tin BĐS Việt Nam Số 67 Tuần 4 Tháng 1 Năm 2009
 
Erlang抽象数据结构简介
Erlang抽象数据结构简介Erlang抽象数据结构简介
Erlang抽象数据结构简介
 
Reduce Health Care Cost by People Maintenance
Reduce Health Care Cost by People MaintenanceReduce Health Care Cost by People Maintenance
Reduce Health Care Cost by People Maintenance
 
Yes project.pptx
Yes project.pptxYes project.pptx
Yes project.pptx
 
TRiO Presentation-example- Edgar Castillo
TRiO Presentation-example- Edgar CastilloTRiO Presentation-example- Edgar Castillo
TRiO Presentation-example- Edgar Castillo
 
I Love Python
I Love PythonI Love Python
I Love Python
 
Beekman5 std ppt_09
Beekman5 std ppt_09Beekman5 std ppt_09
Beekman5 std ppt_09
 
18 De Diciembre Bocetos
18 De Diciembre Bocetos18 De Diciembre Bocetos
18 De Diciembre Bocetos
 
Kayla ppt whatmakes psych a science psych 1
Kayla ppt whatmakes psych a science psych 1Kayla ppt whatmakes psych a science psych 1
Kayla ppt whatmakes psych a science psych 1
 
Ole Dppt
Ole DpptOle Dppt
Ole Dppt
 
mCMO Conference 2013 - From Mobile App To Mobile Business
mCMO Conference 2013 - From Mobile App To Mobile BusinessmCMO Conference 2013 - From Mobile App To Mobile Business
mCMO Conference 2013 - From Mobile App To Mobile Business
 
Erasmus+ blue group presentation spain
Erasmus+ blue group presentation spainErasmus+ blue group presentation spain
Erasmus+ blue group presentation spain
 
VietRees_Newsletter_64_Week1_Month1_Year09
VietRees_Newsletter_64_Week1_Month1_Year09VietRees_Newsletter_64_Week1_Month1_Year09
VietRees_Newsletter_64_Week1_Month1_Year09
 
Experiences from Digital Archive Development
Experiences from Digital Archive DevelopmentExperiences from Digital Archive Development
Experiences from Digital Archive Development
 
eCMO 2010 Doing Branding digital = stealing money from TV
eCMO 2010  Doing Branding digital = stealing money from TVeCMO 2010  Doing Branding digital = stealing money from TV
eCMO 2010 Doing Branding digital = stealing money from TV
 
Presentacion Nº1 Wakoo
Presentacion Nº1 WakooPresentacion Nº1 Wakoo
Presentacion Nº1 Wakoo
 

Similar to HTML5 Can't Do That

Anton Sakharov: The risks you take when develop cross-platform apps using HT...
 Anton Sakharov: The risks you take when develop cross-platform apps using HT... Anton Sakharov: The risks you take when develop cross-platform apps using HT...
Anton Sakharov: The risks you take when develop cross-platform apps using HT...Mobile Trends
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino
 
Native Mobile Application Using Java Script
Native  Mobile  Application  Using  Java ScriptNative  Mobile  Application  Using  Java Script
Native Mobile Application Using Java ScriptBorey Lim
 
HTML5: The Apps, the Frameworks, the Controversy
HTML5: The Apps, the Frameworks, the Controversy HTML5: The Apps, the Frameworks, the Controversy
HTML5: The Apps, the Frameworks, the Controversy Apigee | Google Cloud
 
Trip advsiorhybridpresentation
Trip advsiorhybridpresentationTrip advsiorhybridpresentation
Trip advsiorhybridpresentationElanaBoehm
 
Cross Platform Development Strategies with vendor review and PhoneGap case study
Cross Platform Development Strategies with vendor review and PhoneGap case studyCross Platform Development Strategies with vendor review and PhoneGap case study
Cross Platform Development Strategies with vendor review and PhoneGap case studyElegant Technologies, LLC
 
The Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App DevelopmentThe Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App DevelopmentNick Landry
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Devicefilirom1
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Atos_Worldline
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011davyjones
 
Multi-platform Mobile apps with Phonegap
Multi-platform Mobile apps with PhonegapMulti-platform Mobile apps with Phonegap
Multi-platform Mobile apps with PhonegapGautam Chaudhary
 
Building Mobile Websites with Joomla
Building Mobile Websites with JoomlaBuilding Mobile Websites with Joomla
Building Mobile Websites with JoomlaTom Deryckere
 
FEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoFEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoCaridy Patino
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of TechnologiesChris Mitchell
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkSt. Petersburg College
 
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web FragmentationOpen Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web FragmentationTom Deryckere
 
Intro to tech stacks bonny
Intro to tech stacks bonnyIntro to tech stacks bonny
Intro to tech stacks bonnyLama K Banna
 
Começando com Android
Começando com AndroidComeçando com Android
Começando com AndroidDextra
 
X-Platform native apps in C# and .NET using Xamarin tools (iOS/WP/Android)
X-Platform native apps in C# and .NET using Xamarin tools (iOS/WP/Android)X-Platform native apps in C# and .NET using Xamarin tools (iOS/WP/Android)
X-Platform native apps in C# and .NET using Xamarin tools (iOS/WP/Android)Mark Radacz
 

Similar to HTML5 Can't Do That (20)

Anton Sakharov: The risks you take when develop cross-platform apps using HT...
 Anton Sakharov: The risks you take when develop cross-platform apps using HT... Anton Sakharov: The risks you take when develop cross-platform apps using HT...
Anton Sakharov: The risks you take when develop cross-platform apps using HT...
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
 
Native Mobile Application Using Java Script
Native  Mobile  Application  Using  Java ScriptNative  Mobile  Application  Using  Java Script
Native Mobile Application Using Java Script
 
HTML5: The Apps, the Frameworks, the Controversy
HTML5: The Apps, the Frameworks, the Controversy HTML5: The Apps, the Frameworks, the Controversy
HTML5: The Apps, the Frameworks, the Controversy
 
Trip advsiorhybridpresentation
Trip advsiorhybridpresentationTrip advsiorhybridpresentation
Trip advsiorhybridpresentation
 
Cross Platform Development Strategies with vendor review and PhoneGap case study
Cross Platform Development Strategies with vendor review and PhoneGap case studyCross Platform Development Strategies with vendor review and PhoneGap case study
Cross Platform Development Strategies with vendor review and PhoneGap case study
 
The Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App DevelopmentThe Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App Development
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
 
Getting started with PhoneGap
Getting started with PhoneGapGetting started with PhoneGap
Getting started with PhoneGap
 
Multi-platform Mobile apps with Phonegap
Multi-platform Mobile apps with PhonegapMulti-platform Mobile apps with Phonegap
Multi-platform Mobile apps with Phonegap
 
Building Mobile Websites with Joomla
Building Mobile Websites with JoomlaBuilding Mobile Websites with Joomla
Building Mobile Websites with Joomla
 
FEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoFEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing Mojito
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of Technologies
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
 
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web FragmentationOpen Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
 
Intro to tech stacks bonny
Intro to tech stacks bonnyIntro to tech stacks bonny
Intro to tech stacks bonny
 
Começando com Android
Começando com AndroidComeçando com Android
Começando com Android
 
X-Platform native apps in C# and .NET using Xamarin tools (iOS/WP/Android)
X-Platform native apps in C# and .NET using Xamarin tools (iOS/WP/Android)X-Platform native apps in C# and .NET using Xamarin tools (iOS/WP/Android)
X-Platform native apps in C# and .NET using Xamarin tools (iOS/WP/Android)
 

More from Nathan Smith

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with ReactNathan Smith
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with ServeNathan Smith
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive DesignNathan Smith
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsNathan Smith
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksNathan Smith
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid ThemingNathan Smith
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership SlidesNathan Smith
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a LeaderNathan Smith
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest LectureNathan Smith
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design PrinciplesNathan Smith
 
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentStriking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentNathan Smith
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008Nathan Smith
 

More from Nathan Smith (20)

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with React
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with Serve
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive Design
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
 
Red Dirt JS
Red Dirt JSRed Dirt JS
Red Dirt JS
 
Refresh OKC
Refresh OKCRefresh OKC
Refresh OKC
 
DrupalCon jQuery
DrupalCon jQueryDrupalCon jQuery
DrupalCon jQuery
 
DSVC Design Talk
DSVC Design TalkDSVC Design Talk
DSVC Design Talk
 
Think Vitamin CSS
Think Vitamin CSSThink Vitamin CSS
Think Vitamin CSS
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Meet Clumsy
Meet ClumsyMeet Clumsy
Meet Clumsy
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid Theming
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership Slides
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a Leader
 
7 Storey Mountain
7 Storey Mountain7 Storey Mountain
7 Storey Mountain
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest Lecture
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design Principles
 
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentStriking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008
 

Recently uploaded

Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Nikki Chapple
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 

Recently uploaded (20)

Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 

HTML5 Can't Do That

  • 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.)
  • 7.
  • 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
  • 11.
  • 12.
  • 13. This is what the Web would look like if there were no native apps. The browser is arguably the most important native app.
  • 15. Or, how would things look if native “beat” the Web?
  • 16.
  • 17.
  • 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.
  • 21. Can’t we all just get along?
  • 22.
  • 23. Firefox can run the Unreal game engine in native JS! Okay, so it’s not mobile. But it’s still cool, right?
  • 24.
  • 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
  • 33.
  • 35.
  • 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
  • 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
  • 40.
  • 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.
  • 43.
  • 44. Side-by-side comparison: Native vs. HTML5 http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story
  • 46.
  • 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.
  • 51.
  • 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
  • 53.
  • 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
  • 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)
  • 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
  • 63.
  • 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
  • 69.
  • 70. SunSpider JS benchmarks, circa 2010 (lower is better) http://sealedabstract.com/rants/why-mobile-web-apps-are-slow
  • 71.
  • 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
  • 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
  • 83.
  • 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