jquery mobile apps - js-il.com

Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |

Dima KuzmichExpert Web Developer

E4D Solutions LTDsite: www.e4d.co.il

jQuery Mobile apps

Israel JavaScript Conference

mailto:[email protected]

http://www.js-il.com/

http://www.facebook.com/dima.kuzmich

http://il.linkedin.com/in/dimakuzmich


What’s all about?




HTML 5 )Changes The Rules of The Game(




Widest Browser Support




AJAX Navigation & Transitions




Declarative UI Development




Reusable Touch-friendly Widgets




Easy for Layout and Theming

* Twitter Bootstrap theme from Andy Matthews



http://andymatthews.net/read/2012/02/13/New-jQuery-Mobile-theme:-Twitter-Bootstrap


Strong community and support



http://www.google.com/trends/explore#q=jquery%20mobile%2C%20sencha%2C%20dojo%20mobile&date=7%2F2008%2057m&cmpt=q


Page Structure




The role of data-roleElements playing different roles on document layoutand we choose which role to give to them by addingdata-role=* page

header content footer

button listview list-devider controlgrou

p




Basic page

<div data-role=“page”><div data-role=“header”>Header</div><div data-role=“content”>Content goes here</div><div data-role=“footer”>Footer</div>

</div>




Don’t forget viewport meta tag <meta name=“viewport” content=“width=device-width” />

width - controls the size of the viewport initial-scale - controls the zoom level when the

page is first loaded maximum-scale, minimum-scale - control how

users are allowed to zoom the page in or out




Know your “enemy”




Media Queries for custom styles




Don’t forget portrait-landscape




Custom background color




RTL supportThere is no built-in rtl support in jQuery Mobile,But we there is a plug-in that provides us with this important feature.http://www.intlaqa.com/jquery-mobile-rtl/



http://www.intlaqa.com/jquery-mobile-rtl/


Custom Themes

iPhone theme Android theme BlackBerry theme Windows Phone theme Twitter Bootstrap theme



https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme

http://nativedroid.godesign.ch/

https://github.com/blackberry/jQueryMobile-BB10-Theme

https://github.com/sgrebnov/jqmobile-metro-theme

http://andymatthews.net/read/2012/02/13/New-jQuery-Mobile-theme:-Twitter-Bootstrap


Data Binding




MVVM Pattern

Model

View

View-Model




A JavaScript MVVM Framework

Declarative Data-Bindings Automatic UI Refresh Dependency Tracking Templating




Knockout Model




Knockout View




Knockout ViewModel




Data-Binding with Knockout

JSFiddle code



http://jsfiddle.net/dima_k/9U9KR/

http://jsfiddle.net/dima_k/9U9KR/


Knockout in jQM

Initialize your components and their view models on “pageinit” event

Refresh your widgets after adding or changing a view model data

Specify DOM element for binding and do not bind to the body




jQM with Knockout




Module Pattern




Modules

Interchangeable single-parts of larger system that can be easily reused. In JS we use the module pattern.




Self-executed function




Now let’s add some privacy




Module Pattern




AMD




Remember Modules?

What if we need some extra modules?




Problems in Large Application

Lots of modules

Lots of files

Bad performance Complex dependency




Asynchronous Module Definition Define each file as module Each module is asynchronously

loadable Manage module dependencies Using non-blocking parallel loading




RequireJS Module Definition




RequireJS Main

main.js

index.html




RequireJS




Mediator pattern




Mediator

Mediators are used when we need the communication between modules, but still want them to stay loosely coupled.




Mediator

SubscribePublish




Mediator




Mediator.jsWe don’t need to reinvent the wheel, so the easiest way is to use ready libraries.

Mediator.js



http://thejacklawson.com/Mediator.js/


MediatorJSFiddle code



http://jsfiddle.net/dima_k/P38vn/

http://jsfiddle.net/dima_k/P38vn/


External navigation




Disable jQuery Mobile nav




Remember!

You managing routes You managing form submissions You managing pages in DOM You managing transitions




jQM with SammyJS




Resources http://jquerymobile.com/ https://developers.google.com/chrome-developer-t

ools/docs/remote-debugging http://addyosmani.com/largescalejavascript/ http://knockoutjs.com/ http://requirejs.org/ http://sammyjs.org/



http://jquerymobile.com/

http://jquerymobile.com/

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

http://addyosmani.com/largescalejavascript/

http://addyosmani.com/largescalejavascript/

http://knockoutjs.com/

http://knockoutjs.com/

http://requirejs.org/

http://sammyjs.org/


www.js-il.com

18.6.13





Thanks

Dima KuzmichExpert Web Developer

E4D Solutions LTDsite: www.e4d.co.il



http://www.facebook.com/dima.kuzmich

http://il.linkedin.com/in/dimakuzmich

jquery mobile apps - js-il.com

Technology

israel javascript

infoe4d

www

scale

http

controls