Proč považuji Google Closure za nejlepší javascriptovou knihovnu

Google Closure Library

Google Closure Library považuji za nejrobustnější, nejrychlejší a nejlépe navrženou javascritovou knihovnu, navíc doplněnou unikátním Google Closure Compilerem. Dlouho a aktivně jsem používal jQuery, Mootools i YUI, mám tedy s čím srovnávat.

jQuery je fajn, v čem je problém?

Knihovna jQuery je fajn, ale sama o sobě toho vlastně moc neumí. Základní DOM manipulace, animace, AJAX, trocha utilit a podpory pro pluginy. Těch existují myriády, valných i jiných kvalit. Každá je psaná trochu jinak, má či nemá dokumentaci, testy se vyskytují spíše sporadicky. Vytvořit webovou aplikaci s jQuery tak znamená strávit nemalou dobu hledáním, výběrem a zkoušením všemožných pluginů a utilit, namátkou:

  • podpora pro jmenné prostory
  • podpora pro třídy a dědičnost
  • dependency management
  • UI framework (např. jQuery UI)
  • komprese skriptů
  • šablonovací systém
  • dokumentační komentáře

Potřebujeme zpravidla vše výše uvedené, a nejen to. Dost možná naše webová aplikace dále vyžaduje JSONP, localStorage, HTML5 history, možná nějaké matematické funkce, wysiwyg editor, vektorovou grafiku. Chceme vyzkoušené, ověřené komponenty, již napsané a otestované někým jiným, protože Don’t repeat yourself < Don’t repeat others < Don’t repeat.

Vsuvka: Machr mezi čtenáři bude jistě oponovat: „Napsal sem mailovýho klienta pouze v jQuery, bez jediný třídy a kousku cizího kódu, holejma rukama.“

To jistě není nemožné. Podobně byl postaven i Bělomořsko-baltský kanál. Podobné hádám, budou ztráty i tragická kvalita výsledného díla.

Během svých školení jsem měl možnost nahlédnout do procesu vývoje webových aplikací v mnoha firmách. Až na výjimky jde vždy o velmi podobný příběh. Začne se s jQuery a pluginy. Nějak se píše dokumentace, ale spíše vůbec. Ještě méně se píší testy. Veškerý kód se nachází v několika souborech pojmenovaných jako ui.js, utils.js, ajax.js. Vše se vymýšlí a dodělává za běhu, každá nová app vypadá jinak než předchozí. Aby bylo jasno, tohle je regulérní cesta. Potíž je v tom, že vytvořit si a udržovat takový funkční ekosystém stojí nemálo času a peněz.

V čem je Google Closure knihovna jiná?

Google Closure knihovna je především rozsáhlá. V Googlu se napsalo hodně javascriptových aplikací, a je velmi pravděpodobné, že právě teď řešíte problém, který v Google vyřešili už v roce 2006. Namátkou: datové struktury, komunikace mezi frames, práce s objekty a polem, manipulace s barvami, šifrování, asynchronní operace, funkcionální programování, UI widgety a mnoho mnoho dalšího.

Google Closure je velmi dobře otestovaná a spolehlivá. Za dva roky v produkci jsem nezaznamenal jedinou breaking change, což se třeba o jQuery říct nedá. Google má totiž integrační testy dobře zautomatizované, výskyt chyby okamžitě vrátí změny v kódu zpět. Snad všechny třídy mají unit testy.

Google Closure je rychlá. Rychlost je pro Google důležitá, a na kódu je to znát. Neexistuje, aby se v knihovně objevila kupříkladu taková zhůvěřilost, jako je Mootools reset. Ani nehrozí, že by nějaká funkcionalita knihovny x-krát za sebou zlepšila svůj výkon o stovky procent, jako se pravidelně děje v jQuery (jak pomalá asi musela být ta fičura na začátku?). Naopak. Předkompilované šablony, minimální množství abstraktních vrstev, žádné element obalující třídy, důraz na šetření pamětí i prostředky. To činí mimo jiné knihovnu jako stvořenou pro vývoj mobilních aplikací.

Google Closure je bezpečná. Šablonovací systém Google Closure Templates, podobně jako Nette Latte, automaticky vše kontextově escapuje, což pomáhá předcházet XSS dírám z nepozornosti. I jiné šablonovací jazyky tak činí, zdaleka ne všechny, obávám se však, že ne s dostatečným důrazem na detail. To samé platí i pro samotný kód knihovny, potenciálně nebezpečný kousek kódu bývá náležitě dokumentován.

Čímž se dostáváme k tomu, jak je Google Closure dokumentována. Příkladně. Komentáře jsou umístěny v kódu, a pomocí tohoto nástroje, se z nich generuje HTML dokumentace. Velmi užitečné jsou dokumentační komentáře. K čemu jsou? Dodávají kódu typovost. Pomocí anotací lze určit, jaké typy mají mít parametry metod, kdo dědí od koho, lze deklarovat viditelnost a mnohé další. Anotace v podstatě dělají z JavaScriptu (volitelně) typový jazyk. To vše zásadně zlepšuje čitelnost kódu, a i jeho kvalitu. Schválně se podívejte na vygenerovanou dokumentaci k třídě CollectableStorage. Na školení jsem dostal podezřívavý dotaz: „No a jak udržujete konzistenci mezi kódem a komentáři? U nás ve firmě s tím máme docela problém.“ Odpovědí je Google Closure Compiler.

Closure Compiler

Google Closure Compiler, jediný nástroj svého druhu, a nesmírně užitečná součást ekosystému Google Closure Tools. Prostřednictvím anotací zajišťuje typovost kódu, kontroluje jeho správnost, upozorňuje na podezřelá místa. Nepoužitý kód se odstraní, a ten, co zbude, maximálně zmenší. Vedlejším efektem je účinná obfuskace.

Odstraňování kódu a nekompromisní minimalizace rovná se velkorysé programování. Co tím myslím? Dám příklad. Asi každý programátor má svou pomocnou třídu pro práci se stringy. Jakým způsobem ji znovu použije v novém projektu? Patrně celou, i když potřebuje jen jednu konkrétní metodu, musí vzít celý soubor. Pokud se rozhodne požadovanou metodu vykopírovat, ztrácí referenci na původní. Udržovat efektivně změny přes více závislostí je pak když ne nemožné, tak PITA.

To vede k tomu, že programátor si dvakrát rozmyslí, než rozšíří svou string utils třídu. Ne tak s Closure. Moje string utils třída může mít 20KB a aplikace ji používající 1KB. Asi nemusím vysvětlovat, jak moc dobré je tohle pro vývoj mobilních aplikací. Teď zrovna píšu mobilní e-shop podobný nativní aplikaci. Už toho umí docela dost, přesto je výsledný kód stále menší než kód samotné jQuery.

Jmenuji se Daniel Steigerwald a pomáhám firmám i jednotlivcům s vývojem webových aplikací. Pokud vás Google Closure zajímá, přijďte na školení, pokud chcete rovnou Closure nasadit (Closure, kompilace, testy, šablony, MVC), napište mi.

Závěr

Closure není všespásná knihovna a i v jQuery lze psát dobré aplikace, jen je to mnohem těžší. Closure není superinovativní, dnes už ne. Je to vyzrálá, léty odzkoušená knihovna. Budoucnost Closure je jmenuje Dart. Dart je logickým důsledkem evoluce Closure Tools, pro nasazení se však ještě nehodí. Co se týká HTML a manipulace s DOM, budoucností se zdá být AngularJS. Podívejte se na dema, a bude vám jasné, proč. Obousměrný databinding, mocné HTML šablony, náznak shadow dom. AngularJS je revoluce, jakou svého času bývalo jQuery. Pokud však potřebuje vyvíjet aplikace teď, zvažte Google Closure. Je to obrovská zásobárna vyzkoušených řešení, doplněná skvělými nástroji, do kódu zatavené penzum moudrosti webového vývoje, destilát design patternů a best practices. V článku sem rozhodně nezmínil vše, uvítám proto v komentářích další otázky.

Předpokládané otázky

Jak dlouho zabere naučit se Closure?

Já byl produktivní zhruba po dvou měsících. S Closure jsem začal hned po jeho zveřejnění, kdy ještě neexistovala pořádná dokumentace. Dnes už mohu doporučit skvělou knihu Closure: The Definitive Guide – Tools for adding power to your JavaScript.

Docela nedávno sem zaváděl Closure (i s Coffeescriptem) do Proactify. Kolega se zorientoval velmi rychle, commitoval už druhý den. Stačilo jen nastavit workflow a vysvětlil, jak Closure funguje.

Existuje pro Closure něco jako http://backbonejs.org?

Ano, PlastronJS nebo este.mvc.

Existuje nějaký boilerplate pro Closure dev stack?

Independent software gardener, libertarian, web applications consultant and trainer. Google Developer Expert since 2012.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 69

Přehled komentářů

Hmm Re: Proč považuji Google Closure za nejlepší javascriptovou knihovnu
Aleš Roubíček Re: Proč považuji Google Closure za nejlepší javascriptovou knihovnu
Hmm Re: Proč považuji Google Closure za nejlepší javascriptovou knihovnu
jozefyna Re: Proč považuji Google Closure za nejlepší javascriptovou knihovnu
suxi Paneboze
Ondřej Kučera Re: Paneboze
Aleš Roubíček Re: Paneboze
Hmm Re: Paneboze
Martin Hassman Re: Paneboze
chleba Re: Paneboze
Aleš Roubíček Re: Paneboze
chleba Re: Paneboze
Jurkova Re: Paneboze
somarik Re: Paneboze
Ondřej Kučera Re: Paneboze
chleba Re: Paneboze
blizz Re: Paneboze
Diskobolos Autore, Proactify pouziva jQuery,,,
Aleš Roubíček Re: Autore, Proactify pouziva jQuery,,,
Diskobolos Re: Autore, Proactify pouziva jQuery,,,
Aleš Roubíček Re: Autore, Proactify pouziva jQuery,,,
Diskobolos Re: Autore, Proactify pouziva jQuery,,,
Aleš Roubíček Re: Autore, Proactify pouziva jQuery,,,
Daniel Steigerwald Re: Autore, Proactify pouziva jQuery,,,
lolobito Re: Autore, Proactify pouziva jQuery,,,
Tom Re: Autore, Proactify pouziva jQuery,,,
dmkil js-dojo
A.S.Pergill To je zásadní a tak trochu "filosofický" problém:
suxi Re: To je zásadní a tak trochu "filosofický" problém:
Jan Kuča Re: To je zásadní a tak trochu "filosofický" problém:
Aleš Roubíček Re: To je zásadní a tak trochu "filosofický" problém:
A.S. Pergill Re: To je zásadní a tak trochu "filosofický" problém:
Aleš Roubíček Re: To je zásadní a tak trochu "filosofický" problém:
alancox Re: To je zásadní a tak trochu "filosofický" problém:
Aleš Roubíček Re: To je zásadní a tak trochu "filosofický" problém:
alancox Re: To je zásadní a tak trochu "filosofický" problém:
j Re: To je zásadní a tak trochu "filosofický" problém:
blizz Re: To je zásadní a tak trochu "filosofický" problém:
alancox Re: To je zásadní a tak trochu "filosofický" problém:
Aleš Roubíček Re: To je zásadní a tak trochu "filosofický" problém:
alancox Re: To je zásadní a tak trochu "filosofický" problém:
Aleš Roubíček Re: To je zásadní a tak trochu "filosofický" problém:
alancox Re: To je zásadní a tak trochu "filosofický" problém:
pravdokop Re: To je zásadní a tak trochu "filosofický" problém:
j Re: To je zásadní a tak trochu "filosofický" problém:
A.S. Pergill Re: To je zásadní a tak trochu "filosofický" problém:
Nox Re: To je zásadní a tak trochu "filosofický" problém:
Čelo Re: Proč považuji Google Closure za nejlepší javascriptovou knihovnu
alancox Re: Proč považuji Google Closure za nejlepší javascriptovou knihovnu
Ondřej Kučera backbone js nejde použít? proč?
Daniel Steigerwald Re: backbone js nejde použít? proč?
RDPanek Díky za pěkný článek.
JanPal Re: Proč považuji Google Closure za nejlepší javascriptovou knihovnu
Aleš Roubíček Re: Proč považuji Google Closure za nejlepší javascriptovou knihovnu
JanPal Re: Proč považuji Google Closure za nejlepší javascriptovou knihovnu
blizz Re: Proč považuji Google Closure za nejlepší javascriptovou knihovnu
Daniel Steigerwald Re: Proč považuji Google Closure za nejlepší javascriptovou knihovnu
JanPal Re: Proč považuji Google Closure za nejlepší javascriptovou knihovnu
Aleš Roubíček Re: Proč považuji Google Closure za nejlepší javascriptovou knihovnu
Daniel Steigerwald Re: Proč považuji Google Closure za nejlepší javascriptovou knihovnu
Marty Galerie pluginů / doplňků
Daniel Steigerwald Re: Galerie pluginů / doplňků
quarry jquery gc
Nox Re: jquery gc
quarry Re: jquery gc
jlx Re: jquery gc
tuttle Diky za clanek
Mr. T Porovnání
kak Výborné, ale co Grid?
Zdroj: https://www.zdrojak.cz/?p=3676