The Web Completed

Shifting processing back to the client-side with html5/javascript

Theme/Disclaimer

This was a talk on emerging technologies. These are ideas, not fully fleshed out code, that you can imagine how a mobile/javascript event driven internet will act, rather than a server/full http page request internet looks.

Although I have used variations of these in live apps....

Who am I?

Andy Martha

catch me at andymartha.com, twitter.com/biolithic

drupal, codeigniter, phonegap, front-end mobile web

Processing Resources = Time+Money

Serving up static pages yields no server load, but who's serving static pages?

Most websites are made of sorting lists and rows from a database (Facebook to Ebay to spreadsheet-like applications)

1a - data sorted by php on server side

php script process and html page refresh

+ database transaction

= server resources

1b - data sorted by ajax on server side

- php script process and no html page refresh

+ database transaction

= server resources

1c - data sorted by javascript+html5

html elements processed by javascript

+ no database transaction

= no server resources

1c - data sorted by javascript+html5

html5 data-attributes are like "html variables" you can set up beforehand from the first server call. Each database row comes out as an html list element. Put the elements (which are objects) in an array by grabbing the selector of the html data-attribute. Sort the array elements using javascript (based on alphabetical, numerical, by date, etc...). Erase the old list from the dom and append the new array to the DOM in one call.

1c - data sorted by javascript+html5

						
// Let us pretend you are making an ajax call to get some photo
// comments/info from a database using json
// in a loop of top ten latest items.
// our sorting category (html5 variable) is called data-comments:
var oneline = "<li style='height:135px;' data-comments='" + blah.photo.comments._content + "'  data-date='" + blah.photo.dates.taken + "'data-title='" + blah.photo.title._content + "'>";
$('#listrow').append(oneline);

// in your html, print out a dummy button.
// reroute the event of the button to be onclick, run code like this...
listItems = myarray.sort(function(a,b){ return $(b).attr('data-comments') - $(a).attr('data-comments'); });
// this way, you can sort the information from the database in different ways without making calls to your server again
// there is a Jquery plugin for this, but this example will work no matter what, even if no framework is used

2 - LocalStorage

A common usage is an offline database of key-value pairs

window.localStorage.setItem("favourite team", "Chicago Bears");
					

We're not going to do that today

2 - LocalStorage

...as functionality

"Let's limit the number of times a user can submit a form per day to reduce spam on our mobile site/app"

"We need to set up user accounts in database, server sessions, cookies, hidden input fields..."

OR...

use a simple localstorage trick

2 - LocalStorage

var old = localStorage.getItem("eventcounter");
if(old === null)
{
window.localStorage.setItem("eventcounter",d);
}
else if (old.indexOf(d) == -1)
{
window.localStorage.removeItem("eventcounter");
console.log("yesterdays news");
window.localStorage.setItem("eventcounter",d);
}
else if(old == measurement)
{          
alert("You have already signed up for too many events!");
return false;
}
else
{          
old = old + d;
window.localStorage.setItem("eventcounter",old);          
}	

2 - LocalStorage

...as functionality

Here is how to sneak into a submit handler. Var d is a form of new Date();
Check to see if the person has submitted the form today on their mobile device (or multiple times/over the limit).
If not, save today's date in localstorage. If yes, match up the dates and possibly tell the user a message or block something!

2 - What's the upshot?

This should probably be used for a mobile context, but it works in newer computer browsers too.

The Android/iPad/etc...will only use submit the form that many times per day, and tomorrow the user can try again.

The server doesn't have to spend time checking for and denying requests.

3 - On/Offline web applications

1. Use the webapp when online normally
2. Use the webapp when offline normally
3. When trying to reach the server when offline, give a nice message and fail gracefully

3 - Offline...Today

1. Today, webapps feel different than native or desktop apps
2. Today, you get error messages when you don't have a connection
3. Today, offline apps don't understand how to listen and sync online very well.

3 - PhoneGap?

Actually, you don't need to use Phonegap. I like PhoneGap, but you don't need to ship your application to the Itunes store and all the different stores to get it to work offline. You can use plain ol' webpages on the internet too.

Set up you manifest file and server to accept manifest files

Not really time to explain this, but look it up.

Check for a connection in every function call

var online = window.navigator.onLine; 
if(online != true)
{
$('#submittip').append("Error: You are offline. Try again when you have a network connection.");
return false;	
}
else
{
// do some stuff!!!

If you are online, the button will work. If not, save the data in localstorage until next time? Remember to style (or use/steal) nice UX/UI error messages.

In Your Manifest file...

CACHE:
index.html
mygreatstylesheet.css
// all your files

NETWORK:
http://search.twitter.com
http://api.twitter.com
http://twitter.com
https://twitter.com
http://a0.twimg.com/
// FOR A SINGLE AJAX REQUEST TO GET TWEETS

http://ajax.googleapis.com
// FOR CDN JQUERY OR OTHERS?
// other ajax request domains you may have

3 - manifest gotchas

- You know what you need to cache offline...

- But you need to tell the app SPECIFICALLY WHAT DOMAINS you DO need to connect to if you have a good connection

- the network section is your application's "white list" of ajax connections

- super fun math problem!: How many internet domains do you think you need to white-list to post or retrieve a Facebook wall post?

- hint -- it's not only 1! (facebook.com)

Benefits of offline web app

This would reside at example.com or example.com/[hash]

- works on computers, tablets, e-readers, and phones

- no need for following store guidelines

- easy to update

- can set it up on a "hidden" folder of your website (+ robots.txt and htaccess files)

Benefits of packaged javascript as native

This would reside as a binary file to be installed using Phonegap or other.

- works on tablets, e-readers, and phones

- easier to find

- can set it up for download for Android devices, 100-device limit plug-in-play for Apple devices

How can I use these?

IOS 3-6, Android 2.2+, Blackberry newish...?

Opera, Chrome, Safari, tablets, phones, e-readers, computers

caniuse.com

demonstrated using jqMobi and also Jquery

Additional help?

I'm publishing a e-book on using jqMobi with Phonegap soon that is a walkthrough on this. If you are interested in this topic further, it will be available for all major mobile platforms before the winter.

Contact:

- biolithicapps@gmail.com

http://andymartha.com/banpsuccess

Thanks!

Brian Moschel, Justin Love, Justin Meyer, Zishan Ahmad

Enova Financial and Bitovi