SlideShare a Scribd company logo
1 of 44
Download to read offline
An Overview of Mobile HTML +
    JavaScript Frameworks

    Presented By: Sasha dos Santos


      http://slidesha.re/zWlQlQ



                              Orlando Code Camp 2012
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      Events
                Camera             File
                Capture            Geolocation
                Compass            Media
                Connection         Notification
                Contacts           Storage
                Device
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



                    Bridges    Native Code: iOS


JavaScript




                               Native Code:
                               Android
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
  submodules
• 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
  Shadow to Test Local Websites on
  Mobile Devices
This presentation is available for viewing &
download: http://slidesha.re/zWlQlQ




                “See you next time…”

More Related Content

What's hot

Hybrid app in ionic framework overview
Hybrid app in ionic framework overviewHybrid app in ionic framework overview
Hybrid app in ionic framework overviewSanket Devlekar
 
Phonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationPhonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationMuhammad Hakim A
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)ejlp12
 
Cross-platform development frameworks
Cross-platform development frameworksCross-platform development frameworks
Cross-platform development frameworksCarlo Bernaschina
 
Dev days 1 Introduction to Xamarin Taswar Bhatti
Dev days 1 Introduction to Xamarin Taswar BhattiDev days 1 Introduction to Xamarin Taswar Bhatti
Dev days 1 Introduction to Xamarin Taswar BhattiTaswar Bhatti
 
Introduction to Phonegap
Introduction to PhonegapIntroduction to Phonegap
Introduction to PhonegapAndrei Firoiu
 
Apps with Apache Cordova and Phonegap
Apps with Apache Cordova and PhonegapApps with Apache Cordova and Phonegap
Apps with Apache Cordova and PhonegapChristian Grobmeier
 
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)Aimee Maree Forsstrom
 
Cordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstCordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstRaymond Camden
 
Apache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application DevelopmentApache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application Developmentthedumbterminal
 
Native script overview
Native script overviewNative script overview
Native script overviewBaskar rao Dsn
 
Synapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile applicationSynapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile applicationsaritasingh19866
 
Firefox operating system
Firefox operating systemFirefox operating system
Firefox operating systemNishant Mehare
 
Native Script Overview
Native Script OverviewNative Script Overview
Native Script OverviewBaskar rao Dsn
 
App forum2015 London - Building RhoMobile Applications with Ionic
App forum2015 London - Building RhoMobile Applications with IonicApp forum2015 London - Building RhoMobile Applications with Ionic
App forum2015 London - Building RhoMobile Applications with Ionicrobgalvinjr
 

What's hot (20)

Hybrid app in ionic framework overview
Hybrid app in ionic framework overviewHybrid app in ionic framework overview
Hybrid app in ionic framework overview
 
Phonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationPhonegap/Cordova vs Native Application
Phonegap/Cordova vs Native Application
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)
 
Apache cordova
Apache cordovaApache cordova
Apache cordova
 
Cross-platform development frameworks
Cross-platform development frameworksCross-platform development frameworks
Cross-platform development frameworks
 
Dev days 1 Introduction to Xamarin Taswar Bhatti
Dev days 1 Introduction to Xamarin Taswar BhattiDev days 1 Introduction to Xamarin Taswar Bhatti
Dev days 1 Introduction to Xamarin Taswar Bhatti
 
Apache Cordova
Apache CordovaApache Cordova
Apache Cordova
 
Introduction to Phonegap
Introduction to PhonegapIntroduction to Phonegap
Introduction to Phonegap
 
Firefox os
Firefox osFirefox os
Firefox os
 
Apps with Apache Cordova and Phonegap
Apps with Apache Cordova and PhonegapApps with Apache Cordova and Phonegap
Apps with Apache Cordova and Phonegap
 
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
FirefoxOS and its use of Linux (a deep dive into Gonk architecture)
 
Cordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstCordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirst
 
Architecting iOS Project
Architecting iOS ProjectArchitecting iOS Project
Architecting iOS Project
 
Apache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application DevelopmentApache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application Development
 
Revue des annonces WWDC2015
Revue des annonces WWDC2015Revue des annonces WWDC2015
Revue des annonces WWDC2015
 
Native script overview
Native script overviewNative script overview
Native script overview
 
Synapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile applicationSynapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile application
 
Firefox operating system
Firefox operating systemFirefox operating system
Firefox operating system
 
Native Script Overview
Native Script OverviewNative Script Overview
Native Script Overview
 
App forum2015 London - Building RhoMobile Applications with Ionic
App forum2015 London - Building RhoMobile Applications with IonicApp forum2015 London - Building RhoMobile Applications with Ionic
App forum2015 London - Building RhoMobile Applications with Ionic
 

Viewers also liked

Content curation
Content curationContent curation
Content curationtechiesue
 
Qr codes + ipads
Qr codes + ipadsQr codes + ipads
Qr codes + ipadstechiesue
 
Serious Games + Computer Science = Serious CS
Serious Games + Computer Science = Serious CSSerious Games + Computer Science = Serious CS
Serious Games + Computer Science = Serious CSKatrin Becker
 
Cell Phone Jammer , Intro
Cell Phone Jammer , IntroCell Phone Jammer , Intro
Cell Phone Jammer , IntroLakshman Basnet
 
How to apply graphs to network management
How to apply graphs to network managementHow to apply graphs to network management
How to apply graphs to network managementLinkurious
 
12th CBSE Computer Science Project
12th CBSE Computer Science Project  12th CBSE Computer Science Project
12th CBSE Computer Science Project Ashwin Francis
 
How to use phone calls and network analysis to identify criminals
How to use phone calls and network analysis to identify criminals How to use phone calls and network analysis to identify criminals
How to use phone calls and network analysis to identify criminals Linkurious
 
Cellphone signal detector and jammer ppt
Cellphone signal detector and jammer pptCellphone signal detector and jammer ppt
Cellphone signal detector and jammer pptAmar Raj
 
Cyber security and attack analysis : how Cisco uses graph analytics
Cyber security and attack analysis : how Cisco uses graph analyticsCyber security and attack analysis : how Cisco uses graph analytics
Cyber security and attack analysis : how Cisco uses graph analyticsLinkurious
 
Network Security ,2014 and 2015 ieee projects list @ TMKS Infotech
Network Security ,2014 and 2015 ieee projects list @ TMKS InfotechNetwork Security ,2014 and 2015 ieee projects list @ TMKS Infotech
Network Security ,2014 and 2015 ieee projects list @ TMKS InfotechManju Nath
 
Using graph technologies to fight fraud
Using graph technologies to fight fraudUsing graph technologies to fight fraud
Using graph technologies to fight fraudLinkurious
 
Object detection
Object detectionObject detection
Object detectionSomesh Vyas
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicKadhem Soltani
 
12th CBSE Computer Science Project
12th CBSE Computer Science Project12th CBSE Computer Science Project
12th CBSE Computer Science ProjectAshwin Francis
 
25 Disruptive Technology Trends 2015 - 2016
25 Disruptive Technology Trends 2015 - 201625 Disruptive Technology Trends 2015 - 2016
25 Disruptive Technology Trends 2015 - 2016Brian Solis
 

Viewers also liked (16)

Content curation
Content curationContent curation
Content curation
 
Qr codes + ipads
Qr codes + ipadsQr codes + ipads
Qr codes + ipads
 
Serious Games + Computer Science = Serious CS
Serious Games + Computer Science = Serious CSSerious Games + Computer Science = Serious CS
Serious Games + Computer Science = Serious CS
 
Cell Phone Jammer , Intro
Cell Phone Jammer , IntroCell Phone Jammer , Intro
Cell Phone Jammer , Intro
 
How to apply graphs to network management
How to apply graphs to network managementHow to apply graphs to network management
How to apply graphs to network management
 
Introduction to OpenCV
Introduction to OpenCVIntroduction to OpenCV
Introduction to OpenCV
 
12th CBSE Computer Science Project
12th CBSE Computer Science Project  12th CBSE Computer Science Project
12th CBSE Computer Science Project
 
How to use phone calls and network analysis to identify criminals
How to use phone calls and network analysis to identify criminals How to use phone calls and network analysis to identify criminals
How to use phone calls and network analysis to identify criminals
 
Cellphone signal detector and jammer ppt
Cellphone signal detector and jammer pptCellphone signal detector and jammer ppt
Cellphone signal detector and jammer ppt
 
Cyber security and attack analysis : how Cisco uses graph analytics
Cyber security and attack analysis : how Cisco uses graph analyticsCyber security and attack analysis : how Cisco uses graph analytics
Cyber security and attack analysis : how Cisco uses graph analytics
 
Network Security ,2014 and 2015 ieee projects list @ TMKS Infotech
Network Security ,2014 and 2015 ieee projects list @ TMKS InfotechNetwork Security ,2014 and 2015 ieee projects list @ TMKS Infotech
Network Security ,2014 and 2015 ieee projects list @ TMKS Infotech
 
Using graph technologies to fight fraud
Using graph technologies to fight fraudUsing graph technologies to fight fraud
Using graph technologies to fight fraud
 
Object detection
Object detectionObject detection
Object detection
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and Ionic
 
12th CBSE Computer Science Project
12th CBSE Computer Science Project12th CBSE Computer Science Project
12th CBSE Computer Science Project
 
25 Disruptive Technology Trends 2015 - 2016
25 Disruptive Technology Trends 2015 - 201625 Disruptive Technology Trends 2015 - 2016
25 Disruptive Technology Trends 2015 - 2016
 

Similar to An overview of mobile html + java script frameworks

Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry
 
Build Your First iPhone or Android App with Telerik AppBuilder
Build Your First iPhone or Android App with Telerik AppBuilderBuild Your First iPhone or Android App with Telerik AppBuilder
Build Your First iPhone or Android App with Telerik AppBuilderJeffrey T. Fritz
 
Developing Windows Phone 8 apps using PhoneGap
Developing Windows Phone 8 apps using PhoneGapDeveloping Windows Phone 8 apps using PhoneGap
Developing Windows Phone 8 apps using PhoneGapAmar Mesic
 
Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...
Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...
Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...Jason Conger
 
Hybrid Mobile Development with Apache Cordova and
Hybrid Mobile Development with Apache Cordova and Hybrid Mobile Development with Apache Cordova and
Hybrid Mobile Development with Apache Cordova and Ryan Cuprak
 
Building Cross-Platform JavaScript Apps using Cordova
Building Cross-Platform JavaScript Apps using CordovaBuilding Cross-Platform JavaScript Apps using Cordova
Building Cross-Platform JavaScript Apps using CordovaNoam Kfir
 
Xamarin COE by Mukteswar Patnaik
Xamarin COE by Mukteswar PatnaikXamarin COE by Mukteswar Patnaik
Xamarin COE by Mukteswar PatnaikMukteswar Patnaik
 
Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch
Building Cross-Platform Mobile Apps with PhoneGap and Sencha TouchBuilding Cross-Platform Mobile Apps with PhoneGap and Sencha Touch
Building Cross-Platform Mobile Apps with PhoneGap and Sencha TouchAxel Buerkle
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache CordovaIvano Malavolta
 
Understanding Native, Hybrid, and Web Mobile Architectures
Understanding Native, Hybrid, and Web Mobile ArchitecturesUnderstanding Native, Hybrid, and Web Mobile Architectures
Understanding Native, Hybrid, and Web Mobile ArchitecturesSalesforce Developers
 
Android Application Development Using Java
Android Application Development Using JavaAndroid Application Development Using Java
Android Application Development Using Javaamaankhan
 
NCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsNCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsJohn M. Wargo
 
Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic frameworkShyjal Raazi
 
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionicHybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionicErmias Bayu
 
Cross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioCross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioMizanur Sarker
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile DevelopmentManesh Lad
 
Hybrid Mobile Applications
Hybrid Mobile ApplicationsHybrid Mobile Applications
Hybrid Mobile ApplicationsRuwan Ranganath
 

Similar to An overview of mobile html + java script frameworks (20)

Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
 
Build Your First iPhone or Android App with Telerik AppBuilder
Build Your First iPhone or Android App with Telerik AppBuilderBuild Your First iPhone or Android App with Telerik AppBuilder
Build Your First iPhone or Android App with Telerik AppBuilder
 
Developing Windows Phone 8 apps using PhoneGap
Developing Windows Phone 8 apps using PhoneGapDeveloping Windows Phone 8 apps using PhoneGap
Developing Windows Phone 8 apps using PhoneGap
 
Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...
Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...
Building your Own Mobile Enterprise Application: It’s Not as Hard as You Migh...
 
Hybrid Mobile Development with Apache Cordova and
Hybrid Mobile Development with Apache Cordova and Hybrid Mobile Development with Apache Cordova and
Hybrid Mobile Development with Apache Cordova and
 
Building Cross-Platform JavaScript Apps using Cordova
Building Cross-Platform JavaScript Apps using CordovaBuilding Cross-Platform JavaScript Apps using Cordova
Building Cross-Platform JavaScript Apps using Cordova
 
Xamarin COE by Mukteswar Patnaik
Xamarin COE by Mukteswar PatnaikXamarin COE by Mukteswar Patnaik
Xamarin COE by Mukteswar Patnaik
 
Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch
Building Cross-Platform Mobile Apps with PhoneGap and Sencha TouchBuilding Cross-Platform Mobile Apps with PhoneGap and Sencha Touch
Building Cross-Platform Mobile Apps with PhoneGap and Sencha Touch
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache Cordova
 
Understanding Native, Hybrid, and Web Mobile Architectures
Understanding Native, Hybrid, and Web Mobile ArchitecturesUnderstanding Native, Hybrid, and Web Mobile Architectures
Understanding Native, Hybrid, and Web Mobile Architectures
 
Android Application Development Using Java
Android Application Development Using JavaAndroid Application Development Using Java
Android Application Development Using Java
 
NCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsNCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile Apps
 
Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic framework
 
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionicHybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
 
Introduction to jQueryMobile
Introduction to jQueryMobileIntroduction to jQueryMobile
Introduction to jQueryMobile
 
Cross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioCross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual Studio
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
 
Hybrid Mobile Applications
Hybrid Mobile ApplicationsHybrid Mobile Applications
Hybrid Mobile Applications
 
Android quick talk
Android quick talkAndroid quick talk
Android quick talk
 
Apache Cordova 4.x
Apache Cordova 4.xApache Cordova 4.x
Apache Cordova 4.x
 

Recently uploaded

Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 

Recently uploaded (20)

Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
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
  • 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
  • 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
  • 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…”