An Overview of Mobile HTML + JavaScript Frameworks

Presented By: Sasha dos Santos

Orlando Code Camp 2012

http://slidesha.re/zWlQlQ

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

Frameworks

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

Frameworks > JQuery Mobile > Demo

Frameworks > jQuery Mobile > Resources

• Download: http://jquerymobile.com/• Level of compatibility for different devices• List of data attributes

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

Frameworks > Kendo UI > Demo

Frameworks > Kendo UI > Demo

Frameworks > Kendo UI > Demo

Frameworks > Kendo UI > Demo

Frameworks > Kendo UI > Demo

Frameworks > Kendo UI > Resources

• Download• Kendo UI TV

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

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

Frameworks > PhoneGap

• No components– Can use components from jQuery Mobile, Kendo

UI, Sencha• Native API Accelerometer

CameraCaptureCompassConnectionContactsDevice

EventsFileGeolocationMediaNotificationStorage

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

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

Frameworks > Phone Gap > Architecture > Plugins

JavaScript

Native Code: Android

Bridges Native Code: iOS

Frameworks > PhoneGap > Demo

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 submodu

les• Crossing The PhoneGap

For Multiplatform Mobile Applications

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)

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”

Frameworks > Sencha Touch 2

• Native Device API: – Camera– Connection– Device– Geolocation– Notification– Orientation

Frameworks > Sencha Touch 2 > Demo

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

Testing

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

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

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)

Testing > Emulators > Windows Phone

Testing > Emulators > Windows Phone

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

Testing > Emulators > Android

Testing > Emulators > Android > Default

Testing > Emulators > Android > Motorola (MOTODEV)

Testing > Emulators > Android > Samsung (Skin)

Testing > Emulators > Android

Testing > Emulators > Android > Resources

• Java SE Development Kit• Eclipse• Android SDK• ADT Plugin for Eclipse• MOTODEV• Samsung Emulators

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

Testing > Adobe Shadow

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

Testing > Adobe Shadow > Resources

• Download• Video• Using Visual Studio + IIS Express + Adobe Shad

ow to Test Local Websites on Mobile Devices

This presentation is available for viewing & download: http://slidesha.re/zWlQlQ

“See you next time…”