“Native — software or data
“formats supported by a certain
“system with minimal overhead
“and additional components”
– Wiki
Slide 17
Slide 17 text
Web technologies
are native for browsers
Slide 18
Slide 18 text
Browsers
are responsible
for standards support
Slide 19
Slide 19 text
Apps boom
Do you remember dot-com boom?
Slide 20
Slide 20 text
Why do we love apps?
• Push Notifications
• Offline Mode
• Performance
!
!
• Look & Feel
• Distribution
• Background Sync
Slide 21
Slide 21 text
Look & Feel
Slide 22
Slide 22 text
famo.us
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Touch Events,
Pointer Events,
Mouse Events
Slide 25
Slide 25 text
~300ms delay
Slide 26
Slide 26 text
tap.js
Slide 27
Slide 27 text
document
.getElementById('any-element')
.addEventListener('tap', function (e) {
// All the magic happens here
});
$('#any-element').on('tap', function (e) {
// All the magic happens here
});
Slide 28
Slide 28 text
Performance
Slide 29
Slide 29 text
Heavy DOM
Slide 30
Slide 30 text
Facebook React.js Model
DOM
Virtual DOM
Redraw
on requestAnimationFrame
Changes
Changes
Changes
Event-driven scripts
that run independently
of web pages
Slide 46
Slide 46 text
• Handling resource requests
• Foundation for other standards
Slide 47
Slide 47 text
navigator.serviceWorker.register('/worker.js')
.then(function(serviceWorker) {
// To use the serviceWorker immediately,
// you might call window.location.reload()
});
Slide 48
Slide 48 text
var base = "https://videos.example.com";
var inventory = new URL("/inventory.json", base) + "";
!
!
this.addEventListener("fetch", function(e) {
var url = e.request.url;
if (url == inventory) {
e.respondWith(new Response({
statusCode: 200,
body: JSON.stringify({
videos: { /* ... */ }
})
}));
}
});
Slide 49
Slide 49 text
var base = "https://videos.example.com";
!
this.addEventListener("install", function(e) {
!
var cachedResources = new Cache(
base + "/base.css",
base + "/app.js",
base + "/logo.png"
);
!
!
e.waitUntil(cachedResources.ready());
!
!
caches.set("videos-cache", cachedResources);
});
var base = "https://videos.example.com";
var inventory = new URL("/inventory.json", base)+"";
!
this.addEventListener("fetch", function(e) {
var url = e.request.url;
if (url == inventory) {
e.respondWith(
fetch(url).then(
null,
function() {
return caches.match(inventory);
}
)
);
}
});
Slide 52
Slide 52 text
Distribution
Slide 53
Slide 53 text
Stores
• App Store
• Google Play
• BlackBerry AppWorld
• Amazon Appstore
• EPAM Mobile Appstore
Slide 54
Slide 54 text
Stores
• App Store
• Google Play
• BlackBerry AppWorld
• Amazon Appstore
• EPAM Mobile Appstore
Slide 55
Slide 55 text
Will you install
an app to buy a car?
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
Install this app
Slide 60
Slide 60 text
navigator
.mozApps
.install("path/to/manifest");
Slide 61
Slide 61 text
Notifications
Slide 62
Slide 62 text
Web Notifications
Slide 63
Slide 63 text
var Notification = window.Notification ||
window.mozNotification ||
window.webkitNotification;
!
Notification.requestPermission(
function (permission) {
// console.log(permission);
}
);
Slide 64
Slide 64 text
!
var notification = new Notification(
"SEC Spring 2014",
{
body: "I hope you enjoy the conference"
}
);
!
notification.onclick = function () {
// Something to do
};
Slide 65
Slide 65 text
• Opened website
• Client-side only
Slide 66
Slide 66 text
Safari Remote
Notifications
Slide 67
Slide 67 text
The Flow
• Request permissions
• Register the device
• Send notifications