Embed Size (px)
DESCRIPTION
Reasons and techniques for creating offline apps
Citation preview
LIBERATING WEB APPSFROM THE SERVER
ALEX GYOSHEVFront-end Engineer at Telerik Kendo UI
@agyoshev
AGENDARationaleOffline storageCaching appsBackend as a serviceQuestions
WHY SEPARATE APPS FROM SERVERS?
REASONS TO SEPARATEWORKFLOW team members can work on different functionality
ARCHITECTURE concerns are separated
PERFORMANCE cache is faster than any connection
ACCESSIBILITY a person with no connection is still a person
ECONOMICS your app can compete with native ones
REASONS TO SEPARATEEASIER TESTING
posts.create({ title: "My little pony", body: "Friendship is magic" }, function success() { // posted });
// test mock backend.Posts.create = function(data, done) { ok(data.title); ok(data.body); done(); };
REASONS TO SEPARATEEASIER TESTING
posts.create({ title: "My little pony", body: "Friendship is magic" }, function success() { // posted });
// actual implementation backend.Posts.create = function(data, done) { $.post({ url: "/posts/create", data: data, success: done }); };
REASON TO SEAPARATE #1WE LIVE IN A DISCONNECTED WORLD.
Reception when on the road
Roaming charges
DEMOCASHWISE: TRACKING EXPENSES
App: cashwise.herokuapp.com
Source: github.com/gyoshev/cashwise
Kendo UI Mobile + Telerik Backend Services
Git tags for each part of the talk
OFFLINE STORAGE
OFFLINE STORAGEBROWSER SUPPORT
OFFLINE STORAGEABSTRACTIONS
Use the same API across all devices
IndexedDB-WebSQL adapterMozilla LocalForage
CACHING APPS
CACHING APPSAPPCACHE
CACHE MANIFEST /logo.png /app.css http://code.jquery.com/jquery-1.11.0.min.js /app.js
<!doctype html> <html manifest="cache.appcache"> <head> <title>My App</title> <link rel="stylesheet" href="app.css"> </head> <body> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="app.js"></script> </body> </html>
CACHING APPSAPPCACHE: HARD TO WORK WITH
app is always loaded from appcachefiles are refreshed when manifest changes
other &
are your friends!get used to refreshing twicego home, AppCache, you're drunk
many caveatschrome://appcache-internals/about:cache
CACHING APPSAPPCACHE: WORKS REALLY GOOD
Previous version of cashwiseworks fine 1 year after
server burned down
CACHING APPSNODE.JS DEVELOPMENT WORKFLOW
Generate manifest on server startUse / / to reload app when files changesupervisor -e 'html,js,css' -- web.js
supervisor forever nodemon
CACHING APPSSERVICEWORKER (W3C DRAFT)
github.com/slightlyoff/ServiceWorker
From declarative to imperative
From pages to apps
CACHING APPSSERVICEWORKER (W3C DRAFT)
// index.html navigator.serviceWorker.register("/worker.js");
// worker.js this.version = 1;
this.addEventListener("fetch", function(e) { if (e.request.url == "http://example.com/data.json") { e.respondWith(new Response({ statusCode: 200, body: JSON.stringify({ results: { /* ... */ } }) })); } });
BACKEND AS A SERVICE (BAAS)
BACKEND AS A SERVICE (BAAS)WHAT DOES IT LOOK LIKE?
// actual implementation backend.Posts.create = function(data, done) { $.post({ url: "/posts/create", data: data, success: done }); };
posts.create({ title: "My little pony", body: "Friendship is magic" }, function success() { // posted });
BACKEND AS A SERVICE (BAAS)PROS AND CONS
Pro: Outsource scalabilityPro: Get features out of the box(social, auth, push notifications)Pro: Reduce own codebasePro: Overall faster developmentCon: Dependency.Con: Remote. Dependency.
BACKEND AS A SERVICE (BAAS)#UXPROTIP
Be sure to notify your users about sync status
var updateConnectionStatus = function() { var status = navigator.onLine ? 'online' : 'offline';
document.getElementById('status').className = status; };
window.addEventListener('online', updateConnectionStatus); window.addEventListener('offline', updateConnectionStatus);
QUESTIONS? / @AGYOSHEV [email protected]
Kendo UI Mobile + Basic Backend Servicesfor free at
telerik.com/platform
