Tvorba bohatých internetových aplikací v programovacím jazyce JavaScript

Mendelova univerzita v Brně Provozně ekonomická fakulta

Tvorba bohatých internetových aplikací v programovacím jazyce JavaScript Bakalářská práce

Vedoucí práce: Ing. Jiří Lýsek

Pavel Potáček

Brno 2013

Stránka se zadáním práce

Na tomto místě bych chtěl poděkovat vedoucímu práce Ing. Jiřímu Lýskovi za odborné rady a cenné připomínky. Děkuji také mojí rodině a nejbližším za jejich podporu a trpělivost.

Prohlašuji, že jsem tuto bakalářskou práci vypracoval samostatně s použitím literatury a zdrojů uvedených v seznamu literatury.

V Brně dne 20. května 2013

................................................................

5

Abstract Potáček, P. Implementation of Rich Internet Applications in JavaScript Programming Language. Bachelor thesis. Brno: Mendel University in Brno, 2013. This thesis deals with the issue of Rich Internet Applications, primarily with their creation in JavaScript Programming Language. Thesis analyses technologies needed for creating such applications which also includes a selection of suitable JavaScript framework. Then with the aid of this framework final sample application is built. This application uses capabilities of modern JavaScript technologies and publicly accessible web application interfaces of Twitter and Google Maps. Keywords Rich Internet applications, JavaScript, Twitter, Google Maps, framework

Abstrakt Potáček, P. Tvorba bohatých internetových aplikací v programovacím jazyce JavaScript. Bakalářská práce. Brno: Mendelova univerzita v Brně, 2013. Tato práce se zabývá problematikou bohatých internetových aplikací, především pak jejich tvorbou v programovacím jazyce JavaScript. Práce analyzuje technologie potřebné pro vývoj těchto aplikací, což zahrnuje také výběr vhodného JavaScriptového frameworku. Pomocí něj je pak vytvořena výsledná ukázková aplikace. Ta využívá možnosti moderních JavaScriptových technologií a veřejně dostupných webových aplikačních rozhraní Twitteru a Google Maps. Klíčová slova Bohaté internetové aplikace, JavaScript, Twitter, Google Maps, framework

6

OBSAH

Obsah 1 Úvod a cíl práce 1.1 Úvod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 Cíl práce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Teoretická část 2.1 JavaScript . . . . . . . . . . . . . 2.1.1 Historie . . . . . . . . . . 2.1.2 ECMAScript . . . . . . . 2.1.3 Edice ECMAScript . . . . 2.1.4 Document Object Model . 2.1.5 Browser Object Model . . 2.1.6 Specifika jazyka . . . . . . 2.1.7 Podobně zaměřené jazyky 2.2 AJAX . . . . . . . . . . . . . . . 2.2.1 XMLHttpRequest . . . . 2.2.2 Bezpečnost . . . . . . . . 2.2.3 XML . . . . . . . . . . . . 2.2.4 JSON . . . . . . . . . . . 2.3 HTML a CSS . . . . . . . . . . . 2.3.1 HTML5 . . . . . . . . . . 2.3.2 CSS3 . . . . . . . . . . . 2.4 Rich Internet applications . . . . 2.4.1 RIA v jazyce JavaScript . 2.4.2 Srovnání frameworků . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

8 8 8 9 9 9 9 10 11 12 13 15 17 18 20 20 21 22 23 24 26 27 28

3 Metodika 31 3.1 Klientská část . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 3.2 Serverová část . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 4 Praktická část 4.1 Použité technologie . . . . . 4.2 Vývojové prostředí . . . . . 4.3 Implementace . . . . . . . . 4.3.1 Modulární přístup . 4.3.2 Struktura aplikace . 4.3.3 Autentizace . . . . . 4.3.4 Uživatelské rozhraní 4.3.5 Twitter API . . . . . 4.3.6 Google Maps API . 4.4 Shrnutí . . . . . . . . . . . 5 Závěr

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

33 33 33 34 34 35 37 37 38 39 40 41

OBSAH

7

6 Literatura

42

Přílohy

45

A Protokol OAuth

46

B Ukázka aplikace

47

1

ÚVOD A CÍL PRÁCE

1 1.1

8

Úvod a cíl práce Úvod

Vývoj internetových aplikací se posouvá neustále kupředu a hledají se nové cesty, jak toho dosáhnout. Rozšiřujícím se trendem v této oblasti se staly bohaté internetové aplikace (Rich Internet applications – RIA). Díky nim lze na webu dosáhnout větší míry interaktivity pomocí rozsáhlejší nabídky ovládacích prvků a vyvolat tak v uživateli podobný pocit, jako kdyby pracoval s klasickou desktopovou aplikací. Hlavní snahou RIA je nabídnout rychlejší odezvu na jednotlivé akce a působit tak mnohem plynuleji a přirozeněji bez neustálého načítání celých stránek. Samotné RIA představují poměrně obsáhlou množinu technologií, pomocí kterých mohou být realizovány. Tyto technologie se dají rozdělit na dvě skupiny: Jedna využívá ke své činnosti AJAX, zatímco druhá potřebuje pro svůj běh zásuvný modul (plugin) v prohlížeči. Tato práce se zabývá první skupinou postavenou na technologii AJAX, která je úzce spjata s programovacím jazykem JavaScript. S tímto typem internetových aplikací, které v hojné míře využívají JavaScript, se dá přijít do styku prakticky denně, využívají je především moderní služby zaměřené např. na multimediální obsah, zpracování mapových podkladů nebo weboví klienti pro přístup k elektronické poště. Právě díky podpoře AJAXu se stal JavaScript v posledních letech tolik populární a v dnešní době na něm staví nepřeberné množství různých rámcových softwarových systémů (frameworků). Z tohoto pohledu se tedy jedná o velmi perspektivní programovací jazyk.

1.2

Cíl práce

Cílem této práce je získat informace o programovacím jazyce JavaScript a využít je k tvorbě aplikace, která bude propojovat API Twitteru a Google Maps. Ta bude využívat některý z JavaScriptových frameworků, který bude vybrán na základě srovnání s ostatními. Aplikace bude zpracovávat data z výše uvedených webových služeb, což umožní vytvořit internetovou aplikaci bez použití vlastního databázového systému. Dále budou použity technologie HTML5 a CSS3 pro tvorbu uživatelského rozhraní, jelikož se stávají standardní součástí moderních prohlížečů a usnadňují tvorbu RIA.

2

TEORETICKÁ ČÁST

2

9

Teoretická část

2.1

JavaScript

Jedná se o objektově orientovaný programovací jazyk, který je interpretován ve webovém prohlížeči. Nejčastěji se využívá jako skriptovací jazyk na straně klienta, ale díky platformě Node.js jej lze použít i pro implementaci serverové části. Mimo to se lze s JavaScriptem setkat i jinde. Používá se při tvorbě desktopových widgetů, aplikací pro Modern UI ve Windows 8 nebo doplňků prohlížeče. Může být také využit jako skriptovací jazyk v různých programech, např.: nástroje Adobe Creative Suite (Photoshop, Illustrator), OpenOffice.org. Podporu JavaScriptu nabízí i Adobe Reader v souborech PDF. JavaScript jako celek se skládá ze tří částí, které budou dále postupně popsány: • ECMAScript • Document Object Model (DOM) • Browser Object Model (BOM) 2.1.1

Historie

V roce 1992 firma Nombas vyvinula jazyk ScriptEase, jenž byl dodáván v produktu CEnvi. Ten se dal vložit do webových stránek, což znamenalo první použití skriptovacího jazyka na straně klienta. Na to navázal roku 1995 Brendan Eich, když pro společnost Netscape začal tvořit skriptovací jazyk, který se jmenoval LiveScript. Krátce před vydáním se však změnil název na JavaScript kvůli tehdejší popularitě jazyka Java. Z tohoto pohledu šlo o povedený krok a zanedlouho se stal JavaScript velmi oblíbený. Po vydání prohlížeče Netscape Navigator 3 přišel se svým vlastním prohlížečem Internet Explorer 3 také Microsoft. Ten obsahoval taktéž JavaScript, ale kvůli možným licenčním sporům byl raději pojmenován jako JScript. V jednom okamžiku se tak vyskytovaly tři různé verze JavaScriptu. Padlo tedy rozhodnutí, že jazyk musí být standardizován. Proto byl organizací ECMA1 vydán standard ECMA-262, který definoval nový skriptovací jazyk ECMAScript. Ten se stal základem pro různé implementace JavaScriptu. (Zakas, 2009, s. 29) 2.1.2

ECMAScript

Tento jazyk definuje pouze základ, ze kterého mohou vycházet pokročilejší skriptovací jazyky. Ve standardu ECMA-262 nejsou obsaženy žádné metody pro vstup externích dat nebo výstup výpočtů. Náleží tedy samotnému hostitelskému prostředí, aby poskytovalo dodatečnou funkcionalitu pro vzájemnou komunikaci. Hostitelským prostředím se kromě webového prohlížeče rozumí také např. Adobe Flash, Flex, AIR 1

European Computer Manufacturers Association – sdružení evropských výrobců počítačů

2.1

JavaScript

10

nebo Microsoft Silverlight. Ve standardu jsou popsány tyto části jazyka (Ecma International, 2011): • objekty • typy • vyhrazená slova • klíčová slova • příkazy • operátory • syntaxe 2.1.3

Edice ECMAScript

Jednotlivé verze se označují jako edice. Aktuální edice standardu ECMA-262 vyšla v červnu 2011 a nese označení Edition 5.1. První edice byla téměř totožná jako JavaScript 1.1, ovšem obsahovala pár specifikací, kvůli kterým nakonec JavaScript 1.1 a poté i 1.2 nevyhovoval tomuto standardu. První byla podpora kódování znaků Unicode a druhá specifikace vyžadovala nezávislost objektů na platformě. Ve druhé edici došlo pouze k několika menším úpravám, nebyly přidány žádné nové prvky ani modifikovány stávající. Třetí edice byla v tomto směru odlišná než předchozí. Došlo k významné aktualizaci standardu, což přispělo k daleko větší použitelnosti ECMAScriptu. V nové verzi byly vylepšeny především oblasti práce s řetězci, definice chyb a výstupu číselných hodnot. Dále byla přidána podpora regulárních výrazů, nové řídicí prvky a zpracování výjimek. (Zakas, 2009, s. 32) Čtvrtá edice nebyla vydána kvůli neshodám v chystaných zásadních změnách, které by zapříčinily zpětnou nekompatibilitu se starší verzí standardu. To by vedlo k nefunkčnosti mnoha stávajících webových stránek a aplikací. Společnosti, které nesouhlasily (Google, Microsoft, Yahoo!), začaly odděleně pracovat na vlastní edici 3.1. Po mnoha komplikacích nakonec došlo ke kompromisu a obě strany se dohodly na dalším postupu. Vzešla z toho edice 5, jejímž hlavním přínosem bylo zavedení striktního režimu. Jeho použití je sice nepovinné, ale umožňuje psát bezpečnější kód. Navíc byla ještě přidána podpora pro JSON. Povýšení na edici 5.1 znamenalo pouze srovnání s mezinárodním standardem ISO/IEC 16262:2011. Aktuálně je ve vývoji verze 6, která nese kódové označení Harmony. Některé nové vlastnosti už jsou implementovány v posledních verzích prohlížečů Mozilla Firefox a Google Chrome, byť jen experimentálně. Osmani (2012) uvádí přehled některých vlastností verze 6:

2.1

11

JavaScript

• Moduly: znovupoužitelné bloky kódu, které jsou definovány klíčovým slovem module. Mělo by tak jít o náhradu knihovny RequireJS, která tento problém s načítáním souborů a modulů řeší. • Sledování objektů: pomocí funkce observe() bude možné sledovat daný objekt a upozornit tak aplikaci např. při vytvoření nebo změně jeho vlastností. Tato technika se již využívá v některých JavaScriptových frameworcích jako AngularJS nebo Ember. • Výchozí hodnoty parametrů: umožní používání nepovinných parametrů. • Obory platnosti na úrovni bloků: pomocí klíčového slova let je možné definovat proměnnou pouze na úrovni daného bloku. Podobně funguje i nepřepisovatelná konstanta definovaná klíčovým slovem const. Vykreslovací jádra Vykreslovací jádro je součást webového prohlížeče, které se stará o správné zobrazení webové stránky. Každé vykreslovací jádro používá i své vlastní JavaScriptové jádro, pomocí kterého se zpracovává a spouští JavaScriptový kód. Přehled nejpoužívanějších vykreslovacích jader a jejich podporu jazyka ECMAScript ukazuje tab. 1. Z té vyplývá, že poslední verze všech předních webových prohlížečů mají plnou podporu 5. edice. Tab. 1: Podpora ECMAScript ve webových prohlížečích

Vykreslovací jádro Gecko Presto Trident Webkit Webkit

2.1.4

JavaScriptové jádro IonMonkey Carakan Chakra Nitro V8

Podpora ECMAScript Mozilla Firefox 18 Edice 5 Opera 12.14 Edice 5 Internet Explorer 10 Edice 5 Safari 6 Edice 5 Google Chrome 25 Edice 5 Prohlížeč

Document Object Model

Document Object Model (DOM) představuje aplikační programové rozhraní (API) pro dokumenty HTML2 a XML3 . Pomocí DOM lze celou stránku reprezentovat hierarchií uzlů. Aplikace nebo skripty tak mohou k jednotlivým uzlům přistupovat a dynamicky měnit jejich obsah, strukturu nebo styly. Stránky, které tyto techniky využívají, se označují jako Dynamic HTML (DHTML). 2 3

HyperText Markup Language Extensible Markup Language

2.1

JavaScript

12

Některé společnosti měly při vývoji DHTML odlišné představy, bylo proto nutné zachovat na webu platformovou nezávislost. Asociace W3C4 tak začala pracovat na standardu pro DOM. Objektový model dokumentu se aktuálně skládá ze tří úrovní (4. úroveň je ve vývoji), které byly postupem času přidávány (Mozilla, 2012): • DOM Level 1: tato úroveň je rozdělena na dvě části: DOM Core a DOM HTML. První část poskytuje základní rozhraní pro reprezentaci libovolného strukturovaného dokumentu včetně XML dokumentu. Druhá část doplňuje DOM Core o objekty a metody specifické pro práci s HTML dokumenty. • DOM Level 2: původní části z první úrovně byly rozšířeny. Dále byly přidány nové čtyři části. DOM Views umožňuje dynamicky měnit obsah dokumentu. DOM Events přidává rozhraní pro zpracování událostí, např. akci kliknutí myší. DOM Style poskytuje možnost změnit dynamicky kaskádové styly (CSS). DOM Traversal and Range umožňuje procházení stromu dokumentu. • DOM Level 3: rozšiřuje funkcionalitu DOM Core z předchozích dvou úrovní. Dále přidává podporu pro procházení stromu dokumentu pomocí XPath, načítání a ukládání dokumentu (DOM Load and Save) a jeho validaci (Dom Validation). Následně ještě vylepšuje DOM Events o zpracování událostí klávesnice. Podpora DOM v prohlížečích Všechny dnešní prohlížeče mají implementovánu plnou podporu DOM Level 1. Co se týče druhé a třetí úrovně, zde je již situace jiná. Největší podporu nabízí Mozilla Firefox, ostatní jsou na tom o něco hůře. V každém prohlížeči jsou dostupné jiné funkce, navíc některé mohou mít mírně odlišné chování. Za tento stav může především nejasná specifikace těchto funkcí, proto je musí organizace W3C přepracovávat. Na řešení tohoto problému je možné použít JavaScriptovou knihovnu, která zaručuje kompatibilitu funkcí v různých prohlížečích díky vlastnímu API. Jedná se např. o knihovny jQuery nebo Prototype. (Mozilla, 2013a) 2.1.5

Browser Object Model

Browser Object Model (BOM) je součástí implementace JavaScriptu, která se stará o práci s oknem a rámci prohlížeče. Také se jedná o jedinou část, která není standardizována. Každý výrobce prohlížeče si tak může nadefinovat své vlastní funkce. Přesto se některé prvky dají považovat za jakýsi neoficiální standard, jsou tedy vždy dostupné. Jedná se například o objekty window a navigator. (Zakas, 2009, s. 38) 4

World Wide Web Consortium

2.1

JavaScript

2.1.6

13

Specifika jazyka

JavaScript má sice syntaxi podobnou Javě, nicméně má hodně společného spíše s jazykem LISP. To může být pro mnohé poněkud matoucí. Na jednu stranu se jedná o mocný programovací jazyk, ale na stranu druhou spoustu věcí řeší svým specifickým způsobem. Za všechno lze jmenovat odlišný způsob vytváření objektů a následné řešení dědičnosti, obory platnosti nebo uzávěry. Pro programátora zvyklého z jiného jazyka tak mohou být zvláště začátky docela obtížné. Mnohdy za to může i nejednotná implementace DOM v prohlížečích, se kterým JavaScript často manipuluje. To přidává navíc další starosti. I přes tyto nedostatky a úskalí však nabízí rozsáhlé možnosti, bez kterých by se dnes již moderní webové aplikace neobešly. (Crockford, 2008, s. 3) Datové typy V jazyce JavaScript se lze setkat s pěti primitivními datovými typy a jedním složeným (Zakas, 2009, s. 55) • Undefined: speciální datový typ, obsahuje pouze jednu hodnotu, což je undefined. Tato hodnota je přiřazena proměnné, která nebyla inicializována. • Null: tento datový typ má opět jen jednu hodnotu null. Využívá se k inicializaci proměnné, která nemá žádnou hodnotu. Pokud tuto proměnnou předáme operátoru typeof, vrátí řetězec object. Znamená to tedy, že obsahuje prázdný ukazatel na objekt. Jelikož v JavaScriptu záleží na velikosti písmen, Null nebo NULL nemají stejný význam jako null. • Boolean: obsahuje logické hodnoty true a false. • Number: reprezentuje celočíselné i desetinné hodnoty. Pokud se nezdaří operace, která vrací číslo (např. dělení nulou), místo chyby je vrácena speciální hodnota NaN (Not a Number). • String: zapisuje se jako posloupnost znaků, které jsou ohraničené uvozovkami nebo apostrofem, oba zápisy jsou totožné. Řetězcový ekvivalent jiné hodnoty lze získat pomocí metody toString(). • Object: jedná se o složený datový typ, který se vytváří konstrukcí new Object(). Z typu Object jsou odvozeny všechny další objekty, které přebírají jeho vlastnosti a metody. Objektově orientované programování V JavaScriptu se objektově orientované programování (OOP) liší od jiných jazyků, které pomocí tříd vytvářejí objekty s určitými vlastnostmi a metodami. Zde se třídy známé např. z C++ nebo Javy nevyužívají. Podle standardu ECMA-262 je objekt definován jako kolekce vlastností, které mohou obsahovat jiné objekty, primitivní

2.1

JavaScript

14

hodnoty nebo funkce. Zjednodušeně si to lze představit jako hashovací tabulku, kde jsou seskupeny dvojice jméno a hodnota. (Ecma International, 2011) Co se týče vytváření objektů, v JavaScriptu je k dispozici více možností, jak toho dosáhnout. Nejjednodušší způsob znamená vytvoření instance typu Object, k níž se následně přidají vlastnosti nebo metody. Zakas (2009, s. 178) dále uvádí několik návrhových vzorů, které se snaží problematiku vytváření objektů řešit: • Vzor továrna: tento návrhový vzor se zakládá na vytvoření funkce, která se stará o tvorbu daného objektu. Není však možné určit typ objektu. • Vzor konstruktor: definováním vlastního konstruktoru (funkce volaná s operátorem new) se následně vytvoří nový objekt. Takto vytvořené objekty využívají vlastnost constructor, díky níž lze objekt identifikovat. Nevýhodou tohoto přístupu je, že pro každou instanci jsou zvlášť vytvořeny metody, protože funkce v JavaScriptu jsou také objekty. • Vzor prototyp: vzor využívá vlastnosti prototype, kterou má každá funkce po svém vytvoření. Jedná se o objekt obsahující vlastnosti a metody, které sdílejí všechny instance daného objektu. Nejprve se tedy vytvoří prázdný konstruktor pomocí function Osoba() {}, následně se přiřazují potřebné vlastnosti nebo metody přímo prototypu. Přidání vlastnosti jméno se docílí konstrukcí Osoba.prototype.jmeno = "Jan". Tato metoda má však také své nevýhody. Pokud je v prototypu definováno pole řetězců, tak přidáním dalšího řetězce do pole v jedné instanci se projeví ve všech dalších instancích daného typu. Nejvýhodnější je proto využít kombinaci vzoru konstruktor a prototyp. Pomocí vlastního konstruktoru se definují vlastnosti objektu a skrze prototyp jsou definovány jeho metody a sdílené vlastnosti. Dalším důležitým prvkem v OOP je dědičnost. Jelikož v JavaScriptu nejsou klasické třídy, dědí se přímo od jiného objektu. To se realizuje prostřednictvím řetězení prototypů (prototype chaining) (Zakas, 2009, s. 198). Vytvoří se např. konstruktor function Zvire() {} a function Pes() {}, poté se do vlastnosti Pes.prototype přiřadí nová instance typu Zvire: Pes.prototype = new Zvire(). Původní prototyp byl tedy nahrazen novým objektem Zvire a ukazuje nyní na prototyp právě tohoto objektu. Tím se dosáhlo onoho řetězení, díky kterému je možné využívat všechny vlastnosti a metody existující v nadtypu. Dochází zde ovšem k problému, kdy zděděné vlastnosti a metody jsou sdíleny všemi instancemi objektu. Proto se řetězení konstruktorů nevyužívá samostatně, ale v kombinaci s kradením konstruktoru, což bývá souhrnně označováno jako kombinovaná dědičnost. Tento způsob spočívá v tom, že se v konstruktoru podtypu pomocí metody call() zavolá konstruktor nadtypu. To umožní každé instanci mít své vlastní vlastnosti.

2.1

JavaScript

15

Anonymní funkce Jedná se o funkce, které nemají žádné jméno. Bývají označovány také jako lambda funkce. Anonymní funkce je vytvořena např. pomocí funkčního výrazu a následně je přiřazena proměnné: var mojeFunkce = function() { // tělo funkce } Díky tomu je zjednodušen zápis funkce, která je používána jen na jednom místě. Zjednoduší se tak deklarace a volání do jednoho kroku. (Emerson, 2008) S anonymními funkcemi se často nesprávně zaměňují uzávěry (closures). Ty se vytvářejí v okamžiku definování anonymních funkcí uvnitř jiných funkcí. Díky tomu je možné přistupovat k proměnným uvnitř rodičovské funkce, protože je vytvořena záloha oboru platnosti (kontextu) rodičovské funkce. Bez toho by takovou funkci nebylo možné zavolat, jelikož by v době volání potřebný kontext funkce neexistoval. Důležitý je také fakt, že uzávěr nedostane stav a hodnoty proměnných v době vytvoření rodičovské funkce, ale obdrží proměnné ve stavu, v jakém se nacházejí až po skončení jejího běhu. Kvůli tomu, že si uzávěry udržují v paměti obory platnosti navíc, mohou způsobovat vyšší paměťovou náročnost. (Staníček, 2009) Použití uzávěrů s sebou nese také problém s klíčovým slovem this. To je svázáno s konkrétním objektem na základě kontextu, ve kterém se provádí funkce. Uvnitř globální funkce je hodnotou this objekt window, a protože jsou anonymní funkce považovány za globální, obsahem this je vždy tento objekt. Pokud je tedy potřeba odkazovat se v anonymní funkci pomocí this na rodičovský obor platnosti, je nutné si předtím vytvořit lokální proměnnou (obvykle se používá identifikátor that nebo self) a do ní si hodnotu this uložit: var that = this. Poté se v anonymní funkci použije právě that namísto this, kde již ke změně nedochází. 2.1.7

Podobně zaměřené jazyky

Existují i další jazyky, které umožňují tvorbu RIA. Ty ovšem nejsou součástí prohlížečů, jako je tomu v případě JavaScriptu. Ke spuštění aplikací vytvořených v těchto jazycích je proto třeba stáhnutí speciálního zásuvného modulu (pluginu) prohlížeče. To sice může být oproti JavaScriptu jistá nevýhoda, nicméně tato akce bývá většinou jednorázová a pak lze spouštět tyto aplikace na libovolné webové stránce. ActionScript Jedná se o objektově orientovaný programovací jazyk vyvinutý společností Macromedia (nyní Adobe). Patří do skupiny jazyků vycházejících z jazyku ECMAScript a aktuálně se nachází ve verzi 3.0. Jeho hlavním účelem je vytváření aplikací pro platformu Adobe Flash, která je nejrozšířenějším představitelem platforem využívající zásuvný modul prohlížeče. Podle statistik (Web Browser Plugin Market Share, 2013) podporuje zobrazení Flashe téměř 96% všech počítačů (viz obr. 1).

2.1

JavaScript

16

Pro spuštění obsahu vytvořeného na platformě Adobe Flash je zapotřebí Adobe Flash Player, který je dostupný bezplatně na mnoha platformách, aktuálně ve verzi 11.7. Může běžet jako doplněk v internetovém prohlížeči, na mobilním zařízení, případně přímo v prostředí operačního systému. Hlavní účel Adobe Flash Playeru je spouštět obsah souborů ve formátu SWF (Small Web Format). Nicméně situace na poli mobilních platforem donutila Adobe přestat vyvíjet nové verze mobilního Flash Playeru, hlavně kvůli náročnosti a nestabilitě. Oficiálně tedy není dostupný na Apple iOS, Windows Phone a nově i na Androidu od verze 4.1. (Měchura, 2012) Konkrétně pro tvorbu RIA založených na platformě Adobe Flash existuje open source aplikační framework Apache Flex (původně Adobe Flex), který obsahuje sadu grafických komponent, usnadňuje práci s daty a komunikaci se serverem. Díky tomu je vývoj značně urychlen. Navíc umožňuje použití libovolného editoru pro psaní zdrojových kódu v ActionScriptu. Z výsledné aplikace se dá poté vytvořit soubor SWF pro běh ve Flash Playeru, případně soubor ve formátu AIR pro spuštění v běhovém prostředí Adobe AIR. Tím je zaručena možnost nasazení aplikace jak na desktopových systémech, tak na mobilních platformách. (About Apache Flex, 2013) Java Java je programovací jazyk vyvinutý firmou Sun Microsystems v roce 1995. Jedná se o jazyk objektově orientovaný, jehož velkou výhodou je nezávislost na platformě a přenositelnost. Zdrojový kód je nejprve zkompilován do tzv. bajtového kódu (bytecode) a poté je pomocí JVM (Java Virtual Machine) interpretován, nebo v novějších verzích je za běhu zkompilován do strojového kódu (Just in time kompilace). Díky tomu je možné spustit program napsaný v Javě všude tam, kde je k dispozici JVM. Programy v Javě lze rozdělit na dva druhy. První jsou klasické samostatné Java aplikace, které se ještě dají rozdělit na konzolové a okenní aplikace s grafickým uživatelským rozhraním. Druhé jsou programy, které jsou přímo součástí webové stránky a nazývají se Java applety. (Horton, 2005, s. 33–38) Vložení Java appletu do webové stránky je možné provést pomocí elementu applet (starší způsob, není podporován v HTML5), případně skrze element object, který je uveden ve specifikaci HTML5 a doporučován jako náhrada za element applet. K samotnému spuštění Java appletu je pak nutné mít v internetovém prohlížeči nainstalovaný zásuvný modul, který umožní spuštění JVM v prostředí prohlížeče. Také na platformě Java je podporována tvorba RIA, konkrétně se jedná o knihovnu JavaFX. Ta je od verze 2.2 součástí standardní instalace Javy. Jako výhodu uvádí rychlejší tvorbu podnikových aplikací s vylepšenými možnostmi v rámci uživatelského rozhraní. Výsledná aplikace může poté běžet buď na desktopu, případně jako Java applet na webu. (Oracle, 2013) C# Tento programovací jazyk vyvinula firma Microsoft speciálně pro svoji platformu .NET Framework. Vychází z jazyků C/C++, nicméně je velmi podobný Javě. Je

2.2

AJAX

17

objektově orientovaný a stejně jako Java ke svému běhu využívá virtuální stroj, který se nazývá CLR (Common Language Runtime). Výhodou .NET Frameworku je jeho přítomnost v základní instalaci systému Windows od verze Vista. Platforma .NET Framework není orientovaná pouze na C#, díky CLI (Common Language Infrastructure) je jazykově nezávislá, lze tak využít kterýkoliv podporovaný jazyk (např. VB.NET, J#). Zdrojový kód v daném jazyce je zkompilován do kódu CIL (Common Intermediate Language), který je poté převeden do strojového kódu pomocí virtuálního stroje. (Běhálek, 2007) Jako reakci na velmi rozšířený Adobe Flash přišel Microsoft s vlastní technologií nazvanou Silverlight. Ta je postavena na platformě .NET Framework a ke svému běhu vyžaduje nainstalovaný zásuvný modul v prohlížeči. Primárním cílem této technologie je snadné vytváření RIA, případně jiných interaktivních a multimediálních prezentací na webu. Silverlight je dostupný na všech hlavních operačních systémech a také na všech nejpoužívanějších prohlížečích. Statistiky (Web Browser Plugin Market Share, 2013) ukazují, že Silverlight má ve svém prohlížeči nainstalováno zhruba 68% návštěvníků webu (viz obr. 1).

Obr. 1: Zastoupení pluginů v prohlížečích (Web Browser Plugin Market Share, 2013)

2.2

AJAX

Asynchronous JavaScript and XML (AJAX) je technika, která kombinuje dohromady několik technologií. Především jde o HTML, DOM, JavaScript, XML a XMLHttpRequest. V dnešní době je ovšem místo XML využíván spíše JSON, který nabízí výhodu v podobě menšího datového objemu, navíc je přímo součástí JavaScriptu. Někdy je proto možné se setkat i s názvem AJAJ (Asynchronous JavaScript and

2.2

AJAX

18

JSON), kde je použití JSON vyjádřeno již přímo v názvu. Díky AJAX se mohou provádět serverové požadavky na dodatečná data bez nutnosti znovu obnovení celé stránky (viz obr. 2). Webová aplikace se tak stává s uživatelského pohledu rychlejší a lépe reaguje na jednotlivé požadavky. Z tohoto důvodu se AJAX využívá pro tvorbu RIA v JavaScriptu. Hlavní princip AJAX je využití objektu XMLHttpRequest (XHR). Ještě předtím ale existovaly podobné techniky aktualizace obsahu. Ty byly postavené převážně na různých nestandardních zásazích, které byly uplatňovány pomocí skrytých elementů frame a iframe. Až objekt XHR přinesl rozhraní, díky kterému lze asynchronně načítat data ze serveru.

Obr. 2: Rozdíl fungování AJAX aplikace oproti klasickému modelu (Zakas, McPeak, Fawcett, 2006, s. 5)

2.2.1

XMLHttpRequest

Internet Explorer 5 od Microsoftu přinesl základní podporu XML a spolu s ní i ActiveX knihovnu MSXML (Zakas, McPeak, Fawcett, 2006, s. 37). Součástí této knihovny byl právě objekt XMLHttp. Ten umožňoval vývojářům zasílat HTTP požadavky z kterékoliv části aplikace a jako odpověď byla očekávána data ve formátu XML. Mozilla ovšem převzala funkcionalitu XMLHttp pro použití ve svém prohlížeči Firefox a tak vznikl nativní JavaScriptový objekt XMLHttpRequest (XHR). Ten poté implementovaly prohlížeče Safari a Opera, a nakonec jej přidal i Microsoft ve verzi Internet Explorer 7.

2.2

AJAX

19

Vytvoření objektu XHR Na vytvoření objektu XHR je specifické hlavně to, zda je potřebná podpora prohlížečů starších než Internet Explorer 7. Jelikož pro ně tento objekt není k dispozici, je nutné využít objekt ActiveXObject. K tomu je třeba ještě zajistit správnou verzi knihovny MSXML postupným vytvářením těchto objektů, dokud se nenalezne nejnovější dostupná verze. Ve všech ostatních novějších prohlížečích je vytvoření nového objektu XHR velmi snadné: var xhr = new XMLHttpRequest(). Práce s objektem XHR Po vytvoření objektu XHR je třeba jej inicializovat, to se provede pomocí metody open(). Ta přijímá tři argumenty (Zakas, McPeak, Fawcett, 2006, s. 39): • Typ požadavku: řetězec značící, jaký požadavek se má odeslat. Typicky se jedná o GET nebo POST. • Adresa URL na kterou se má požadavek odeslat. Může být zadána jak relativní, tak i absolutní. • Logická hodnota signalizující, jestli se má požadavek odeslat asynchronně. Pokud je nastavena na false, tak se další JavaScriptový kód nevykoná, dokud nedorazí ze serveru odpověď. Dále je nutné definovat zpracování události onreadystatechange. Objekt XHR nabízí vlastnost readyState, která se mění na základě průběhu požadavku a přijaté odpovědi. Celkově může obsahovat pět přípustných hodnot: • 0 (Neinicializováno): objekt byl vytvořen, ale nebyla zavolána metoda open(). • 1 (Otevřeno): byla zavolána metoda open(), ale nebyl odeslán požadavek metodou send(). • 2 (Odesláno): požadavek byl odeslán. • 3 (Přijímá se): část odpovědi už byla přijata. • 4 (Hotovo): všechna data byla přijata a spojení ukončeno. Pokud se změní hodnota readyState, tak je spuštěna událost readystatechange. Poté dochází ke kontrole hodnoty vlastnosti readyState, kde se obvykle kontroluje hodnota 4, zda již byla přijata všechna data. Posledním krokem je odeslání požadavku metodou send(). Ta má jeden povinný argument, kterým jsou data odesílaná v těle požadavku. Jestliže požadavek nepotřebuje uvést tyto data (obvykle v případě požadavku GET), je nutné předat alespoň hodnotu null.

2.2

AJAX

2.2.2

20

Bezpečnost

S technologií AJAX je spojena i řada bezpečnostních problémů, které je třeba si uvědomit. K jakékoliv adrese, ke které přistupuje objekt XHR, lze také přistoupit pomocí prohlížeče nebo serveru. Je proto nutné, aby při každém požadavku probíhala na serveru kontrola, zda má žadatel oprávnění přistoupit k požadovaným datům. Jinak by mohl tyto data získat kdokoliv, což by bylo zvláště u citlivých dat velmi nebezpečné. Takový typ útoku na webovou aplikaci, kdy může neautorizovaný systém přistoupit k nějakému zdroji, je nazýván CSRF (Cross-site request forgery neboli padělání požadavku mezi weby) (Pejša, 2008). Při tomto útoku je nutné znát danou aplikaci. Oběť navštíví stránku útočníka, kde je připraven formulář s akcí. Ten se v okamžiku návštěvy odešle do systému, ke kterému je oběť přihlášena a provede určitou akci. V tomto případě nepomůže ani ověření pomocí session, protože je útok proveden z prohlížeče oběti. Neúčinná je i změna požadavku GET na POST, jelikož to lze lehce obejít. Obranou proti takovému útoku je vyžadování vygenerovaného tokenu, který se odesílá s každým požadavkem. Z bezpečnostních důvodů je použití objektu XHR omezeno pouze na vlastní doménu. Ve výchozím stavu tedy nelze využít tzv. křížení domén. Nicméně pro další vývoj bylo třeba toto omezení zrušit, alespoň v rámci určitých řešení. Konsorcium W3C proto vytvořilo specifikaci pro CORS (Cross origin resource sharing) (Mozilla, 2013c), kde uvádí, jakým způsobem se má řídit přístup pro požadavky napříč doménami. Vzdálené zdroje tedy musí uvést pomocí hlavičky Access-Control-AllowOrigin, ze které domény je možné k danému zdroji přistupovat. Zde je možné povolit přístup pouze z určité domény, případně pomocí hvězdičky povolit přístup všem žadatelům. Tento způsob podporují všechny nejnovější webové prohlížeče, včetně Internet Explorer 10. 2.2.3

XML

XML je značkovací jazyk vyvinutý a standardizovaný konsorciem W3C, který vzešel ze značkovacího metajazyku SGML. Na rozdíl od jiných jazyků, XML nemá žádné předdefinované značky, je potřeba si definovat vlastní. XML byl navržen pro přenos dat mezi aplikacemi na internetu, případně pro jejich ukládání. Vychází z něj také jiné jazyky: XHTML, SVG, RSS nebo RDF. Správný XML dokument musí být tzv. well formed“ a validní. To znamená, ” že musí vyhovovat XML syntaxi a daným pravidlům specifikovaným ve schématu. Většina dnešních moderních prohlížečů je schopná nevyhovující XML dokument identifikovat. Podle specifikace standardu XML 1.0 musí well formed“ dokument ” splňovat několik pravidel (W3Schools, 2013). Např.: • Dokument obsahuje pouze jeden root element. • Elementy musí mít ukončovací tag.

2.2

AJAX

21

• Tagy jsou case sensitive. • Elementy musí být správně zanořené. • Hodnoty atributů musí být v uvozovkách. Validní XML dokument by měl také splňovat požadavky definované v jeho schématu. Schéma popisuje strukturu XML dokumentu a jeho obsah. Nejstarším jazykem pro zápis schémat je DTD (Document Type Definition). Ten definuje strukturu dokumentu pomocí seznamu přípustných elementů a jejich atributů. Jeho možnosti jsou nicméně omezené, nepodporuje jmenné prostory, navíc DTD není platný XML dokument. Nástupcem DTD se stal jazyk XSD (XML Schema Definition). Využívá systém datových typů a umožňuje lépe definovat pravidla pro logickou strukturu dokumentu. XSD už je na rozdíl od DTD platným XML dokumentem. Ve webových aplikacích se XML data získávají, zpracovávají a zobrazují pomocí technologie AJAX. Bylo by velmi obtížné pracovat se strukturou XML dokumentu jako řetězcem, je proto nutné ho rozdělit na objekty pomocí parsování. Pro tyto účely obsahují prohlížeče XML DOM, který je velmi podobný HTML DOM. Pokud je odeslán na server AJAX požadavek a je očekávána odpověď ve formátu XML dat, použije se k jejich získání vlastnost objektu XHR responseXML. Data jsou poté k dispozici jako XML DOM objekt, který lze procházet a pomocí selektorů jako getElementsByTagName() nebo getAtrribute() získat potřebné údaje (Stepp, Miller, Kirst, 2012). 2.2.4

JSON

JSON (JavaScript Object Notation) je odlehčený datový formát založený na JavaScriptu, který navrhl zkušený a uznávaný programátor Douglas Crockford. Jedná se o textový formát velmi snadno čitelný člověkem, ale i lehce strojově zpracovatelný. JSON je využíván v mnoha AJAX aplikacích namísto XML hlavně kvůli své menší datové náročnosti a jednoduššímu zápisu, proto je i rychleji zpracovatelný. Přestože je součástí JavaScriptu, není s ním nutně svázán. Může být použit pro výměnu dat mezi programy v libovolném moderním programovacím jazyce. Zapisuje se pomocí literálů polí nebo objektových literálů (Crockford, 2008, s. 136). Literály polí jsou zapisovány pomocí hranatých závorek, uvnitř kterých jsou JavaScriptové hodnoty oddělené čárkou: var jmena = ["Jan", "Petr", "Pavel"]; Objektové literály slouží k ukládání informací ve tvaru dvojice jméno a hodnota. Definují se pomocí složených závorek, do kterých je možné umístit libovolný počet výše zmíněných dvojic. Dvojice je definována řetězcem, poté následuje dvojtečka a za ní hodnota. Každá taková dvojice je ukončena čárkou, výjimku tvoří pouze poslední, za kterou se čárka nepíše. Příklad:

2.3

HTML a CSS

22

var auto = {"barva": "modra", "dvere": 4}; Předchozí kód vytvoří objekt, který má vlastnosti barva a dvere. Přistupovat k těmto vlastnostem je možné klasicky přes tečkovou notaci. Ačkoliv je možné v JavaScriptu vytvořit objekt pomocí konstruktoru Object, není tento způsob validní v JSON. Oproti XML je zpracování JSON dat mnohem jednodušší, jelikož v moderních prohlížečích (v Internet Exploreru od verze 8) jsou k dispozici metody JSON.parse() a JSON.stringify(). Metoda JSON.parse() převádí řetězec ve formátu JSON dat a vrací jej jako JavaScriptový objekt. JSON.stringify() má funkci přesně opačnou, převádí daný objekt na řetězec JSON dat (Stepp, Miller, Kirst, 2012). Z hlediska bezpečnosti stojí za zmínku použití funkce eval() pro zpracování dat ve formátu JSON. Obecně se toto řešení nedoporučuje, protože tato funkce může spustit předaný škodlivý kód v kontextu dané stránky, díky čemuž obejde bezpečnostní mechanismy. Díky tomu se otevírá možnost útokům XSS (Cross site scripting neboli skriptování mezi weby). Crockford (2008, s. 122) dokonce označuje funkci eval() jako zlo“ a ve velkém množství případů ji považuje za známku špat” ného programování.

2.3

HTML a CSS

Každá webová stránka musí mít definované určité uspořádání, aby se její obsah dal správně zobrazit v internetovém prohlížeči. K tomuto účelu slouží značkovací jazyk HTML, který popisuje strukturu a sémantiku dokumentu. HTML vychází z metajazyka SGML a používá již předdefinovanou sadu elementů. Každý element může obsahovat jeden nebo více tagů (značek), které popisují obsah mezi ně uzavřený. Tagy se skládají z názvu uzavřeného mezi ostré závorky, mohou být zapsány jak velkými, tak malými písmeny, nicméně doporučována je spíše druhá varianta. Tagy mohou být párové nebo nepárové. Párové tagy však musí být uzavřeny ukončovacím tagem obsahujícím lomítko. Tag může také obsahovat doplňující informace v podobě atributů. (Mozilla, 2013b) Od vzniku jazyka HTML až po současnost bylo vydáno hned několik verzí, z nichž nejdéle zatím vydržela verze HTML 4.01. Byla uvedena v roce 1999 a prakticky se dá používat i dnes, jelikož se stále jedná o oficiální standard. Nicméně od roku 2006 je ve vývoji nový standard HTML5, na němž spolupracují konsorcium W3C a WHATWG5 . Momentálně ještě není standard HTML5 dokončen, je však považován za tzv. living standard“, což znamená, že se neustále vyvíjí a nikdy nebude ” dokončen. Na to reagují i vývojáři webových prohlížečů, kteří se snaží implementovat nové prvky z HTML5 do svých programů. Ačkoliv tedy není standard HTML5 ještě plně podporován, je už teď doporučován jako aktuální verze. Za zmínku stojí i jazyk XHTML, který vychází z HTML 4.01 a využívá syntaxi XML. Stručně řečeno se jedná o jazyk mnohem striktnější na zápis. 5

Web Hypertext Application Technology Working Group

2.3

HTML a CSS

23

V prvních verzích se jazyk HTML staral i to, jak bude daný dokument vypadat po stránce vzhledu. Pomocí speciálních elementů a atributů se dala nastavit barva a typ písma, pozadí, zarovnání atd. To se však změnilo od 4. verze HTML, kde byl tento způsob označen jako zastaralý a dále nepodporovaný (deprecated). Jako náhrada byla do HTML přidána podpora kaskádových stylů (CSS). CSS řeší jeden důležitý problém, a to je oddělení definice vzhledu HTML dokumentu od jeho struktury. Styly je možné zapisovat do samostatného souboru, díky tomu stačí úprava na jediném místě pro změnu vzhledu daných elementů. To má za následek velkou časovou úsporu. Samotné použití je poměrně jednoduché. Pomocí selektoru se určí element, na který se má daný styl aplikovat a poté jsou definovány jednotlivé vlastnosti a jejich hodnoty. CSS se aktuálně dělí na 3 úrovně, které byly postupně vyvíjeny a přidávaly dodatečnou funkcionalitu. Třetí úroveň (CSS3) je stále ještě ve fázi vývoje, ale spousta jejích vlastností už je přítomná v moderních prohlížečích. 2.3.1

HTML5

Jedná se nejnovější verzi jazyka HTML, která je neustále ve vývoji. S pomocí HTML5 by mělo dojít k omezení potřeby použití zásuvných modulů jako je Flash nebo Silverlight, podrobnější zápis by měl nahradit skriptování a vše by mělo být nezávislé na zařízení. HTML5 přidává nové prvky, které podporují a značně usnadňují tvorbu interaktivních webových aplikací. Zde je přehled těch nejzajímavějších novinek (Pilgrim, 2013): • Canvas: tento nový element slouží jako plátno ke kreslení grafiky. Pomocí JavaScriptu a canvas API lze nakreslit libovolné tvary, čáry nebo barevné přechody. • Audio a Video: elementy určené pro vkládání videa nebo hudby do webové stránky. Díky tomu odpadá nutnost použití zásuvných modulů typu Flash. Je zde možnost využít výchozí ovládací prvky prohlížeče, případně si s využitím media API nadefinovat vlastní. • Web Storage: umožňuje využít lokální úložiště (Local Storage) v rámci prohlížeče, kde lze ukládat data webových aplikací na libovolně dlouhou dobu. Tento koncept se velmi podobá cookies, ovšem nabízí daleko větší prostor pro uložená data. Pro srovnání, moderní prohlížeče poskytují velikost lokálního úložiště až 5 MB pro každou doménu, kdežto velikost pro cookies je omezena na pouhé 4 kB. Další výhodou je, že se data neodesílají na server při každém požadavku, jako je tomu v případě cookies. Existuje i alternativa Session Storage, která uchovává data jen po dobu jedné relace, po zavření okna prohlížeče jsou smazána. • Web Workers: poskytují standardní způsob, jak lze v prohlížeči spustit JavaScript na pozadí, nezávisle na jiném skriptu. Takto je možné spustit několik

2.3

HTML a CSS

24

paralelně běžících vláken“, které mohou vykonávat matematické výpočty, ode” sílat požadavky nebo přistupovat k lokálnímu úložišti. • Geolocation: skrze tuto funkcionalitu je možné zjistit aktuální polohu uživatele. To se provádí buď pomocí IP adresy, nebo u mobilních zařízení senzorem GPS. • Formulářové prvky: HTML5 přidává nové typy formulářových prvků a atributů, které usnadní jejich vyplňování a validaci. Mezi nové typy prvků patří např.: vyhledávání, email, datum a čas, barva aj. • Sémantické elementy: po zavedení nových elementů, které mají určitý význam, je možné nahradit stávající nesémantické elementy. Namísto obvyklého použití div s identifikátorem lze využít nové elementy header, nav, footer, section aj., které jasně určují danou část stránky. 2.3.2

CSS3

Jedná se o nejnovější úroveň jazyka CSS, která rozšiřuje předchozí specifikaci CSS2.1. Na rozdíl od svých předchůdců je CSS3 rozděleno na několik menších částí, které se nazývají moduly. Moduly jsou na sobě nezávislé a jejich vývoj i standardizace probíhají odděleně svým vlastním tempem. Některé moduly už jsou konsorciem W3C doporučovány, na jiných se však stále ještě pracuje. Ve vývoji už jsou i některé moduly z úrovně 4. I když ještě některé moduly nebyly plně standardizovány, lze se s nimi v prohlížečích již setkat. Vývojáři je přidávají jako experimentální vlastnosti CSS obsahující tzv. vendor prefixes“, které odlišují jednotlivé prohlížeče, např.: -moz- (Firefox), ” -webkit- (Chrome), -ms- (Internet Explorer). Velkou výhodou CSS3 je jeho jednoduchost. To co by se jinak složitě vytvářelo v grafickém editoru, to lze vytvořit pomocí pár řádků kódu (když vezmu v potaz různé prefixy). Velmi rychle tak lze vidět výsledný prvek a snadno jej pak upravovat. Navíc lze daný prvek vidět přímo v prohlížeči, což je plus oproti obrázku, který se nemusí v prohlížeči zobrazovat přesně tak jako v editoru. Díky tomu je možné dosáhnout velké časové úspory. Najdou se zde ovšem i nevýhody. Některé vlastnosti se v různých prohlížečích nezobrazují úplně stejně a některé nejsou podporovány vůbec. Pro složitější grafické efekty je pak lépe sáhnout po obrázku z grafického editoru. Jacobs (2011) uvádí některé vlastnosti CSS3: • Border radius: jedná se o vlastnost, která umožňuje nastavit danému objektu zaoblené rohy. Navíc je možné definovat zaoblení pro každý roh zvlášť. Tato vlastnost je na webech hojně využívaná, dříve řešená hlavně pomocí obrázku. Příklad zápisu: border-radius: 5px; • Box shadow: tato vlastnost přidává danému elementu vnitřní nebo vnější stín. Je zde možnost nastavit 4 parametry stínu: horizontální pozici, vertikální

2.3

HTML a CSS

25

pozici, velikost rozostření a barvu. Navíc přidání klíčového slova inset se stín změní z vnějšího na vnitřní. Příklad zápisu: box-shadow: 1px 1px 1px red; • Gradient: barevné přechody jsou velmi často používaným efektem na webech a bez použití CSS3 jsou řešeny pomocí obrázků. Na rozdíl od předchozích, gradient není vlastnost, ale přímo hodnota vlastnosti background. Existují dva typy přechodů: lineární a radiální. Lineární přechod je rozdělován přímkou, zatímco radiální vytváří elipsu nebo kruh. U přechodů je navíc doporučováno uvádět i verze s prefixy, jelikož je i některé dnešní verze prohlížečů stále vyžadují. Příklad zápisu: background: linear-gradient(to bottom, red, blue); • font-face: umožňuje použití vlastních fontů, které mohou být umístěné na serveru nebo třeba na Google Fonts. Díky tomu se není třeba omezovat na fonty, které jsou nainstalované na většině počítačů. Příklad zápisu: @font-face { font-family: "Muj font"; src: url("cesta k~fontu"); } • RGBA: jedná se o další možnost, jak v CSS definovat barvu. Na rozdíl od definice barvy pomocí RGB nebo hexadecimální hodnoty, dovoluje nastavit také průhlednost. Příklad zápisu: background: rgba(255, 255, 0, 0.5); • Media queries: velmi důležitá vlastnost pro tvorbu tzv. responsivního designu, kdy se vzhled a rozmístění prvků na stránce mění v závislosti na rozměrech displeje daného zařízení (případně velikosti okna prohlížeče). Tento typ návrhu se začal uplatňovat zejména díky vzrůstajícímu počtu uživatelů chytrých telefonů a tabletů. Media query obsahuje výraz, který když je pravdivý, tak se aplikují styly definované uvnitř. Pomocí toho lze kontrolovat např.: rozměry displeje, typ zařízení nebo jeho orientaci. Příklad zápisu media query, který se dotazuje na počítačový monitor a minimální šířku okna prohlížeče 600 pixelů: @media screen and (min-width: 600px) { ... } • Transition, animate: pomocí těchto vlastností je možné vytvářet jednoduché přechody a animace elementů, bez použití Flashe nebo JavaScriptu. Vlastnost transition umožňuje nastavit postupnou změnu jednoho stylu na druhý za určitou dobu. Vlastní animace se definuje pravidlem @keyframes a zvolí se její pojmenování. Poté se pomocí klíčových slov from a to nastaví počáteční a konečný styl animace. Také je možné definovat jednotlivé snímky procenty. Výsledná animace je následně přiřazená zvolenému elementu. Příklad zápisu: @keyframes mojeanimace { from { color: red; } to {color: blue;} }

2.4

2.4

Rich Internet applications

26

Rich Internet applications

Rich Internet application (RIA) by se dala definovat jako webová aplikace, která se snaží nabídnout některé prvky klasických desktopových aplikací (Kay, 2009). Především jde o zrychlení odezvy na uživatelské akce, lepší vizuální zážitek a rozsáhlejší možnosti co se týče interaktivních prvků. RIA ke svému běhu potřebují internetový prohlížeč, případně také nainstalovaný zásuvný modul, vše záleží na použité technologii. Z tohoto důvodu je tedy možné je rozdělit na ty, které vyžadují rozšíření prohlížeče a ty, kterým stačí samotný prohlížeč. Mezi první skupinu se řadí aplikace postavené na platformách Flash, Java a Silverlight. Druhou skupinu pak tvoří aplikace využívající technologii AJAX. Přesně popsat všechny vlastnosti RIA není úplně jednoduché. Záleží vždy na dané platformě, kde se aplikace mohou v některých věcech odlišovat. Přesto existují určité základní charakteristiky RIA, které jsou platné pro všechny typy (Kay, 2009): • Větší míra interakce: v klasických webových aplikacích je několik základních vstupních prvků (tlačítka, textová pole, zaškrtávací pole, aj.), pomocí kterých je řešena interakce s daným webem. RIA tuto základní nabídku prvků rozšiřuje, čímž je vylepšen uživatelský prožitek (user experience). Jako příklad může posloužit funkce drag and drop, dialogová okna nebo vstupní prvky pro výběr data či barvy. Zlepšení je docíleno také pomocí různých animací a efektů, které dokáží danou aplikaci oživit. Mnoho z těchto prvků přináší právě HTML5, je tak usnadněna tvorba RIA s využitím nativních funkcí prohlížeče. • Obnovování pouze určitých částí: u normální webové aplikace se při každé změně musí celá stránka znovu obnovit. Neustálé čekání na načtení stránky může na uživatele působit rušivě a kazit celkový dojem. Na rozdíl od toho RIA může pomocí AJAX obnovovat jenom ty části stránky, které jsou skutečně potřeba, uživatel může mezitím dále provádět svoji činnost. Díky tomu aplikace dává pocit, že vše probíhá téměř v reálném čase, stává se tedy více uživatelsky přívětivější. • Mohou běžet offline: je možné navrhnout RIA tak, aby běžela i pokud není dostupné připojení k internetu. K tomu se hodí např. funkcionalita z HTML5 jako Application Cache nebo Local Storage, pomocí nichž lze ukládat stav aplikace nebo i jednotlivé soubory na klientský počítač. • Lepší výkonnost: záleží vždy na konkrétní aplikaci, nicméně RIA obvykle pracují rychleji než klasické aplikace. Je to dáno z toho důvodu, že samotná RIA je při spuštění stažena na klientský počítač. Veškeré akce uživatelského rozhraní jsou pak vykonávány na klientovi a server se stará pouze o manipulaci s daty. Díky menšímu počtu požadavků a přenesených dat se tak aplikace stává rychlejší a méně náročnější na výkon serveru.

2.4

Rich Internet applications

27

• Jednotný vzhled: díky nástrojům pro tvorbu RIA a různým grafickým komponentám je možné dosáhnout jednotné podoby uživatelského rozhraní napříč webovými prohlížeči, případně i operačními systémy. 2.4.1

RIA v jazyce JavaScript

Pro tvorbu RIA v programovacím jazyce JavaScript existuje celá řada rámcových softwarových systémů (frameworků), jejichž cílem je co nejvíce usnadnit vývoj těchto aplikací. Samozřejmě by bylo možné využívat pouze čistý JavaScript, nicméně ten žádným způsobem neřeší, jak by měla být aplikace strukturována a uspořádána. Výsledkem je potom ve většině případů nepřehledný spaghetti kód“, který se obtížně ” udržuje. Tento problém řeší architektura MVC. Architektura MVC Aktuálním trendem mezi JavaScriptovými frameworky je využití architektury MVC (Model, View, Controller) a jeho různé variace jako MVP (Model, View, Presenter) nebo MVVM (Mode, View, ViewModel). Pro snazší orientaci se někdy označují obecně jako MV*. Aplikace je díky tomu rozdělena na tři části (viz obr. 3) (Google, 2012): • Model (model): představuje typ dat, se kterými bude aplikace pracovat. Model nemá žádné informace o pohledech nebo řadičích. Pokud dojde v modelu ke změně, obvykle informuje své pozorovatele“, že nastala změna. ” • View (pohled): reprezentuje většinou uživatelské rozhraní aplikace a interakci s ním. Je tvořen především šablonami obsahujícími HTML, CSS a JavaScript. Pomocí pohledu je možné zadávat vstupní data, která budou uložena v modelu. O aktualizaci se však stará řadič, protože pohled nemá přímou vazbu na model. • Controller (řadič): představuje spojení mezi modelem a pohledem. Stará se o aktualizaci pohledu, když dojde ke změně modelu. Zajišťuje také naslouchání událostem v pohledu, jestliže uživatel vykoná nějakou akci a případně aktualizuje model. Na druhou stranu ne všechny JavaScriptové MVC frameworky tuto architekturu striktně dodržují. Může se stát, že jedna komponenta přebírá část funkcionality druhé, někde jsou třeba sloučeny do jedné. Záleží zkrátka na rozhodnutí autorů, co jim připadá efektivnější. Nicméně hlavní myšlenka architektury MVC a jeho modifikací je stejná a přináší tyto výhody: • Znovupoužitelný a rozšiřitelný kód • Oddělení prezentační vrstvy od aplikační • Umožňuje souběžnou práci více vývojářů na jednotlivých komponentách • Snadnější udržovatelnost

2.4

Rich Internet applications

28

Obr. 3: MVC architektura (Google, 2012)

2.4.2

Srovnání frameworků

Vybrat správný JavaScriptový framework, který usnadní tvorbu RIA, není snadná záležitost. Se vzrůstající popularitou bohatých aplikací postavených pouze na JavaScriptu roste také počet různých frameworků, kterých je momentálně k dispozici velké množství a neustále přibývají další. jQuery Jedná se o nejznámější a nejpoužívanější JavaScriptovou knihovnu, kterou vytvořil v roce 2006 John Resig (jQuery Foundation, 2013). Podle Q-Success (2013) je dnes možné se s ní setkat na 57,4% webových stránek (viz obr. 4). Knihovna jQuery má navíc poměrně malou velikost 32 kB (po minifikaci a komprimaci). Hlavním účelem jQuery je co nejvíce usnadnit programování v JavaScriptu. Snaží se o co největší zjednodušení syntaxe, takže pro dosažení stejného výsledku je zapotřebí mnohem méně kódu. Navíc řeší i rozdílnou implementaci některých funkcí napříč prohlížeči. Mezi největší přednosti jQuery patří hlavně selektory, zjednodušení práce s AJAX, zpracování událostí a různé efekty a animace. Za velkou výhodu se dá také považovat rozsáhlá komunita, z čehož pramení výborná dokumentace a velký počet dostupných návodů. Lze také vybírat z obrovského množství doplňků, které přidávají nové funkce a urychlují vývoj. Pomocí jQuery lze usnadnit i tvorbu uživatelského rozhraní. K tomu slouží samostatná knihovna jQuery UI, která obsahuje animace a grafické komponenty pro dosažení lepšího uživatelského zážitku. Na druhou stranu jQuery nevyužívá architekturu MV*, vzniká zde tedy stejný problém jako u čistého“ JavaScriptu, kdy u větších aplikací chybí určitá struktura ”

2.4

Rich Internet applications

29

Obr. 4: Zastoupení JS frameworků na webu (Q-Success, 2013)

a kód se stává nepřehledný. Z tohoto důvodu se jQuery používá spíše v kombinaci s nějakým MV* frameworkem, jako je tomu třeba v případě Backbone. Backbone.js Backbone je jedním z nejpoužívanějších JavaScriptových MV* frameworků. Vděčí za to převážně svojí jednoduchosti a rozsáhlé komunitě okolo něj. Také jej používá mnoho velkých společností a webových aplikací jako LinkedIn, Hulu, Foursquare, Disqus, Bitbucket a další. Poskytuje základní strukturu pro tvorbu webových aplikací, v tomto případě využívá architekturu MVP. Skládá se ze čtyř hlavních komponent: modelu, kolekce, pohledu a routeru. Backbone se od ostatních frameworků odlišuje tím, že je velmi odlehčený. Jeho velikost je pouze 6 kB, jelikož obsahuje čistě jen základní koncept pro tvorbu výše uvedených hlavních komponent. Jedinou povinnou závislost tvoří knihovna Underscore, která přidává přes 80 užitečných funkcí. Usnadňuje především práci s poli, objekty a poskytuje možnost vytváření šablon. Pro manipulaci s DOM je možné si vybrat mezi knihovnami jQuery a Zepto. Pro Backbone hovoří spousta dostupných materiálů a dobrá dokumentace. Nicméně jedná se o docela nízkoúrovňový“ framework, který dovoluje použití li” bovolného vlastního postupu a neklade v tomto směru téměř žádná omezení. Vzniká tak spousta možností, jak dané aplikace vytvářet. Lze narazit ale i na mnoho špatných postupů (DocumentCloud, 2013).

2.4

Rich Internet applications

30

Ext JS Tento MV* Framework vyvíjený společností Sencha se přímo specializuje na tvorbu JavaScriptových interaktivních aplikací. Důkazem je rozsáhlá nabídka grafických komponent, která je součástí frameworku. Toto velké množství komponent v sobě nese ale nevýhodu v podobě velikosti frameworku, která činí zhruba 380 kB. Při tvorbě uživatelského rozhraní v Ext JS nejlépe poslouží nástroj Ext Designer. Ten umožňuje vizuální návrh aplikace, nicméně je placený. Ext JS najde nejlepší využití v interních komerčních aplikacích nebo různých administračních rozhraních. Pro tvorbu veřejně dostupných aplikací, kde je nutné mít originální a zajímavý vzhled, ale není příliš vhodný. Nenabízí totiž úplnou kontrolu nad výsledným kódem a úpravy základního vzhledu jsou poměrně složité. Pro použití v komerčních aplikacích je také nutné zakoupit licenci. (Ashworth, 2012) AngularJS Jedná se o relativně nový MV* framework pro tvorbu dynamických webových aplikací, který je vyvíjen Googlem. Také je poměrně malý (29 kB) a je k dispozici jako open source. Hlavní předností Angular je obousměrný data binding“. Ten zajišťuje auto” matickou synchronizaci modelu a pohledu. V jiných frameworcích (např. Backbone) je třeba tuto činnost řešit ručně. Údajně je tak možné dosáhnout výrazné úspory v psaní kódu (až 90% oproti původnímu). Dalším prvkem, který Angular používá, jsou direktivy zajišťující určitou činnost. Tyto direktivy se zapisují podobně jako HTML elementy nebo atributy a vyznačují se prefixem ng-“. ” Angular není závislý na žádné jiné knihovně, ale lze jej bez problémů používat třeba s jQuery. (Ralston, 2013) YUI Library YUI je open source JavaScriptová a CSS knihovna, která umožňuje tvorbu bohatých a interaktivních webových aplikací. Za jejím vývojem stojí společnost Yahoo!. Základem knihovny je odlehčené jádro (YUI Core), které má velikost 31 kB. Součástí YUI je i framework (App Framework), využívající architekturu MV*. V mnoha ohledech se podobá frameworku Backbone, navíc lze využít jednotlivé moduly YUI, jako jsou předpřipravené CSS, grafické komponenty a další nástroje. Díky tomu je usnadněna tvorba uživatelského rozhraní aplikace.

3

METODIKA

3

31

Metodika

Jedním z cílů této práce je také tvorba vlastní RIA, která bude vytvořena ve zvoleném JavaScriptovém frameworku. Měla by využívat představené technologie a ukázat aktuální trendy při tvorbě webových aplikací. Primárním úkolem bylo rozhodnout, co bude daná aplikace vykonávat. Jelikož jsem se chtěl co nejvíce zaměřit na klientskou část v JavaScriptu a omezit tak serverovou část na nezbytné minimum, zvolil jsem aplikaci, která nebude využívat žádný databázový systém. Rozhodl jsem se tedy pro propojení veřejně dostupných API Twitteru a Google Maps. Takové aplikace se obecně označují jako tzv. mashup“. ” Twitter je internetová sociální síť, nebo také mikroblogovací platforma, která umožňuje jeho uživatelům psát textové příspěvky o maximálním počtu 140 znaků. Těmto příspěvkům se pak říká tweets (česky tweety). Twitter poskytuje veřejné API, díky kterému lze různými způsoby získávat a manipulovat s tweety, získávat informace o uživatelích a jiné. Oproti tomu Google Maps je služba, která poskytuje online mapové podklady a díky jejímu veřejnému API lze integrovat tyto mapy i na jiné weby. Moje aplikace bude tedy získávat tweety ze sítě Twitter a pomocí GPS souřadnic připojených k jednotlivým tweetům je bude zobrazovat na mapě Google Maps. Data se budou navíc stahovat v určitých intervalech, aby byla zajištěna jejich aktuálnost. Aplikace se bude jmenovat GMeets App, což vzniklo ze slov Google Maps a tweets. Pro většinu požadavků odeslaných na Twitter je vyžadována autentizace uživatele. V případě Twitteru je řešena pomocí autentizačního protokolu OAuth, který funguje na principu výměny tokenů a klíčů. Tím je zvýšena bezpečnost, jelikož webová aplikace se nedostane k vašim přihlašovacím údajům na Twitter. Moje aplikace tedy bude řešit autentizaci uživatelů přes Twitter pomocí protokolu OAuth.

3.1

Klientská část

Hlavní část aplikace, tedy klientská část, bude řešena pomocí JavaScriptového MV* frameworku Backbone. Vybral jsem si ho z toho důvodu, že je poměrně snadný na naučení, navíc díky rozsáhlé komunitě je k dispozici dobrá dokumentace a mnoho návodů. Skrze MV* architekturu poskytuje sktrukturu pro snadnější tvorbu webových aplikací, zároveň také velmi snadno spolupracuje s oblíbeným frameworkem jQuery, který výrazně zjednodušuje práci s AJAX. Aplikace bude dále využívat prvky HTML5, které přispívají k tvorbě RIA. Jedná se hlavně o lokální úložiště (Local Storage), které nahrazuje absenci databázového systému a umožňuje trvalé uložení dat. Pro zjištění aktuální polohy uživatele bude použito Geolocation API, získané GPS souřadnice se pak budou moct volitelně připojit k novým tweetům, aby byly zobrazitelné na mapě. Pro zlepšení možností interakce bude aplikace umět přesouvání prvků využívající HTML5 Drag and Drop. Uživatelské rozhraní aplikace nebude využívat žádné hotové grafické komponenty, bude vytvořeno pomocí CSS, zvláště pak bude demonstrovat možnosti CSS3.

3.2

Serverová část

32

Pro usnadnění tvorby CSS bude použit CSS preprocesor LESS, který dovoluje např. vytváření proměnných a vlastních funkcí. Výsledný soubor LESS se poté zkompiluje do klasického CSS. Uživatelské rozhraní bude také využívat principy responsivního designu pro použití na mobilních zařízeních.

3.2

Serverová část

Aplikace bude obsahovat také minimální serverovou část, realizovanou v PHP, která bude zpracovávat AJAX požadavky a zajišťovat komunikaci s Twitter API. K tomu bude využita PHP třída TwitterOAuth6 , která implementuje autentizační protokol OAuth a lze tak zasílat ověřené požadavky. Podobné knihovny existují i v JavaScriptu, nicméně není doporučeno je používat z důvodu bezpečnosti. Každá aplikace má totiž přidělený tajný token a ten by byl na straně klienta lehce zjistitelný.

6

https://github.com/tijsverkoyen/TwitterOAuth

4

PRAKTICKÁ ČÁST

4

33

Praktická část

Tato kapitola popisuje podrobněji způsob implementace mojí aplikace GMeets App, která propojuje API Twitteru a Google Maps.

4.1

Použité technologie

Při vývoji aplikace byl využit přednastavený balík XAMPP7 , který obsahuje webový server Apache 2.4.3, interpret skriptů PHP 5.4.7 a další. Použity však byly jen tyto dvě součásti, k tomu je ještě nutné povolit knihovnu cURL. Dále byly použity tyto JavaScriptové frameworky a knihovny: • Backbone.js 1.0 • jQuery 1.9.1 • Underscore 1.4.4 • RequireJS 2.1.2 Aplikace také uplatňuje funkce HTML5 a vzhled je tvořen pomocí CSS3. Pro usnadnění psaní kaskádových stylů byl využit preprocesor LESS8 . Kvůli podpoře těchto funkcí je vyžadován moderní internetový prohlížeč (testováno na Firefox 20, Opera 12.15, Chrome 27.0.1453.93 beta-m). Je zde potřeba uvést, že u Chrome v určitých beta verzích (26 beta) nefungovalo vyhledávání na Twitteru.

4.2

Vývojové prostředí

Jako vývojové prostředí pro tvorbu aplikace byl zvolen PhpStorm 69 , který nabízí rozsáhlé možnosti nejen při psaní PHP kódu, ale také JavaScriptu, HTML a CSS. Ladění aplikace probíhalo ve vývojovém nástroji Firebug10 , což je stažitelný doplněk prohlížeče Firefox. Využit byl také obdobný nástroj DevTools v prohlížeči Chrome. PhpStorm 6 Jedná se o multiplatformní vývojové prostředí, které vytvořila firma JetBrains. Standardně jde o komerční software, k dispozici je však i měsíční zkušební verze zdarma. Co se týče funkcí, editor umožňuje programování v PHP i JavaScriptu. Pozadu nezůstává ani podpora HTML5, CSS nebo preprocesorů SASS, SCC a LESS. JavaScript editor, který byl při tvorbě mojí aplikace nejvíce využíván, nabízí doplňování kódu a přímou podporu některých známých frameworků jako jQuery, 7

http://www.apachefriends.org/ http://lesscss.org/ 9 http://www.jetbrains.com/phpstorm/ 10 http://getfirebug.com/ 8

4.3

Implementace

34

YUI a Dojo. Při psaní kódu zároveň dochází k jeho kontrole a případné chyby jsou vyznačeny. K dispozici je i JavaScript debugger. Je možné také zapnout kontrolu kvality kódu, o kterou se starají nástroje JSLint a JSHint. Ty upozorňují na problematické konstrukce, které mohou způsobovat problémy. PhpStorm obsahuje i podporu pro verzovací systémy Git, Mercurial a SVN. Dodatečnou funkcionalitu pak lze přidat skrze množství dostupných pluginů. Firebug Firebug je vývojový nástroj, dostupný jako doplněk v prohlížeči Firefox. Umožňuje úpravu, ladění a sledování CSS, HTML a JavaScriptu. Díky němu se dá přímo na webové stránce editovat HTML a CSS. Lze tak okamžitě pozorovat, jak se dané změny na stránce projeví. Ve Firebugu je možné sledovat síť, kde se zobrazuje načítání jednotlivých souborů a délka jejich trvání. V aplikacích využívající AJAX jsou zde navíc k dispozici požadavky zaslané skrze XMLHttpRequest. Součástí je i JavaScriptový debugger a profiler, který dovoluje měřit výkon aplikace a najít možná slabá místa, která aplikaci zpomalují. Silnou stránku představuje také přítomná konzole, kde se vypisují chybové hlášky, objekty ze skriptu nebo jiné údaje. Díky DOM prohlížeči se dají objekty jednoduše procházet a lze tak získat přehled o všech jeho vlastnostech, které se dají rovnou i editovat. Chrome DevTools Jak již samotný název napovídá, jedná se o vývojový nástroj integrovaný v prohlížeči Google Chrome. Základní funkce jsou víceméně totožné jako u Firebugu. Rozdíl je vidět až při pohledu na pokročilejší možnosti. DevTools umožňuje provést analýzu paměti, dále obsahují nástroj pro optimalizaci webu, prohlížení JSON a XML v odpovědích serveru, zvýraznění syntaxe JavaScriptových souborů nebo pokročilejší možnosti v debuggeru. Navíc je možné spustit DevTools v každém panelu zvlášť, kdežto u Firebugu může běžet pouze jedna instance. Při vývoji aplikace jsem tyto dva nástroje střídal, v každém se dělá lépe něco jiného. Třeba ve Firebugu je podle mě lépe vyřešeno prohlížení objektů a úprava CSS, oproti tomu DevTools má zase lépe zpracovaný monitoring sítě a konzoli.

4.3 4.3.1

Implementace Modulární přístup

Pro větší přehlednost, lepší udržovatelnost a správu závislostí je aplikace rozdělena na moduly. Jelikož tuto funkcionalitu JavaScript v základu nenabízí, je třeba využít

4.3

Implementace

35

knihovnu RequireJS11 . Ta umožňuje načítání několika skriptů zároveň a definování vlastních modulů využívajících formát AMD (Asynchronous Module Definition). Běžné načítání skriptů pomocí tagu script je sice velmi jednoduché, ale má několik nedostatků. Každý takto definovaný skript totiž znamená jeden HTTP požadavek. Prohlížeč však může zpracovávat pouze několik souběžných požadavků, navíc skripty se načítají synchronně a během toho nepokračuje vykreslování stránky. Tyto problémy řeší právě RequireJS. Umožňuje asynchronní načítání skriptů, což dovoluje prohlížeči vykreslit zbytek stránky a urychlit tak nahrávací dobu. Lze také nahrávat jen ty moduly, které jsou v danou chvíli potřeba. Pro práci s moduly slouží funkce define a require. Define se používá na definování modulu a require pro nahrávání závislostí. Načtení jediného skriptu RequireJS v souboru index.html, data atribut main specifikuje hlavní soubor aplikace main.js: <script data-main="js/main" src="js/libs/require.2.1.2.js"> V hlavním souboru main.js jsou definovány cesty k dalším skriptům, které však musí podporovat načítání pomocí AMD. Pokud tento formát nepodporují, stále je možné je použít, ovšem u těchto skriptů nebude fungovat asynchronní načítání. 4.3.2

Struktura aplikace

Strukturu aplikace řeší MV* framework Backbone. Mezi jeho hlavní komponenty patří model, kolekce, pohled a router. Jednotlivé komponenty jsou rozděleny do samostatných souborů a definovány jako AMD moduly. Model Obsahuje data, se kterými aplikace pracuje, jejich vlastnosti a metody, např. zpracování a validaci. Aby zůstala data modelu zachována, je potřeba je někam ukládat. K tomu je využita Local Storage v prohlížeči. Obvykle se však model ukládá do kolekce, kde je dále zpracováván. Speciální využití má v aplikaci model Settings obsahující nastavení aplikace. Chová se jako singleton, má napevno nastavený identifikátor a ukládá se na klientovi okamžitě po prvním spuštění. Jedná tak o poměrně netypické použití. Kolekce Kolekce (Collection) by se dala popsat jako uspořádaná množina modelů. Nastavením atributu model je umožněno do dané kolekce ukládat uvedený typ dat. Kolekce může naslouchat událostem, když je některý z jejích modelů přidán, změněn nebo 11

http://requirejs.org/

4.3

Implementace

36

smazán. Pomocí funkce fetch si může načíst aktuální data z úložiště, ať již z lokálního nebo ze serveru. Díky funkcím z Underscore se dají kolekce jednoduše procházet, třídit a vyhledávat v nich podle atributů. Moje aplikace obsahuje rovněž plugin pro snadnou podporu Local Storage. Každá kolekce tak může mít nastaveno své vlastní lokální úložistě, kde se bude uchovávat její aktuální stav. Pokud tedy uživatel znovu spustí moji aplikaci, použijí se data z Local Storage namísto opětovného stažení. Ukázka části jedné kolekce, která má nastaven model, Local Storage a obsahuje i porovnávací funkci, která ji udržuje setříděnou podle času: var TweetsCollection = Backbone.Collection.extend({ model: TweetModel, localStorage: new Store('tweets-storage'), comparator: function(tweet) { var date = new Date(Date.parse(tweet.get('created_at'))); return -date.getTime(); } }); Pohled Pohled obsahuje logiku, která se stará o zobrazování dat z modelu uživateli. Obvykle má k sobě přiřazenou šablonu (využívající funkci Underscore template), kde jsou tato data zobrazena. Celá aplikace je rozdělena na několik pohledů, které představují jednotlivé části uživatelského rozhraní. Když dojde ke změně modelu, obnoví se jen připojený pohled, aniž by se musela obnovit celá stránka. To se provádí napojením metody pohledu render() na událost modelu change: this.model.on('change', this.render, this); Router V Backbone představuje router způsob, jak propojit adresu s nějakou částí aplikace. Je zde typicky definován seznam rout mapovaných na určité funkce, které se provedou, když uživatel na tuto routu vstoupí. V adresním řádku se routa zapisuje zadáním znaku #“ na začátek. Takto jsou definovány routy v mojí aplikaci: ” routes: { 'login': 'login', 'login/:status': 'loginStatus', 'geo-map': 'geoMap', 'user-map/:name': 'userMap', 'search/:query': 'search', 'profile/:name': 'showProfile',

4.3

Implementace

37

'*actions': 'defaultAction' // default route } 4.3.3

Autentizace

Aplikace kontroluje při každé akci, zda je daný uživatel přihlášený. V opačném případě přesměruje akci na stránku s přihlášení. Přihlášení do aplikace je realizováno přes Twitter účet pomocí autentizačního protokolu OAuth. Samotný proces probíhá v těchto krocích: • Uživatel obdrží neautorizovaný Request Token od Twitteru • Twitter poté získaný Request Token autorizuje • Uživatel vymění Request Token za Access Token Access Token je následně uložen na serveru prostřednictvím session, aby se tento proces nemusel při každém požadavku opakovat. Nyní už může uživatel získat data z Twitteru díky autorizovaným požadavkům. (OAuth Core Workgroup, 2007) Schéma průběhu autentizačního procesu je uvedeno v příloze A. 4.3.4

Uživatelské rozhraní

V aplikacích typu RIA hraje uživatelské rozhraní velkou roli. Je potřeba se zaměřit na to, jak poskytnout co nejlepší uživatelskou přívětivost. Při tvorbě aplikace byl kladen důraz na co největší využití HTML5 a CSS3. Většina dnešních moderních prohlížečů už tyto technologie velmi dobře podporuje, což se týká i prohlížečů na mobilních platformách. CSS Při vytváření CSS byl využit preprocesor LESS, který usnadňuje hlavně psaní nových vlastností CSS3. V souboru mixins.less jsou obsaženy vlastní funkce poskytující implementaci vlastností CSS3 pro jednotlivé prohlížeče. Tuto funkci pak stačí použít v některém prvku. Výhoda je v tom, že úpravy těchto vlastností se provádí vždy jen na jednom místě. LESS dále nabízí možnost vytváření proměnných a různé matematické funkce. V aplikaci jsou použity např. vlastnosti border radius, linear gradient, box shadow a opacity. Podpora mobilních zařízení byla realizována díky CSS3 media queries. Rozlišeny jsou zařízení s maximální šířkou displeje do 480 px a do 768 px. Díky těmto prvkům tzv. responsivního designu se vzhled na menších displejích automaticky přizpůsobí. Ukázka z výsledné aplikace je na obr. 5, příp. v příloze B obr. 7 a obr. 8.

4.3

Implementace

38

HTML Při tvorbě RIA lze využít mnoho zajímavých prvků z HTML5, které zlepšují uživatelskou přívětivost aplikace. Některé tyto prvky byly využity i v mé aplikaci. Zjištění aktuální polohy bylo docíleno skrze Geolocation API. Ta se využívá jak u psaní nových tweetů, tak pro zobrazení pozice na mapě. Trvalé ukládání dat na straně klienta bylo realizováno přes Local Storage. Aplikováno však bylo přes Backbone plugin, nikoliv přímo přes funkce HTML5. Bloky v pravém sloupci lze přesouvat díky funkci Drag and Drop. Pozice bloků se ukládá do nastavení, takže se nemění ani po obnovení stránky. JavaScript V tomto typu aplikace záleží také na rychlosti aplikace a odezvě. Kromě již zmíněných AMD modulů přispívá k plynulejšímu pocitu také využití AJAX při odesílání požadavků na server. V tomto ohledu je velmi přínosná knihovna jQuery, která usnadňuje vytváření AJAX požadavků. Ty jsou využívány hlavně při komunikaci s Twitter API, kdy se z klienta odešle přes AJAX požadavek na server, ten získá data z Twitteru a vrací je zpět na klienta. Obnovena je vždy jen ta část aplikace, kde došlo ke změně. Ukázka odeslání nového tweetu pomocí jQuery a AJAX, odeslat lze i souřadnice GPS, po úspěšném vykonání se napsaný text v poli smaže: $.ajax({ url: './php/backend.php', type: 'POST', dataType: 'json', data: { action: 'sendTweet', status: this.$txtTweet.val(), lat: lat, lng: lng }, success: function(data) { self.clearTweetText(); } }); 4.3.5

Twitter API

Komunikaci s Twitter API zajišťuje serverová část aplikace. Požadavky jsou odesílány pomocí PHP třídy TwitterOAuth, která obsahuje adresy jednotlivých REST API zdrojů Twitteru, navíc dokáže přidat do hlavičky autorizační údaje OAuth.

4.3

Implementace

39

Obr. 5: Ukázka hlavní strany aplikace

Aplikace využívá Twitter pro získání vlastní časové osy (timeline), odeslání tweetu, získání aktuálních trendů, získání tweetů určitého uživatele a vyhledávání tweetů. 4.3.6

Google Maps API

Propojení Google Maps a Twitter API je v mojí aplikaci realizováno přes GPS souřadnice, které jsou připojeny k jednotlivým tweetům. Odesílání těchto dat lze však vypnout, takže ne všechny tweety je obsahují. V aplikaci je implementována mapa ze služby Google Maps, která se při spuštění inicializuje na aktuální polohu uživatele. Poté je možné na mapě zapnout sledování tweetů, které odeslali uživatelé v blízkém okolí. Na mapě se zobrazují značky a po kliknutí na ni lze přečíst text daného tweetu. Data se obnovují v krátkých intervalech.

4.4

Shrnutí

40

Sledování ovšem není omezeno jen pro aktuální okolí. Hlavní značku lze volně přesouvat po mapě a sledovat tak jakékoliv místo na světě. K dispozici je i pole pro zadání velikosti prohledávaného okolí v kilometrech.

4.4

Shrnutí

Myslím si, že se mi podařilo splnit záměr a vytvořil jsem RIA, která využívá moderní JavaScriptové technologie. Snažil jsem se o dosažení co nejlepší odezvy, aby uživatelské rozhraní reagovalo velmi svižně. To považuji v podobných aplikacích za velmi důležitou vlastnost. Také podpora mobilních zařízení hraje dnes velkou roli, proto jsem se snažil v tomto směru o optimalizaci aplikace. Ta se přizpůsobí velikosti displeje daného zařízení, ale funkčnost např. na mobilním telefonu není úplně ideální. Zde vidím ještě možnosti pro zlepšení. Považuji za velmi přínosné, že jsem se naučil pracovat s frameworkem Backbone. Vyzkoušel jsem si jiný styl, jak programovat webové aplikace. Hlavně na začátku jsem měl problémy se přeorientovat z PHP na JavaScript. Pocítil jsem také i některé nevýhody, které Backbone má. Není totiž nikde jasně dané, jak správně aplikaci tvořit. Existuje tak spousta možností a každý si může zvolit svůj postup. To může být pro začátečníky trochu obtížné, protože si musí některé (klíčové) věci sami dohledávat. Aplikace by se dala v budoucnu ještě rozšířit o další funkce, které už jsem nestihl implementovat. To se týká třeba funkcí Twitteru, kterých je mnoho a aplikace obsahuje jen malou část. Vylepšit by se dalo i uživatelské rozhraní, např. větším počtem animací, aby aplikace působila více interaktivně. Také by se dala zlepšit mapa nastavením vlastního stylu, který by více pasoval ke vzhledu aplikace. Veškeré zdrojové kódy aplikace lze pak nalézt na přiloženém CD.

5

ZÁVĚR

5

41

Závěr

Tato bakalářská práce se zabývá oblastí bohatých internetových aplikací (RIA), které jsou tvořeny pomocí jazyka JavaScript. Nejprve bylo nutné zjistit potřebné informace o tomto programovacím jazyce, jeho možnosti pro tvorbu RIA a následně nastudovat další související technologie jako HTML a CSS. Výsledkem této práce je RIA, která propojuje API Twitteru a Google Maps. K její realizaci bylo třeba zvolit vhodný framework, který by vývoj této aplikace usnadnil. Pro tento účel byl vybrán framework Backbone, s jehož pomocí lze aplikaci rozdělit na několik částí a zajistit tak lepší přehlednost a udržovatelnost kódu. Navíc se výborně doplňuje s knihovnou jQuery, která zase zjednodušuje práci s AJAX a manipulaci s DOM. K lepšímu členění napomohlo i využití AMD modulů, které navíc zvýšily rychlost načítání aplikace. Aplikace je přínosná tím, že ukazuje moderní postupy při tvorbě interaktivních webových aplikací. Předvádí způsob, jak pracovat s jednotlivými API Twitteru a Google Maps a vzájemně je propojit. Také využívá možnosti HTML5 a CSS3, které usnadňují tvorbu přívětivého uživatelského rozhraní. Díky tomu jsem se naučil, jak postupovat při vývoji JavaScriptové aplikace. Velmi doporučuji použití MVC frameworku kvůli úspoře času. K dispozici je jich momentálně celá řada, proto je velmi důležité věnovat dostatek času výběru toho správného. Často jsou si hodně podobné, je tedy dobré brát ohled třeba na kvalitu dokumentace, množství návodů či počet nasazených aplikací v ostrém provozu. S výběrem může pomoct i web TodoMVC12 , kde je ukázková aplikace implementována v několika frameworcích. Také doporučuji zvýšenou opatrnost při práci s HTML5 a CSS3, které jsou velmi závislé na prohlížeči. Jejich implementace se může lišit, zvláště pak u experimentálních vlastností. To jsem poznal třeba i ve své aplikaci u funkce Drag and drop. Co se týče budoucnosti RIA a jejich využití, podle mého názoru se jedná o další krok v evoluci webových aplikací. Už nyní lze nalézt spoustu aplikací, které obsahují bohaté uživatelské rozhraní a nabízejí větší míru interakce. Takových aplikací pak bude neustále přibývat. Největší potenciál vidím právě v JavaScriptových RIA, které mohou využívat prvky stále se vyvíjejícího HTML5. Navíc díky své nezávislosti na pluginech mohou běžet i na populárních mobilních zařízeních, které často nepodporují pluginy pro Flash, Javu nebo Silverlight.

12

http://todomvc.com/

6

6

LITERATURA

42

Literatura

About Apache Flex. Apache Flex [online]. c2013 [cit. 2013-05-20]. Dostupné z: http://flex.apache.org/about-whatis.html. Ashworth, Stuart. Ext JS 4 Web Application Development Cookbook. Birmingham: Packt Pub., 2012, 470 s. ISBN 978-1-84951-686-0. Běhálek, Marek. Programovací jazyk C#. In: VŠB-TU Ostrava [online]. c2007 [cit. 2013-05-20]. Dostupné z: http://www.cs.vsb.cz/behalek/vyuka/pcsharp/text/index.html. Crockford, Douglas. JavaScript: The Good Parts. Sebastopol: O’Reilly Media, 2008, 153 s. ISBN 978-0-596-51774-8. DocumentCloud. Backbone.js [online]. c2013 [cit. 2013-05-20]. Dostupné z: http://backbonejs.org/. Ecma International. ECMAScript Language Specification – ECMA-262 Edition 5.1. Ecma-international.org [online]. c2011 [cit. 2013-05-20]. Dostupné z: http://www.ecma-international.org/ecma-262/5.1/. Emerson, Helen. Javascript anonymous functions. In: Helephant.com [online]. 200808-23 [cit. 2013-05-20]. Dostupné z: http://helephant.com/2008/08/23/javascript-anonymous-functions/. Google. MVC Architecture. Google Chrome Apps [online]. c2012 [cit. 2013-05-20]. Dostupné z: http://developer.chrome.com/apps/app_frameworks.html. Horton, Ivor. Java 5. Praha: Neocortex, 2005, 1443 s. ISBN 80-863-3012-5. Jacobs, Denise. The top 10 CSS3 techniques. In: .net magazine [online]. 2011-04-18 [cit. 2013-05-20]. Dostupné z: http://www.netmagazine.com/features/top-10-css3-techniques. jQuery Foundation. jQuery [online]. c2013 [cit. 2013-05-20]. Dostupné z: http://jquery.com/. Kay, Russell. Rich Internet applications. In: Computerworld [online]. 2009-04-06 [cit. 2013-05-20]. Dostupné z: http://www.computerworld.com/s/article/ 335519/Rich_Internet_Applications. Měchura, Milan. Flash na Androidu 4.1 nebude, v srpnu zmizí i pro starší verze. In: MobilMania.cz [online]. 2012-07-02 [cit. 2013-05-20]. Dostupné z: http://www.mobilmania.cz/bleskovky/ flash-na-androidu-41-nebude-v-srpnu-zmizi-i-pro-starsi-verze/ sc-4-a-1320897/default.aspx.

6

LITERATURA

43

Mozilla. DOM Levels. Mozilla Developer Network [online]. 2012-04-28 [cit. 201305-20]. Dostupné z: https://developer.mozilla.org/en-US/docs/DOM_Levels. Mozilla. JavaScript technologies overview. Mozilla Developer Network [online]. 2013a [cit. 2013-05-20]. Dostupné z: https://developer.mozilla.org/en-US/docs/JavaScript/ JavaScript_technologies_overview. Mozilla. Introduction to HTML. Mozilla Developer Network [online]. 2013b [cit. 2013-05-20]. Dostupné z: https://developer.mozilla.org/en-US/docs/Web/Guide/ HTML/Introduction. Mozilla. HTTP access control (CORS). Mozilla Developer Network [online]. 2013b [cit. 2013-05-20]. Dostupné z: https://developer.mozilla.org/en-US/docs/HTTP/ Access_control_CORS. OAuth Core Workgroup. OAuth Core 1.0. OAuth Community Site [online]. 2007 [cit. 2013-05-20]. Dostupné z: http://oauth.net/core/1.0/. Oracle. JavaFX FAQ. Oracle.com [online]. 2013 [cit. 2013-05-20]. Dostupné z: http://www.oracle.com/technetwork/java/javafx/ overview/faq-1446554.html. Osmani, Addy. A Few New Things Coming To JavaScript. In: AddyOsmani.com [online]. 2012-11-22 [cit. 2013-05-20]. Dostupné z: http://addyosmani.com/blog/ a-few-new-things-coming-to-javascript/. Pejša, Jan. Co je Cross-Site Request Forgery a jak se mu bránit. In: Zdroják [online]. 2008-11-24 [cit. 2013-05-20]. Dostupné z: http://www.zdrojak.cz/clanky/ co-je-cross-site-request-forgery-a-jak-se-branit/. Pilgrim, Mark. Detecting HTML5 Features. Dive Into HTML5 [online]. 2013-04-25 [cit. 2013-05-20]. Dostupné z: http://diveintohtml5.info/detect.html. Q-Success. Usage of JavaScript libraries for websites. W3Techs [online]. c2013 [cit. 2013-04-27]. Dostupné z: http://w3techs.com/technologies/overview/javascript_library/all. Ralston, Steve. An introduction to AngularJS. In: Webdesigner Depot [online]. 2013-04-10 [cit. 2013-05-20]. Dostupné z: http://www.webdesignerdepot.com/2013/04/ an-introduction-to-angularjs/.

6

LITERATURA

44

Staníček, Petr. Javascript a oblast působnosti proměnných – díl třetí. In: Zdroják [online]. 2009-08-17 [cit. 2013-05-20]. Dostupné z: http://www.zdrojak.cz/clanky/ javascript-a-oblast-pusobnosti-promennych-dil-treti/. Stepp, Marty, Jessica Miller a Victoria Kirst. Web Programming Step by Step: Chapter 12: Ajax, XML, and JSON. In: Webstepbook.com [online]. 2. vyd. c2012 [cit. 2013-05-20]. Dostupné z: http://www.webstepbook.com/supplements-2ed/slides/ chapter12-ajax-xml-json.shtml. W3Schools. XML DTD. W3Schools.com [online]. c2013 [cit. 2013-05-20]. Dostupné z: http://www.w3schools.com/xml/xml_dtd.asp. Web Browser Plugin Market Share. Statowl [online]. 2013 [cit. 2013-05-20]. Dostupné z: http://statowl.com/plugin_overview.php. Zakas, Nicholas C. JavaScript pro webové vývojáře. Brno: Computer Press, 2009, 832 s. ISBN 978-80-251-2509-0. Zakas, Nicholas C., Jeremy McPeak a Joe Fawcett. Professional Ajax. Indianapolis: Wiley Publishing, 2006, 406 s. ISBN 978-0-471-77778-6.

Přílohy

A

A

PROTOKOL OAUTH

Protokol OAuth

Obr. 6: Průběh autentizace skrze protokol OAuth (OAuth Core Workgroup, 2007)

46

B

B

UKÁZKA APLIKACE

Ukázka aplikace

Obr. 7: Zobrazení profilu uživatele

47

B

UKÁZKA APLIKACE

Obr. 8: Mapa pro vyhledávání tweetů

48