59
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com | Dima Kuzmic Expert Web Develop E4D Solutions LT site: www.e4d.co. jQuery Mobile apps Israel JavaScript Conference

jQuery Mobile Apps

Embed Size (px)

Citation preview

Page 1: jQuery Mobile Apps

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

Page 2: jQuery Mobile Apps

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

What’s all about?

Page 3: jQuery Mobile Apps

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

HTML 5 )Changes The Rules of The

Game(

Page 4: jQuery Mobile Apps

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

Widest Browser Support

Page 5: jQuery Mobile Apps

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

AJAX Navigation & Transitions

Page 6: jQuery Mobile Apps

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

Declarative UI Development

Page 7: jQuery Mobile Apps

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

Reusable Touch-friendly Widgets

Page 8: jQuery Mobile Apps

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

Easy for Layout and Theming

* Twitter Bootstrap theme from Andy Matthews

Page 10: jQuery Mobile Apps

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

Page Structure

Page 11: jQuery Mobile Apps

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

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

Page 12: jQuery Mobile Apps

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

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>

Page 13: jQuery Mobile Apps

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

<div data-role=“page”>

<div data-role=“header”>

<div data-role=“content”>

<div data-role=“footer”>

Page 14: jQuery Mobile Apps

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

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

Page 15: jQuery Mobile Apps

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

Know your “enemy”

Page 16: jQuery Mobile Apps

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

Media Queries for custom styles

Page 17: jQuery Mobile Apps

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

Don’t forget portrait-landscape

Page 18: jQuery Mobile Apps

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

Custom background color

Page 19: jQuery Mobile Apps

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

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/

Page 21: jQuery Mobile Apps

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

Data Binding

Page 22: jQuery Mobile Apps

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

MVVM Pattern

Model

View

View-Model

Page 23: jQuery Mobile Apps

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

A JavaScript MVVM Framework

Declarative Data-Bindings Automatic UI Refresh Dependency Tracking Templating

Page 24: jQuery Mobile Apps

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

Knockout Model

Page 25: jQuery Mobile Apps

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

Knockout View

Page 26: jQuery Mobile Apps

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

Knockout ViewModel

Page 27: jQuery Mobile Apps

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

Data-Binding with Knockout

JSFiddle code

Page 28: jQuery Mobile Apps

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

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

Page 29: jQuery Mobile Apps

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

jQM with Knockout

Page 30: jQuery Mobile Apps

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

Module Pattern

Page 31: jQuery Mobile Apps

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

Modules

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

Page 32: jQuery Mobile Apps

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

Page 33: jQuery Mobile Apps

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

Page 34: jQuery Mobile Apps

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

Self-executed function

Page 35: jQuery Mobile Apps

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

Now let’s add some privacy

Page 36: jQuery Mobile Apps

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

Module Pattern

Page 37: jQuery Mobile Apps

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

Module Pattern

Page 38: jQuery Mobile Apps

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

AMD

Page 39: jQuery Mobile Apps

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

Remember Modules?

What if we need some extra modules?

Page 40: jQuery Mobile Apps

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

Page 41: jQuery Mobile Apps

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

Problems in Large Application

Lots of modules

Lots of files

Bad performanceComplex

dependency

Page 42: jQuery Mobile Apps

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

Asynchronous Module Definition

Define each file as module

Each module is asynchronously

loadable

Manage module dependencies

Using non-blocking parallel loading

Page 43: jQuery Mobile Apps

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

RequireJS Module Definition

Page 44: jQuery Mobile Apps

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

RequireJS Main

main.js

index.html

Page 45: jQuery Mobile Apps

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

RequireJS

Page 46: jQuery Mobile Apps

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

Mediator pattern

Page 47: jQuery Mobile Apps

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

Mediator

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

Page 48: jQuery Mobile Apps

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

Page 49: jQuery Mobile Apps

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

Mediator

SubscribePublish

Page 50: jQuery Mobile Apps

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

Mediator

Page 51: jQuery Mobile Apps

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

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

Mediator.js

Page 52: jQuery Mobile Apps

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

Mediator

JSFiddle code

Page 53: jQuery Mobile Apps

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

External navigation

Page 54: jQuery Mobile Apps

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

Disable jQuery Mobile nav

Page 55: jQuery Mobile Apps

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

Remember!

You managing routes

You managing form submissions

You managing pages in DOM

You managing transitions

Page 56: jQuery Mobile Apps

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

jQM with SammyJS

Page 57: jQuery Mobile Apps

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

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/

Page 58: jQuery Mobile Apps

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

www.js-il.com

18.6.13

Page 59: jQuery Mobile Apps

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

Thanks

Dima KuzmichExpert Web Developer

E4D Solutions LTDsite: www.e4d.co.il