Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jQuery Mobile: For Fun and Profit

Daniel Cousineau
October 18, 2011
Programming
2
100

jQuery Mobile: For Fun and Profit

Given at ZendCon 2011 and O'Reilly Where2.0 2011

Daniel Cousineau

October 18, 2011
Tweet

More Decks by Daniel Cousineau

See All by Daniel Cousineau
Time is a Social Construct
dcousineau
1
370
React @ Scale
dcousineau
0
95
Frontend Performance & You
dcousineau
0
170
Feature Flags & You
dcousineau
2
74
React+Redux @ Scale
dcousineau
1
300
Reframing The Problem - DCJS July 2016
dcousineau
0
100
YAFT
dcousineau
2
130
Queues and the beanstalkd
dcousineau
1
560
How Not Writing PHP Makes You Better At PHP
dcousineau
0
350

Other Decks in Programming

See All in Programming
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
330
Anthropic Cookbook のおすすめレシピ
schroneko
7
870
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Fragment Composition of GraphQL
quramy
3
610
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
410
Git Rebase
bkuhlmann
11
1.6k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
350
PHPはいつから死んでいるかの調査
chiroruxx
1
390
Git Lint
bkuhlmann
4
750
Netty Chicago Java User Group 2024-04-17
sullis
0
170
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
120

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
How STYLIGHT went responsive
nonsquared
92
4.8k
Building Adaptive Systems
keathley
31
1.9k
Building Your Own Lightsaber
phodgson
99
5.7k
Teambox: Starting and Learning
jrom
128
8.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
The Invisible Customer
myddelton
114
12k
Being A Developer After 40
akosma
57
580k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
What's in a price? How to price your products and services
michaelherold
237
11k

Transcript

  1. for fun and profit jQuery Mobile © 2010 The jQuery

    Project http://jquerymobile.com/ Thursday, April 21, 2011

  2. Daniel Cousineau Interactive Software Engineer @ RAPP http://dcousineau.com/ @dcousineau [email protected]

    Thursday, April 21, 2011

  3. What Is jQuery Mobile? Thursday, April 21, 2011

  4. Multi Platform Images from jquerymobile.com Thursday, April 21, 2011

  5. Touch-optimized & Themable Images from jquerymobile.com Thursday, April 21, 2011

  6. Mobile Web Framework Unified User Interface My Term: Half Stack

    Widget Library Touch Events Thursday, April 21, 2011

  7. Project Status As of April 7th: ALPHA 4.1 Feature Complete

    Only Performance and Bug Fixes Thursday, April 21, 2011

  8. More Details Built on jQuery Lightweight (12k compressed) Progressive Enhancement

    HTML5 Accessibility baked-in (WAI-ARIA) Theme-able Degradable, Simple ‘Media Queries’ (no @media, no prob) Thursday, April 21, 2011

  9. jQuery Mobile Primer Thursday, April 21, 2011

  10. Provided Interface elements Simple device orientation detection Tap & mobile

    events DOES NOT PROVIDE Geo Location, Canvas, Local Storage, etc. Remember: A ‘HALF’ STACK Thursday, April 21, 2011

  11. Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello

    World <!DOCTYPE html> <html> <head> <title>Hello World</title> <script src="path/to/sencha-touch.js" type="text/javascript"></script> <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> new Ext.Application({ launch: function() { new Ext.Panel({ fullscreen: true, html: 'Hello World!' }); } }); </script> </head> <body></body> </html> <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <p>Hello World.</p> </div> </div> </body> </html> Thursday, April 21, 2011

  12. Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello

    World <!DOCTYPE html> <html> <head> <title>Hello World</title> <script src="path/to/sencha-touch.js" type="text/javascript"></script> <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> new Ext.Application({ launch: function() { new Ext.Panel({ fullscreen: true, html: 'Hello World!' }); } }); </script> </head> <body></body> </html> <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <p>Hello World.</p> </div> </div> </body> </html> Semantic & Progressive Refinement Thursday, April 21, 2011

  13. In The Beginning <!DOCTYPE html> <html> <head> <title>Page Title</title> <link

    rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> </body> </html> Thursday, April 21, 2011

  14. Configuration Configuration ONLY in mobileinit listener All mobileinit listeners defined

    BEFORE loading jQuery Mobile Thursday, April 21, 2011

  15. In The Beginning <!DOCTYPE html> <html> <head> <title>Page Title</title> <link

    rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, { configurationKey: configurationValue }); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> </body> </html> Thursday, April 21, 2011

  16. Think In Pages <div data-role=”page” /> Only 1 visible at

    any time Multiple allowed per document You can write a single-file application Contains header, footer, and content area Thursday, April 21, 2011

  17. <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" />

    <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, {} ); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html> Thursday, April 21, 2011

  18. Progressive Enhancement Uses the HTML5 data-* attributes to auto-enhance and

    configure widgets data-role is now the center of your world. E.g. To create a button, add a <a href=”#” data- role=”button”>LABEL</a> and jQuery Mobile will automagically set it up during page creation. Thursday, April 21, 2011

  19. <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" />

    <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, {} ); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <a href="#">Normal Link</a> <a href="#" data-role="button">Button</a> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html> Thursday, April 21, 2011

  20. jQuery Mobile.com Docs http://jquerymobile.com/demos/1.0a4.1/ Thursday, April 21, 2011

  21. Load jQueryMobile JS mobileinit pagebeforecreate pagecreate pagebeforeshow domready pageshow Navigate

    Enhance Page pagehide pagebeforehide Thursday, April 21, 2011

  22. Touch Events tap taphold swipe swipeleft swiperight orientationchange scrollstart scrollstop

    Thursday, April 21, 2011

  23. Auto-‘AJAX’ By default, all local links get a click listener

    Can be disabled Overrides default action: Fires XMLHTTP request for target Pulls <div data-role=”page”></div> from results, inserts into DOM Transitions to displaying the new target page Thursday, April 21, 2011

  24. Auto-‘AJAX’ By default, all local forms get a submission handler

    Same process as links, only overriding for form submit WARNING: The classic “Form Submit → 302 REDIRECT → Result/Target Page” workflow breaks Thursday, April 21, 2011

  25. Auto-‘AJAX’ CAUTION: There is no official way to pass parameters

    to AJAX’ed pages Sever side via GET requests to back-end Use #page?key=value, manually parse window.location Disable / override hash listener Thursday, April 21, 2011

  26. Learn By Doing Thursday, April 21, 2011

  27. Code Time... https://github.com/dcousineau/jQuery-Mobile-For-Fun-And-Profit http://jquerymobile.com/demos/1.0a4.1/ Thursday, April 21, 2011

  28. Wrap Up Thursday, April 21, 2011

  29. http://jqmgallery.com/ Thursday, April 21, 2011

  30. Thursday, April 21, 2011

  31. Resources @jquerymobile http://jquerymobile.com/blog/ http://jquerymobile.com/demos/1.0a4.1/ Thursday, April 21, 2011

  32. Advanced Learning Dynamic Page Navigation & Parameters https://developers.jivesoftware.com/community/ blogs/engineering/2011/04/15/jivin-with-jquery- mobile-inter-page-navigation

    Panel / iPad Ready Layouts http://asyraf9.github.com/jquery-mobile/ Thursday, April 21, 2011

  33. http://jquerymobile.com/ Thursday, April 21, 2011