These Aren't the Sites You're Looking For:
Modern Web Applications
-
Who?
Agenda
- What is a modern web application?
- How can we achieve greatness?
- Sharing our greatness with others!
What is a modern web application?
The Power Of The Cloud
+
Native & Desktop Richness
Modern Web Apps
Tight Focus
A great web application has a tight focus encouraging people to interact, engage, and accomplish something, rather than passively view content.
Provide Rich Visuals
A great web application provides rich visuals that will delight the eye without distracting the mind.
Great User Experiences
A great web application uses the latest web technologies enhance the user experience, so users can complete their work faster, easier and with confidence.IO Reader
How do we do it?
MVC Frameworks - Prevent Spaghetti Code
MVC frameworks
CSS frameworks
How do we create great user experiences?
Make it easy to try & use
Use responsive layout for different form factors
Media Queries for Style Sheets
<link rel="stylesheet" media="all" href="/static/css/base.min.css" /> <link rel="stylesheet" media="only screen and (max-width: 800px)" href="/static/css/mobile.min.css" />
Testing CSS media queries in JavaScript with window.matchMedia()
if (window.matchMedia('only screen and (max-width: 480px)').matches) {
// Asynchronously provide experience optimized for phone
} else if (window.matchMedia('only screen and (min-width: 481px) and ' +
'(max-width: 1024px)').matches) {
// Asynchronously provide experience optimized for table or smaller screen
} else {
// Asynchronously provide full screen experience
}
Allow for deep linking & single page navigation
function updateHash(push) {
if (push) {
var slideNo = curSlide + 1;
var hash = '#' + slideNo;
window.history.pushState(slideNo, 'Slide ' + slideNo, hash);
}
};
window.addEventListener('popstate', handlePopState, false);
function handlePopState(event) {
if (event.state != null) {
curSlide = event.state - 1;
updateSlides(true);
}
};
Make uploading files easier
<input type="file" id="dir-select" webkitdirectory />
document.querySelector('#dir-select').onchange = function(e) {
var out = [];
for (var i = 0, f; f = e.target.files[i]; ++i) {
out.push(f.webkitRelativePath);
}
document.querySelector('output'),textContent = out.join('/n');
};
Use desktop file handling paradigms
<a href="src/star.mp3" draggable="true" class="dragout" data-downloadurl="MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE"> download </a>
var files = document.querySelectorAll('.dragout');
for (var i = 0, file; file = files[i]; ++i) {
file.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl);
}, false);
}
Drag each of these files onto your desktop:
3D Glasses [PDF]
Star [MP3]
( this feature is only available in Google Chrome )
Use Web Intents
Use desktop file handling paradigms
document.querySelector('#dropzone').
addEventListener('drop', function(e) {
var reader = new FileReader();
reader.onload = function(evt) {
document.querySelector('img').src = evt.target.result;
};
reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);
Drop in images from your desktop
Save data to the local file system
window.requestFileSystem(TEMPORARY, 1048576, initFs, fsError);
function saveFile(arrayBuffer, filename, type, callback) {
fs.root.getFile(filename, {create: true}, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
var bb = new BlobBuilder();
bb.append(arrayBuffer);
fileWriter.write(bb.getBlob(type));
}, fsError);
callback(fileEntry);
}, fsError);
}
Browse File System
Make it work offline
Application Cache to enable the application
<html manifest="cache.appcache">
Store data locally
window.requestFileSystem(PERSISTENT, 1048576, initFs, fsError);
var idbRequest = window.indexedDB.open('Database Name');
localStorage["key"] = "value";
Track online and offline states
window.addEventListener('online', function(e) {
// Re-sync data with server.
}, false);
Persist users data
var elems = document.querySelectorAll("textarea, input");
var len = elems.length;
for (var i = 0; i < len; i++) {
var elem = elems[i];
elem.addEventListener("input", function(item) {
localStorage[formName + "-" + item.srcElement.id] =
item.srcElement.value;
var debug = document.getElementById("data-persistence-debug");
debug.innerHTML = "Last auto-saved at: " + new Date();
}, false);
}
Make entering information easy & understandable
<input type="text" required />
<input type="email" value="some@email.com" />
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>
<input type="range" min="0" max="50" value="10" />
<input type="search" results="10" placeholder="Search..." />
<input type="tel" placeholder="(555) 555-5555"
pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />
<input type="color" placeholder="e.g. #bbbbbb" />
<input type="number" step="1" min="-5" max="10" value="0" />
Let the user tell you what they want
<input type="text" x-webkit-speech />
function startSearch(event) {
if (event.target.results.length > 1) {
var second = event.target.results[1].utterance;
document.getElementById("second_best").value = second;
}
event.target.form.submit();
}
Keep your user informed
function showNotifications(pic, title, text) {
if (window.webkitNotifications.checkPermission() == 0) {
var notificationWindow =
window.webkitNotifications.createNotification(pic, title, text);
notificationWindow.show();
// close notification automatically after a timeout
setTimeout(function(popup) {
popup.cancel();
}, 6000, notificationWindow);
}
}
Treat performance like a feature
Use Application Cache to provide local caching
<html manifest="cache.appcache">
Store data locally
window.requestFileSystem(PERSISTENT, 1048576, initFs, fsError);
var idbRequest = window.indexedDB.open('Database Name');
localStorage["key"] = "value";
Use CSS3 transitions, transforms and animations
transition: all 1s ease-in-out;
Use WebWorkers for non-blocking JavaScript
var worker = new Worker('myworker.js');
More great tips at http://bit.ly/rizNVE
How about older browsers?
Chrome Frame
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Other helpful libraries
Step 1. Build web app
Step 2. ???????
Step 3. Profit!
Step 2. ???????
Step 3. Profit!
Available in 41 Languages
Play 23% more and spend 147% more
100% more engagement
Chrome Web Store manifest file
{ "name": "My Chrome Web Store",
"description": "Discover great apps, games, extensions and...",
"version": "1.0",
"icons": {
"16": "16.png",
"128": "128.png"
},
"app": {
"urls": ["*://chrome.google.com/webstore"],
"launch": {
"web_url": "https://chrome.google.com/webstore"
}
},
"permissions": ["unlimitedStorage", "notifications"]
}
5%
In App Payments
- No per transaction fees
- No monthly fees
- No sign up fees
- PCI compliance
One last thing...
Aim for a great experience, everything else will follow.
chromestatus.com
HTML5Rocks.com
Resources
Developer Guides
- Chrome Web Store Developer Guides http://bit.ly/r3K8bm
- Tutorial http://bit.ly/pYwzkY
- Background - Extending your app's life http://bit.ly/pc5HiT
- Using the Notifications API http://bit.ly/qNfeeN
- OpenID & Identifying Your User http://bit.ly/oqsAfI
Best Practices
- What makes for a great web app? http://bit.ly/nJWZQA
- Anatomy of a Great Chrome Web Store Listing http://bit.ly/iUdFLb
