Vývoj komplexních JavaScriptových aplikací

Vývoj komplexních JavaScriptových aplikací

• Webová interaktivní prezentace
• "?" zobrazí krátkou nápovědu
• Tisk jako obvykle
• Pro pokračování stiskněte mezerník
• ondrej.zara@firma.seznam.cz

Bojový plán

1. Udržování stavu aplikace
2. HTML5 File API
3. JavaScript a FastRPC
4. Oběd!

Udržování stavu aplikace

Problém

• Moderní webová aplikace (mapy.cz, mixer.cz, email.cz, …) je tvořena jen jednou stránkou
• Veškerá interakce je realizována JavaScriptem
• Nedochází ke změně adresy URL ⇒ nelze používat Back & Forward
• Co se stane při obnovení stránky? Co když pošlu adresu po ICQ kamarádovi?

Udržování stavu aplikace

Řešení

• Měnit v URL část za mřížkou (hash)
• Změna hashe JavaScriptem provede záznam do historie prohlížeče
• Při změně hashe nenastane HTTP požadavek
• Při navigaci historií vzniká událost hashchange

Udržování stavu aplikace

Příklad

<a href="#obsah">Obsah</a>
<a href="#kapitola1">Kapitola 1</a>
<a href="#kapitola2">Kapitola 2</a>
Nyní zobrazujeme <span id="current">...</span>

/* když se změní hash, uživatelem nebo skriptem */
window.onhashchange = function() {
	$("current").innerHTML = location.hash.substring(1);
}
location.hash = "obsah"; /* explicitní změna stavu */

HTML5 File API

Problém

• Nahrávání souboru/ů z počítače uživatele
• <input type="file" />, Adobe Flash
• Více souborů naráz, informace o souborech, sledování průběhu nahrávání, drag'n'drop

HTML5 File API

Řešení

• File API
  • Výběr více souborů naráz
  • JavaScript má k dispozici vybrané soubory, resp. jejich metadata
  • To samé při přetažení souboru do prohlížeče (událost drop)
• XMLHttpRequest 2
  • Předání souboru metodě send()
  • Událost progress během uploadu

HTML5 File API

Příklad

input.onchange = function() {
	var file = input.files[0];
	var data = ["První soubor:"];
	for (var p in file) { data.push(p + ": " + file[p]); }
	$("info").innerHTML = data.join("\n");
	
	var xhr = new XMLHttpRequest();
	xhr.open("post", "/upload", true);
	xhr.send(file);
}

JavaScript a FastRPC

Problém

• V jakém formátu přenášet data mezi prohlížečem a serverem?
• Kterým směrem data cestují?
• Jakým způsobem se na serveru formátuje HTTP odpověď?

JavaScript a FastRPC

Řešení

• Binární serializační formát FastRPC je v Seznamu jako doma
• Backend má data zpravidla ve FastRPC už připravena, nemusí je formátovat
• Přenos binárních dat XMLHttpRequestem je stále problematický
• Pro přenos z/do webového prohlížeče se FastRPC data zakódují v Base64

JavaScript a FastRPC

Příklad

var args = [
	555,
	null,
	{key: "value"},
	new Date()
];
var frpc = JAK.FRPC.serializeCall("test", args);
$("info").innerHTML += frpc; /* posloupnost bajtů */

var parsed = JAK.FRPC.parse(frpc);
$("info").innerHTML += "\n" + JSON.stringify(parsed);

Prostor pro otázky