jquery mobile apps
TRANSCRIPT
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
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
What’s all about?
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
HTML 5 )Changes The Rules of The
Game(
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Widest Browser Support
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
AJAX Navigation & Transitions
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Declarative UI Development
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Reusable Touch-friendly Widgets
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Easy for Layout and Theming
* Twitter Bootstrap theme from Andy Matthews
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Strong community and support
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Page Structure
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
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>
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”>
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
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Know your “enemy”
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Media Queries for custom styles
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Don’t forget portrait-landscape
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Custom background color
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/
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
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Data Binding
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
MVVM Pattern
Model
View
View-Model
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
A JavaScript MVVM Framework
Declarative Data-Bindings Automatic UI Refresh Dependency Tracking Templating
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Knockout Model
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Knockout View
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Knockout ViewModel
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Data-Binding with Knockout
JSFiddle code
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
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
jQM with Knockout
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Module Pattern
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.
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Self-executed function
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Now let’s add some privacy
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Module Pattern
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Module Pattern
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
AMD
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Remember Modules?
What if we need some extra modules?
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Problems in Large Application
Lots of modules
Lots of files
Bad performanceComplex
dependency
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
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
RequireJS Module Definition
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
RequireJS Main
main.js
index.html
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
RequireJS
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Mediator pattern
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.
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Mediator
SubscribePublish
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Mediator
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
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Mediator
JSFiddle code
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
External navigation
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Disable jQuery Mobile nav
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
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
jQM with SammyJS
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/
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
www.js-il.com
18.6.13
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Thanks
Dima KuzmichExpert Web Developer
E4D Solutions LTDsite: www.e4d.co.il