The document compares three mobile development frameworks: jQuery Mobile, Sencha Touch, and Appcelerator Titanium, highlighting their features, strengths, and weaknesses. It includes an evaluation of criteria for building a reference app and discusses the development experiences with each framework. The conclusion suggests that Sencha Touch is the best for enterprise apps, while jQuery Mobile is suited for small projects, and Appcelerator Titanium is ideal for apps needing native functionality.

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)