0
An Overview of Mobile HTML +    JavaScript Frameworks    Presented By: Sasha dos Santos      http://slidesha.re/zWlQlQ    ...
About The Presenter• Twitter: @SashaGeekette• Blog: SashaGeekette.wordpress.com• Software Engineer, 3M Electronic Monitori...
Frameworks
Frameworks > JQuery Mobile• Tries to target every mobile, tablet, e-reader, desktop  platform• Includes animations and com...
Frameworks > JQuery Mobile > Demo
Frameworks > jQuery Mobile >             Resources• Download: http://jquerymobile.com/• Level of compatibility for differe...
Frameworks > Kendo UI• Similar concept and syntax to jQuery Mobile• Components adaptively render to look and  behave accor...
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...
Frameworks > PhoneGap• Phone Gap (classic) is used within the  development environment of the mobile  platform that you ar...
Frameworks > PhoneGap• No components  – Can use components from jQuery Mobile, Kendo    UI, Sencha• Native API    Accelero...
Frameworks > PhoneGap >             Architecture• PhoneGap shares an architecture used by  many mobile frameworks• Provide...
Frameworks > PhoneGap >         Architecture > Plugins• Sometimes PhoneGap provides the ability to  do almost everything w...
Frameworks > Phone Gap >            Architecture > Plugins                    Bridges    Native Code: iOSJavaScript       ...
Frameworks > PhoneGap > Demo
Frameworks > PhoneGap > Resources• Project Website• GitHub directory of PhoneGap Plugins• Creating PhoneGap plugin for And...
Frameworks > Sencha Touch 2• Create mobile sites that look/feel like mobile  apps OR create native packaging• Runs in webk...
Frameworks > Sencha Touch 2• Components such as date  pickers, toolbars, tabs• Note: components do not adaptively render  ...
Frameworks > Sencha Touch 2• Native Device API:  – Camera  – Connection  – Device  – Geolocation  – Notification  – Orient...
Frameworks > Sencha Touch 2 > Demo
Frameworks > Sencha Touch 2 >               Resources•   Download•   Guide•   Tutorial #1•   Tutorial #2•   Examples on Gi...
Testing
Testing > IIS Express• Problem: The default ASP .NET Development  Server (Cassini) doesn’t allow for remote  access – some...
Testing > IIS Express > Configuration• Change Visual Studio to use IIS Express instead of  ASP .NET Development Server• Ch...
Testing > Emulators > Windows Phone• Download Microsoft Visual Studio Express  2010 for Windows Phone• Start > All Program...
Testing > Emulators > Windows Phone
Testing > Emulators > Windows Phone
Testing > Emulators > Android• Download the Android SDK & Android Virtual  Device (AVD) Manager• To access localhost use I...
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 Plug...
Testing > Adobe Shadow• Wirelessly connect to multiple mobile devices  and preview, inspect, debug in real time• Supported...
Testing > Adobe Shadow
Testing > Adobe Shadow• To test sites on mobile devices during  development, use IIS Express and Adobe  Shadow• Change def...
Testing > Adobe Shadow > Resources• Download• Video• Using Visual Studio + IIS Express + Adobe  Shadow to Test Local Websi...
This presentation is available for viewing &download: http://slidesha.re/zWlQlQ                “See you next time…”
Upcoming SlideShare
Loading in...5
×

An overview of mobile html + java script frameworks

2,192

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,192
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "An overview of mobile html + java script frameworks"

  1. 1. An Overview of Mobile HTML + JavaScript Frameworks Presented By: Sasha dos Santos http://slidesha.re/zWlQlQ Orlando Code Camp 2012
  2. 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. 3. Frameworks
  4. 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. 5. Frameworks > JQuery Mobile > Demo
  6. 6. Frameworks > jQuery Mobile > Resources• Download: http://jquerymobile.com/• Level of compatibility for different devices• List of data attributes
  7. 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. 8. Frameworks > Kendo UI > Demo
  9. 9. Frameworks > Kendo UI > Demo
  10. 10. Frameworks > Kendo UI > Demo
  11. 11. Frameworks > Kendo UI > Demo
  12. 12. Frameworks > Kendo UI > Demo
  13. 13. Frameworks > Kendo UI > Resources• Download• Kendo UI TV
  14. 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. 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. 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. 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. 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. 19. Frameworks > Phone Gap > Architecture > Plugins Bridges Native Code: iOSJavaScript Native Code: Android
  20. 20. Frameworks > PhoneGap > Demo
  21. 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. 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. 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. 24. Frameworks > Sencha Touch 2• Native Device API: – Camera – Connection – Device – Geolocation – Notification – Orientation
  25. 25. Frameworks > Sencha Touch 2 > Demo
  26. 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. 27. Testing
  28. 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. 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. 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. 31. Testing > Emulators > Windows Phone
  32. 32. Testing > Emulators > Windows Phone
  33. 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. 34. Testing > Emulators > Android
  35. 35. Testing > Emulators > Android > Default
  36. 36. Testing > Emulators > Android > Motorola (MOTODEV)
  37. 37. Testing > Emulators > Android > Samsung (Skin)
  38. 38. Testing > Emulators > Android
  39. 39. Testing > Emulators > Android > Resources• Java SE Development Kit• Eclipse• Android SDK• ADT Plugin for Eclipse• MOTODEV• Samsung Emulators
  40. 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. 41. Testing > Adobe Shadow
  42. 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. 43. Testing > Adobe Shadow > Resources• Download• Video• Using Visual Studio + IIS Express + Adobe Shadow to Test Local Websites on Mobile Devices
  44. 44. This presentation is available for viewing &download: http://slidesha.re/zWlQlQ “See you next time…”
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×