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

node.js logo

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.

Seriál: Node.js - s JavaScriptem na serveru (13 dílů)

  1. JavaScript na serveru: Začínáme s Node.js 23.11.2010
  2. JavaScript na serveru: Patří budoucnost Node.js? 21.9.2012
  3. JavaScript na serveru: Architektura a první Hello World 5.10.2012
  4. JavaScript na serveru: moduly a npm 12.10.2012
  5. JavaScript na serveru: začínáme programovat e-shop 19.10.2012
  6. JavaScript na serveru: MongoDB, Mongoose a AngularJS 26.10.2012
  7. JavaScript na serveru: Testování a kontinuální integrace 2.11.2012
  8. JavaScript na serveru: REST API 9.11.2012
  9. JavaScript na serveru: implementace REST API 16.11.2012
  10. JavaScript na serveru: nástroje a dokumentace 23.11.2012
  11. Začínáme s AngularJS 30.11.2012
  12. AngularJS direktivy a testování 7.12.2012
  13. JavaScript na serveru: CoffeeScript a šablonovací systémy 14.12.2012

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!

Jakub pracoval na několika zajímavých projektech, za nejvýznamnější považuje vytvoření e-commerce řešení Shopio.cz. Poslední rok se plně věnuje Node.js, frameworku AngularJS a NoSQL databázím.

Komentáře: 14

Přehled komentářů

pavel Instalace na Win
Jakub Mrozek Re: Instalace na Win
pavel Re: Instalace na Win
Jakub Mrozek Re: Instalace na Win
langpa CofeeScript
Jakub Mrozek Re: CofeeScript
langpa Re: CofeeScript
Daniel Steigerwald Re: CofeeScript
Honza Marek Re: CofeeScript
Daniel Steigerwald Re: CofeeScript
petersirka nový webový framework partial.js
langpa Re: existuje framework partial.js?
Peter Širka Re: existuje framework partial.js?
blizz Re: JavaScript na serveru: CoffeeScript a šablonovací systémy
Zdroj: http://www.zdrojak.cz/?p=3754