Javascriptaření: překladače, pakovače

V dnešním Javascriptaření si představíme několik nástrojů pro překlad z a do JS (nejen CoffeeScript…) – a nepůjde o žádné exotické jazyky, ale o „vytuněný“ JS, MVC framework, knihovny pro kompresi dat nebo velmi zajímavou vývojářskou konzolu, která umožní ladit skripty najednou v několika prohlížečích.
Seriál: Javascriptaření (9 dílů)
- Javascriptaření: hrajte si s funkcemi! 31. 1. 2011
- ECMAScript Strict mode ve Firefoxu 4 8. 2. 2011
- Javascriptaření: nejen jQuery živ je JavaScriptař 8. 3. 2011
- Javascriptaření: fyzika, grafika a společenská konverzace 23. 3. 2011
- JavaScriptaření: drátujeme, překládáme, spojujeme 31. 3. 2011
- Javascriptaření: ukažte mi, označte mě, opravte mě 13. 4. 2011
- Kontrola JavaScriptu s JSLint a JSHint 14. 7. 2011
- Základní vzory pro vytváření jmenných prostorů v JavaScriptu 10. 10. 2011
- Javascriptaření: překladače, pakovače 9. 11. 2011
Nálepky:
O CoffeeScriptu asi nemá smysl se rozepisovat nějak víc – většina čtenářů Zdrojáku ho pravděpodobně zná a setkala se s ním. Připomínat, že jde o jazyk, překládaný do JavaScriptu, je tedy nošením sov do Athén. CoffeeScript si tiše našel cestu na pracovní stanice českých vývojářů, ale nejen tam. (Mimochodem, víte o tom, že pro CouchDB existuje patch, který umožňuje psát dotazy přímo v CoffeeScriptu?)
CoffeeScript přeložený do JavaScriptu je „obnošená vesta“. Ale co třeba JavaScript přeložený do Coffeescriptu? Překladač se, nepřekvapivě, jmenuje JS2Coffee a usnadní případnou migraci z JS do Coffee. Samozřejmě nemůžete očekávat, že rozpozná veškeré objektové patterny a správně je převede, ale pro počáteční migraci a získání „surového výchozího materiálu“ je určitě použitelný.
Pokud se vám zdá změna syntaxe mezi JS a CoffeeScriptem příliš radikální, zkuste třeba Kaffeine. Kaffeine umožňuje psát dál ve „vanilla JS“, pouze přidává některé syntaktické prvky, jako jsou implicitní definice funkcí a proměnných, snazší vyjádření asynchronních funkcionálních konstrukcí nebo „for each“ konstrukci ( for ... of ...
)
O vhodnosti některých zjednodušení je možné se přít. Má smysl zavádět implicitní deklarace, nebo by byla na místě přísnější syntaxe, s nutností explicitních deklarací na jednom místě apod.? To další překladač má v tomto ohledu jasno: Google Traceur umožňuje, slovy z jeho vlastních stránek, používat chystané novinky v JS už dnes. Mezi nabízené vlastnosti patří třídy, moduly, traits, generátory nebo destrukturovaná přiřazení – tedy vlastnosti, navrhované např. v JS.next nebo v novém Harmony.
(Mimochodem, autor CoffeeScriptu má na webu seznam jazyků, kompilovaných do JS – díky blizz za připomenutí v komentářích!)
Dosti transpilerů. Pojďme se podívat třeba na nějaký MVC framework. Pro JavaScript je jich už poměrně dost – co třeba Spine? Je napsaný v CoffeeScriptu, ovšem lze ho použít i s čistým JS. Základ, tedy vlastní MVC kostra, připomíná Backbone. Spine navíc nabízí rozšíření pro mobilní zařízení, přístup k některým API (localstorage, AJAX atd.) nebo správce závislostí. Uživatele Rails potěší, že Spine je přizpůsobené pro integraci s tímto populárním frameworkem.
Autor článku v jedné webové aplikaci použil „filesystém v prohlížeči“ – tedy ukládání souborů v localstorage. Jednalo se převážně o textové soubory, a protože je localstorage omezený na 5MB (respektive: věří se, že tomu tak je, informace o tom, jak to je ve skutečnosti, se různí), použil transparentní kompresi: LZW.JS. Pro stažení souborů z localstorage v prohlížeči do „počítače“ se pak hodily knihovny JSzip, která dokáže soubory zabalit do archívu ZIP (buď metodou store, nebo deflate) a Downloadify, která překonává problém s pojmenováním takto vygenerovaných souborů. U té druhé knihovny pozor – na odkazovaných stránkách ji nenajdete, podívejte se na GitHub: Downloadify.
Při ladění skriptů může nastat situace, kdy si říkáte: Je skvělé, že mám Firebug, ale hodilo by se mi mít tuhle konzoli v několika prohlížečích NAJEDNOU! Přesně k tomu slouží další dnešní nástroj – Tutti. Používá WebSocket, Socket.IO a Node.js pro realtime komunikaci mezi prohlížeči. Funguje tak, že zadané výrazy nechá zpracovat eval()
-em na všech spojených prohlížečích, a v konzoli vypíše výsledky. Nemusíte tak skákat z okna do okna a vidíte na jednom místě, jak jednotlivé prohlížeče naloží s daným výrazem.
….
Díky, opraveno
https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS
Ten seznam tu mám v záložkách, ale při psaní jsem ho přehlédl. Takže děkuju za připomenutí, už je tam.
Nemáte někdo praktické zkušenosti s Traceur compilerem?
Vypadá jako velmi zajímavá možnost, ale na internetu jsem našel v diskuzích několik nedobrých zmínek o jeho výkonu a není mi také jasné, jestli Google bude projekt nadále podporovat a nezačne raději investovat do Google Dart.