building tomorrow's web with today's tools

James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

BuildingTomorrow’s Web

With Today’s Tools

1941

An Experience Designed for the Medium

1995

An Experience Designed for the Medium

2007

An Experience Designed for the Medium

History has taught usto embrace change

History has taught usto question assumptions

History has taught usto have high expectations

How Mobileis Changing The Web

How The Webis Changing Mobile

2008

We must have aniPhone App!

2009

We must have anAndroid App!

2010

We must have aniPad App!

2011

We must have a...

omfg

PalmMicrosoft

Apple

Android

RIM RIMAndroidAppleMicrosoftPalm

Top U.S. Smartphone Platforms,3 Month Average Ending December 2010comScore MobiLens 2010

Java

J2ME

Air

C++

C#

Obj-C

JS

Cross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies

The Mobile Web

But what does this word even mean?

A perfect storm

ApplicationsDocuments

Programmatic DOMDeclarative HTML

JSON APIsThemes & templates

Arguments & signalsURLs

SynchronizationRequest/Response

Thick clientThin client

A New Web Stack

Worker Parallel

Processing

File SystemsDBs

App Cache

JavaScript

Semantic HTML

CSS Styling & Layout

WebFonts Video Audio Graphics

x-AppMessaging

Device Access

Camera

Location

Contacts

SMS

Orientation

Gyro

Server & Services

HTTP

AJAX

Events

Sockets

SSL

More...

Web technologiesare a

viable alternativeto native development

Apps vs Web technologybuilt with

ApplicationsDocuments

Programmatic DOMDeclarative HTML

JSON APIsThemes & templates

Arguments & signalsURLs

SynchronizationRequest/Response

Thick clientThin client

Mobile userSedentary user

This is what it means

Mobile isan adjective not a noun

@media screen and (max-w

idth: 480px) {

#logo {

background-image: ur

l(mobile.png);

}}

Mobile devices are di!erent

Phone

GPS device

Camera

Music player

Content-Type: applicatio

n/msword

The Mobile Webis not a

320px Web

How did those assortedtank tops work out for you?

Techniques

adaptationad·ap·ta·tion

noun /ˌadapˈtāSHəәn/  /ˌadəәp-/

1. The action or process of adapting

or being adapted

2. A movie, television drama, or stage play

that has been adapted from a written work

3. A change by which an organism or species

becomes better suited to its environment

Mobile adaptation

Presentational

Prioritizational

Permutational

Presentational adaptation

Layout

Prioritizational adaptation

Navigation and IA

Permutational adaptation

Functionality

The topology of adaptation

Client Proxy Server

Permutational

Prioritizational

Presentational

Client Proxy Server

‘Passive’ client adaptation

<a href="tel:/

/555">555</a>

Proxy adaptation

There’s a bad sort

There’s a good sort

HTML, CSS...

Models

Controllers

Views

Server adaptation

Models

Controllers

Mobile

DesktopSw

itch

er HTML, CSS...

Server adaptation

WordPress Mobile Packhttp://wordpress.org/extend/plugins/wordpress-mobile-pack

Device detection with plugins

WPTouchhttp://wordpress.org/extend/plugins/wptouch

Drupal Mobile Pluginhttp://drupal.org/project/mobileplugin

Brand consistency

if (isset($_SERVER['HTTP_X_WAP_PROFILE']) { ...

if (in_array(substr($user_agent, 0, 4), $prefixes)) { ...

if (strpos($accept, 'wap') !== false) { ...

if (preg_match("/(" . $keywords . ")/i", $user_agent)) { ...

https://github.com/jamesgpearce/mobiledetect

Device detection with PHP

class ApplicationController < ActionController::Base has_mobile_fuend

*.mobile.erb

is_mobile_device?in_mobile_view?

https://github.com/brendanlim/mobile-fu

Device detection with Rails

var Connect = require("connect"), Monomi = require("monomi");

Connect.createServer(

Monomi.detectBrowserType(),

function(request, response, next) { response.writeHead(200, {'Content-Type': 'text/plain'}); response.write('Hello World: '); response.end('you are using a ' + request.monomi.browserType); }

).listen(8080);

https://github.com/jamesgpearce/monomi

Device detection with node.js

Detection & user choice“Switch to our desktop site”

Thematic consistency

w3c-speak

http://mysite.com/posts/123

http://m.mysite.com/posts/123

Using di!erent URLscan preserve

the integrity of‘One Web’

Can I Use?http://caniuse.com

Modernizrhttp://modernizr.com

DeviceAtlashttp://deviceatlas.com

Device diversity

Permutational

Prioritizational

Presentational

Client Proxy Server

Passive client adaptation

Responsive Web Design

Proxy adaptation

Device detection

Mobile site

Permutational

Prioritizational

Presentational

Client Proxy Server

Passive client adaptation

Responsive Web Design

Proxy adaptation

Device detection

Mobile site

A dedicated mobile app

JSON

Models

Controllers

Mobile

DesktopSw

itch

ers

RESTonce

The stack of the present

Storage

Business logic

User interfacereq/res

Rendering

The stack of the future

Storage

Security Business logic

User interfacesync

Storage

The return of the thick client

Do we have time for some code?

Progressive enhancement

JSCS

S

apppr

ogre

ssiv

een

hanc

emen

t

HTM

L

doc

assu

mpt

ion

vs

HTM

LJS

CSS

app

assu

mpt

ion

+/- featuredetection

Thick client, thin server

The shortfall in the cloud

http://mysite.com/myimage.png

http://i.tinysrc.mobi/http://mysite.com/myimage.png

Permutational

Prioritizational

Presentational

Client Proxy Server

Mobile app

Passive client adaptation

Responsive Web Design

Proxy adaptation

Device detection

Mobile site

Cloud support

Mobile isan adjective not a noun

The Mobile Webis not a

320px Web

History has taught usto embrace change

History has taught usto question assumptions

History has taught usto have high expectations

James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com