jQuery-Mobile vs. Sencha Touch - May the best win - Qafoo GmbH

jQuery-Mobile vs. Sencha TouchMay the best win

Qafoo GmbH/crosscan GmbH

October 25, 2012

jQuery-Mobile vs. Sencha Touch 1 / 66

What comes next?

Welcome

About Me

Jakob WesthoffI More than 11 years of

professional PHPexperience

I More than 8 years ofprofessional JavaScriptexperience

I Open source enthusiastI Regular speaker at

(inter)national conferencesI Consultant, Trainer and

Author

Working with

Qafoopassion for software quality

About Me

Author

Working with

We help people to createhigh quality web

applications.

About Me

Author

Working with

We help people to createhigh quality web

applications.

http://qafoo.com

About Me

Hans-Christian OttoI More than 8 years of

I Regular speaker atinternational conferences

I Director of softwaredevelopment with crosscanGmbH

Working with

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

What comes next?

jQuery Mobile - The Facts

I Mobile Web-Application FrameworkI Support for almost any current mobile platform

I Apple iOS 3.2-6.0I Android 2.x - 4.1I Windows Phone 7.xI Blackberry 6/7I Blackberry PlaybookI Palm WebOSI Firefox MobileI Chrome for MobileI Kindle FireI ...

I Mobile Web-Application FrameworkI Support for almost any current mobile platform

I Apple iOS 3.2-6.0I Android 2.x - 4.1I Windows Phone 7.xI Blackberry 6/7I Blackberry PlaybookI Palm WebOSI Firefox MobileI Chrome for MobileI Kindle FireI ...

I Quite smallI jQuery: 33kb (minified+gzipped)I jQuery-Mobile: 24kb (minified+gzipped)I CSS: 7kbI 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

I Fully configurable themes with multiple swatchesI Graphical Theme Designer exists (free)

I ThemeRollerI Default theme has 5 different colorations (swatches)

I Utilization of jQuery and jQuery-UI base frameworkI Usage of progressive enhancement to realize gui componentsI A variety of widgets: (pages, dialogs, toolbars, listviews,

buttons, forms, ...)I Support for Accessibility-features like WAI-ARIA throughout

the framework

Sencha Touch - The Facts

I Mobile Web-Application FrameworkI Support for only the most important mobile platforms

I Apple iOS 4-6.0I Android 2.3 - 4.1I Blackberry 6/7I Blackberry PlaybookI Chrome for Mobile ?I ...

I Mobile Web-Application FrameworkI Support for only the most important mobile platforms

I Apple iOS 4-6.0I Android 2.3 - 4.1I Blackberry 6/7I Blackberry PlaybookI Chrome for Mobile ?I ...

I Not that smallI JavaScript: 568kbI CSS: 178kbI 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 containsthe whole framework)

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

I Similar to Senchas Ext JS framework, but not based on it.I No progressive enhancement, no seemless degredation, no

semantic websitesI A variety of widgets: (dialogs, toolbars, listviews, buttons,

forms, sliders ...)I Object oriented software development (read: Java style)I Native packaging

What comes next?

A Demo Application

A simple contacts application

I For demonstration purposes we use a simple applicationI Managing contacts

I List Contacts in different sort orders (firstname, lastname)I Add a new contactI View contact details

A simple contact application

What comes next?

Bootstrapping

Bootstrapping - jQuery Mobile

I Bootstrapping a jQuery Mobile application1. Create HTML document2. Load jQuery Mobile CSS3. Load jQuery library4. Load jQuery Mobile library5. Create a jQuery Mobile page

1. Create HTML document

1 < !DOCTYPE html>2 <html>3 <head>4 < t i t l e>Contact Demo< / t i t l e>5 <meta name= ” v iewpor t ” content= ” width=device−width , i n i t i a l −

scale=1 ”>6 < / head>7 <body>8

9 < / body>10 < / html>

2. Load jQuery Mobile CSS

scale=1 ”>6 < l i nk r e l = ” s t y l eshee t ” href= ” h t t p : / / code . jquery . com/ mobi le

/ 1 . 2 . 0 / jquery . mobile −1 .2 .0 . min . css ” />7 < / head>8 <body>9

10 < / body>11 < / html>

3. Load jQuery library

/ 1 . 2 . 0 / jquery . mobile −1 .2 .0 . min . css ” />7 <scr ip t src= ” h t t p : / / code . jquery . com/ jquery −1 .8 .2 . min . j s ”>< /

scr ip t>8 < / head>9 <body>

11 < / body>12 < / html>

4. Load jQuery Mobile library1 < !DOCTYPE html>2 <html>3 <head>4 < t i t l e>Contact Demo< / t i t l e>5 <meta name= ” v iewpor t ” content= ” width=device−width , i n i t i a l −

/ 1 . 2 . 0 / jquery . mobile −1 .2 .0 . min . css ” />7 <scr ip t src= ” h t t p : / / code . jquery . com/ jquery −1 .8 .2 . min . j s ”>< /

scr ip t>8 <scr ip t src= ” h t t p : / / code . jquery . com/ mobi le / 1 . 2 . 0 / jquery . mobile

−1 .2 .0 . min . j s ”>< / scr ip t>9 < / head>

10 <body>11

12 < / body>13 < / html>

5. Create a jQuery Mobile page

1 < !DOCTYPE html>2 <html>3 <head>4 < t i t l e>Contact Demo< / t i t l e>5 <meta name= ” v iewpor t ” content= ” width=device−width , i n i t i a l −scale=1 ”>6 < l i nk r e l = ” s t y l eshee t ” href= ” h t t p : / / code . jquery . com/ mobi le / 1 . 2 . 0 / jquery . mobile −1 .2 .0 .

min . css ” />7 <scr ip t src= ” h t t p : / / code . jquery . com/ jquery −1 .8 .2 . min . j s ”>< / scr ip t>8 <scr ip t src= ” h t t p : / / code . jquery . com/ mobi le / 1 . 2 . 0 / jquery . mobile −1 .2 .0 . min . j s ”>< / scr ip t

>9 < / head>

10 <body>1112 <div data− r o l e = ” page ” id= ” welcome ”>13 < !−− . . . −−>14 < / div>1516 < / body>17 < / html>

I You don’t need to write any JavaScript to create a basicapplication

I Semantic HTML is enoughI JavaScript is only needed for specialized interaction

Bootstrapping - Sencha Touch

I Bootstrapping a Sencha Touch application1. Create HTML document2. Load Sencha Touch CSS3. Load Sencha Touch JS4. Load Application JS5. Create Application JS

1. Create HTML document

1 < !DOCTYPE html>2 <html>3 <head>4 < t i t l e>Contact Demo< / t i t l e>5 <meta charset= ”UTF−8”>6 < / head>7 <body>< / body>8 < / html>

2. Load Sencha Touch CSS

1 < !DOCTYPE html>2 <html>3 <head>4 < t i t l e>Get t ing Star ted< / t i t l e>5 <meta charset= ”UTF−8”>6 < l i nk r e l = ” s t y l eshee t ” href= ” h t t p : / / e x t j s . cache f l y . net / touch /

sencha−touch −2 .0 .0 / resources / css / sencha−touch . css ” type= ”t e x t / css ”>

7 < / head>8 <body>< / body>9 < / html>

3. Load Sencha Touch JS

7 <scr ip t type= ” t e x t / j a v a s c r i p t ” src= ” h t t p : / / e x t j s . cache f l y . net /touch / sencha−touch −2 .0 .0 / sencha−touch−a l l −debug . j s ”>< /scr ip t>

8 < / head>9 <body>< / body>

10 < / html>

4. Load Application JS

7 <scr ip t type= ” t e x t / j a v a s c r i p t ” src= ” h t t p : / / e x t j s . cache f l y . net /touch / sencha−touch −2 .0 .0 / sencha−touch−a l l −debug . j s ”>< /scr ip t>

8 <scr ip t type= ” t e x t / j a v a s c r i p t ” src= ” app . j s ”>< / scr ip t>9 < / head>

10 <body>< / body>11 < / html>

I That’s your only .html fileI You won’t change it anymoreI The rest is plain JS

4. Create Application JS

1 Ext . a p p l i c a t i o n ( {2 launch : function ( )3 {

9 } ) ;

4. Create Application JS

1 Ext . a p p l i c a t i o n ( {2 launch : function ( )3 {

4 var view = Ext . c reate ( ’ Ext . Panel ’ , {5 f u l l s c r e e n : true ,6 html : ’ Foo ’7 } ) ;8 }

9 } ) ;

Bootstrapping - Conclusion

I jQuery MobileI No fancy generators/tools neededI Plain semantic HTMLI Easy to bootstrap

I Sencha TouchI No fancy generators/tools neededI Very simple and static htmlI Writing JavaScript is required

What comes next?

UI Design

UI Design - jQuery Mobile

I jQuery Mobile has a special approach to UI designI Semantic HTML5I Progressive Enhancement

I Declarative creation of the user interface using known HTMLelements

I Each ui element has a role (Page, Listview, Button, ...)I Heavy usage of HTML5 data attributes (data-role,data-theme, ...)

UI Design - jQuery Mobile

I jQuery Mobile has a special approach to UI designI Semantic HTML5I Progressive Enhancement

I Declarative creation of the user interface using known HTMLelements

I Each ui element has a role (Page, Listview, Button, ...)I Heavy usage of HTML5 data attributes (data-role,data-theme, ...)

Concept of pages

I Each jQuery Mobile application consists of an arbitrarynumber of pages

I Multiple pages may reside in one HTML documentI Pages may be split up into different HTML documents

I jQuery Mobile will automatically load them on demand(asynchronously)

Concept of pages

I A welcome page for the application1 <div data− r o l e = ” page ” id= ” welcome ”>2 <div data− r o l e = ” content ”>3 <h2>Welcome to t h i s session about jQuery−Mobile and Sencha

Touch< / h2>4 <p>5 This simple a p p l i c a t i o n demonstrates the d i f f e r e n t concepts

used i n jQuery−Mobile to r e a l i z e a mobile web a p p l i c a t i o n.

6 < / p>7 < / div>8 < / div>

I Every page is contained by a <div>I A page is annotated with the role pageI Each page needs to provide a unique id for

identification/navigation

Concept of pages

6 < / p>7 < / div>8 < / div>

Concept of pages

6 < / p>7 < / div>8 < / div>

Concept of pages

6 < / p>7 < / div>8 < / div>

Header and Footer

I Most mobile web applications want to display a header and afooter for each page

1 <div data− r o l e = ” page ” id= ” welcome ”>2 <div data− r o l e = ” header ”>3 <h1>Welcome< / h1>4 < / div>5

6 <div data− r o l e = ” content ”>7 <h2>Welcome to t h i s session about jQuery−Mobile and Sencha

Touch< / h2>8 < !−− . . . −−>9 < / div>

11 <div data− r o l e = ” f o o t e r ”>< / div>12 < / div>

I Header and footer may be fixed: data-position="fixed"

Header and Footer

I Most mobile web applications want to display a header and afooter for each page

1 <div data− r o l e = ” page ” id= ” welcome ”>2 <div data− r o l e = ” header ”>3 <h1>Welcome< / h1>4 < / div>5

6 <div data− r o l e = ” content ”>7 <h2>Welcome to t h i s session about jQuery−Mobile and Sencha

Touch< / h2>8 < !−− . . . −−>9 < / div>

11 <div data− r o l e = ” f o o t e r ”>< / div>12 < / div>

I Header and footer may be fixed: data-position="fixed"

Header and Footer

I Header and Footer may contain other widgets/elements1 <div data− r o l e = ” page ” id= ” l i s t ”>2 <div data− r o l e = ” header ”>3 <h1>Contacts< / h1>4 <a href= ” # ” class= ” ui−btn− r i g h t ”>Add< / a>5 < / div>6

7 <div data− r o l e = ” content ”>< / div>8

9 <div data− r o l e = ” f o o t e r ”>10 <div data− r o l e = ” navbar ”>11 <ul>12 < l i><a href= ” # ”>Welcome< / a>< / l i>13 < l i><a href= ” # ”>Firstname< / a>< / l i>14 < l i><a href= ” # ”>Lastname< / a>< / l i>15 < / ul>16 < / div>17 < / div>18 < / div>

Navigation between pagesI For navigation between pages use their id as document

fragment1 <div data− r o l e = ” page ” id= ” l i s t ”>2 <div data− r o l e = ” header ”>3 <h1>Contacts< / h1>4 <a href= ” #add ” class= ” ui−btn− r i g h t ”>Add< / a>5 < / div>6

9 <div data− r o l e = ” f o o t e r ”>10 <div data− r o l e = ” navbar ”>11 <ul>12 < l i><a href= ” #welcome ”>Welcome< / a>< / l i>13 < l i><a href= ” # l i s t ”>Firstname< / a>< / l i>14 < l i><a href= ” # l i s t ”>Lastname< / a>< / l i>15 < / ul>16 < / div>17 < / div>18 < / div>jQuery-Mobile vs. Sencha Touch 38 / 66

Navigation between pagesI For navigation between pages use their id as document

fragment1 <div data− r o l e = ” page ” id= ” l i s t ”>2 <div data− r o l e = ” header ”>3 <h1>Contacts< / h1>4 <a href= ” #add ” class= ” ui−btn− r i g h t ”>Add< / a>5 < / div>6

9 <div data− r o l e = ” f o o t e r ”>10 <div data− r o l e = ” navbar ”>11 <ul>12 < l i><a href= ” #welcome ”>Welcome< / a>< / l i>13 < l i><a href= ” # l i s t ”>Firstname< / a>< / l i>14 < l i><a href= ” # l i s t ”>Lastname< / a>< / l i>15 < / ul>16 < / div>17 < / div>18 < / div>jQuery-Mobile vs. Sencha Touch 38 / 66

Navigation between pages

I jQuery Mobile does have a AJAX navigation enginge, whichkicks in automatically

I The engine automatically navigates to the referenenced pageI Without leaving the current page context

I If hasn’t been loaded yet an XHR request will be firedautomatically

Creating Listviews

I Listviews are often used in mobile applicationsI Let’s take a look at a listview for the stored contacts

1 <div data− r o l e = ” page ” id= ” l i s t ”>2 <div data− r o l e = ” header ”>< !−− . . . −−>< / div>3

4 <div data− r o l e = ” content ”>5 <ul data− r o l e = ” l i s t v i e w ” data−au to d i v i de r s = ” t r ue ”>6 < l i><a href= ” # ”>John Doe< / a>< / l i>7 < l i><a href= ” # ”>Jane Doe< / a>< / l i>8 < l i><a href= ” # ”>The Doctor< / a>< / l i>9 < / ul>

10 < / div>11

12 <div data− r o l e = ” f o o t e r ”>< !−− . . . −−>< / div>13 < / div>

Dialogs and Popups

I Sometimes you want to display a dialog or popup inside yourapplication

1 <div data− r o l e = ” page ” id= ” l i s t ”>2 <div data− r o l e = ” header ”>< !−− . . . −−>< / div>3

4 <div data− r o l e = ” content ”>5 <ul data− r o l e = ” l i s t v i e w ” data−au to d i v i de r s = ” t r ue ”>6 < l i><a href= ” #view ” data−r e l = ” d ia log ”>John Doe< / a>< / l i>7 < l i><a href= ” #view ” data−r e l = ” d ia log ”>Jane Doe< / a>< / l i>8 < l i><a href= ” #view ” data−r e l = ” d ia log ”>The Doctor< / a>< / l i>9 < / ul>

10 < / div>11

12 <div data− r o l e = ” f o o t e r ”>< !−− . . . −−>< / div>13 < / div>

UI Design - Sencha Touch

I Sencha Touch uses object oriented code for UI designI Classes that represent UI elements are instantiated

I Classes are created using Ext.create, not using newI Constructors receive a configuration object

I MVCI UI Classes (”components”) are the ViewI Models represent dataI Controllers are the glue code

I Not shown in this talk

Sencha Touch Components

I Each Sencha Touch application consists of an arbitrarynumber of components

I Some components are containersI A Container has a layout

I FitI CardI HBox/VBox

I There is a special full screen container called viewportI Components only visualize data from models

Docked Items

I Header and Footer are created by docking components tothe edges of containers.

1 Ext . c reate ( ’ Ext . Panel ’ , {2 i tems : [3 Ext . c reate ( ’ Ext . T i t l e B a r ’ , {4 docked : ’ top ’ ,5 t i t l e : ’ Foo ’6 } ) ,7 Ext . c reate ( ’ Ext . T i t l e B a r ’ , {8 docked : ’ bottom ’ ,9 t i t l e : ’ Baz ’

10 } )11 ] ,12 f u l l s c r e e n : true ,13 html : ’ Bar ’14 } ) ;

Navigation between components

I Switching views is done with js code.

1 var f i r s t V i e w = Ext . c reate ( ’ Ext . Panel ’ , {2 html : ’ Foo ’3 } ) ;4

5 var secondView = Ext . c reate ( ’ Ext . Panel ’ , {6 html : ’ Bar ’7 } ) ;8

9 Ext . Viewport . add ( f i r s t V i e w ) ;10 Ext . Viewport . add ( secondView ) ;11

12 Ext . Viewport . se tAc t i ve I tem ( secondView ) ;

Navigation between components

I Switching views is done with js code.

1 var f i r s t V i e w = Ext . c reate ( ’ Ext . Panel ’ , {2 html : ’ Foo ’3 } ) ;4

5 var secondView = Ext . c reate ( ’ Ext . Panel ’ , {6 html : ’ Bar ’7 } ) ;8

9 Ext . Viewport . add ( f i r s t V i e w ) ;10 Ext . Viewport . add ( secondView ) ;11

12 Ext . Viewport . se tAc t i ve I tem ( secondView ) ;

Creating Listviews

1 Ext . c reate ( ’ Ext . L i s t ’ , {2 f u l l s c r e e n : true ,3 i temTpl : ’ { t i t l e } ’ ,4 data : [5 { name : ’ John Doe ’ } ,6 { name : ’ Jane Doe ’ } ,7 { name : ’ The Doctor ’ }8 ]9 } ) ;

Dialogs and Popups

1 Ext .Msg . prompt ( ’Name ’ , ’ Please enter your name : ’ , function ( but ton ,t e x t ) {

2 Ext .Msg . a l e r t ( ’Welcome ! ’ , ’ Hi , ’ + t e x t + ’ ! ’ , Ext . emptyFn ) ;3 } ) ;

UI Design - Conclusion

I jQuery MobileI Usage of HTML5 + Progressive EnhancementI Semantic MarkupI Easily create user interfaces for static contentI Page navigation for freeI Automatic XHR lazy fetching of pages

I Sencha TouchI HTML 5 - but you don’t write itI Declarative programming using JavaScriptI ”Page” navigation has to be done programmaticallyI Autoloading of application components

What comes next?

Dynamic Data

Dynamic Data - jQuery Mobile

I Using static content with jQuery Mobile is easyI How about dynamic creation of content

I XML, JSON, Localstorage, ...

An event based approach

I jQuery Mobile fires all kind of different events duringprocessing

I pagebeforeloadI pageloadI pageloadfailedI pagebeforechangeI pagechangeI pagechangefailedI pagebeforeshowI pageshowI ...

An event based approach

I jQuery Mobile fires all kind of different events duringprocessing

I pagebeforeloadI pageloadI pageloadfailedI pagebeforechangeI pagechangeI pagechangefailedI pagebeforeshowI pageshowI ...

pagebeforechange - dynamic interaction

I The pagebeforechange event is fired before jQuery Mobilechanges to another page view

I It’s the perfect place for dynamic manipulationI The page is not visible yetI All information about the requested page is available

Sorting order injection - Contact App

I The contact application needs two versions of the contact listI Sorted by firstnameI Sorted by lastname

I SolutionI Add a parameter to the page links indicating the sort orderI Hijacking the page change to that page in order to modify it

dynamically

Sorting order injection - Contact App

I The contact application needs two versions of the contact listI Sorted by firstnameI Sorted by lastname

I SolutionI Add a parameter to the page links indicating the sort orderI Hijacking the page change to that page in order to modify it

dynamically

Adding a page link parameter

I Add a parameter to the page links indicating the sort order

1 <div data− r o l e = ” f o o t e r ”>2 <div data− r o l e = ” navbar ”>3 <ul>4 < l i><a href= ” #welcome ”>Welcome< / a>< / l i>5 < l i><a href= ” # l i s t ? f i r s tname ”>Firstname< / a>< / l i>6 < l i><a href= ” # l i s t ? lastname ”>Lastname< / a>< / l i>7 < / ul>8 < / div>9 < / div>

Hijacking the page change event

I Hijacking the page change to that page in order to modify itdynamically

1 $ ( document ) . b ind ( ’ pagebeforechange ’ , function ( e , data ) {2 i f ( typeof data . toPage !== ” s t r i n g ” ) {3 return ;4 }

5 var u r l = $ . mobi le . path . parseUr l ( data . toPage ) ;6 i f ( u r l . hash . indexOf ( ” # l i s t ? ” ) !== 0 ) {7 return ;8 }

9 var order = u r l . hash . rep lace ( / ˆ # l i s t \? / , ” ” ) ;10

11 / / Render l i s t v i e w wi th approp r ia te s o r t i n g i n # l i s t page12

13 $ ( ” : jqmRole ( l i s t v i e w ) ” , page ) . l i s t v i e w ( ” re f resh ” ) ;14

15 e . p reven tDe fau l t ( ) ;16 $ . mobi le . changePage ( ” # l i s t ” ) ;17 } ) ;jQuery-Mobile vs. Sencha Touch 54 / 66

Other manipulation options

I The same technique can be used for the detailed view dialogI Changes can be applied on the fly, by simply binding to events

on html elementsI All event registration should be done inside the pageinit

event of the page to be manipulatedI Sort of the domReady equivalent inside the jQuery Mobile world

Other manipulation options

I The same technique can be used for the detailed view dialogI Changes can be applied on the fly, by simply binding to events

on html elementsI All event registration should be done inside the pageinit

event of the page to be manipulatedI Sort of the domReady equivalent inside the jQuery Mobile world

Sencha Touch data package

I ModelsI Proxies to load modelsI Stores to group models of one kindI Lists can be bound to a store

Stores

I Will be filled using a proxyI A MemoryProxy is available

I Sorting of modelsI Filtering of modelsI Querying of modelsI Grouping of models

Using Stores

1 var contac tsStore = Ext . c reate ( ’ Ext . data . Store ’ , {2 f i e l d s : [ ’ f i rs tName ’ , ’ lastName ’ ] ,3 data : [4 { f i rs tName : ’ John ’ , lastName : ’Doe ’ } ,5 { lastName : ’ Doctor ’ , f i rs tName : ’ The ’ } ,6 { f i rs tName : ’ Jane ’ , lastName : ’Doe ’ }7 ] ,8 } ) ;9

10 var c o n t a c t s L i s t = Ext . c reate ( ’ Ext . dataview . L i s t ’ , {11 i temTpl : ’<b>{ lastName } < /b> , { f i rs tName } ’ ,12 s to re : contac tsStore13 } ) ;

User Interactions with list items

1 c o n t a c t s L i s t . on (2 ’ i temtap ’ ,3 function ( l i s t , index , element , model ) {4 Ext .Msg . a l e r t (5 ’ Contact D e t a i l s ’ ,6 model . get ( ’ f i rs tName ’ ) + model . get ( ’ lastName ’ )7 ) ;8 }

Sorting of stores

1 var t o o l b a r = Ext . c reate ( ’ Ext . Toolbar ’ , {2 i tems : [ {3 t e x t : ’ Firstname ’ ,4 handler : function ( ) {5 c o n t a c t s L i s t . se t I temTpl ( ’ { f i rs tName } <b>{ lastName } < /b> ’ )6 contac tsStore . s o r t ( ’ f i rs tName ’ , ’ASC ’ ) ;7 }

8 } , {9 t e x t : ’ Lastname ’ ,

10 handler : function ( ) {11 c o n t a c t s L i s t . se t I temTpl ( ’<b>{ lastName } < /b> , { f i rs tName } ’ )12 contac tsStore . s o r t ( ’ lastName ’ , ’ASC ’ ) ;13 }

14 } ] ,15 docked : ’ bottom ’16 } )17

18 Ext . Viewport . add ( t o o l b a r ) ;

Real-Life-Stores

I Stores can load data via proxiesI Readers convert proxy response to modelI AJAX, JSON, XML, JSONP, localstorage, Ext.Direct, ...

1 var contac tsStore = Ext . c reate ( ’ Ext . data . Store ’ , {2 f i e l d s : [ ’ f i rs tName ’ , ’ lastName ’ ] ,3 proxy : {4 type : ’ a jax ’ ,5 u r l : ’ / con tac ts . json ’ ,6 reader : {7 type : ’ json ’ ,8 roo tP rope r t y : ’ con tac ts ’9 }

10 } ,11 autoLoad : true12 } ) ;

Real-Life-Stores

I Stores can load data via proxiesI Readers convert proxy response to modelI AJAX, JSON, XML, JSONP, localstorage, Ext.Direct, ...

1 var contac tsStore = Ext . c reate ( ’ Ext . data . Store ’ , {2 f i e l d s : [ ’ f i rs tName ’ , ’ lastName ’ ] ,3 proxy : {4 type : ’ a jax ’ ,5 u r l : ’ / con tac ts . json ’ ,6 reader : {7 type : ’ json ’ ,8 roo tP rope r t y : ’ con tac ts ’9 }

10 } ,11 autoLoad : true12 } ) ;

JsonStore expected data

2 ’ con tac ts ’ : [3 { ’ f i rs tName ’ : ’ John ’ , ’ lastName ’ : ’Doe ’ } ,4 { ’ lastName ’ : ’ Doctor ’ , ’ f i rs tName ’ : ’ The ’ } ,5 { ’ f i rs tName ’ : ’ Jane ’ , ’ lastName ’ : ’Doe ’ }6 ]7 }

Dynamic Data - Conclusion

I jQuery MobileI jQuery Mobile is really good with mostly static contentI Dynamic data can be inserted, but it’s not really elegantI Hard to maintain if the application is mostly dynamicI Of course a proper ”framework” could be written for those

casesI Sencha Touch

I Sencha Touch is overhead for apps with mostly static contentI Changing from static to dynamic content is straightforwardI Framework is highly optimized for dynamic content

What comes next?

Conclusion

jQuery Mobile

I Focused on mostly allmobile browsers

I Semantic HTML for UII Small library filesizeI Perfect fit for applications

focused on static data

Sencha Touch

I Focused on webkit mobilebrowsers

I JavaScript OOP for UII Quite big files for mobileI Perfect fit for applications

focused on dynamic data

If no special requirements kick in: Choose what you like and knowbest!

Conclusion

jQuery Mobile

Sencha Touch

Conclusion

jQuery Mobile

Sencha Touch

Conclusion

jQuery Mobile

Sencha Touch

Conclusion

jQuery Mobile

Sencha Touch

Conclusion

jQuery Mobile

Sencha Touch

Conclusion

jQuery Mobile

Sencha Touch

Conclusion

jQuery Mobile

Sencha Touch

Conclusion

jQuery Mobile

Sencha Touch

Conclusion

jQuery Mobile

Sencha Touch

Thanks for listening

Questions, comments or annotations?

Rate us: http://joind.in/7333

Slides: http://talks.qafoo.com

Jakob WesthoffContact: <[email protected]>Follow Me: @jakobwesthoffHire Qafoo: http://qafoo.com

Hans-Christian OttoContact: <[email protected]>Follow Me: @muhdiekuh

jQuery-Mobile vs. Sencha Touch - May the best win - Qafoo GmbH

Documents

Transcript of jQuery-Mobile vs. Sencha Touch - May the best win - Qafoo GmbH