User Tools

Site Tools


js_babel

Table of Contents

Babel

  • EcmaScript 6 přináší dva typy novinek. Tou první jsou nové objekty a funkce na již existujících objektech.
    • K těm si můžeme dopomoci jednoduše tím, že k projektu připojíme kusy kódu nazývané shimy a polyfilly
      • Ty pak detekují chybějící či odlišné API jednotlivých prohlížečů a následně je doplní a sjednotí.
      • V budoucnu, až budou prohlížeče daný standard plně podporovat, můžeme tyto knihovny úplně odstranit.
  • Druhou novinkou je nová syntax. V ES6 nám například přibyla nová klíčová slova jako class, extends, let či import.
  • Tady si bohužel pouze s připojenou knihovnou už nevystačíme. Musíme použít program - kompilátor, který náš kód přeloží do starší plně podporované verze (V našem případě ES5).
  • Navíc vyřeší i ony nové objekty a funkce z předchozí kapitoly (někdy ale bude i tak potřeba přidat polyfill).
  • I zde platí, že v budoucnu budeme moct kompilátor z procesu úplně vynechat a náš kód bude v prohlížečích fungovat bez dodatečných úprav.

Kompilátory

  • Nových jazyků a kompilátorů existuje celá řada.
  • Dají se rozdělit do 2 základních kategorií.
    • Tou první jsou zcela nové jazyky, které mají úplně odlišnou syntax a nemůžeme je tedy použít na vylepšení již hotových projektů.
      • Jde například o populární CoffeeScript, PureScript, ClojureScript či Dart
    • Druhou kategorií jsou jazyky, které současný JavaScript pouze rozšiřují a snaží se více či méně zachovat dopřednou kompatibilitu.
      • Jde třeba o TypeScript, Traceur či Babel.

Babel

  • Plně integruje JSX a React (taková ta podivnost, kdy píšete HTML tagy přímo do těla JavaScriptových funkcí). Skvěle si rozumí s editory a různými nástroji.
  • Používají ho už dnes firmy jako Facebook, Yahoo, Netflix, Mozilla a Evernote.
  • Můžete ho nasadit na serverovém prostředí node.js.
  • Je to ale stále onen čistý JavaScript, takže s ním můžete bez problémů zkompilovat i svoje stávající projekty a s ES6 začít postupně.

Třídy

  • rozlučte se s prototype
  • Máme tu novou hezčí syntax, která podporuje prototypovou dědičnost, volání rodičovské metody, statické metody či konstruktory.

Let a const

  • Rozlučte se s var. Máme tu let.
  • Oproti var omezuje působnost proměnné na nejbližší blok. Dále také přibylo klíčové slovo const pro konstanty.

Moduly

  • Nová syntax sjednocující definici a nahrávání modulů. Nepostradatelná zbraň pro rozdělení kódu do mnoha modulů a souborů. Můžete si následně vybrat formát, do kterého má Babel ES6 moduly přeložit. V nabídce je Common.js, AMD, System a UMD. Dokonce si můžete vymyslet i formát vlastní. Nástroje jako browserify či webpack pak tyto závislosti za vás vyřeší a sestaví jeden výstupní soubor.
  • Ze souboru můžeme exportovat funkce, objekty i proměnné pomocí klíčového slova export.
  • V jiném souboru si je pak můžeme importovat pomocí klíčových slov import a from. * naimportuje vše.
  • Můžeme si ale i vybrat, co přesně chceme naimportovat pomocí {}.
  • Specialitou je pak klíčové slovo default. V cílovém souboru si pak můžeme default import pojmenovat zcela dle své vůle (zde exp). Současně můžeme i nadále importovat ostatní funkce, objekty a proměnné.
  • Pokud máme otázky ohledně ES6 modulů - Moduly

Dokumentace: Dokumentace

js_babel.txt · Last modified: 2015/06/13 10:44 by buddha