User Tools

Site Tools


js_tools

JavaScript nástroje

Články

Nástroje

  • GoogleChrome a jeho nástroje (⌘+alt+j) - převážně console, elements a networks (šikovná filtrace XHR requestů), v sources lze debuggovat pomocí breakpointů
    • XHR = XMLHttpRequest, JS objekt, It provides an easy way to retrieve data from a URL without having to do a full page refresh. A Web page can update just a part of the page without disrupting what the user is doing. XMLHttpRequest is used heavily in AJAX programming - název je zavádějící, lze přenést i jiné než XML věci
  • V nastavení vývojářských nástroju si ještě zkontrolujte, že máte zaškrtnuté Enable CSS source maps a Enable JavaScript source maps.
    • Pokud člověk vyvíjí v Babel, do kt. se JS překládá, Source mapa pak umožní prohlížeči namapovat řádky výsledného JavaScriptu na zdrojový Babel a my se tak dozvíme správný řádek a soubor, kde došlo k chybě. Obdobně to funguje pro CSS a preprocesory jako je LESS.

Node.js a NPM

  • node se tak stává přirozenou volbou (nejen) pro aplikace, které závisí na velkém JS frontendu
  • Je totiž velmi výhodné používat stejný jazyk na obou březích. Můžete tak snadno sdílet části kódu (například validační pravidla či routing), či si předrendrovat stránku už na serveru a uživateli poslat rovnou hotové HTML.
  • S nodem se vám nainstaluje i npm - balíčkovací manager. Jde o ultimátní a jednotné řešení pro sdílení kódů napříč JS ekosystémem
    • Používá ho tak node, browserify, webpack, gulp, grunt, Angular, jQuery, React, prohlížeče … prostě všichni.
  • Největší předností a odlišností NPM (například od Boweru) je to, že každý balíček může mít své vlastní závislosti (balíčky).
  • Dalším fundamentálním rysem je filosofie malých a jednoúčelových balíčků

Grunt

  • Se vší tou záplavou růných nástrojů, kompilátorů a linterů je potřeba se nějak vypořádat.
  • repetativní úkon, který se může zautomatizovat.
  • Objevily se tak nástroje označované jako “task runnery”.
  • Do projektu si přidáte Gruntfile, ve kterém si vše můžete nakonfigurovat.
  • Konfigurace se skládá z jednotlivých tasků, které můžete pak volat v různém pořadí.
  • Jednotlivé tasky (moduly) nemusíte psát sami, ale většinou je už najdete hotové na NPM. Jsou jich tisíce.
  • Postupně se však ukázalo, že cesta “vše konfigurovat” není úplně nejšťastnější.
  • Bez dokumentace totiž nedáte ani ránu a pokud si nevystačíte s předem danými funkcemi, tak máte problém.
  • Dalším problémem Gruntu je rychlost. Mezivýsledky si totiž ukládá do filesystému a u větších projektů s komplikovaným build procesem trvá dlouho (tohle už možná nejnovější verze nějak řeší).

Gulp

* [[http://gulpjs.com/|Gulp]]
* ponaučil se z Gruntu a jde na to lépe. Místo toho, abyste konfigurovali, tak programujete, což je velmi flexibilní a také odpadá nutnost spoléhat na dokumentace
* Dalším zlepšovákem jsou streamy, které Gulp používá.
* Mezivýsledky si drží v paměti, vše běží paralelně a především citelně rychleji.

Browserify

  • Node.js zavedlo do světa JS snadný způsob jak kód modularizovat.
  • modulární systém potřebuje dvě primární věci: možnost exportovat a importovat
    • import gulp from 'gulp';
  • Výše uvedené zkusí prohledat /node_modules ve vašem projektu - místo, kam se vám budou ukládat balíčky z npm.
  • Stačí zavolat npm install gulp –save a máte ho tam.
  • Přepínač –save ho navíc přidá do seznamu v package.json. Běžně se totiž /node_modules adresář v Gitu ignoruje a tak je někde potřeba uchovávat seznam všech závislostí.
  • V /node_modules/gulp se pak import podívá do hlavního souboru daného balíčku a v něm najde export:
    • const inst = new Gulp();
    • export default inst;
  • To je vše pěkné, ale asi vás teď napadlo, jak to bude fungovat v prohlížeči? Nebude. Do prohlížeče můžeme jednotlivé skripty nahrávat pomocí <script> … </script>, ale to nám moc nepomůže. Podobných souborů totiž budeme mít v projektu stovky až tisíce a posílat tolik HTTP requestů rozhodně nemůžeme. Také to nijak neřeší potřebu verzování, minimalizování a zapouzdřování. Tyto závislosti je tedy potřeba vyřešit už před releasem a uživateli posílat jeden výsledný soubor, ve kterém bude jen to, co skutečně potřebuje.
  • A tak vzniklo Browserify. Vezme váš kód a vyřeší všechny require a module.exports a vyplivne jeden výsledný soubor.
  • JavaScript, který byl původně určen pro node.js, dokáže udělat kompatibilní pro prohlížeče.

Webpack

  • Browserify řeší jenom JavaScript a vše ostatní je potřeba doplnit spoustou gulp modulů.
  • Navíc se ukázalo, že kromě JavaScriptu je potřeba podobně zpracovat i CSS (v praxi například LESS) nebo obrázky.
  • To by nemuselo s Gulpem a jeho tisíci pluginy vadit, že? Bohužel Gulp má jednu zásadní slabinu, která plyne ze streamování. Neumí úplně přímočaře vytvořit z několika souborů jeden výstupní
  • Je tak potřeba v gulp tascích řešit trochu nešikovně bundlování. A z toho zase mohou vznikat další obtíže, jako je správné odchytávání a zobrazování chyb.
  • Webpack na to jde úplně jinak, tak trochu proti filosofii celého JS ekosystému. Nedeleguje a nevyčleňuje jednotlivé funkce do více modulů a tak už v základu představuje velmi mocný nástroj. Nástroj, který byl od počátku zamýšlen tak, aby nám vývojářům co nejvíce usnadnil práci
    • Základním stavebním kamenem jsou loadery. Každý formát má vlastní a může jít téměř o cokoliv (.js, .css, .less, .coffee, .png…). Webpack pak přetíží require() volání a můžete ho použít třeba i pro markdown dokumenty (jako tato stránka). Následně pak funguje podobně jako browserify, tedy vyřeší závislosti a sestaví build, ve kterém je jen to potřebné.
    • Oproti browserify je potřeba ho nakonfigurovat, což není úplně jednoduché. Na druhou stranu, jakmile to jednou uděláte, získáte velmi mocného společníka. Konfiguraci navíc můžete z velké části obšlehnout.
    • Poskytuje také jednu killer funkci, kterou browserify nemá a pro kterou se vyplatí na něj z browserify přejít a tím je hot module replacement.
    • Dokáže nahradit a zpracovat modul, aniž by bylo potřeba refreshovat celou stránku (a modul může být javascript, less nebo markdown!). Bez jakýchkoliv dodatečných pluginů v prohlížeči. Pouze čistý JavaScript! To ohromně zefektivňuje vývoj.
    • Dobré je také zmínit, že kdykoliv můžete velmi snadno přejít z browserify na webpack (bez úprav zdrojáků)

ESLint

  • Lintování je levný způsob, jak zlepšit stav zdrojáků napříč větším projektem či týmem několika programátorů.

Express

IcedCoffeeScript

Immutable

js_tools.txt · Last modified: 2015/06/14 12:15 by buddha