This document provides an overview of several mobile HTML and JavaScript frameworks: jQuery Mobile, Kendo UI, PhoneGap, Sencha Touch 2. It discusses their features, architectures, and includes demos. It also covers tools for testing mobile web applications, including using IIS Express to allow remote access for testing on emulators and devices over WiFi using Adobe Shadow.

1. An Overview of Mobile HTML +
JavaScript Frameworks
Presented By: Sasha dos Santos
http://slidesha.re/zWlQlQ
Orlando Code Camp 2012

2. About The Presenter
• Twitter: @SashaGeekette
• Blog: SashaGeekette.wordpress.com
• Software Engineer, 3M Electronic Monitoring
• ASP .NET Developer w/ interest in
JavaScript, GIS and mobile
• Lives near Tampa, FL
• Graduate of the University of South Florida

3. Frameworks

4. Frameworks > JQuery Mobile
• Tries to target every mobile, tablet, e-reader, desktop
platform
• Includes animations and components built on HTML
5 + JavaScript
• Use HTML 5 data-role attribute to specify the
component that a DOM element represents at
runtime
• Uses AJAX to transition between pages

5. Frameworks > JQuery Mobile > Demo

6. Frameworks > jQuery Mobile >
Resources
• Download: http://jquerymobile.com/
• Level of compatibility for different devices
• List of data attributes

7. Frameworks > Kendo UI
• Similar concept and syntax to jQuery Mobile
• Components adaptively render to look and
behave according to expectations for a
particular platform
– Currently supports: Android, iOS, Blackberry
– Ex. Navigation controls for iOS are displayed at the
bottom, on Android – at the top

8. Frameworks > Kendo UI > Demo

9. Frameworks > Kendo UI > Demo

10. Frameworks > Kendo UI > Demo

11. Frameworks > Kendo UI > Demo

12. Frameworks > Kendo UI > Demo

13. Frameworks > Kendo UI > Resources
• Download
• Kendo UI TV

14. Frameworks > PhoneGap
• Build native applications using HTML +
JavaScript
– Applications can be placed in the various app
store
– Best case scenario: write one set of code &
resources for all platforms
• Supports: Android, iOS, Windows
Phone, Blackberry, WebOS, Symbian

15. Frameworks > PhoneGap
• Phone Gap (classic) is used within the
development environment of the mobile
platform that you are targeting
– Ex. Phone Gap provides JARs to use with Java, dlls to
use for .NET
• Phone Gap build is a new cloud-based service
that builds multiple native packages in the cloud
– In most cases it would not be necessary to setup
development environment for each platform

16. Frameworks > PhoneGap
• No components
– Can use components from jQuery Mobile, Kendo
UI, Sencha
• Native API Accelerometer Events
Camera File
Capture Geolocation
Compass Media
Connection Notification
Contacts Storage
Device

17. Frameworks > PhoneGap >
Architecture
• PhoneGap shares an architecture used by
many mobile frameworks
• Provides a bridge between native device code
and JavaScript to access native capabilities
– ex. Camera, accelerometer
• The application is actually running in a
frameless browser window
– Often called a ‘web view’
– All mobile OS SDKs offer this type of native control

18. Frameworks > PhoneGap >
Architecture > Plugins
• Sometimes PhoneGap provides the ability to
do almost everything without writing native
code
• It may be necessary to write some portion of
code that is specific to a mobile platform
• You can create a JavaScript to Native Code
bridge for each platform you target

19. Frameworks > Phone Gap >
Architecture > Plugins
Bridges Native Code: iOS
JavaScript
Native Code:
Android

20. Frameworks > PhoneGap > Demo

21. Frameworks > PhoneGap > Resources
• Project Website
• GitHub directory of PhoneGap Plugins
• Creating PhoneGap plugin for Android
• Web Intent plugin for Android
• Phonegap project structure using Git
submodules
• Crossing The PhoneGap For Multiplatform
Mobile Applications

22. Frameworks > Sencha Touch 2
• Create mobile sites that look/feel like mobile
apps OR create native packaging
• Runs in webkit browsers
– iOS, Android, Blackberry
– No support for Windows Phone (yet), IE, Firefox
• Uses MVC architecture
• Like Phone Gap
• uses ‘bridge’ between JavaScript and Native code
• code runs in chrome-less webview (browser)

23. Frameworks > Sencha Touch 2
• Components such as date
pickers, toolbars, tabs
• Note: components do not adaptively render
like Telerik’s Kendo UI but do look “mobile-
ish”

24. Frameworks > Sencha Touch 2
• Native Device API:
– Camera
– Connection
– Device
– Geolocation
– Notification
– Orientation

25. Frameworks > Sencha Touch 2 > Demo

26. Frameworks > Sencha Touch 2 >
Resources
• Download
• Guide
• Tutorial #1
• Tutorial #2
• Examples on GitHub
• Sencha blog posts
– Includes fix for bug with Windows 7 (x64)
• Look for the Examples folder in your installation

27. Testing

28. Testing > IIS Express
• Problem: The default ASP .NET Development
Server (Cassini) doesn’t allow for remote
access – something required for testing
mobile devices
• One Solution: Switch to IIS Express
– Will be default server in Visual Studio 11
• Step-By-Step Instructions on My Blog :
http://bit.ly/GzBZT0

29. Testing > IIS Express > Configuration
• Change Visual Studio to use IIS Express instead of
ASP .NET Development Server
• Change default configuration of IIS Express to
allow for remote access
• Configure Firewall to grant permissions to allow
mobile devices to request the local site
– Ex. Allow inbound requests on a particular port
number, provided that the computers are on the local
subnet and the computer is on a network marked as
Private

30. Testing > Emulators > Windows Phone
• Download Microsoft Visual Studio Express
2010 for Windows Phone
• Start > All Programs > Windows Phone SDK 7.1
> Windows Phone Emulator
• To access localhost use IP address 127.0.0.1
• Press Page Up / Page Down to enable / disable
keyboard input (keyboard mapping reference)

31. Testing > Emulators > Windows Phone

32. Testing > Emulators > Windows Phone

33. Testing > Emulators > Android
• Download the Android SDK & Android Virtual
Device (AVD) Manager
• To access localhost use IP address 10.0.2.2
• Can use telnet to send commands to the
emulator
– Use following command: telnet localhost 5554
– Telnet will need to be enabled on your dev
machine

34. Testing > Emulators > Android

35. Testing > Emulators > Android >
Default

36. Testing > Emulators > Android >
Motorola (MOTODEV)

37. Testing > Emulators > Android >
Samsung (Skin)

38. Testing > Emulators > Android

39. Testing > Emulators > Android >
Resources
• Java SE Development Kit
• Eclipse
• Android SDK
• ADT Plugin for Eclipse
• MOTODEV
• Samsung Emulators

40. Testing > Adobe Shadow
• Wirelessly connect to multiple mobile devices
and preview, inspect, debug in real time
• Supported Environments:
– Development Computer: Windows 7 & Mac OS X
– Development Browser: Chrome
– Mobile Devices: Any Android or iOS device, on
same network as the development computer

41. Testing > Adobe Shadow

42. Testing > Adobe Shadow
• To test sites on mobile devices during
development, use IIS Express and Adobe
Shadow
• Change default configuration of web site or
web project to use computer name or IP
address instead of localhost

43. Testing > Adobe Shadow > Resources
• Download
• Video
• Using Visual Studio + IIS Express + Adobe
Shadow to Test Local Websites on
Mobile Devices

44. This presentation is available for viewing &
download: http://slidesha.re/zWlQlQ
“See you next time…”