![Page 1: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/1.jpg)
Mobile Development Shootout with jQuery Mobile, Sencha Touch,
and Appcelerator Titanium
Steve Drucker
Founder / President
Fig Leaf Software
![Page 2: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/2.jpg)
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.
![Page 3: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/3.jpg)
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
![Page 4: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/4.jpg)
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?
![Page 5: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/5.jpg)
Topics
jQuery Mobile
Sencha Touch
Appcelerator Titanium
![Page 6: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/6.jpg)
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
![Page 7: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/7.jpg)
Friends with Beer
![Page 8: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/8.jpg)
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
![Page 9: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/9.jpg)
jQuery Mobile Views
![Page 10: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/10.jpg)
jQuery Mobile Data Handling
Note: You will likely want to use Backbone.jsto enhance native data handling
![Page 11: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/11.jpg)
Dynamically Populating UI
![Page 12: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/12.jpg)
Development Tools
Dreamweaver CS 6
Aptana Studio
Codiqa
ThemeRoller
![Page 13: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/13.jpg)
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
![Page 14: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/14.jpg)
Codiqa
Browser-based visual WYSIWYG designer
Does not allow you to define/edit event handlers
![Page 15: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/15.jpg)
ThemeRoller
![Page 16: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/16.jpg)
JQM Code Walkthrough
Friends with Beer, JQM Edition
![Page 17: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/17.jpg)
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.
![Page 18: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/18.jpg)
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
![Page 19: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/19.jpg)
Sencha Touch Views
![Page 20: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/20.jpg)
Sencha Touch Data Handling
![Page 21: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/21.jpg)
Sencha Touch Development Tools Sencha Architect
Sencha Eclipse Plugin
Sencha Cmd 3
3rd Party Support JetBrains WebStorm / IntelliJ Sublime Text
![Page 22: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/22.jpg)
Sencha Architect
![Page 23: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/23.jpg)
Sencha Eclipse Plugin
![Page 24: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/24.jpg)
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
![Page 25: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/25.jpg)
Sencha Touch Code Walkthrough
![Page 26: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/26.jpg)
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
![Page 27: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/27.jpg)
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
![Page 28: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/28.jpg)
Titanium Views
![Page 29: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/29.jpg)
Titanium Data Handling
![Page 30: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/30.jpg)
Titanium Studio
![Page 31: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/31.jpg)
Titanium Code Walkthrough
![Page 32: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/32.jpg)
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
![Page 33: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/33.jpg)
Q & A
![Page 34: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/34.jpg)
Contact Us
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!
![Page 35: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch](https://reader036.vdocument.in/reader036/viewer/2022081507/554f91e8b4c905d25b8b5246/html5/thumbnails/35.jpg)
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)