jquery mobile apps

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Dima KuzmichExpert Web Developer

E4D Solutions LTDsite: www.e4d.co.il

jQuery Mobile apps

Israel JavaScript Conference

mailto:info@e4d.co.il

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-role

Elements 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 support

There 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/

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 performanceComplex

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/

Mediator

JSFiddle code

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/

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

http://addyosmani.com/largescalejavascript/

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

israel javascript conference

jsfiddle code

loaded maximumscale

viewport initialscale

zoom level

lots of moduleslots

document layoutand

different roles

Technology

anatomy of an app html, css, jquery, jquery mobile cis 136...

cross-platform phone apps & sites with jquery...

building mobile apps with jquery for any device in the cloud

creating a responsive layout - sessions college for...

jquery, jquery ui, and jquery mobile: recipes and...

master mobile web apps with jquery mobile (third edition)...

mobile websites und (web)-apps mit jquery mobile

jquery, jquery ui, and jquery mobile: recipes -

master mobile web apps with jquery mobile (second edition)

creating mobile apps with jquery mobile second edition-...

strategies for building mobile apps using arcgis api for...

a simple mobile optimized web app/site using the jquery...

building mobile apps with jquery mobile, phonegap, and...

b.y.o.l.: building jquery mobile apps in dreamweaver

master mobile web apps with jquery mobile (fourth …...

building mobile apps with jquery mobile, phonegap, and...

update’ für’ jquery’ mobile’ 1.4’ und’ etwas’...

mobile apps with jquery mobile - sigs.de€¦ · mobile...

b.y.o.l.: building jquery mobile apps in dreamweaver jeff...

master mobile web apps with jquery mobile (third edition)