1

                                                 

HTML5/Mobile Web DevelopmentTop Ten Tips and Tricks

2

                                                 

Neudesic Mobility

Windows Phone

iPhone iPad Android HTML5/Web

Realtor.com*

Kelly Blue Book*

Premera Mobile*

Microsoft

Jeep*

Whole Foods

Guidestone*

TriWest Medical*

SimonMed

VHA

Scan Health

Symetra Financial

ACS

Kelley Blue Book*

Android Azure SDK*

Scion

Jones Lang LaSalle

Nicor Gas

IFF New York

SCAN Health* Available on AppStore, Google Market, Windows Marketplace

3

                                                 

Top Ten Tips and Tricks

4

                                                 

1Mobile 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

                                                 

1Mobile 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

6

                                                 

2Development 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)

7

                                                 

3Client Side and Navigation

<div data-role="page" id="login" class="LoginScreen"> <div data-role-”header”> </div> <div data-role="content" class="ui-body ui-content"> </div> <div data-role="footer" data-position="fixed"> </div></div>

Use Client Side JavaScript instead of Server-Side Scripts

Move more on client side JavaScript:

Performance will be better (no round trips to server)

Offline easier to accomplish Enables server side to be

abstracted

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.

8

                                                 

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

9

                                                 

5UI 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)

10

                                                 

6Mapping

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)

11

                                                 

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

12

                                                 

8Packaging

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

13

                                                 

9Authentication

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/authenticating-with-google-facebook-and-others-from-your-jquerymobile-application/

14

                                                 

10Performance

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)

15

                                                 

Why Neudesic?

16

                                                 

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

17

                                                 

Neudesic Recognition

National Systems Integrator

Microsoft Partner of the Year Neudesic has won the 2011 Microsoft Mobility B2C Application Partner of the Year Award, honoring the company among a global field of top Microsoft partners for demonstrating excellence in innovation and implementation of customer solutions.

Microsoft Dynamics President’s Club In acknowledgement of exceptional services and sales performance, Neudesic has been named to the 2011 Microsoft Dynamics President’s Club.

CRN Magazine VAR 500 Neudesic ranked on Everything Channel VAR 500 List for the second consecutive year with increased revenue in a down economy, Neudesic moves up 81 places in CRN Magazine ranking this year.

Inc. 5000 Neudesic recognized as one of America’s Fastest-Growing Private Companies for the fifth straight year.

18

                                                 

Thank You

Simon GuestDirector, Mobility Solutions

Neudesic, LLC

simon.guest@neudesic.com@simonguest