Going Mobile Without Zen

ubiquitousstrumpetMobile - Wireless

Dec 10, 2013 (3 years and 7 days ago)

88 views

Going Mobile Without
Zen
Bill McCormick
Monday, June 10, 13
What do we want to do today?
Monday, June 10, 13
What do we want to do today?
Monday, June 10, 13
Leverage!
Monday, June 10, 13
A brief look
Monday, June 10, 13
A brief look

DOM Traversal and Manipulation
Monday, June 10, 13
A brief look

DOM Traversal and Manipulation

Event Handling
Monday, June 10, 13
A brief look

DOM Traversal and Manipulation

Event Handling

Ajax Calls
Monday, June 10, 13
A brief look

DOM Traversal and Manipulation

Event Handling

Ajax Calls

Widgets
Monday, June 10, 13
A brief look

DOM Traversal and Manipulation

Event Handling

Ajax Calls

Widgets

Animation
Monday, June 10, 13
A brief look

DOM Traversal and Manipulation

Event Handling

Ajax Calls

Widgets

Animation

Mobile Frameworks
Monday, June 10, 13
jQuery
jQuery
jQueryUI
RIA widgets and effects
jQueryMobile
A comprehensive set for
mobile apps
QUnit
For JS unit testing
Sizzle
JS CSS selector
Monday, June 10, 13
dojo
dojo
dijit
Set of widgets for RIA
dojox
Collection of packages
based on dojo and dijit
dojo Mobile
Optimized package for
mobile apps
dojo GFX
2D vector graphics API
Monday, June 10, 13
Sencha
Sencha
Sencha Ext JS
Set for RIA development
Sencha Touch
HTML5 Mobile App
Development
Sencha GXT
RIA based on GWT (Java
based)
Sencha Animator
CSS3 animations
Monday, June 10, 13
Frameworks work similar
Monday, June 10, 13
Frameworks work similar

Packages for the mobile world
Monday, June 10, 13
Frameworks work similar

Packages for the mobile world

You will need other packages as well
Monday, June 10, 13
Frameworks work similar

Packages for the mobile world

You will need other packages as well

Write simple HTML
Monday, June 10, 13
Frameworks work similar

Packages for the mobile world

You will need other packages as well

Write simple HTML

Transform after DOM is ready
Monday, June 10, 13
Launching Code
Monday, June 10, 13
Launching Code

Default HTML
1
2
3
window.onload =
function
() {
alert(
"welcome"
);
}
Monday, June 10, 13
Launching Code

Default HTML
1
2
3
window.onload =
function
() {
alert(
"welcome"
);
}
Monday, June 10, 13
Launching Code

Default HTML
1
2
3
window.onload =
function
() {
alert(
"welcome"
);
}
Monday, June 10, 13
Launching Code

Default HTML

jQuery sample
1
2
3
window.onload =
function
() {
alert(
"welcome"
);
}
1
2
3
$( document ).ready(
function
() {
// Your code here
});
Monday, June 10, 13
How do widgets work?
Monday, June 10, 13
How do widgets work?

HTML element with ID
Monday, June 10, 13
How do widgets work?

HTML element with ID

Call jQuery function on element

<p>Date: <input type="text" id="datepicker" /></p>

<script>

$(function() {

$( "#datepicker" ).datepicker();

});

</script>
Monday, June 10, 13
A little bit more magic
Monday, June 10, 13
A little bit more magic

<div
id="clickThisDiv">Click Me!</div>

<div
id="myDiv"

style="background-color:red;width:200px;height:200px;position: relative; left: 10px;"></div>
Monday, June 10, 13
A little bit more magic

<div
id="clickThisDiv">Click Me!</div>

<div
id="myDiv"

style="background-color:red;width:200px;height:200px;position: relative; left: 10px;"></div>

$('#clickThisDiv').click(function() {

animateDiv();

});

function animateDiv() {

$('#myDiv').animate({

left : '+=50',

height: 'toggle'

}, 1000);

};
Monday, June 10, 13
What about mobile sp
ecifically
?
Monday, June 10, 13
What about mobile sp
ecifically
?

Similar approach as Zen

HTML5 / CSS3

Forms, Widgets, Extendable

MVC based

PhoneGap support for Native
Monday, June 10, 13
Where is my data?
Monday, June 10, 13
Where is my data?

Use AJAX calls to server

Dynamic DOM injection

Data retrieval

Script Load

Server Side would be Web Services / SOAP based
Monday, June 10, 13
Where is my data?

Use AJAX calls to server

Dynamic DOM injection

Data retrieval

Script Load

Server Side would be Web Services / SOAP based

jQuery: $.getJSON(url,data,callback)

Server-side: CSP/REST with JSON
Monday, June 10, 13
HTML5 + CSS3 vs. JS Frameworks
Monday, June 10, 13
HTML5 + CSS3 vs. JS Frameworks

Size and Load Time
Monday, June 10, 13
HTML5 + CSS3 vs. JS Frameworks

Size and Load Time

Accessibility
Monday, June 10, 13
HTML5 + CSS3 vs. JS Frameworks

Size and Load Time

Accessibility

Compatibility
Monday, June 10, 13
Downsides
Monday, June 10, 13
Downsides

You have to know your framework
Monday, June 10, 13
Downsides

You have to know your framework

Same result can be delivered by different
calls with different runtime

http://
jsperf.com/id-vs-class-vs-tag-selectors/118

http://
jsperf.com/jquery-native/5

http://24ways.org/2011/your-jquery-now-with-
less-suck
/
Monday, June 10, 13
JQuery
Integration Demo
Monday, June 10, 13