mobile webinar yehuda 6 10

8/9/2019 Mobile Webinar Yehuda 6 10

1/216

{ Mobile


2/216

{ Rails 3


3/216


4/216

Ajax


5/216

March 1999


6/216


7/216


8/216

August 2001


9/216

Data binding is a DHTML feature that lets you easily bindindividual elements in your document to data from another source,such as a database or comma-delimited text le. When thedocument is loaded, the data is automatically retrieved from the

source and formatted and displayed within the element .


10/216

Because data is downloaded to the client asynchronously , pagesrender quickly and provide immediate interactivity. Oncedownloaded, the data can be sorted and ltered withoutrequiring additional trips to the server


11/216


12/216

Ajax


13/216

Client


14/216

IE4+ MadeClients a Lot

Smarter


15/216

Web 2.0Made Use of

the Tech


16/216

A DecadeLater


17/216

Evolution of Client-SideCapabilities


18/216


19/216


20/216

client


21/216

Not New


22/216

Newer thanAjax in 2005


23/216

Not EnoughExplanation


24/216


25/216

IE6Factor


26/216

PeopleFeel

Burned


27/216

Ill look atHTML5 when I

can use it...


28/216

...In 2019


29/216


30/216


31/216


32/216


33/216


34/216


35/216


36/216


37/216


38/216


39/216


40/216


41/216


42/216


43/216

People DontUse Cell Phones

Made in 2001


44/216

+s


45/216

BestDistribution

System


46/216

No ApprovalProcess


47/216

InstantUpdates


48/216


49/216

StartCaringNow


50/216

Mobile


51/216

Very Di ff erentConstraints


52/216


53/216

Fast, ReliableConnections


54/216

HTTP OverheadDominates

Small Assets


55/216

Hard Disks


56/216

HTTPCaches Persist

Forever


57/216

LowestCommon

Denominator?


58/216

2001


59/216

2006?


60/216

PowerfulProcessor


61/216

UnlimitedBattery


62/216

Prefer NewDownload to

Stale Data


63/216

YSlow!


64/216

One Large JSor CSS File


65/216

}:cache => true


66/216

Spriting


67/216

}.fanta { background : sprite-image( "bottles/fanta.png" );}.seven-up { background : sprite-image( "bottles/seven-up.png" );}.coke { background : sprite-image( "cans/coke.png" ) no-repeat ;}


68/216

Expires Header


69/216

}# # We use cached-busting location names# # with the far-future expires# # headers to ensure that if a file does# # change it can force a new# # request.


70/216

ETags


71/216

}def show @article = Article .find(params[ :id ])fresh_when( :etag => @article ,:last_modified => @article .created_at.utc,:public => true)end


72/216

25K Components


73/216

Lots StillApplies


74/216

Some MissingInformation


75/216

MobileConstraints


76/216

Poor HTTPCaching


77/216

Flaky andOffl ine

Connections


78/216

LongDownloads Can

Get Dropped


79/216

LowestCommon

Denominator?


80/216

HTML5 Offl ine


81/216

ApplicationCache


82/216

Local Storage


83/216

Prefer StaleData to a New

Download


84/216

Some PeoplePay Per kb


85/216

Limited Battery,Limited CPU


86/216

RevisitOrthodoxy


87/216

PriorityDownload Data

Only Once


88/216


89/216

Home PageRead Story

Back Button


90/216

Home Page

6k


91/216

Read Story

16k


92/216

Home Page

6k


93/216

SlowConnections


94/216

Offl ine


95/216

IncrementalRendering


96/216

Cache Clearedon a Dime


97/216

16k?!


98/216

{var sns_checked = false ;var current_tab = "blogsmith" ;function tabTo ( tab ){ document . getElementById ( 'formerrors' ).innerHTML = '' ;

document . getElementById ( 'cmtuinfo_email' ). style . display ='none' ; document . getElementById ( 'cmtuinfo_blogsmith' ). style . display ='none' ; document . getElementById ( 'cmtuinfo_sns' ). style . display ='none' ; document . getElementById ( 'cmtuinfo_' +tab). style . display ='block' ;

document . getElementById ( 'cmtutab_email' ). className ='' ; document . getElementById ( 'cmtutab_blogsmith' ). className ='' ; document . getElementById ( 'cmtutab_sns' ). className ='' ; document . getElementById ( 'cmtutab_' +tab). className ='currenttab' ;

if ( ! sns_checked && tab == 'sns' ){

image1 = new Image();image1. src = " http://www.blogsmithmedia.com/framework.weblogsinc.com/media/

loading.gif " ;sns.init( 'ch1ga1KvP7TotwTC' );sns_checked = true ;

}

current_tab = tab;
http://www.blogsmithmedia.com/framework.weblogsinc.com/media/loading.gifhttp://www.blogsmithmedia.com/framework.weblogsinc.com/media/loading.gifhttp://www.blogsmithmedia.com/framework.weblogsinc.com/media/loading.gifhttp://www.blogsmithmedia.com/framework.weblogsinc.com/media/loading.gifhttp://www.blogsmithmedia.com/framework.weblogsinc.com/media/loading.gifhttp://www.blogsmithmedia.com/framework.weblogsinc.com/media/loading.gif


99/216

{ Your comments: Remember me E-Mail me when someone replies to this comment < input type ="hidden" name="ButtonSave" value ="Save" />


100/216

Two Problems


101/216

1. Boilerplate


102/216

2. Structural


103/216

{There are also some more technical patents for

iChat video encoding and error adjustments ontouchscreens, as well as overall patents for theMacBook Air SuperDrive and iDVD. It seems like theUSPTO is just cleaning out Apple's old patents --most of these were filed back in 2007. Now, maybethey can set the legal patent team up on neweraccomplishments .

Tags: apple ,

error ,
http://tuaw.com/tag/ipadhttp://i.tuaw.com/tag/apple/http://i.tuaw.com/tag/error/http://i.tuaw.com/tag/error/http://i.tuaw.com/tag/error/http://i.tuaw.com/tag/apple/http://i.tuaw.com/tag/apple/http://tuaw.com/tag/ipadhttp://tuaw.com/tag/ipad


104/216

Ideal


105/216

DownloadBoilerplateHTML Once

D l d


106/216

DownloadHTML

TemplatesOnce

U


107/216

UseLightweightTransport for

Data


108/216

Download DataProspectively


109/216

App ShouldWork Without a

Connection


110/216

(with staledata)

A Sh ld


111/216

App ShouldWork WhileMaking a

Connection


112/216

(with staledata)

Applications


113/216

ApplicationsShould AvoidIncrementalRendering


114/216

Arch?


115/216

REST


116/216

HTML==

Static Asset


117/216

Updatable, ButCaching

Semantics


118/216

Semantic HTML


119/216

Native Protocol


120/216

HTTP


121/216

Rack

HTTP=


122/216

NativeRepresentation


123/216

JSON


124/216

}render :json => @article


125/216

}class PostsControllerrespond_to :json def index @articles = Article .allrespond_with @articles endend


126/216

Treat theBrowser Like an

API Client


127/216

Wait!


128/216


129/216

Poor HTTPCaching, Right?


130/216

Right!


131/216

New Tools


132/216

HTML5 Offl ineAPIs

(6.6)


133/216

ApplicationCache


134/216

Local Storage(HTML5 Web

Storage Spec)


135/216

Gives UsPower Back


136/216

We Need to beMore Explicit


137/216

App Cache


138/216

}


139/216

}CACHE MANIFESTjavascripts/jquery.jsmedia/logo-tuaw-iphone-v3.pngmedia/favicon-v9-1.png


140/216

}Content-Type:text/cache-manifest


141/216

Rack::Offl ine


142/216

}run Rack :: Offline . new {cache "stylesheets/style.css"cache "images/masthead.jpg"cache "javascripts/application.js"cache "javascripts/jquery.js"network "/"}


143/216

}manifest = Rack :: Offline . new {cache "stylesheets/style.css"cache "images/masthead.jpg"cache "javascripts/application.js"cache "javascripts/jquery.js"network "/"}match "/app.manifest" => manifest


144/216


145/216

}match "/app.manifest" => Rails :: Offline


146/216

Youll AlwaysGet One Stale

Page


147/216

}$(applicationCache).bind( "updateready" , displayReload);


148/216

Web Storage


149/216

KVS

}


150/216

}localStorage.article = "Hello!"


151/216

5MB Limit


152/216

Ask For More


153/216

Overwriting aKey WillReclaim

}


154/216

}delete localStorage[ "article47" ]

}


155/216

}for (prop in localStorage)


156/216

Basic Strategy:Sip, Dont Gulp


157/216

Rails


158/216

AdaptTechniques forBuilding APIs

}


159/216

}class Post < ActiveRecord::Basescope :recent , limit( 10 ).order( "created_at desc" ) # or def self.recent ( amount )limit(amount).order( "created_at desc" ) endend

}


160/216

}class PostsController < ApplicationControllerrespond_to :html , : json , :atom def index @posts = Post .recentrespond_with @posts endend


161/216

ActionDispatchand Rack areVery Robust


162/216

In Real Life...


163/216


164/216

Rate Limiting


165/216

ExternalSources


166/216

ProcessUpdates in

Background


167/216

Caching


168/216

Payments?


169/216

API Integration


170/216

All Things RailsHandles Well


171/216

Plus...


172/216

TraditionalWeb App w/

Same Backend


173/216

Client-SideStrategy

First Time


174/216

First TimeDownload HTML


175/216



176/216

Async: Download Application Cache



177/216


Display Loading



178/216


Display Loading

Kick off Request for JSON



179/216


Display Loading


Store JSON in localStorage



180/216


Display Loading



Populate Template



181/216


Display Loading



Populate Template

Remove Loading

Subsequent Times


182/216

Subsequent TimesHTML Retrieved from App Cache


183/216

pp



184/216

pp

Async: Check for App Cache Updates



185/216


Find Stale Resources in localStorage



186/216



Populate Template



187/216



Populate Template

Display Loading



188/216



Populate Template

Display Loading




189/216



Populate Template

Display Loading


Continue as Before

}

Download Application Cache


190/216

}

}

Download Application Cache


191/216

}manifest = Rack :: Offline . new {cache "stylesheets/style.css"cache "images/masthead.jpg"cache "javascripts/application.js"cache "javascripts/jquery.js"network "/"}match "/app.manifest" => manifest

}

Display Loading


192/216

}$( "#loading" ).show();

}

Kick Off Request for JSON


193/216

}$.getJSON( "/stories.json" , updateStories)

}



194/216

}localStorage.articles = JSON.stringify(json)


195/216

}

Populate Template


196/216

}{{each(article) articles}} ${article.title} ${article.intro} Comments {{/each}}

}

Populate Template


197/216

}var articles = template.render(json.articles)// Single DOM insertion$( "#list" ).empty().append(articles);

}


198/216

}{{#articles}} {{text}} {{intro}} Comments {{/articles}}


199/216

}

Populate Template (Mustache)


200/216

}var template = $( "#article" ).html()var articles = Mustache.to_html(template, json.articles)// Single DOM insertion$( "#list" ).empty().append(articles);

}

Remove Loading


201/216

}$( "#loading" ).hide()


202/216

Second Time

}



203/216

}var articles = localStorage.articles;

}

Populate Template


204/216

}var articles = localStorage.articles;if (articles) {updateStories(JSON. parse (articles));}

}

Display Loading


205/216

}$( "#loading" ).show()


206/216

Continue asBefore


207/216

jquery-o ffl ine

}


208/216

}$.retrieveJSON( "/stories" , function (json) { var html = template.render(json.articles); $( "#list" ).empty().append(html);});$( "#loading" ).ajaxStart( function () { $( this ).show();}).ajaxStop( function () { $( this ).hide();});

}


209/216

}$.retrieveJSON( "url" ,function (json, status, follow) { // json == JS Object // status == "success" || "cached" // follow == { cachedAt: originalTime,// retrievedAt: timeRetrieved } });


210/216

Same Processfor Secondary

Pages

Tip: Avoid


211/216

Navigation forSecondary

Pages


212/216

3d AcceleratedTransforms


213/216

CSS is a WholeOther Topic


214/216

Questions?


215/216

June 29 WebinarEvan PhoenixRubinius 1.0


216/216

OptionalEY Cloud

mobile webinar yehuda 6 10

Documents