Přejít k navigační liště

Zdroják » JavaScript » JavaScript na serveru: CoffeeScript a šablonovací systémy

JavaScript na serveru: CoffeeScript a šablonovací systémy

Články JavaScript, Různé

Dnešní díl bude věnován populárnímu jazyku CoffeeScript, který se občas preferuje před klasickým JavaScriptem při vývoji aplikací v Node.js. Také se podíváme na různé šablonovací systémy a ukážeme si, jak je v Node.js používat.

CoffeeScript

Existuje obrovské množství jazyků, které se kompilují do JavaScriptu. Jejich rozsáhlý seznam najdete na wiki u CoffeeScriptu. Téměř pro každý populární jazyk zde najdete knihovnu, která dokáže zápis v tomto jazyce převést do JavaScriptu, mimo jiné pro Ruby, Python, Java a mnoho dalších.

Vedle nich vznikla celá řada nových jazyků, které jsou vytvořeny přímo pro JavaScript a umožňují jeho jednodušší zápis (třeba umožňují vyhnout se callbackům přes klíčová slova await a defer, viz dále) nebo přidávají nové rysy, které JavaScript přímo nepodporuje (např. možnost tvorby tříd). Kód pak kompilují do klasického JavaScriptu. Nejpopulárnějším zástupcem této kategorie je CoffeeScript.

CoffeeScript je jazyk, který je výrazně ovlivněn především Ruby a Pythonem , které kombinuje s jednoduchostí JavaScriptu. Zápis v něm se výrazně odlišuje od zápisu v čistém JavaScriptu, protože CoffeeScript je založen na significant whitespace (“významné mezery”), což znamená, že jednotlivé související bloky kódu se neuzavírají do složených závorek, jak bývá zvykem, ale odsazují se o několik mezer.

Právě tento rys jazyka je předmětem mnoha debat a článků, které rozebírají, zda je to správně či nikoliv. Lze říci, že je svět JavaScriptu rozdělen na dvě skupiny: jedna CoffeeScript miluje a používá ho, kde to jde, a druhá CoffeeScript nenávidí a snaží se mu vyhýbat. Z vlastní zkušenosti můžu říci, že i když se vám nemusí na první pohled CS líbít, zkuste mu dát šanci a něco kratšího si v něm napište. Třeba to budete mít podobně jako já a několik mých známých, kteří jsme také původně CoffeeScript odmítali a dnes je tomu jinak.

Za zmínku určitě stojí, že autorem CoffeeScriptu je Jeremy Ashkenas, který je autorem dalších velmi známých projektů, především Backbone (nejpopulárnější a nejpoužívanější JavaScriptový MVC framework), underscore.js (velké množství užitečných funkcí pro JS) či Docco (generování dokumentace).

Pokud si chcete CoffeeScript vyzkoušet, nejjednodušší je projít se úvodní stránku projektu s mnoha příklady. Pokud chcete nějaké materiály v češtině, mám pro vás dobrou zprávu. Na Zdrojáku před dvěma roky vycházel krátký seriál o CoffeeScriptu.

Pro zkoušení a převody skriptů mezi JavaScriptem a CoffeeScriptem v obou směrech se vám jistě bude hodit Node.js balíček js2coffee. Je ale nutné podotknout, že vygenerovaný CoffeeScript přes tento nástroj je sice validní CoffeeScript, ale mnohdy by šlo danou věc napsat lépe, především se to týká tříd. Pokud se však CS budete učit a nebudete vědět, jak nějakou část JavaScriptu převést do CS, je tento nástroj velmi užitečný.

Od CoffeeScriptu bylo odvozeno velké množství dalších jazyků, které fungují na stejném principu, jen přidávají další vlastnosti. Za zmínku stojí IcedCoffeeScript, který přidává do jazyka klíčové slova await a defer, přes které se můžete vyhnout callbackům. O IcedCoffeeScriptu jsem psal na NodeBlogu. Další zajímavá odnož CoffeeScriptu je LiveScript, který se snaží CoffeeScript ještě více zjenodušit.

CoffeeScript a Node.js

Dobrá zpráva je, že pokud chcete používat CoffeeScript a další zmíněné jazyky v Node.js, je to nesmírně jednoduché a stačí vám k tomu přidat pouze jeden jediný řádek kódu.

Nejprve je potřeba daný jazyk nainstalovat přes npm, takže třeba CoffeeScript nainstalujeme takto:

npm install coffee-script

Na začátku prvního spuštěného skriptu je pak nutné CoffeeScript načíst, v našem případě v souboru server.js přidáme jako první řádek tento kód:

require('coffee-script');

A to je vše. CoffeeScript zaregistruje koncovku .coffee, takže když nyní napíšete do require jméno souboru (Node.js doporučuje používat jméno bez koncovky), Node.js načte tento soubor a interně ho zkompiluje do JavaScriptu. Preference zůstává u koncovky .js, pokud tedy budeme chtít načíst soubor cestou ‘./app’ a bude existovat jak soubor app.js, tak app.coffee, prioritu bude mít soubor app.js.

Šablonovací systémy

V našem projektu jsme šablonovací systém v Node.js až do předchozího dílu nepoužili, protože používáme zpracování šablon přes AngularJS. V Node.js lze samozřejmě psát i aplikace bez API a AngularJS, kdy se vše zpracovává na straně serveru a uživateli se pošle již zkompilované HTML. V takovém případě budeme již nějaký šablonovací systém potřebovat.

Šablonovací systém budeme později i my používat více v rámci vyvíjené aplikace, až budeme dělat lokalizaci e-shopu. Budeme mít různé texty v několika jazycích a budeme mít pro všechny jazykové verze vždy jednu šablonu, do které se texty vloží a vygenerují se HTML šablony pro každou jazykovou verzi, které pak budeme klasicky používat přes AngularJS.

V minulém díle jsme použili šablonovací systém EJS, který je snad vůbec nejjednodušší. Není samozřejmě jediný, v Node.js existují desítky různých systémů a jejich seznam lze nalézt ve wiki Node.js. Celkem 20 z nich je pak přes knihovnu consolidate.js podporováno přímo v Expressu, takže si můžete vybrat z široké nabídky.

Velmi populární je také Jade, který je založen na significant whitespace, umožňuje zjednodušit zápis v HTML a přidává mnoho dalších funkcí jako např. dědičnost šablon či mixiny.

Instalace v Expressu

Abychom mohli daný šablonovací systém v Expressu používat, potřebujeme přidat tři řádky v souboru config.js. Podívejme se, jak vše bude vypadat pro systém EJS.

app.engine('.html', require('ejs').__express);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');

Nejprve říkáme, jaký systém chceme používat. Dále říkáme, že se mají pro view načítat soubory s koncovkou .html a nakonec nastavujeme adresář, do kterého naše šablony budeme vkládat.

Když pak potřebujeme šablonu vyrenderovat, tak máme k dispozici na objektu odpovědi metodu render(), která šablonu zparsuje a výsledek odešle do prohlížeče:

res.render('sablona', {
  val:42
});

Nyní se bude hledat šablona /views/sablona.html, ve které bude dostupná proměnná val s hodnotou 42.

Co dále

Dnešním dílem seriál o Node.js končí. V novém roce začne zbrusu nový seriál, který bude na tento seriál přímo navazovat. Budeme v něm vytvářet aplikaci, která byla popsána v 5. díle JavaScript na serveru: začínáme programovat e-shop a provede vás od zadání prvního požadavku na funkcionalitu aplikace až po odeslání do produkce. Budeme se v něm i dále věnovat především Node.js, AngularJS a HTML5, a to včetně témat, na která zatím čas nevyšel. Těšit se můžete třeba na povídání o streamech či realtime aplikacích a socket.io.

Na tvorbě většiny článků v průběhu seriálu se svými připomínkami podílel také Pavel Lang (skolajs.cz). Díky!

Komentáře

Subscribe
Upozornit na
guest
14 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
pavel

Díky, už se těším na nový seriál.

Zajímalo by mne, zda existuje jednoduchá možnost „zabalit“ aplikaci s node.js a moduly do jednoho archivu, aby si to mohli uživatelé spustit na Windowsech aniž by měli předtím nainstalované node.js.

pavel

Díky, vypadá to zajímavě. Mrknu na to.

Pavel Lang

O skupinách milujících a nenávidějících CofeeScript je v článku zmínka, já patřím spíše k té druhé kategorii.

Jen bych zmínil důležitou věc – kvůli significant whitespace nelze používat žádné lintery.
Pokud je někdo „čuně“ nejprve by si měl vyzkoušet psát kód podle nějakých zásad a kontrolavat se linterem a takový kód může být čitelnější. Sám používám linter z Google Closure Tools a vím, že naučit se dodržovat určité zásady chce trochu času.

Ještě přidám link na článek CoffeeScript: less typing, bad readability a jeden místní článek CoffeeScript: nový jazyk, nové chytáky

Pavel Lang

Jde spíš o to, že linter na CoffeeScript má velice málo co kontrolovat, protože to co je v JS špatné odsazení má v CS sémantický význam.

Daniel Steigerwald

A zde vidíš jednu z výhod CoffeeScriptu. Ačkoliv to tak nevypadá, CS je podstatně přísnější na syntax než JavaScript, a má mnohem méně možností jak zapsat stejný výraz, což znamená, že Lint téměř není třeba. Kontrolovat středníky, mezery, složené závorky v Coffeecriptu jaksi nedává smysl.

Honza Marek

Já bych řek, že těch volitelných záležitostí je tam mnohem víc. Třeba pro zápis objektu funguje v coffeescriptu x možností:

obj =
  a: 1
  b: 2

obj =
  a: 1,
  b: 2

obj = {
  a: 1,
  b: 2
}

obj = a: 1, b: 2

A vymyslet která možnost je zrovna v daném použití nejkrásnější a nejpřehlednější, to může být občas dost práce.

Daniel Steigerwald

Viděl jsem to jako ty, pak jsem zkusil CoffeeScript na větší projekt, teď už bych nešel zpět k JS ani náhodou.

Celá ta diskuze kolem CS je bouře ve sklenici vody. Dokud je výstupem transpilace čitelný JavaScript, jedná se jen o syntax. Počítám, že s nástupem TypeScriptu bude stále méně lidí psát čistý JS.

petersirka

Dovolím si dať malú ochutnávku/ukážku nového webového frameworku napísaného v node.js, ktorý sa volá partial.js:

Viac informácii:
http://petersirka.sk/development/partial-js-novy-webovy-framework/
http://www.zajtra.sk/programovanie/896/partial-js-novy-webovy-framework-pre-node-js

Pavel Lang

Zase tak „nové“ mi to nepříjde. Express podle mě zvládne vše zde uvedené a nechává přitom větší volnost při výběru komponent. Nenašel jsem v článcích odkaz na zdrojáky a v npm není též nic publikováno, takže kvality těžko posuzovat.

Peter Širka

Framework som dokončil na testovacie účely, viac na adrese:
https://github.com/petersirka/partial.js

blizz

coffee je dost obmedzeny v porovnani s livescriptom bude aj clanok o livescripte?

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.