Upload
simon-guest
View
2.112
Download
2
Embed Size (px)
DESCRIPTION
A presentation that shows
Citation preview
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.