UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
An overview of mobile html + java script frameworks
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
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
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
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
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”
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
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)
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
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
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…”