JQuery Mobile vs Appcelerator Titanium vs Sencha Touch


Published on

During this briefing for developers and I.T. managers, you'll get an in-depth review of the three most popular javascript-based mobile application development platforms - jQuery Mobile, Sencha Touch, and Appcelerator Titanium! You'll review the development tools, hear about the developer and debugging experience, and participate in a brief code review in order to determine which framework is the most appropriate for your next mobile project! We'll demonstrate how each framework can be used to develop the same mobile app, highlighting the strengths and weaknesses of each.

Note that the full 2.5 hour video of this presentation is available at http://bit.ly/Y04lDi

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

  1. 1. Mobile Development Shootout withjQuery Mobile, Sencha Touch, andAppcelerator TitaniumSteve DruckerFounder / PresidentFig Leaf Software
  2. 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 sitesin 44 languages with 500K content items Consulting architect for www.nps.gov Developed mobile apps for ENTNet, Archdiocese of Baltimore, andQuest Diagnostics 20+ year career in I.T.
  3. 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. 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. 5. Topics jQuery Mobile Sencha Touch Appcelerator Titanium
  6. 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. 7. Friends with Beer
  8. 8. jQuery Mobile Browser-based mobile application developmentframework 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. 9. jQuery Mobile Views
  10. 10. jQuery Mobile Data HandlingNote: You will likely want to use Backbone.jsto enhance native data handling
  11. 11. Dynamically Populating UI
  12. 12. Development Tools Dreamweaver CS 6 Aptana Studio Codiqa ThemeRoller
  13. 13. Dreamweaver Insert menu helps lowerlearning curve for JQMtag attributes Mobile swatches featuredeploys themerollerthemes One-click packaging withPhoneGap Buildintegration Not truly WYSIWYG
  14. 14. Codiqa Browser-basedvisual WYSIWYGdesigner Does not allowyou to define/editevent handlers
  15. 15. ThemeRoller
  16. 16. JQM Code Walkthrough Friends with Beer, JQM Edition
  17. 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 3rdparty 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 anapp server is dynamically generating the views as an alternativeto responsive web design.
  18. 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, iOSBrowser, 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. 19. Sencha Touch Views
  20. 20. Sencha Touch Data Handling
  21. 21. Sencha Touch DevelopmentTools Sencha Architect Sencha Eclipse Plugin Sencha Cmd 3 3rdParty Support JetBrains WebStorm / IntelliJ Sublime Text
  22. 22. Sencha Architect
  23. 23. Sencha Eclipse Plugin
  24. 24. Sencha Cmd 3 Command-line utility Code generation tools Sencha Mobile Packager Code selection tools for tuning whats included in yourapps final distro Workspace management Integration with Apache Ant
  25. 25. Sencha Touch Code Walkthrough
  26. 26. Sencha Touch Summary Strengths Only full-featured WYSIWYG IDE available Use same IDE, concepts and similar syntax for Touch & Desktopdevelopment Best performing mobile web framework MVC framework well-suited to large development projects,working in teams Documentation, Examples, Fig Leafs Getting Started Tutorials Weaknesses Syntax and MVC framework can be challenging to master fornon-professionals (somewhat mitigated by Sencha Architect) Performance not as good as native app (but improving) No visual theme builder, upgrading from older versions typicallyinvolves some level of effort. Our Conclusion Best overall framework for line-of-business and enterprise appdevelopment
  27. 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 willnot look the same on different devices (due to differencesin native UI components) Extensive support for Aptanas cloud services and nativedevice APIs
  28. 28. Titanium Views
  29. 29. Titanium Data Handling
  30. 30. Titanium Studio
  31. 31. Titanium Code Walkthrough
  32. 32. Appcelerator Titanium Summary Strengths Android and iOS apps look and function as native apps because theyare 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 GUIs(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 longerdevelopment cycles Our Conclusion Good for handling apps with lots of a/v integration or dependencieson device-specific features. Use as a native shell around a webview
  33. 33. Q & A
  34. 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 SoftwareSales!
  35. 35. Watch the Video! Check out the full 2.5 hour video of this presentation atthe following url:http://bit.ly/Y04lDi(requires Adobe Flash Player)