jquery mobile apps
TRANSCRIPT
![Page 1: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/1.jpg)
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 3: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/3.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
HTML 5 )Changes The Rules of The
Game(
![Page 4: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/4.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Widest Browser Support
![Page 5: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/5.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
AJAX Navigation & Transitions
![Page 6: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/6.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Declarative UI Development
![Page 7: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/7.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Reusable Touch-friendly Widgets
![Page 8: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/8.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Easy for Layout and Theming
* Twitter Bootstrap theme from Andy Matthews
![Page 9: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/9.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Strong community and support
![Page 11: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/11.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/12.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/13.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/14.jpg)
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 16: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/16.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Media Queries for custom styles
![Page 17: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/17.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Don’t forget portrait-landscape
![Page 18: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/18.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Custom background color
![Page 19: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/19.jpg)
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 20: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/20.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Custom Themes
iPhone theme
Android theme
BlackBerry theme
Windows Phone theme
Twitter Bootstrap theme
![Page 22: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/22.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
MVVM Pattern
Model
View
View-Model
![Page 23: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/23.jpg)
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 26: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/26.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Knockout ViewModel
![Page 27: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/27.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Data-Binding with Knockout
JSFiddle code
![Page 28: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/28.jpg)
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 31: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/31.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/32.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
![Page 33: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/33.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
![Page 34: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/34.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Self-executed function
![Page 35: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/35.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Now let’s add some privacy
![Page 39: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/39.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/40.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
![Page 41: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/41.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/42.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/43.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
RequireJS Module Definition
![Page 44: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/44.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
RequireJS Main
main.js
index.html
![Page 47: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/47.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/48.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
![Page 49: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/49.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Mediator
SubscribePublish
![Page 51: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/51.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/52.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Mediator
JSFiddle code
![Page 53: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/53.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
External navigation
![Page 54: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/54.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Disable jQuery Mobile nav
![Page 55: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/55.jpg)
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 57: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/57.jpg)
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](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/58.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
www.js-il.com
18.6.13
![Page 59: jQuery Mobile Apps](https://reader037.vdocument.in/reader037/viewer/2022110119/555838b0d8b42ac6078b4a0b/html5/thumbnails/59.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Thanks
Dima KuzmichExpert Web Developer
E4D Solutions LTDsite: www.e4d.co.il