1.
Mobile Development Shootout with
jQuery Mobile, Sencha Touch, and
Appcelerator Titanium
Steve Drucker
Founder / President
Fig Leaf Software

2.
About Me
 B.S. Computer Science, The University of Maryland College Park
 Certified Technical Trainer (CTT+)
 Certified Sencha Instructor
 Certified Titanium Developer
 Authored first book about ColdFusion
 Author of "Teach Yourself Sencha in a Day"
 Authored 20+ instructor-led training courses for Adobe, Sencha,
Paperthin, JackBe, and Fig Leaf Software
 Singlehandedly developed generation 2 of voanews.com – 44 sites
in 44 languages with 500K content items
 Consulting architect for www.nps.gov
 Developed mobile apps for ENTNet, Archdiocese of Baltimore, and
Quest Diagnostics
 20+ year career in I.T.

3.
About Me
 Current Projects
 "Teach Yourself Sencha Touch and Ext JS 4 in a Day"
http://training.figleaf.com/tutorials/senchacomplete/
 "Fast Track to Sencha Touch 2.2"
 iPad-based patient chart for Quest Diagnostics
 iPad-based crime reporting tool for D.H.S.
 A few published apps (also available on iTunes & Play)
 www.archbalt.org/mobile
 www.entnet.org/mobile
 training.figleaf.com/mobile

4.
Introduce Yourselves!
 Why are you here?
 What is your technical background?
 What do you hope to learn?
 What kinds of projects are you working on?

5.
Topics
 jQuery Mobile
 Sencha Touch
 Appcelerator Titanium

6.
Evaluation Criteria
 Build reference app: Friends with Beer
 Demonstrate typical mobile functionality
 Layout
 Theming
 Data Interoperability
 Data Entry
 Media handling
 Map Support
 X-Device Compatibility
 HTML Support
 Performance
 Goal: Understand the Development Experience & TCO

7.
Friends with Beer

8.
jQuery Mobile
 Browser-based mobile application development
framework that sits on top of jQuery
 DOM-based coding approach to mobile development
 Supported by Adobe, appendTo, jQuery Foundation
 Open Source
 Relatively good IDE support
 X-device compatible
 Compile to native app with PhoneGap / PhoneGap Build

9.
jQuery Mobile Views

10.
jQuery Mobile Data Handling
Note: You will likely want to use Backbone.js
to enhance native data handling

11.
Dynamically Populating UI

12.
Development Tools
 Dreamweaver CS 6
 Aptana Studio
 Codiqa
 ThemeRoller

13.
Dreamweaver
 Insert menu helps lower
learning curve for JQM
tag attributes
 Mobile swatches feature
deploys themeroller
themes
 One-click packaging with
PhoneGap Build
integration
 Not truly WYSIWYG

14.
Codiqa
 Browser-based
visual WYSIWYG
designer
 Does not allow
you to define/edit
event handlers

15.
ThemeRoller

16.
JQM Code Walkthrough
 Friends with Beer, JQM Edition

17.
JQM Summary
 Strengths
 Easy DOM-based syntax to master
 X-device support
 Large numbers of developers already fluent in jQuery
 Weaknesses
 No built-in development framework (MVC)
 DOM syntax can be repetitive
 Performance
 Likely to need 3rd
party plugins
 http://www.tutorialfeed.org/2012/02/10-awesome-jquery-mobile-
plugins-for.html
 http://backbonejs.org
 http://code.google.com/p/jquery-ui-map
 Our Conclusion
 Best suited for very small projects or "multi-page apps" where an
app server is dynamically generating the views as an alternative
to responsive web design.

18.
Sencha Touch
 Browser-based mobile application development framework
 Uses similar development paradigms to Ext JS 4
 JavaScript MVC class-based approach to development
 Open source
 Supported by Sencha (VC-backed)
 Compatible with most mobile browsers (Chrome, Safari, iOS
Browser, Android Browser, Kindle, current-gen Blackberry,
Windows Mobile/Surface
 Excellent developer tools and resources
 Compile to native app with either PhoneGap or Sencha CMD
 Native API support for some device APIs.
 Several code generation tools available

19.
Sencha Touch Views

20.
Sencha Touch Data Handling

21.
Sencha Touch Development
Tools
 Sencha Architect
 Sencha Eclipse Plugin
 Sencha Cmd 3
 3rd
Party Support
 JetBrains WebStorm / IntelliJ
 Sublime Text

22.
Sencha Architect

23.
Sencha Eclipse Plugin

24.
Sencha Cmd 3
 Command-line utility
 Code generation tools
 Sencha Mobile Packager
 Code selection tools for tuning what's included in your
app's final distro
 Workspace management
 Integration with Apache Ant

25.
Sencha Touch Code Walkthrough

26.
Sencha Touch Summary
 Strengths
 Only full-featured WYSIWYG IDE available
 Use same IDE, concepts and similar syntax for Touch & Desktop
development
 Best performing mobile web framework
 MVC framework well-suited to large development projects,
working in teams
 Documentation, Examples, Fig Leaf's Getting Started Tutorials
 Weaknesses
 Syntax and MVC framework can be challenging to master for
non-professionals (somewhat mitigated by Sencha Architect)
 Performance not as good as native app (but improving)
 No visual theme builder, upgrading from older versions typically
involves some level of effort.
 Our Conclusion
 Best overall framework for line-of-business and enterprise app
development

27.
Appcelerator Titanium
 Mobile App development framework compiler
 Compiles XML and JavaScript into a native iOS / Android /
Mobile Web App using native device UI components.
 Supported by Appcelerator (the owners of Aptana Studio)
 Open source
 IDE (Titanium Studio) is based on Aptana Studio
(no WYSIWYG)
 MVC development model similar to Adobe Flex & .ASPX
 Compiles to Android, iOS, and Web, however, your app will
not look the same on different devices (due to differences
in native UI components)
 Extensive support for Aptana's cloud services and native
device APIs

28.
Titanium Views

29.
Titanium Data Handling

30.
Titanium Studio

31.
Titanium Code Walkthrough

32.
Appcelerator Titanium Summary
 Strengths
 Android and iOS apps look and function as native apps because they
are native apps
 Appcelerator cloud support
 Native API support (alternative to PhoneGap)
 Building "hybrid" apps (e.g. FaceBook) with WebView component
 Weaknesses
 Can be difficult to debug
 Web app generation is immature
 Compilation times can add up
 Missing an abstraction layer for some commonly used form GUI's
(select boxes) – they advise using web forms
 The same app on different platforms will not look the same
 Must tag certain components as device-specific, leading to longer
development cycles
 Our Conclusion
 Good for handling apps with lots of a/v integration or dependencies
on device-specific features.
 Use as a native shell around a webview

33.
Q & A

34.
Contact Us
 sdrucker@figleaf.com
 http://www.linkedin.com/in/uberfig
 http://www.facebook.com/steve.drucker
 http://druckit.wordpress.com
 http://www.figleaf.com
 http://training.figleaf.com
 Free tutorials:
http://training.figleaf.com/tutorials
 Ask me about our Consulting, Training, and Software
Sales!

35.
Watch the Video!
 Check out the full 2.5 hour video of this presentation at
the following url:
http://bit.ly/Y04lDi
(requires Adobe Flash Player)