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
450
React @ Scale
dcousineau
0
110
Frontend Performance & You
dcousineau
0
200
Feature Flags & You
dcousineau
2
80
React+Redux @ Scale
dcousineau
1
300
Reframing The Problem - DCJS July 2016
dcousineau
0
110
YAFT
dcousineau
2
150
Queues and the beanstalkd
dcousineau
1
610
How Not Writing PHP Makes You Better At PHP
dcousineau
0
360

Other Decks in Programming

See All in Programming
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
230
CSC509 Lecture 11
javiergs
PRO
0
180
Outline View in SwiftUI
1024jp
1
330
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
Amazon Bedrock Agentsを用いてアプリ開発してみた！
har1101
0
340
Ethereum_.pdf
nekomatu
0
460
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
弊社の「意識ﾁｮｯﾄ低いアーキテクチャ」10選
texmeijin
5
24k
Contemporary Test Cases
maaretp
0
140
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100

Featured

See All Featured
Raft: Consensus for Rubyists
vanstee
136
6.6k
Building Your Own Lightsaber
phodgson
103
6.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Docker and Python
trallard
40
3.1k
Fireside Chat
paigeccino
34
3k
Practical Orchestrator
shlominoach
186
10k
What's new in Ruby 2.0
geeforr
343
31k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k

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