woensdag 16 oktober 13 HTML5 wizardry met appcache, localstorage en geolocation

HTML5 wizardry met appcache, localstorage en geolocation

woensdag 16 oktober 13

Mante

@mantebridts

Laurens

@peeterslaurens




localstorage woensdag 16 oktober 13


4KB 1994 IE2 (ja, 2) client of server


4KB 1994 IE2 (ja, 2) client of server


elke http request => vertragend

unencrypted



wij willen:


wij willen: veel opslag online en offline geen extra server-stuff opslag van lange duur flexibiliteit (via javascript?!)


wij willen: veel opslag online en offline geen extra server-stuff opslag van lange duur flexibiliteit (via javascript?!)


de oplossing:


de oplossing:


de oplossing:

?

?

?


localStorage sessionStorage Web SQL indexedDB


HTML5 STORAGE

Web SQL indexedDB


Web SQL indexedDB


Web SQL


Web SQL


Syntax


Syntax var mijnDatabase = window.openDatabase("mijnDatabase", "1.0", "Dit is mijn database", 1024*1024); mijnDatabase.transaction(function(tx) { tx.executeSql("Hier plaats je een standaard sql statement met variabelen ? en ?", [‘x’, ‘y’]); });


Syntax var mijnDatabase = window.openDatabase("mijnDatabase", "1.0", "Dit is mijn database", 1024*1024); mijnDatabase.transaction(function(tx) { tx.executeSql("Hier plaats je een standaard sql statement met variabelen ? en ?", [‘x’, ‘y’]); });


IndexedDB var request = indexedDB.open("library"); request.onupgradeneeded = function() { // The database did not previously exist, so create object stores and indexes. var db = request.result; var store = db.createObjectStore("books", {keyPath: "isbn"}); var titleIndex = store.createIndex("by_title", "title", {unique: true}); var authorIndex = store.createIndex("by_author", "author"); // Populate with initial data. store.put({title: "Quarry Memories", author: "Fred", isbn: 123456}); store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567}); store.put({title: "Bedrock Nights", author: "Barney", isbn: 345678}); }; request.onsuccess = function() { db = request.result; };


IndexedDB var request = indexedDB.open("library"); request.onupgradeneeded = function() { // The database did not previously exist, so create object stores and indexes. var db = request.result; var store = db.createObjectStore("books", {keyPath: "isbn"}); var titleIndex = store.createIndex("by_title", "title", {unique: true}); var authorIndex = store.createIndex("by_author", "author"); // Populate with initial data. store.put({title: "Quarry Memories", author: "Fred", isbn: 123456}); store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567}); store.put({title: "Bedrock Nights", author: "Barney", isbn: 345678}); }; request.onsuccess = function() { db = request.result; };


IndexedDB VS webSQL


IndexedDB VS webSQL


sessionStorage & localStorage


sessionStorage & localStorage


sessionStorage & localStorage syntax ==

simpele key-value paren

wel bepaalde limieten

enkel strings

2.5MB (chrome), 5MB (firefox),...


per “origin” (geservede pagina)

Syntax localStorage.setItem(‘key’, ‘value’); var mijnWaarde = localStorage.getItem(‘key’);

of localStorage[‘key’] = ‘value’; var mijnWaarde = localStorage[‘key’];


maar wat met objecten? var mijnObject = {name: ‘Mante’, level: ‘Ninja’}

localStorage.setItem(‘objectje’, JSON.stringify(mijnObject));

var resultaat = localStorage.getItem(‘objectje’); resultaat = JSON.parse(resultaat);



geolocation







“We willen in onze apps zorgen voor een betere UX”


“We willen in onze apps zorgen voor een betere UX” sensoren van de devices gebruiken


“We willen in onze apps zorgen voor een betere UX” sensoren van de devices gebruiken

tijd


beweging

bluetooth, ...

LOCATIE! Joepie!

Syntax?

navigator.geolocation.getCurrentPosition(function(p){ console.log(p); });


Hoe zit het in elkaar?


Hoe zit het in elkaar?

locatie op basis van IP, MAC, wifi-location, gps, gsm-masten,...


Security

Werkt enkel nadat de USER expliciet toestemming heeft gegeven, elke keer opnieuw, per page. (w3c specs)




application cache


application cache


application cache


application cache


application cache


application cache + offline browsing + snelheid + minder server load


syntax CACHE MANIFEST ./icn/144x144.png ./css/style.css ./css/normalize-2.1.1.css ./data-fallback/groenzone.json ./js/app/router/applicationRouter.js ./js/app/view/templates/home.tmpl ./js/app/view/templates/noResult.tmpl ./js/app/view/templates/compiled/detail.js ./js/app/application.js ./js/main.js./js/lib/backbone/backbone-1.0.0.min.js ./js/lib/handlebars/handlebars-runtime-1.0.0.3.js ./js/lib/require/require-2.1.5.min.js ./img/history.svg ./img/logo_d01.svg ./img/tpark_logo.svg ./index.html #8e5d7a869f835fd11b2c97148d18a16c NETWORK: *


syntax

cache.manifest-bestand: CACHE MANIFEST index.html css/style.css img/logo.png


syntax CACHE MANIFEST index.html css/style.css img/logo.png # hierboven lijst je al je te cachen files op # Comments worden voorafgegaan door een hekje! NETWORK api.twitter.com/* # je kan gebruik maken van wildcards # in het network stuk vermeld je alle files/urls die niet mogen # gecached worden / die de app niet in de cache mag gaan zoeken. FALLBACK index.php offlinewarning.html #version: 1.2 (24/04/2013)


syntax


syntax

extensie mag je zelf kiezen maar... mime-type: text/cache-manifest


syntax

applicationCache.status

applicationCache.update() applicationCache.swapCache()





http://district01.be/tpark






AMD Asynchronous Module Definitions => structuur


AMD Asynchronous Module Definitions => structuur



<script>

<script> <script>

<script>

<script> <script>

<script>

<script> <script> <script>

<script>


<script>


één js-file, included in the index.html :)


één js-file, included in the index.html :) => configuration of all js-files


district01.be/tpark/start.zip


Live walkthrough “Require.js” + coding in backbone :)



Live walkthrough “Require.js” + coding in backbone :)

Download start.zip op



district01.be/tpark/backboneistof.zip


Q&A


Resources http://district01.be/tpark/start.zip http://district01.be/tpark/final.zip http://backbonejs.org/ http://requirejs.org/

web-guru’s:

http://www.district01.be/ Paul Irish ‫@ ‏‬paul_irish

Jonathan Stark ‫@ ‏‬jonathanstark

http://opendata.antwerpen.be/

John Resig ‫@‏‬jeresig

Thomas Fuchs ‫@ ‏‬thomasfuchs

https://www.sublimetext.com/

Wilson Miner ‫@ ‏‬wilsonminer

bruce lawson ‫@ ‏‬brucel

David Kaneda ‫@ ‏‬DavidKaneda

Jeremy Ashkenas ‫@ ‏‬jashkenas

Dave Balmer ‫@ ‏‬balmer

BrendanEich ‫@ ‏‬BrendanEich

twitter: @district01

http://handlebarsjs.com


Extra extra, read all about it!

GRUNT


woensdag 16 oktober 13 HTML5 wizardry met appcache, localstorage en geolocation

Recommend Documents