Top Ten Tips for HTML5/Mobile Web Development

HTML5/Mobile Web DevelopmentTop 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

Why Neudesic? 15

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 IntegratorMicrosoft Partner of the Year Microsoft Dynamics President’s CRN Magazine VAR 500 Inc. 5000Neudesic has won the 2011 Club Neudesic ranked on Everything Neudesic recognized as one ofMicrosoft Mobility B2C Application In acknowledgement of exceptional Channel VAR 500 List for the America’s Fastest-Growing PrivatePartner of the Year Award, services and sales performance, second consecutive year with Companies for the fifth straighthonoring 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 81partners for demonstrating President’s Club. places in CRN Magazine rankingexcellence in innovation and this year.implementation of customersolutions. 17

Thank You Simon GuestDirector, Mobility Solutions Neudesic, LLCsimon.guest@neudesic.com @simonguest 18

Top Ten Tips for HTML5/Mobile Web Development

by Simon Guest

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 31

Statistics

Top Ten Tips for HTML5/Mobile Web Development Presentation Transcript