jquery mobile vs appcelerator titanium vs sencha touch

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

Upload: steve-drucker

Post on 11-May-2015

33.247 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

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

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

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

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

Topics

jQuery Mobile

Sencha Touch

Appcelerator Titanium

Page 6: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

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

Friends with Beer

Page 8: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

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

jQuery Mobile Views

Page 10: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

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

Dynamically Populating UI

Page 12: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

Development Tools

Dreamweaver CS 6

Aptana Studio

Codiqa

ThemeRoller

Page 13: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

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

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

ThemeRoller

Page 16: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

JQM Code Walkthrough

Friends with Beer, JQM Edition

Page 17: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

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

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

Sencha Touch Views

Page 20: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

Sencha Touch Data Handling

Page 21: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

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

Sencha Architect

Page 23: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

Sencha Eclipse Plugin

Page 24: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

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

Sencha Touch Code Walkthrough

Page 26: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

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

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

Titanium Views

Page 29: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

Titanium Data Handling

Page 30: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

Titanium Studio

Page 31: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

Titanium Code Walkthrough

Page 32: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

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

Q & A

Page 34: JQuery Mobile vs Appcelerator Titanium vs Sencha Touch

Contact Us

[email protected]

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

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)