Todd Parker & Scott Jehl : jQuery Mobile Keynote 2011

Todd Parker & Scott Jehl ﬁlament group State of the
Framework

ﬁlament group We design engaging sites and applications that are
simple to use and accessible to everyone.

A quick restatement of goals & philosophy How’d we get
here?

The mobile web is massive

http://itu.int/ITU-D/ict/material/FactsFigures2010.pdf People Billion 6.8 Subscriptions 5.3

35 Billion Devices on the internet Eric Schmidt DLD Conference
2011 Keynote via http://tcrn.ch/hD4Owx

They aren’t all iPhones...

July 2011 World Mobile Browsers 4.01 12.3 17.1 18.17 19.95
22.07 Opera iPhone / iPod Touch Android Nokia BlackBerry Netfront http://gs.statcounter.com/#mobile_browser-ww-monthly-201103-201103-bar

Tim Berners-Lee July 1996 “Anyone who slaps a ‘this page
is best viewed with Browser X’ label on a web page appears to be yearning for the bad old days [...]”

The goal

...and work especially well in capable browsers! Make it work
everywhere.

All Platforms 1 codebase

iOS Android WebOS Blackberry WP7 Meego/Maemo Kindle 2 Nook Playbook
Symbian Symbian

Desktop too.

Also here.

Built on standards

and jQuery core Mobile + Tablet UI Tools + utilities

Familiar API, CDN delivery jquery.min.js jquery.mobile.min.js 31kb 10 - 25kb

Progressive Enhancement

Don’t break the web. Bookmark / Refresh Friendly URLS History
Works Now with PushState! jquerymobile.com/test/docs/api/globalconfig.html

Not the OS Design for the brand

Keep it accessible

Touch, mouse, keyboard Touch & Mouse Events Mouse Events

Load only what you need! Modular, Decoupled

mobile to tablet to desktop One framework that adapts to
context

One. Web.

without being exclusive. Build rich experiences

How to build a jQuery Mobile App

Step 1. Make a regular website

<!DOCTYPE html> <html> <head> <title>My Web App</title> <style>body {text-align: center;
}</style> </head> <body> <h1>Welcome to my site!</h1> <p><a href=”contact.html”>Contact</a></p> </body> </html>

Step 2. Add jQuery Mobile

<!DOCTYPE html> <html> <head> <title>My Web App</title> <style>body { text-align:
center; }</style> <meta name="viewport" content="width=device-width,initial- scale=1"> <link rel="stylesheet" href="jquery.mobile.min.css"> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script> </head> <body> <h1>Welcome to my Site!</h1> <p><a href="contact.html" data-role="button">Contact</a></p> </body> </html>

Set the zoom <meta name="viewport" content="width=device- width,initial-scale=1">

...or something. Step 3 Go shopping

How the heck?

Introducing... The Navigation model

Listen, intercept, handle w/ Ajax products.html <div data-role=”page”> TAP

After that, update the URL History, deep linking, bookmarking http://example.com/products.html

...or in older browsers Hash works as a fallback http://example.com/#/products.html

Linking Pages

How to link pages <DIV class=”click-me” url=”page.html”> This is a
jQuery Mobile link! </DIV>

Look familiar? <a href=”page.html”> This is a jQuery Mobile link!
</a>

Transitions

Configuring Transitions <a href=”1.html” data-transition=”fade”> This is a jQuery Mobile
link! </a>

Regular forms; Hijax’d <form action="handler.php" method="post"> Don’t thank us; thank
this guy >

Transitions too! <form action="handler.php" method="post" data-transition=”slideup”>

“Pages” in the page

Page container <body> <div data-role="page">  </div> </body>

Page containers are.... • used to group “pages” in DOM
• auto-generated for you • any kind of element you’d like

Dialogs

are pages <a href=”dialogs-1.result.html” data-rel=”dialog”> Open page as a dialog!
</a>

...but not in history ...but they can be closed with
back button

Multipage documents

<body> <div data-role="page" id="home"></div> <div data-role="page" id="products"></div> <div data-role="page" id="services"></div>
<div data-role="page" id="about"></div> <div data-role="page" id="contact"></div> </body> ID’d sections

<p>Hello world</p> <ul data-role="listview"> <li><a href="#products">Products</a></li> <li><a href="#services">Services</a></li> <li><a href="#about">About
us</a></li> <li><a href="#contact">Contact</a></li> </ul> ...and local anchor links

Page Sections

Page child roles header footer content

<body> <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>
</body> Page child roles

pros / cons •May lend a “native” app feel. •Useful
in certain simple UI situations: full-page photo galleries, etc. •Often translate poorly to desktop. •Only feel “native” to iOS users •Uncanny Valley

Listviews

<ul> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul> A Regular UL

Basic unordered list

<ul data-role=”listview”> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul> Basic unordered
list

Basic unordered list

<div data-role="content"> <p>Hello world</p> <ul data-role="listview"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li>
<li><a href="about.html">About us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> List with links

List with links

Buttons

Headers, footers

“Fixed” toolbars

Form elements

Collapsibles

The jQM API

$.mobile

Navigation Scripting

$.mobile.changePage

Change pages via JS $.mobile.changePage(“about/us.html”);

...and back window.history.back();

Submit form data $.mobile.changePage(“handler.php”, { type: "post", data: { "shipping":
"Fast!" } });

$.mobile.loadPage

$.mobile.loadPage( "about/us.html" ); Load pages via JS

<a href=”page.html” data-prefetch>Page</a> loadPage() from HTML

Custom Events

Page Events

the new domready Introducing pagecreate

Small code tidbit. $( “.ui-page” ).live( “pagecreate”, function(){ alert( “I’m
created!” ); });

pre-parse the markup here Also: pagebeforecreate

pagebeforecreate $( “div” ).live( “pagebeforecreate”, function(){ alert( “I’m about to
be created!” ); });

Page Change Events

All Page Change Events • pagebeforechange • pagebeforeshow • pagebeforehide
• pageshow • pagehide • pageremove • pagechange

Putting it all together

FlipPics

http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/ About those pagination links...

Milestones

Alphas 1-3:

Alpha 4

vmousedown | vmouseover | vmouseup | vmousemove | vmouseclick Virtualized
Events

Use ‘em like mouse events $( “a.toggleable” ).bind( “vclick”, function(){
$(this) .next() .toggleClass( “hidden” ); });

$.noConflict() for your HTML Data Attr Namespacing

$.mobile.allowCrossDomainPages

Also. • Configurable text strings (i18n) • Updating page titles
• No more meta viewport injection

Beta 1

Also. • URL bar hidden: iOS + Android • Smoother
transitions • Improved URL Handling • Pinch zooming enabled • Auto Back buttons OFF

Beta 2

Widget Decoupling • header/content/footer • collapsible • controlgroup • fieldcontain
• fixheaderfooter • button • checkboxradio • select • slider • textinput • links theming • listview • navbar • grid

Cleaner design

Page wrapper: optional

Gradients: More!

New create event $( ...new markup that contains widgets... )
.appendTo( ".ui-page" ) .trigger( "create" );

Also. • DOM management • Data-prefetch • autoInitializePage • Configuration
improvements

Beta 3

history.pushState

pagebeforechange

iOS5 Overflow & Fixies

1.0 RC1

Well, ok.

data-content-theme

Search icon

API docs

What’s Next?

1.0 in weeks

Theming is hard.

Basic TR demo movie

Download Builder in the works! Also!

Build, Contribute

Demos & Docs jquerymobile.com/demos/1.0rc1/ Live dev snapshot jquerymobile.com/test/ Nightlies, Latest
jquerymobile.com/latest/

fork & contribute github.com/jquery/jquery-mobile

Build your own $ git clone git://github.com/jquery/ jquery-mobile.git $ cd
jquery-mobile $ make 1 2 3

Thanks core team! • Kin Blas ( Adobe ) •
John Bender ( Adobe ) • Ghislain Seguin ( Jive )

Awesome sponsors are awesome ﬁlament group

Thanks! Questions? @toddmparker @scottjehl

Todd Parker & Scott Jehl : jQuery Mobile Keynote 2011

Todd Parker & Scott Jehl : jQuery Mobile Keynote 2011

More Decks by scottjehl

Other Decks in Design

Featured

Transcript