Top Ten Tips for HTML5/Mobile Web Development

HTML5/Mobile Web Development
Top Ten Tips and Tricks

1

Neudesic Mobility

Windows Phone iPhone iPad Android HTML5/Web
Realtor.com* Jeep* SimonMed ACS Jones Lang LaSalle

Kelly Blue Book* Whole Foods VHA Kelley Blue Book* Nicor Gas

Premera Mobile* Guidestone* Scan Health Android Azure SDK* IFF New York

Microsoft TriWest Medical* Symetra Financial Scion SCAN Health

* Available on AppStore, Google Market, Windows Marketplace

2

Top Ten Tips and Tricks

3

Mobile Web or Hybrid?
 Make an early decision on Mobile Web via
Browser or Hybrid Application

 GeoLocation and Offline will work well in
both
 Photo capture? Contacts integration?
Push Notifications? Deployment via the
AppStore? Hybrid solution.

 Hybrid solution = A native application
exposing web content, with bi-directional
JavaScript bridge

 Roll your own (hook in to the event
handlers through WebView control)
 Use Framework, such as Apache Cordova

4

Mobile Web or Hybrid?
 Make an early decision on Mobile Web via
Browser or Hybrid Application

 GeoLocation and Offline will work well in
both
 Photo capture? Contacts integration?
Push Notifications? Deployment via the
AppStore? Hybrid solution.

 Hybrid solution = A native application
exposing web content, with bi-directional
JavaScript bridge

 Roll your own (hook in to the event
handlers through WebView control)
 Use Framework, such as Apache Cordova

5

Development and Testing Environment
 Setup up a robust development and
testing environment

 Your Favorite IDE for HTML: WebStorm,
TextMate, Visual Studio
 Browser capable of inspecting
DOM/JavaScript debugging: Safari,
Chrome, IE9
 Device or Device Emulator: Mac or iPod
Touch if targeting iOS. Android device vs.
Emulator recommended.

 Unit Test Framework: QUnit used,
recommended
 Device testing: Perfecto Mobile
(virtual/video devices)

6

Client Side and Navigation
 Use Client Side JavaScript instead of
Server-Side Scripts

<div data-role="page" id="login" class="LoginScreen">  Move more on client side JavaScript:
<div data-role-”header”>
</div>
 Performance will be better (no round trips
<div data-role="content" class="ui-body ui-content"> to server)
</div>  Offline easier to accomplish
<div data-role="footer" data-position="fixed">
</div>
 Enables server side to be abstracted
</div>
 Pre-fetch as many pages into the DOM as
possible (at startup)
 Server side calls should be asynchronous
JSON endpoints

 Caveat: Navigation! Prefetching too
much into the DOM can make for
confusing navigation.
 Recommend hub and spoke model.
7

Offline Support
 Design for running offline

 Enable offline by creating cache.manifest
 Specify all of the files (including client
side scripts) you require offline in the
manifest
 Handle client side functionality (e.g.
submit button) with JavaScript checks

 Tip #1 – JavaScript on application load to
check and refresh cache if required
 Tip #2 – Design for offline first, but
implement last! It can add a lot of dev
cycles.

8

UI Framework
 Carefully select the right UI Framework
for your needs

 jQuery Mobile (most popular open source)
 Sencha (most popular commercial)

 Index common controls that you believe
the application might use
 Build control matrix (see left)
 Use the demo sites/test pages to see how
the controls render on devices
 Realize that controls will be “85%” close
to native

 Also think about styling and themes (e.g.
swatches in jQuery Mobile)

9

Mapping
 Understand the caveats with
implementing maps in Mobile Web
applications

 Navigating to a map, and back to a map
can cause issues (many map controls are
not designed to work with hidden DIVs in
HTML)
 $(„#mappage‟).live(“pageshow”,
function(){
google.maps.event.trigger(map, „resize‟);
});

 Performance of mapping won‟t be equal
to native mapping controls (e.g. MapKit
on iOS)
 (If this is important, consider Hybrid
approach and breaking out to native)

10

Non Standard UI Elements
 Think ahead on the non-standard UI
elements that you are likely to need

 Watch out for controls that don‟t exist…
 Tables and Grids are especially difficult to
find and implement in Mobile Web
applications
 Before creating a custom control, can you
use a more native control instead?

 Don‟t re-invent the wheel…
 Many 3rd Party JavaScript controls work
well within Mobile Web framework
 For example, PhotoSwipe – Image Gallery

11

Packaging
 Make your mobile web app look and feel
like it belongs with the other native
applications. (Even if you don‟t go with
the Hybrid approach)

 Don‟t show the address bar! Instead, use
the <viewport …/> meta tag to force the
application to run in full screen mode

 Bind it to an icon on the home screen (iOS
support only)
 Use “add2home” JavaScript library to
prompt the user to treat it like an
installed application

12

Authentication  Don‟t go creating your own username and
password database!

 Consider Federated Identity solution
instead. AppFabric ACS – Access Control
Service

 Public providers (Google, Yahoo!,
Facebook, etc.)
 Federated providers (ADFS connection
back to AD)
 Both return unique claims bag that can
be referenced by your application

 Integration with jQuery Mobile:
http://simonguest.com/2011/08/13/au
thenticating-with-google-facebook-and-
others-from-your-jquerymobile-
application/

13

Performance
 Make your mobile web application
perform well!

 Three main culprits for affecting
performance on Mobile Web applications:

 #1 – Server-side round trip calls on UI
gestures. Make everything asynchronous.
 #2 – Too many CSS effects/transitions.
Turn these off, unless you are iOS only.
(Many older Android WebKit
implementations don‟t support HW
acceleration).
 #3 – Too many bound JavaScript events
(class level binding can cause overload of
events in the DOM - ~300ms perf
problem)

14

Mobility Highlights
 Deep Experience of HTML5/Mobile Web Applications for Multiple Devices
 Microsoft Mobility Partner of the Year 2011
 Development Partner for the Windows Azure SDK for iOS/Android
 Development Partner for the Amazon AWS SDK for Windows Phone 7
 Culture of Attracting the Best Mobility Talent

16

Neudesic Recognition

National Systems Integrator

Microsoft Partner of the Year Microsoft Dynamics President’s CRN Magazine VAR 500 Inc. 5000
Neudesic has won the 2011 Club Neudesic ranked on Everything Neudesic recognized as one of
Microsoft Mobility B2C Application In acknowledgement of exceptional Channel VAR 500 List for the America’s Fastest-Growing Private
Partner of the Year Award, services and sales performance, second consecutive year with Companies for the fifth straight
honoring the company among a Neudesic has been named to the increased revenue in a down year.
global field of top Microsoft 2011 Microsoft Dynamics economy, Neudesic moves up 81
partners for demonstrating President’s Club. places in CRN Magazine ranking
excellence in innovation and this year.
implementation of customer
solutions.

17

Thank You
Simon Guest
Director, Mobility Solutions
Neudesic, LLC

simon.guest@neudesic.com
@simonguest
18

Top Ten Tips for HTML5/Mobile Web Development

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Top Ten Tips for HTML5/Mobile Web Development (20)

More from Simon Guest (7)

Recently uploaded (20)

Top Ten Tips for HTML5/Mobile Web Development

Editor's Notes