Webdesignérův průvodce po HTML5: Databáze v prohlížečích

V předminulém dílu našeho Průvodce jsme si ukazovali Web Storage, které je vlastně jednoduchou key-value databází. Kromě ukládání dat nenabízí nic navíc, a to leckdy nemusí stačit. Proto rodina HTML5 představuje i poněkud komplexnější datové úložiště, které lze už směle nazvat databází. A přesně v dobrých tradicích webových technologií: Nabídneme rovnou dvě databáze, navzájem nekompatibilní, to aby si mohl vývojář vybrat, ve kterých prohlížečích jeho aplikace nebude fungovat.

A teď vážněji: Specifikace databází pro prohlížeč jsou opravdu dvě. První, nazvaná Web Database, vychází z logického předpokladu: Většina dnešních prohlížečů si ukládá data do SQLite nebo podobné databáze, takže umožnit přístup k této databázi přes nějaké API je logické. Druhá specifikace, nazvaná IndexedDB, vychází z neméně logického předpokladu: SQL je pro klienty s JavaScriptem kanón na vrabce, mnohem užitečnější bude nabídnout objektové úložiště s možností indexace dat.

Pokud byste se chtěli přiklonit k jedné nebo druhé straně podle svých sympatií k tomu či onomu prohlížeči či podle stavu implementace, prosím, zde jsou podklady: Web Database podporují Chrome, Safari a Opera. FF ani IE je nepodporují a ani v nejbližších verzích podporovat nehodlají, namísto toho prosazují IndexedDB. Podle jednoho z vývojářů Firefoxu (viz) je Web Database neelegantní, protože jen předává SQL příkazy coby řetězce a přebírá vrácená data, přitom ale nijak nerespektuje vlastnosti JavaScriptu (situace je podobná heterogennímu zapisování SQL příkazů do objektového kódu např. v PHP – pozn.aut.) Problém s IndexedDB je ten, že je implementován zatím jen v betaverzi Firefoxu 4.

Pravděpodobné je, že budoucí vývoj odsune Web Database, kde i specifikace přiznává, že je ve slepé uličce, na vedlejší kolej a přednost dostane IndexedDB. Problém je, že v této oblasti nelze být prorokem: mnohokrát se již stalo, že se nakonec prosadil ten největší outsider na úkor těch technicky vyspělejších řešení – leckdy jen proto, že „už byl“ a vývojáři si na něj zvykli.

Pokud máme být upřímní: Vývojáři si mohou vybrat, jestli použijí Web Database, která se podle všeho nebude moc rozvíjet a zůstane proprietární technologií, ale už funguje, nebo jestli použijí IndexedDB, která má sice podporu odborné veřejnosti, ale zatím nemá použitelnou implementaci. A ačkoli v jiných dílech radíme začít používat nové technologie již nyní, zde opravdu nelze s čistým svědomím doporučit ani jednu z těchto technologií k běžnému použití. Na místě je spíš vyčkat a zatím používat Web Storage.

Web Database

Popišme si nejprve Web Database. Tentokrát nepůjdeme do velkých podrobností a v ukázkách se zaměříme spíš na náznaky práce s touto databází, než na funkční příklady.

Web Database je, jak již bylo řečeno, rozhraní k databázi SQLite. Pokud jste s touto databází již pracovali, dokážete si představit, co vás čeká. A opravdu – kód nepřekvapí (volně dle HTML5 Doctor):

//Připojení k databázi
var db = window.openDatabase('mydb', '1.0', 'Database', 2 * 1024 * 1024);
//otevřeme transakci, vytvoříme tabulku a naplníme ji daty
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "HTML5")');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (2, "rulez")');
 
  var id = 3;
  var value = "!!!";
 
  tx.executeSql('INSERT INTO foo (id, text) VALUES (?, ?)', [id, value]);
});
//v další transakci vypíšeme data
db.transaction(function (tx) { 
  tx.executeSql('SELECT * FROM foo', [], function (tx, results) {
    //callback funkce, která přebírá výsledky
    var len = results.rows.length, i;
    for (i = 0; i < len; i++) {
      alert(results.rows.item(i).text);
    }
  }); 
});

Příklad ukazuje základní kroky při práci s Web Database. Nejprve je otevřeno spojení funkcí openDatabase(). Ta má čtyři povinné parametry a jeden volitelný. Povinné parametry jsou: Název databáze, verze databáze, popis a velikost v bajtech. Pátý nepovinný parametr je callback funkce, která je zavolána v případě, že databáze s tímto číslem verze neexistuje.

Verzování je totiž u WebDatabase nástrojem, který řeší změny struktury. V nové verzi webové aplikace může vývojář zjistit číslo verze („revize“) databáze, a pokud není aktuální, může provést potřebné změny a přepnout na aktuální verzi pomocí changeVersion. Podle dostupných informací ale tento postup nefunguje ve všech prohlížečích spolehlivě (v Chrome a Opeře ano, v Safari ne). Možných řešení je několik – buď udržovat „stavovou databázi“, nebo požadovat „dostupnou verzi“ (stačí nastavit číslo verze rovné prázdnému řetězci) a z vlastnosti version zjistit požadované označení.

Pokud budeme požadovat např. „verzi 3.0“, ale s daným jménem bude dostupná pouze verze „2.0“, dojde k chybě. Pokud nebude žádná databáze toho jména k dispozici, bude vytvořena nová. Je možné používat např. takovýto postup:

//otevřeme dostupnou verzi databáze, nebo vytvoříme novou prázdnou
var db = openDatabase('mydb', '', 'Database', 2 * 1024 * 1024);
//pokud verze db neodpovídá aktuální, aktualizujeme ji.
if (db.version != '1.0') {
  db.changeVersion(db.version, '1.0', function(tx) {
    // nastavíme potřebné
  tx.executeSql('CREATE TABLE foo (id unique, text)');
  tx.executeSql('CREATE TABLE bla (id INTEGER PRIMARY KEY, pocet INTEGER, text)');
  });
}
else {
  // Databáze je už nastavená a aktuální
  // .....
}

K vykonání SQL příkazů slouží metoda executeSql, která má jako první argument SQL příkaz, jako druhý volitelný má pole parametrů (pokud je SQL parametrizované), a jako třetí volitelný má callback funkci pro zpracování vrácených výsledků. Metodu executeSql nabízí objekt transakce, k němuž se dostaneme v callback funkci, předané metodě transaction()  – viz výše uvedený kód:

db.transaction(function (tx) { ... zde je transakce dostupná jako objekt tx ... });

Existují různé druhy transakcí, k databázi lze přistupovat asynchronně i synchronně, ale zájemce o tyto speciality bych odkázal na specifikaci Web Database.

Uveďme si ještě ve stručnosti důvody, proč je Web Database, i podle své specifikace, ve slepé uličce. Naleznete je přehledně sesumírované v tomto článku. Kromě zásadního důvodu, že specifikace neurčuje SQL a pouze se odkazuje na „implementaci SQLite“, je to především to, že implementace SQL není jednotná a že u dvou velkých tvůrců prohlížečů, totiž Mozilly a Microsoftu, narazil na zásadní odpor (a to i přesto, že např. Firefox interně SQLite používá). Výhradami Mozilly proti Web Database se zaobírá i výše odkázaný článek.

IndexedDB

Kritizovat Web Database je jedna věc, nabídnout alternativu druhá. Má Mozilla alternativu databáze vhodné pro webového klienta? Má, a jmenuje se IndexedDB – dříve známá jako WebSimpleDB. V současné době je její podpora pouze v betaverzích Firefoxu 4. Podle informací prý „Microsoft vidí v IndexedDB budoucnost“ a rovněž Google zvažuje implementaci IndexedDB v Chrome.

Co tedy Mozilla vyčítá Web Database a co podle ní IndexedDB nabízí? Jak jsme si už řekli, není IndexedDB klasickou relační databází, ale v podstatě implementací BTree – tedy navenek objektovým úložištěm, v němž lze snadno vyhledávat a které lze procházet. Jde tedy o úroveň níž než Web Database, a namísto jazyka pro vyhledávání dat v indexovaném úložišti nabízí přímý přístup k tomuto úložišti. Podle zastánců IndexedDB odpovídá přímé ukládání JavaScriptových objektů a úložiště coby objekt duchu jazyka lépe než předávání řetězců se SQL příkazy.

Příklad práce s IndexedDB a srovnání s WebDatabase nabízí An early walk-through of IndexedDB na webu MDC. Zájemce o ukázky odkážu tedy tam.

IndexedDB nabízí pro práci s daty objektové úložiště, které implementuje mnohé vlastnosti, známé ze SQL. Jsou zde „databáze“, v nich „záznamy“, a každý záznam má sadu „polí“. Změny probíhají v „transakcích“. Můžete si vybrat určitou část záznamů podle nějakého kritéria a procházet ji pomocí „kurzoru“. Rozdíl je ten, že toto úložiště nenabízí žádný dotazovací jazyk typu SQL. Nemůžete jednoduše položit dotaz „ SELECT * FROM articles WHERE published=1“, musíte si vytvořit kurzor pro tabulku articles, projít záznamy o článcích, vyfiltrovat ty, které nejsou publikované, a zbytek předat funkci, která jej zpracuje.

S IndexedDB je práce podobnější např. práci se seznamy, a vývojáři Mozilly mají pravdu v tom, že je konzistentnější se stylem programování v JavaScriptu a koncepčně zapadá spíš než SQL dotazy a jejich zpracovávání.

Závěr

S databázemi v prohlížečích je to v současné době neveselé. Je tu SQL WebDatabase, podporovaná minoritními prohlížeči, ale její budoucnost je nejistá a stavět na ní aplikaci, už jen kvůli marginální podpoře, nelze. Je tu IndexedDB, ale ta je ve stádiu technologického dema. Možná bude za rok použitelná, v současné době ale rovněž použitelná prakticky není.

Pokud tedy potřebujete ukládat data v prohlížeči, budete si muset vystačit s Web Storage, které je ale naštěstí poměrně rozšířené. Na lepší si budeme muset počkat.

Čtení k tématu:

• Specifikace WebDatabase 
• Specifikace IndexedDB
• Introducing Web SQL Databases
• Web Database demonstration
• persistence.js, "Asynchronní JavaScript ORM” postavený nad Web Database a Gears
• Beyond HTML5: Database APIs and the Road to IndexedDB
• Firefox 4: An early walk-through of IndexedDB
• Dive into HTML5 – Local Storage
• Ukázka práce s IndexedDB
• IndexedDB na Google Code
• Web SQL database demo