mobile development with phonegap
TRANSCRIPT
Mobile Development
with jQuery Mobile and PhoneGap
Premnath Thimma
Agenda
• Introduction
• Mobile Background/Architecture
• jQuery Mobile
• PhoneGap
• Demo
• Questions?
Introduction
• About meo Premnath Thimma
• Experienceo 14+ years of experienceo Wear multiple hats – Developer, Lead, Manager, Technical
Project Managero Development done in all layers (Full Stack Developer)o Java, Pega, TIBCO and nowo Lately Mobile/HTML5/CSS3 Development
Mobile Background
• Global internet usage will more than double by 2015, and most of these users will be mobile
• 64% of mobile phone time is spent on apps
• In 2012, the U.S. saw a 55% increase in smartphone subscriptions to make for 98 million smartphone subscribers, representing nearly 42% of all U.S. mobile users
Mobile Background (Cont.)
• 61% of smartphone users make local searches from a device
• 79% of smartphone users use their phones to help with shopping and 74% make a purchase as a result
• Mobile was responsible for US $2.6 billion in travel booking value in 2011
Mobile Background (Cont.)
Mobile Architecture
• Mobile Applicationo Stripped down version of Web Applicationo Developed using server side technology (PHP, .Net)
• Native o iOS (Objective-C, iOS SDK, C#, MonoTouch)o Android (Java, Android SDK, C#, MonoTouch)o Windows (C#/.Net Framework 4)
• Hybrid Applicationo jQuery Mobile/JavaScript and PhoneGap like
Frameworks
Which one to choose?
Why jQuery Mobile?
• Top-of-the-line JavaScript in a unified User Interface
• Works across the most-used mobile devices
• Supports mobile browsers
• Treating mobile web browsers exactly the same as desktop web browsers
• Build on top of jQuery, knowledge is readily available in the industry
• Large user base
• Used by many large companies
Who is using jQuery Mobile?
jQuery Mobile (Sample Site)<!DOCTYPE html>
<html>
<head> <title>Page Title</title>
</head>
<body>
<section data-role="page">
<header data-role="header">
<h1>Header</h1>
</header>
<article data-role="content">
<h1>Content</h1>
</article>
<footer data-role="footer">
<h1>Footer</h1>
</footer>
</section>
</body></html>
jQuery Mobile Data-*
• data-role o header, page, footer, listview, button etc.
• data-transitiono slide, slideup, slidedown, pop, fade, flip
• data-icono home, delete, refresh, plus, minus etc
• data-theme (a-z)
• data-mini (true/false)
• data-iconposo left, right, top, bottom, notext
PhoneGap
• One code base, multiple platforms
• Reuse existing web developer skills
• Shorter learning curve
• Faster development
• Mobile site and app with same code
• Reusable web code and infrastructure
• Code portable to other environments
• Based on open standards
• Active and growing community
Demo
Questions?
References
1. https://snaphop.com/2012-mobile-marketing-statistics/
2. http://jquerymobile.com/test/docs/api/data-attributes.html
3. http://docs.phonegap.com/en/2.1.0/index.html
jQuery Plug-in - DynaTree