Jquery-Mobile Vs. Sencha Touch May the Best Win

jQuery-Mobile vs. Sencha Touch May the best win

Qafoo GmbH/crosscan GmbH

October 25, 2012

jQuery-Mobile vs. Sencha Touch 1 / 66 What comes next?

Welcome

jQuery-Mobile vs. Sencha Touch 2 / 66 About Me Jakob Westhoff

I More than 11 years of professional PHP Working with experience I More than 8 years of Qafoo passion for software quality professional JavaScript experience I Open source enthusiast I Regular speaker at (inter)national conferences I Consultant, Trainer and Author

jQuery-Mobile vs. Sencha Touch 2 / 66 About Me Jakob Westhoff

I More than 11 years of professional PHP Working with experience I More than 8 years of Qafoo passion for software quality professional JavaScript experience We help people to create I Open source enthusiast high quality web I Regular speaker at applications. (inter)national conferences I Consultant, Trainer and Author

jQuery-Mobile vs. Sencha Touch 2 / 66 About Me Jakob Westhoff

jQuery-Mobile vs. Sencha Touch 2 / 66 About Me Hans-Christian Otto

I More than 8 years of professional PHP Working with experience I More than 5 years of professional JavaScript experience I Regular speaker at international conferences I Director of software development with crosscan GmbH

jQuery-Mobile vs. Sencha Touch 3 / 66

Goals of this session

I Getting to know jQuery Mobile

I . . . and Sencha Touch

I Learn about the fudamental differences

I Gather knowledge to decide which one suits your needs

jQuery-Mobile vs. Sencha Touch 6 / 66 What comes next?

Facts

jQuery-Mobile vs. Sencha Touch 7 / 66 jQuery Mobile - The Facts

I Mobile Web-Application Framework I Support for almost any current mobile platform I Apple iOS 3.2-6.0 I Android 2.x - 4.1 I Windows Phone 7.x I Blackberry 6/7 I Blackberry Playbook I Palm WebOS I Firefox Mobile I Chrome for Mobile I Kindle Fire I ...

jQuery-Mobile vs. Sencha Touch 7 / 66 jQuery Mobile - The Facts

I Quite small I jQuery: 33kb (miniﬁed+gzipped) I jQuery-Mobile: 24kb (miniﬁed+gzipped) I CSS: 7kb I Full: 64kb I Don’t use all the features? I Use the new Download Builder to create custom packages I Proper CDN for cachable inclusion exists

jQuery-Mobile vs. Sencha Touch 8 / 66 jQuery Mobile - The Facts

I Fully conﬁgurable themes with multiple swatches I Graphical Theme Designer exists (free) I ThemeRoller I Default theme has 5 different colorations (swatches)

jQuery-Mobile vs. Sencha Touch 9 / 66 jQuery Mobile - The Facts

I Fully conﬁgurable themes with multiple swatches I Graphical Theme Designer exists (free) I ThemeRoller I Default theme has 5 different colorations (swatches)

jQuery-Mobile vs. Sencha Touch 9 / 66 jQuery Mobile - The Facts

I Fully conﬁgurable themes with multiple swatches I Graphical Theme Designer exists (free) I ThemeRoller I Default theme has 5 different colorations (swatches)

jQuery-Mobile vs. Sencha Touch 9 / 66 jQuery Mobile - The Facts

I Utilization of jQuery and jQuery-UI base framework I Usage of progressive enhancement to realize gui components I A variety of widgets: (pages, dialogs, toolbars, listviews, buttons, forms, ...) I Support for Accessibility-features like WAI-ARIA throughout the framework

jQuery-Mobile vs. Sencha Touch 10 / 66 Sencha Touch - The Facts

I Mobile Web-Application Framework I Support for only the most important mobile platforms I Apple iOS 4-6.0 I Android 2.3 - 4.1 I Blackberry 6/7 I Blackberry Playbook I Chrome for Mobile ? I ...

jQuery-Mobile vs. Sencha Touch 11 / 66 Sencha Touch - The Facts

I Mobile Web-Application Framework I Support for only the most important mobile platforms I Apple iOS 4-6.0 I Android 2.3 - 4.1 I Blackberry 6/7 I Blackberry Playbook I Chrome for Mobile ? I ...

jQuery-Mobile vs. Sencha Touch 11 / 66 Sencha Touch - The Facts

I Not that small I JavaScript: 568kb I CSS: 178kb I Full: 746kb I Don’t use all the features? I Use the new Sencha CMD to create custom packages I Proper CDN for cachable inclusion exists (but this contains the whole framework)

jQuery-Mobile vs. Sencha Touch 12 / 66 Sencha Touch - The Facts

I Fully conﬁgurable themes (created using SASS/Compass) I Several (not so sophisticated) theme builders exist

jQuery-Mobile vs. Sencha Touch 13 / 66 Sencha Touch - The Facts

I Fully conﬁgurable themes (created using SASS/Compass) I Several (not so sophisticated) theme builders exist

jQuery-Mobile vs. Sencha Touch 13 / 66 Sencha Touch - The Facts

I Fully conﬁgurable themes (created using SASS/Compass) I Several (not so sophisticated) theme builders exist

jQuery-Mobile vs. Sencha Touch 13 / 66 Sencha Touch - The Facts

I Similar to Senchas Ext JS framework, but not based on it. I No progressive enhancement, no seemless degredation, no semantic websites I A variety of widgets: (dialogs, toolbars, listviews, buttons, forms, sliders ...) I Object oriented software development (read: Java style) I Native packaging

jQuery-Mobile vs. Sencha Touch 14 / 66 What comes next?

A Demo Application

jQuery-Mobile vs. Sencha Touch 15 / 66 A simple contacts application

I For demonstration purposes we use a simple application I Managing contacts I List Contacts in different sort orders (ﬁrstname, lastname) I Add a new contact I View contact details

jQuery-Mobile vs. Sencha Touch 15 / 66 A simple contact application

jQuery-Mobile vs. Sencha Touch 16 / 66 What comes next?

Bootstrapping

jQuery-Mobile vs. Sencha Touch 17 / 66 Bootstrapping - jQuery Mobile

I Bootstrapping a jQuery Mobile application 1. Create HTML document 2. Load jQuery Mobile CSS 3. Load jQuery library 4. Load jQuery Mobile library 5. Create a jQuery Mobile page

jQuery-Mobile vs. Sencha Touch 17 / 66 Bootstrapping - jQuery Mobile

1. Create HTML document

1 < !DOCTYPE html> 2 3 4 < t i t l e >Contact Demo< / t i t l e > 5 6 < / head> 7 8 9 < / body> 10 < / html>

jQuery-Mobile vs. Sencha Touch 18 / 66 Bootstrapping - jQuery Mobile

2. Load jQuery Mobile CSS

1 < !DOCTYPE html> 2 3 4 < t i t l e >Contact Demo< / t i t l e > 5 6 jquery.mobile −1.2.0.min.css”/ > 7 < / head> 8 9 10 < / body> 11 < / html>

jQuery-Mobile vs. Sencha Touch 19 / 66 Bootstrapping - jQuery Mobile

3. Load jQuery library

1 < !DOCTYPE html> 2 3 4 < t i t l e >Contact Demo< / t i t l e > 5 6 7