Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

The mobile web is massive

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

They aren’t all iPhones...

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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 [...]”

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

The goal

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

All Platforms 1 codebase

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Desktop too.

Slide 16

Slide 16 text

Also here.

Slide 17

Slide 17 text

Built on standards

Slide 18

Slide 18 text

and jQuery core Mobile + Tablet UI Tools + utilities

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Progressive Enhancement

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Not the OS Design for the brand

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Keep it accessible

Slide 25

Slide 25 text

Touch, mouse, keyboard Touch & Mouse Events Mouse Events

Slide 26

Slide 26 text

Load only what you need! Modular, Decoupled

Slide 27

Slide 27 text

mobile to tablet to desktop One framework that adapts to context

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

One. Web.

Slide 30

Slide 30 text

without being exclusive. Build rich experiences

Slide 31

Slide 31 text

How to build a jQuery Mobile App

Slide 32

Slide 32 text

Step 1. Make a regular website

Slide 33

Slide 33 text

My Web App body {text-align: center; }

Welcome to my site!

Contact

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Step 2. Add jQuery Mobile

Slide 36

Slide 36 text

My Web App body { text-align: center; }

Welcome to my Site!

Contact

Slide 37

Slide 37 text

Set the zoom

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

...or something. Step 3 Go shopping

Slide 40

Slide 40 text

How the heck?

Slide 41

Slide 41 text

Introducing... The Navigation model

Slide 42

Slide 42 text

Listen, intercept, handle w/ Ajax products.html

TAP

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Linking Pages

Slide 46

Slide 46 text

How to link pages

This is a jQuery Mobile link!

Slide 47

Slide 47 text

WAT?

Slide 48

Slide 48 text

Look familiar? This is a jQuery Mobile link!

Slide 49

Slide 49 text

Transitions

Slide 50

Slide 50 text

Configuring Transitions This is a jQuery Mobile link!

Slide 51

Slide 51 text

Regular forms; Hijax’d Don’t thank us; thank this guy >

Slide 52

Slide 52 text

Transitions too!

Slide 53

Slide 53 text

“Pages” in the page

Slide 54

Slide 54 text

Page container

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Dialogs

Slide 57

Slide 57 text

are pages Open page as a dialog!

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Multipage documents

Slide 60

Slide 60 text

ID’d sections

Slide 61

Slide 61 text

Hello world

Products
Services
About us
Contact

...and local anchor links

Slide 62

Slide 62 text

Page Sections

Slide 63

Slide 63 text

Page child roles header footer content

Slide 64

Slide 64 text

...

Page child roles

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Listviews

Slide 67

Slide 67 text

Products
Services
About us
Contact

A Regular UL

Slide 68

Slide 68 text

Basic unordered list

Slide 69

Slide 69 text

Products
Services
About us
Contact

Basic unordered list

Slide 70

Slide 70 text

Basic unordered list

Slide 71

Slide 71 text

Hello world

Products
Services
About us
Contact

List with links

Slide 72

Slide 72 text

List with links

Slide 73

Slide 73 text

Etc.

Slide 74

Slide 74 text

Buttons

Slide 75

Slide 75 text

Headers, footers

Slide 76

Slide 76 text

“Fixed” toolbars

Slide 77

Slide 77 text

Form elements

Slide 78

Slide 78 text

Collapsibles

Slide 79

Slide 79 text

The jQM API

Slide 80

Slide 80 text

$.mobile

Slide 81

Slide 81 text

Navigation Scripting

Slide 82

Slide 82 text

$.mobile.changePage

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

$.mobile.loadPage

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

Page loadPage() from HTML

Slide 89

Slide 89 text

Custom Events

Slide 90

Slide 90 text

Page Events

Slide 91

Slide 91 text

the new domready Introducing pagecreate

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

pre-parse the markup here Also: pagebeforecreate

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

Page Change Events

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

Putting it all together

Slide 98

Slide 98 text

FlipPics

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

Milestones

Slide 102

Slide 102 text

Alphas 1-3:

Slide 103

Slide 103 text

Alpha 4

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

vmousedown | vmouseover | vmouseup | vmousemove | vmouseclick Virtualized Events

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

$.noConflict() for your HTML Data Attr Namespacing

Slide 108

Slide 108 text

$.mobile.allowCrossDomainPages

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

Beta 1

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

Beta 2

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

Cleaner design

Slide 117

Slide 117 text

Page wrapper: optional

Slide 118

Slide 118 text

Gradients: More!

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

Beta 3

Slide 122

Slide 122 text

history.pushState

Slide 123

Slide 123 text

pagebeforechange

Slide 124

Slide 124 text

iOS5 Overflow & Fixies

Slide 125

Slide 125 text

1.0 RC1

Slide 126

Slide 126 text

Well, ok.

Slide 127

Slide 127 text

data-content-theme

Slide 128

Slide 128 text

Search icon

Slide 129

Slide 129 text

API docs

Slide 130

Slide 130 text

What’s Next?

Slide 131

Slide 131 text

1.0 in weeks

Slide 132

Slide 132 text

Theming is hard.

Slide 133

Slide 133 text

Basic TR demo movie

Slide 134

Slide 134 text

No content

Slide 135

Slide 135 text

Download Builder in the works! Also!

Slide 136

Slide 136 text

Build, Contribute

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

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