JQuery-Mobile Vs. Sencha Touch - Qafoo

Bootstrapping - Sencha Touch 3. Load Sencha Touch JS 1 2 3 4 5 6 7 8 9 10 !DOCTYPE html html head t i t l e G e t t i n g S t a r t e d / t i t l e meta charset ” UTF 8 ” l i n k r e l ” s t y l e s h e e t ” h r e f ” h t t p : / / e x t j s . c a c h e f l y . n e t / touch / sencha touch 2 . 0 . 0 / r e s o u r c e s / css / sencha touch . css ” type ” t e x t / css ” s c r i p 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 . c a c h e f l y . n e t / touch / sencha touch 2 . 0 . 0 / sencha touch a l l debug . j s ” / s c r i p t / head body / body / html jQuery-Mobile vs. Sencha Touch 27 / 66

Bootstrapping - Sencha Touch 4. Load Application JS 1 2 3 4 5 6 7 8 9 10 11 !DOCTYPE html html head t i t l e G e t t i n g S t a r t e d / t i t l e meta charset ” UTF 8 ” l i n k r e l ” s t y l e s h e e t ” h r e f ” h t t p : / / e x t j s . c a c h e f l y . n e t / touch / sencha touch 2 . 0 . 0 / r e s o u r c e s / css / sencha touch . css ” type ” t e x t / css ” s c r i p 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 . c a c h e f l y . n e t / touch / sencha touch 2 . 0 . 0 / sencha touch a l l debug . j s ” / s c r i p t s c r i p t type ” t e x t / j a v a s c r i p t ” src ” app . j s ” / s c r i p t / head body / body / html jQuery-Mobile vs. Sencha Touch 28 / 66

Bootstrapping - Sencha Touch I That’s your only .html file I You won’t change it anymore I The rest is plain JS jQuery-Mobile vs. Sencha Touch 29 / 66

Bootstrapping - Sencha Touch 4. Create Application JS 1 2 Ext . a p p l i c a t i o n ( { launch : function ( ) { 3 4 5 6 7 } 8 9 }) ; jQuery-Mobile vs. Sencha Touch 30 / 66

Bootstrapping - Sencha Touch 4. Create Application JS 1 2 Ext . a p p l i c a t i o n ( { launch : function ( ) { 3 var view Ext . c r e a t e ( ’ Ext . Panel ’ , { f u l l s c r e e n : true , h t m l : ’ Foo ’ }) ; 4 5 6 7 } 8 9 }) ; jQuery-Mobile vs. Sencha Touch 31 / 66

Bootstrapping - Conclusion I jQuery Mobile I I I I No fancy generators/tools needed Plain semantic HTML Easy to bootstrap Sencha Touch I I I No fancy generators/tools needed Very simple and static html Writing JavaScript is required jQuery-Mobile vs. Sencha Touch 32 / 66

What comes next? UI Design jQuery-Mobile vs. Sencha Touch 33 / 66

UI Design - jQuery Mobile I jQuery Mobile has a special approach to UI design I I I Semantic HTML5 Progressive Enhancement Declarative creation of the user interface using known HTML elements I I Each ui element has a role (Page, Listview, Button, .) Heavy usage of HTML5 data attributes (data-role, data-theme, .) jQuery-Mobile vs. Sencha Touch 33 / 66

UI Design - jQuery Mobile I jQuery Mobile has a special approach to UI design I I I Semantic HTML5 Progressive Enhancement Declarative creation of the user interface using known HTML elements I I Each ui element has a role (Page, Listview, Button, .) Heavy usage of HTML5 data attributes (data-role, data-theme, .) jQuery-Mobile vs. Sencha Touch 33 / 66

Concept of pages I Each jQuery Mobile application consists of an arbitrary number of pages I Multiple pages may reside in one HTML document Pages may be split up into different HTML documents I I jQuery Mobile will automatically load them on demand (asynchronously) jQuery-Mobile vs. Sencha Touch 34 / 66

Concept of pages I Each jQuery Mobile application consists of an arbitrary number of pages I Multiple pages may reside in one HTML document Pages may be split up into different HTML documents I I jQuery Mobile will automatically load them on demand (asynchronously) jQuery-Mobile vs. Sencha Touch 34 / 66

Concept of pages I Each jQuery Mobile application consists of an arbitrary number of pages I Multiple pages may reside in one HTML document Pages may be split up into different HTML documents I I jQuery Mobile will automatically load them on demand (asynchronously) jQuery-Mobile vs. Sencha Touch 34 / 66

Concept of pages I 1 2 3 4 5 6 7 8 A welcome page for the application div data r o l e ” page ” i d ” welcome ” div data r o l e ” c o n t e n t ” h2 Welcome t o t h i s s e s s i o n about jQuery Mobile and Sencha Touch / h2 p T h i s s i m p l e a p p l i c a t i o n demonstrates t h e d i f f e r e n t concepts used i n jQuery Mobile t o r e a l i z e a mobile web a p p l i c a t i o n . / p / div / div I I I Every page is contained by a div A page is annotated with the role page Each page needs to provide a unique id for identification/navigation jQuery-Mobile vs. Sencha Touch 35 / 66

Concept of pages I 1 2 3 4 5 6 7 8 A welcome page for the application div data r o l e ” page ” i d ” welcome ” div data r o l e ” c o n t e n t ” h2 Welcome t o t h i s s e s s i o n about jQuery Mobile and Sencha Touch / h2 p T h i s s i m p l e a p p l i c a t i o n demonstrates t h e d i f f e r e n t concepts used i n jQuery Mobile t o r e a l i z e a mobile web a p p l i c a t i o n . / p / div / div I I I Every page is contained by a div A page is annotated with the role page Each page needs to provide a unique id for identification/navigation jQuery-Mobile vs. Sencha Touch 35 / 66

Concept of pages I 1 2 3 4 5 6 7 8 A welcome page for the application div data r o l e ” page ” i d ” welcome ” div data r o l e ” c o n t e n t ” h2 Welcome t o t h i s s e s s i o n about jQuery Mobile and Sencha Touch / h2 p T h i s s i m p l e a p p l i c a t i o n demonstrates t h e d i f f e r e n t concepts used i n jQuery Mobile t o r e a l i z e a mobile web a p p l i c a t i o n . / p / div / div I I I Every page is contained by a div A page is annotated with the role page Each page needs to provide a unique id for identification/navigation jQuery-Mobile vs. Sencha Touch 35 / 66

Concept of pages I 1 2 3 4 5 6 7 8 A welcome page for the application div data r o l e ” page ” i d ” welcome ” div data r o l e ” c o n t e n t ” h2 Welcome t o t h i s s e s s i o n about jQuery Mobile and Sencha Touch / h2 p T h i s s i m p l e a p p l i c a t i o n demonstrates t h e d i f f e r e n t concepts used i n jQuery Mobile t o r e a l i z e a mobile web a p p l i c a t i o n . / p / div / div I I I Every page is contained by a div A page is annotated with the role page Each page needs to provide a unique id for identification/navigation jQuery-Mobile vs. Sencha Touch 35 / 66

Header and Footer I 1 2 3 4 Most mobile web applications want to display a header and a footer for each page div data r o l e ” page ” i d ” welcome ” div data r o l e ” header ” h1 Welcome / h1 / div 5 6 7 8 9 div data r o l e ” c o n t e n t ” h2 Welcome t o t h i s s e s s i o n about jQuery Mobile and Sencha Touch / h2 ! . . . / div 10 11 12 div data r o l e ” f o o t e r ” / div / div I Header and footer may be fixed: data-position "fixed" jQuery-Mobile vs. Sencha Touch 36 / 66

Header and Footer I 1 2 3 4 Most mobile web applications want to display a header and a footer for each page div data r o l e ” page ” i d ” welcome ” div data r o l e ” header ” h1 Welcome / h1 / div 5 6 7 8 9 div data r o l e ” c o n t e n t ” h2 Welcome t o t h i s s e s s i o n about jQuery Mobile and Sencha Touch / h2 ! . . . / div 10 11 12 div data r o l e ” f o o t e r ” / div / div I Header and footer may be fixed: data-position "fixed" jQuery-Mobile vs. Sencha Touch 36 / 66

Header and Footer I 1 2 3 4 5 Header and Footer may contain other widgets/elements div data r o l e ” page ” i d ” l i s t ” div data r o l e ” header ” h1 Contacts / h1 a h r e f ” # ” class ” u i btn r i g h t ” Add / a / div 6 7 div data r o l e ” c o n t e n t ” / div 8 9 10 11 12 13 14 15 16 17 18 div data r o l e ” f o o t e r ” div data r o l e ” navbar ” u l l i a h r e f ” # ” Welcome / a / l i l i a h r e f ” # ” Firstname / a / l i l i a h r e f ” # ” Lastname / a / l i / u l / div / div / div jQuery-Mobile vs. Sencha Touch 37 / 66

Navigation between pages I 1 2 3 4 5 For navigation between pages use their id as document fragment div data r o l e ” page ” i d ” l i s t ” div data r o l e ” header ” h1 Contacts / h1 a h r e f ” #add ” class ” u i btn r i g h t ” Add / a / div 6 7 div data r o l e ” c o n t e n t ” / div 8 9 10 11 12 13 14 15 16 17 div data r o l e ” f o o t e r ” div data r o l e ” navbar ” u l l i a h r e f ” #welcome ” Welcome / a / l i l i a h r e f ” # l i s t ” Firstname / a / l i l i a h r e f ” # l i s t ” Lastname / a / l i / u l / div / div / div 18 jQuery-Mobile vs. Sencha Touch 38 / 66

Navigation between pages I 1 2 3 4 5 For navigation between pages use their id as document fragment div data r o l e ” page ” i d ” l i s t ” div data r o l e ” header ” h1 Contacts / h1 a h r e f ” #add ” class ” u i btn r i g h t ” Add / a / div 6 7 div data r o l e ” c o n t e n t ” / div 8 9 10 11 12 13 14 15 16 17 div data r o l e ” f o o t e r ” div data r o l e ” navbar ” u l l i a h r e f ” #welcome ” Welcome / a / l i l i a h r e f ” # l i s t ” Firstname / a / l i l i a h r e f ” # l i s t ” Lastname / a / l i / u l / div / div / div 18 jQuery-Mobile vs. Sencha Touch 38 / 66

Navigation between pages I I jQuery Mobile does have a AJAX navigation enginge, which kicks in automatically The engine automatically navigates to the referenenced page I I Without leaving the current page context If hasn’t been loaded yet an XHR request will be fired automatically jQuery-Mobile vs. Sencha Touch 39 / 66

Navigation between pages I I jQuery Mobile does have a AJAX navigation enginge, which kicks in automatically The engine automatically navigates to the referenenced page I I Without leaving the current page context If hasn’t been loaded yet an XHR request will be fired automatically jQuery-Mobile vs. Sencha Touch 39 / 66

Navigation between pages I I jQuery Mobile does have a AJAX navigation enginge, which kicks in automatically The engine automatically navigates to the referenenced page I I Without leaving the current page context If hasn’t been loaded yet an XHR request will be fired automatically jQuery-Mobile vs. Sencha Touch 39 / 66

Creating Listviews 1 2 I Listviews are often used in mobile applications I Let’s take a look at a listview for the stored contacts div data r o l e ” page ” i d ” l i s t ” div data r o l e ” header ” ! . . . / div 3 4 5 6 7 8 9 10 div data r o l e ” c o n t e n t ” u l data r o l e ” l i s t v i e w ” data a u t o d i v i d e r s ” t r u e ” l i a h r e f ” # ” John Doe / a / l i l i a h r e f ” # ” Jane Doe / a / l i l i a h r e f ” # ” The Doctor / a / l i / u l / div 11 12 13 div data r o l e ” f o o t e r ” ! . . . / div / div jQuery-Mobile vs. Sencha Touch 40 / 66

Dialogs and Popups I 1 2 Sometimes you want to display a dialog or popup inside your application div data r o l e ” page ” i d ” l i s t ” div data r o l e ” header ” ! . . . / div 3 4 5 6 7 8 9 10 div data r o l e ” c o n t e n t ” u l data r o l e ” l i s t v i e w ” data a u t o d i v i d e r s ” t r u e ” l i a h r e f ” # view ” data r e l ” d i a l o g ” John Doe / a / l i l i a h r e f ” # view ” data r e l ” d i a l o g ” Jane Doe / a / l i l i a h r e f ” # view ” data r e l ” d i a l o g ” The Doctor / a / l i / u l / div 11 12 13 div data r o l e ” f o o t e r ” ! . . . / div / div jQuery-Mobile vs. Sencha Touch 41 / 66

UI Design - Sencha Touch I I Sencha Touch uses object oriented code for UI design Classes that represent UI elements are instantiated I Classes are created using Ext.create, not using new I I Constructors receive a configuration object MVC I I I UI Classes (”components”) are the View Models represent data Controllers are the glue code I Not shown in this talk jQuery-Mobile vs. Sencha Touch 42 / 66

UI Design - Sencha Touch I I Sencha Touch uses object oriented code for UI design Classes that represent UI elements are instantiated I Classes are created using Ext.create, not using new I I Constructors receive a configuration object MVC I I I UI Classes (”components”) are the View Models represent data Controllers are the glue code I Not shown in this talk jQuery-Mobile vs. Sencha Touch 42 / 66

UI Design - Sencha Touch I I Sencha Touch uses object oriented code for UI design Classes that represent UI elements are instantiated I Classes are created using Ext.create, not using new I I Constructors receive a configuration object MVC I I I UI Classes (”components”) are the View Models represent data Controllers are the glue code I Not shown in this talk jQuery-Mobile vs. Sencha Touch 42 / 66

Sencha Touch Components I Each Sencha Touch application consists of an arbitrary number of components I Some components are containers A Container has a layout I I I I Fit Card HBox/VBox I There is a special full screen container called viewport I Components only visualize data from models jQuery-Mobile vs. Sencha Touch 43 / 66

Sencha Touch Components I Each Sencha Touch application consists of an arbitrary number of components I Some components are containers A Container has a layout I I I I Fit Card HBox/VBox I There is a special full screen container called viewport I Components only visualize data from models jQuery-Mobile vs. Sencha Touch 43 / 66

Sencha Touch Components I Each Sencha Touch application consists of an arbitrary number of components I Some components are containers A Container has a layout I I I I Fit Card HBox/VBox I There is a special full screen container called viewport I Components only visualize data from models jQuery-Mobile vs. Sencha Touch 43 / 66

Sencha Touch Components I Each Sencha Touch application consists of an arbitrary number of components I Some components are containers A Container has a layout I I I I Fit Card HBox/VBox I There is a special full screen container called viewport I Components only visualize data from models jQuery-Mobile vs. Sencha Touch 43 / 66

Sencha Touch Components I Each Sencha Touch application consists of an arbitrary number of components I Some components are containers A Container has a layout I I I I Fit Card HBox/VBox I There is a special full screen container called viewport I Components only visualize data from models jQuery-Mobile vs. Sencha Touch 43 / 66

Docked Items I 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Header and Footer are created by docking components to the edges of containers. Ext . c r e a t e ( ’ Ext . Panel ’ , { items : [ Ext . c r e a t e ( ’ Ext . T i t l e B a r ’ , { docked : ’ t o p ’ , t i t l e : ’ Foo ’ }) , Ext . c r e a t e ( ’ Ext . T i t l e B a r ’ , { docked : ’ bottom ’ , t i t l e : ’ Baz ’ }) ], f u l l s c r e e n : true , h t m l : ’ Bar ’ }) ; jQuery-Mobile vs. Sencha Touch 44 / 66

Navigation between components I 1 2 3 Switching views is done with js code. var f i r s t V i e w Ext . c r e a t e ( ’ Ext . Panel ’ , { h t m l : ’ Foo ’ }) ; 4 5 6 7 var secondView Ext . c r e a t e ( ’ Ext . Panel ’ , { h t m l : ’ Bar ’ }) ; 8 9 10 Ext . V i e w p o r t . add ( f i r s t V i e w ) ; Ext . V i e w p o r t . add ( secondView ) ; 11 12 Ext . V i e w p o r t . s e t A c t i v e I t e m ( secondView ) ; jQuery-Mobile vs. Sencha Touch 45 / 66

Navigation between components I 1 2 3 Switching views is done with js code. var f i r s t V i e w Ext . c r e a t e ( ’ Ext . Panel ’ , { h t m l : ’ Foo ’ }) ; 4 5 6 7 var secondView Ext . c r e a t e ( ’ Ext . Panel ’ , { h t m l : ’ Bar ’ }) ; 8 9 10 Ext . V i e w p o r t . add ( f i r s t V i e w ) ; Ext . V i e w p o r t . add ( secondView ) ; 11 12 Ext . V i e w p o r t . s e t A c t i v e I t e m ( secondView ) ; jQuery-Mobile vs. Sencha Touch 45 / 66

Creating Listviews 1 2 3 4 5 6 7 8 9 Ext . c r e a t e ( ’ Ext . L i s t ’ , { f u l l s c r e e n : true , itemTpl : ’ { t i t l e } ’ , data : [ { name : ’ John Doe ’ } , { name : ’ Jane Doe ’ } , { name : ’ The Doctor ’ } ] }) ; jQuery-Mobile vs. Sencha Touch 46 / 66

Dialogs and Popups 1 2 3 Ext . Msg . prompt ( ’Name ’ , ’ Please e n t e r your name : ’ , function ( b u t t o n , text ) { Ext . Msg . a l e r t ( ’ Welcome ! ’ , ’ Hi , ’ t e x t ’ ! ’ , Ext . emptyFn ) ; }) ; jQuery-Mobile vs. Sencha Touch 47 / 66

UI Design - Conclusion I jQuery Mobile I I I I I I Usage of HTML5 Progressive Enhancement Semantic Markup Easily create user interfaces for static content Page navigation for free Automatic XHR lazy fetching of pages Sencha Touch I I I I HTML 5 - but you don’t write it Declarative programming using JavaScript ”Page” navigation has to be done programmatically Autoloading of application components jQuery-Mobile vs. Sencha Touch 48 / 66

What comes next? Dynamic Data jQuery-Mobile vs. Sencha Touch 49 / 66

Dynamic Data - jQuery Mobile I I Using static content with jQuery Mobile is easy How about dynamic creation of content I XML, JSON, Localstorage, . jQuery-Mobile vs. Sencha Touch 49 / 66

An event based approach I jQuery Mobile fires all kind of different events during processing I pagebeforeload I pageload I pageloadfailed I pagebeforechange I pagechange I pagechangefailed I pa

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 experience I More than 8 years of professional JavaScript