Jaké to je naučit se JavaScript v roce 2016

Během psaní tohoto článku nebyly vytvořeny žádné rámce JavaScriptu .

Následující text je inspirován článkem „Je to budoucnost“ od Circle CI. Originál si můžete přečíst zde . Tento kus je pouze názorem a jako každý rámec JavaScriptu by se neměl brát příliš vážně.

Ahoj, dostal jsem tento nový webový projekt, ale abych byl upřímný, už několik let jsem toho moc webu nenakódoval a slyšel jsem, že se krajina trochu změnila. Jste tu nejaktuálnější webový vývojář, že?

-Skutečný termín je přední inženýr, ale ano, jsem správný chlap. Dělám web v roce 2016. Vizualizace, hudební přehrávače, létající drony, které hrají fotbal, co si jen vzpomenete. Právě jsem se vrátil z JsConf a ReactConf, takže znám nejnovější technologie pro vytváření webových aplikací.

Ochladit. Potřebuji vytvořit stránku, která zobrazuje nejnovější aktivitu uživatelů, takže stačí získat data z koncového bodu REST a zobrazit je v nějaké filtrovatelné tabulce a aktualizovat, pokud se na serveru něco změní. Myslel jsem, že k načtení a zobrazení dat používám jQuery?

-Ach můj bože ne, nikdo už jQuery nepoužívá. Měli byste se zkusit naučit React, je rok 2016.

Oh, dobře. Co je React?

-Je to skvělá knihovna vytvořená několika lidmi z Facebooku, opravdu přináší kontrolu a výkon vaší aplikace tím, že vám umožňuje velmi snadno zvládnout jakékoli změny zobrazení.

To zní dobře. Mohu použít React k zobrazení dat ze serveru?

-Ano, ale nejprve musíte přidat React a React DOM jako knihovnu na vaši webovou stránku.

Počkat, proč dvě knihovny?

-Takže jedna je skutečná knihovna a druhá je pro manipulaci s DOM, kterou nyní můžete popsat v JSX.

JSX? Co je JSX?

-JSX je pouze rozšíření syntaxe JavaScriptu, které vypadá skoro jako XML. Je to trochu jiný způsob, jak popsat DOM, představte si to jako lepší HTML.

Co je špatného na HTML?

-Je rok 2016. Nikdo už nekóduje HTML přímo.

Právo. Každopádně, když přidám tyto dvě knihovny, můžu použít React?

-Ne tak docela. Musíte přidat Babel a pak budete moci používat React.

Další knihovna? Co je Babel?

-Ach, Babel je transpiler, který vám umožňuje cílit na konkrétní verze JavaScriptu, zatímco kódujete v jakékoli verzi JavaScriptu. Abyste mohli používat ReactJS, NEMUSÍTE zahrnout Babel, ale pokud to neuděláte, zůstanete u používání ES5 a buďme skuteční, je rok 2016, měli byste kódovat v ES2016+ jako ostatní skvělé děti.

ES5? ES2016+? Ztrácím se tu. Co je ES5 a ES2016+?

-ES5 znamená ECMAScript 5. Je to edice, na kterou se zaměřuje většina lidí, protože ji dnes implementuje většina prohlížečů.

ECMAScript?

-Ano, víte, skriptovací standard JavaScript byl založen v roce 1999 po jeho prvním vydání v roce 1995, tehdy se JavaScript jmenoval Livescript a běžel pouze v Netscape Navigator. Tehdy to bylo velmi chaotické, ale naštěstí jsou nyní věci velmi jasné a máme například 7 vydání této implementace.

7 vydání. Skutečně. A ES5 a ES2016+ jsou?

- Páté a sedmé vydání.

Počkej, co se stalo s tím šestým?

-Myslíš ES6? Ano, myslím, že každá edice je nadmnožinou té předchozí, takže pokud používáte ES2016+, používáte všechny funkce předchozích verzí.

Právo. A proč tedy používat ES2016+ nad ES6?

-Mohli byste použít ES6, ale abyste mohli používat skvělé funkce, jako je async a čekání, musíte použít ES2016+. Jinak jste uvízli u generátorů ES6 s korutinami, které blokují asynchronní volání pro správný tok řízení.

Nemám ponětí, co jste právě řekl, a všechna tato jména jsou matoucí. Podívejte, právě načítám spoustu dat ze serveru, býval jsem schopen zahrnout jQuery z CDN a získat data pomocí volání AJAX, proč to prostě nemůžu udělat?

-Píše se rok 2016, jQuery už nikdo nepoužívá, skončí to v hromadě kódu na špagety. To ví každý.

Právo. Takže mou alternativou je načíst tři knihovny pro načtení dat a zobrazení tabulky HTML.

-No, zahrnete tyto tři knihovny, ale spojíte je se správcem modulů, abyste načetli pouze jeden soubor.

Chápu. A co je to správce modulů?

-Definice závisí na prostředí, ale na webu máme obvykle na mysli cokoli, co podporuje moduly AMD nebo CommonJS.

Riiight. A AMD a CommonJS jsou…?

-Definice. Existují způsoby, jak popsat, jak by mělo více knihoven a tříd JavaScriptu interagovat. Víte, exportuje a vyžaduje? Můžete napsat více souborů JavaScriptu, které definují AMD nebo CommonJS API, a k jejich seskupení můžete použít něco jako Browserify.

Dobře, to dává smysl... Myslím. Co je Browserify?

-Je to nástroj, který vám umožňuje spojit závislosti popsané v CommonJS do souborů, které lze spustit v prohlížeči. Byl vytvořen, protože většina lidí publikuje tyto závislosti v registru npm.

registr npm?

-Je to velmi velké veřejné úložiště, kam chytří lidé vkládají kód a závislosti jako moduly.

Jako CDN?

-Ani ne. Je to spíše jako centralizovaná databáze, kde může kdokoli publikovat a stahovat knihovny, takže je můžete použít lokálně pro vývoj a pak je nahrát do CDN, pokud chcete.

Oh, jako Bower!

-Ano, ale teď je rok 2016, Bower už nikdo nepoužívá.

Aha, vidím... takže musím stáhnout knihovny z npm?

-Ano. Pokud tedy chcete například používat React , stáhnete si modul React a importujete jej do svého kódu. Můžete to udělat pro téměř každou populární knihovnu JavaScript.

Oh, jako Angular!

-Angular je tak 2015. Ale ano. Angular by tam byl, vedle VueJS nebo RxJS a dalších skvělých knihoven 2016. Chcete se o nich dozvědět?

Zůstaňme u Reactu, už teď se učím příliš mnoho věcí. Takže, pokud potřebuji použít React, stáhnu si to z tohoto npm a pak použiji tuto věc Browserify?

-Ano.

To se zdá být příliš komplikované, jen uchopit spoustu závislostí a spojit je dohromady.

-Je, to je důvod, proč používáte správce úloh, jako je Grunt nebo Gulp nebo Broccoli k automatizaci běhu Browserify. Sakra, můžete dokonce použít Mimosa.

Grunt? Doušek? Brokolice? Mimóza? Sakra, o čem teď mluvíme?

-Správci úloh. Ale už nejsou cool. Používali jsme je jako v roce 2015, pak jsme používali Makefiles, ale teď vše zabalíme do Webpacku.

Makefiles? Myslel jsem, že se to většinou používá na projektech C nebo C++.

-Jo, ale zjevně na webu milujeme dělat věci komplikovanými a pak se vrátit k základům. Děláme to tak každý rok, jen si na to počkejte, montáž na webu uděláme za rok nebo dva.

Povzdech. Zmínil jste něco, co se nazývá Webpack?

-Je to další správce modulů pro prohlížeč a zároveň je tak trochu běžcem úloh. Je to jako lepší verze Browserify.

Oh, dobře. proč je to lepší?

-No, možná ne lepší, je to jen více zaujaté tím, jak by měly být vaše závislosti svázány. Webpack umožňuje používat různé správce modulů, a to nejen CommonJS, takže například nativní moduly podporované ES6.

Jsem z celé té věci CommonJS/ES6 extrémně zmatený.

-Všichni jsou, ale se SystemJS by vás to už nemělo zajímat.

Ježíši Kriste, další podstatné jméno-js. Dobře, a co je to SystemJS?

-Na rozdíl od Browserify a Webpack 1.x je SystemJS dynamickým zavaděčem modulů, který vám umožňuje svázat více modulů do více souborů namísto jejich sdružování do jednoho velkého souboru.

Počkejte, ale myslel jsem, že chceme naše knihovny postavit do jednoho velkého souboru a načíst ho!

-Ano, ale protože HTTP/2 přichází nyní, více požadavků HTTP je ve skutečnosti lepší.

Počkat, takže nemůžeme přidat ty tři původní knihovny pro React??

-Ani ne. Myslím, že byste je mohli přidat jako externí skripty z CDN, ale stejně byste museli zahrnout Babel.

Povzdech. A to je špatné že?

-Ano, zahrnuli byste celé jádro babel a nebylo by to efektivní pro výrobu. Při výrobě musíte provést řadu předběžných úkolů, abyste připravili svůj projekt, aby rituál pro vyvolání Satana vypadal jako recept na vařená vejce. Potřebujete minimalizovat aktiva, ošklivě je, vkládat css nad okrajem, odkládat skripty a také-

Mám to, mám to. Takže pokud byste nezahrnuli knihovny přímo do CDN, jak byste to udělali?

-Převedl bych to z Typescript pomocí kombinace Webpack + SystemJS + Babel.

Strojopis? Myslel jsem, že kódujeme v JavaScriptu!

-Typescript JE JavaScript, nebo lépe řečeno, nadmnožina JavaScriptu, konkrétněji JavaScript ve verzi ES6. Víš, ta šestá verze, o které jsme mluvili předtím?

Myslel jsem, že ES2016+ je už superset ES6! PROČ nyní potřebujeme tuto věc zvanou Typescript?

-Oh, protože nám to umožňuje používat JavaScript jako typizovaný jazyk a omezovat chyby při běhu. Je rok 2016, měli byste do kódu JavaScript přidávat některé typy.

A Typescript to evidentně dělá.

-Flow také, i když kontroluje pouze psaní, zatímco Typescript je nadmnožinou JavaScriptu, který je třeba zkompilovat.

Povzdech… a Flow je?

-Je to kontrola statického typu vytvořená nějakými kluky na Facebooku. Kódovali to v OCaml, protože funkční programování je úžasné.

OCaml? Funkční programování?

-To je to, co dneska používají ty skvělé děti, člověče, víš, rok 2016? Funkční programování? Funkce vysokého řádu? kari? Čisté funkce?

Nemám ponětí, co jsi právě řekl.

-Na začátku to nikdo nedělá. Podívejte, stačí vědět, že funkční programování je lepší než OOP a to bychom měli v roce 2016 používat.

Počkat, naučil jsem se OOP na vysoké škole, myslel jsem, že je to dobré?

-Taková byla Java, než ji koupil Oracle. Chci říct, že OOP byl dobrý v dobách a dodnes má své využití, ale nyní si každý uvědomuje, že modifikace stavů je ekvivalentní kopání dětí, takže nyní všichni přecházejí na neměnné objekty a funkční programování. Kluci z Haskellu tomu říkali roky - a nezačínejte s Elmem - ale naštěstí teď na webu máme knihovny jako Ramda, které nám umožňují používat funkcionální programování v prostém JavaScriptu.

Vypouštíš jména jen kvůli tomu? Co je sakra Ramnda?

-Žádný. Ramda. Jako Lambda. Víš, ta knihovna Davida Chamberse?

David kdo?

-David Chambers. Skvělý chlap. Hraje hru o převratu. Jeden z přispěvatelů pro Ramda. Měli byste také zkontrolovat Erika Meijera, pokud to s učením funkcionálního programování myslíte vážně.

A Erik Meijer je…?

-Také funkční programátor. Úžasný chlap. Má spoustu prezentací, kde šrotuje Agile, zatímco používá tuhle podivnou barevnou košili. Měli byste se také podívat na některé věci od Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Dobře. Tam tě zastavím. To vše je dobré a v pořádku, ale myslím, že je to všechno tak složité a zbytečné pro pouhé načítání dat a jejich zobrazení. Jsem si docela jistý, že k vytvoření tabulky s dynamickými daty nepotřebuji tyto lidi znát nebo se učit všechny ty věci. Vraťme se k Reactu. Jak mohu načíst data ze serveru pomocí React?

-No, ve skutečnosti data nenačtete pomocí Reactu, pouze zobrazíte data pomocí Reactu.

Oh, sakra. Co tedy používáte k načítání dat?

-Použijete Fetch k načtení dat ze serveru.

promiň? Používáte Fetch k načtení dat? Kdokoli pojmenovává tyto věci, potřebuje tezaurus.

-Vím správně? Načíst je to název nativní implementace pro provádění XMLHttpRequests proti serveru.

Takže AJAX.

-AJAX je pouze použití XMLHttpRequests. Ale jistě. Fetch vám umožňuje dělat AJAX na základě slibů, které pak můžete vyřešit, abyste se vyhnuli peklu zpětného volání.

Zpětné volání do pekla?

-Jo. Pokaždé, když provedete asynchronní požadavek proti serveru, musíte počkat na jeho odpověď, což vás přiměje přidat funkci do funkce, která se nazývá pyramida zpětného volání z pekla.

Oh, dobře. A tento slib to řeší?

-Opravdu. Manipulací se zpětnými voláními prostřednictvím slibů můžete psát snáze pochopitelný kód, zesměšňovat je a testovat je, stejně jako provádět souběžné požadavky najednou a čekat, až se všechny načtou.

A to lze provést pomocí Fetch?

-Ano, ale pouze pokud váš uživatel používá evergreen prohlížeč, jinak musíte zahrnout polyfill Fetch nebo použít Request, Bluebird nebo Axios.

Kolik knihoven proboha potřebuji znát? kolik jich je?

-Je to JavaScript. Musí existovat tisíce knihoven, které všechny dělají totéž. Známe knihovny, ve skutečnosti máme ty nejlepší knihovny. Naše knihovny jsou obrovské a někdy do nich vložíme obrázky Guye Fieriho.

Právě jsi řekl Guy Fieri? Pojďme to mít za sebou. Co dělají tyto knihovny Bluebird, Request, Axios?

-Jsou to knihovny pro provádění požadavků XMLHttp, které vracejí sliby.

Nezačala jQuery metoda AJAX také vracet sliby?

-V roce 2016 už slovo „J“ nepoužíváme. Stačí použít Fetch a polyfill to, když to není v prohlížeči, nebo místo toho použijte Bluebird, Request nebo Axios. Pak řiďte slib s čekáním v rámci asynchronní funkce a bum, máte správný tok kontroly.

Je to už potřetí, co zmiňuješ čekání, ale nemám ponětí, co to je.

-Await vám umožňuje zablokovat asynchronní volání, což vám umožní mít lepší kontrolu nad tím, kdy se data načítají, a celkově zvýšit čitelnost kódu. Je to úžasné, jen se musíte ujistit, že přidáte přednastavení fáze 3 v Babelu, nebo použijete syntax-async-functions a transform-async-to-generator plugin.

To je šílené.

-Ne, šílený je fakt, že musíte předkompilovat kód Typescript a poté jej transpilovat pomocí Babel, abyste jej mohli použít.

co? Není součástí strojopisu?

-V další verzi ano, ale od verze 1.7 se zaměřuje pouze na ES6, takže pokud chcete v prohlížeči používat wait, musíte nejprve zkompilovat svůj kód Typescript zaměřený na ES6 a poté Babel, který se posral, aby cílil na ES5.

V tuto chvíli nevím, co říct.

-Podívej, je to snadné. Kódujte vše v Typescriptu. Všechny moduly, které používají Fetch, je kompilují tak, aby cílily na ES6, transpilují je pomocí Babel na přednastavení fáze 3 a načítají je pomocí SystemJS. Pokud nemáte Fetch, polyfill to, nebo použijte Bluebird, Request nebo Axios, a vyřiďte všechny své sliby s počkáním.

Máme velmi odlišné definice snadného. Takže s tímto rituálem jsem konečně získal data a nyní je mohu zobrazit pomocí React, že?

-Zvládne vaše aplikace nějaké změny stavu?

Err, to si nemyslím. Potřebuji jen zobrazit data.

- Díky bohu. Jinak bych vám musel vysvětlit Flux a implementace jako Flummox, Alt, Fluxible. I když abych byl upřímný, měli byste používat Redux.

Jen nad těmi jmény přelétnu. Opět potřebuji pouze zobrazit data.

-Ach, pokud jen zobrazujete data, která jste nepotřebovali, React pro začátek. Se šablonovým enginem byste byli v pohodě.

Děláš si srandu? Připadá vám to vtipné? Takhle se chováte ke svým blízkým?

-Jen jsem ti vysvětloval, co můžeš použít.

Zastávka. Přestaň.

-Myslím tím, že i když je to jen pomocí šablonovacího enginu, stále bych na vašem místě používal kombinaci Typescript + SystemJS + Babel.

Potřebuji zobrazit data na stránce, ne provést původní MK fatalitu Sub Zero. Řekněte mi, jaký šablonovací engine použít, a já to vezmu odtud.

-Je toho hodně, kterou znáš?

Uf, nemůžu si vzpomenout na jméno. Bylo to dávno.

-jTemplates? jQote? ČISTÝ?

Err, nezvoní. Další?

-Průhlednost? JSRender? MarkupJS? KnockoutJS? Ten měl obousměrné vázání.

Další?

-PlatesJS? jQuery-tmpl? Řídítka? Někteří lidé to stále používají.

Možná. Existují podobné tomu poslednímu?

-Knír, podtržítko? Myslím, že teď má dokonce i lodash, abych byl upřímný, ale ty jsou tak nějak z roku 2014.

Err.. možná to bylo novější.

-Nefrit? DustJS?

Žádný.

-DotJS? EJS?

Žádný.

-Nunjuckové? ECT?

Žádný.

-Mah, stejně nikdo nemá rád syntaxi Coffeescriptu. Nefrit?

Ne, už jsi řekl Jade.

-Myslel jsem Pug. Myslel jsem Jade. Chci říct, Jade je teď Pug.

Povzdech. Ne. Nemůžu si vzpomenout. Kterou byste použili?

-Pravděpodobně jen řetězce nativní šablony ES6.

Nech mě hádat. A to vyžaduje ES6.

-Opravit.

Což v závislosti na tom, jaký prohlížeč používám, potřebuje Babel.

-Opravit.

Kterou, pokud chci zahrnout bez přidání celé základní knihovny, musím ji načíst jako modul z npm.

-Opravit.

Což vyžaduje Browserify, nebo Wepback, nebo s největší pravděpodobností jinou věc zvanou SystemJS.

-Opravit.

Což, pokud se nejedná o Webpack, by měl v ideálním případě spravovat úkolovník.

-Opravit.

Ale protože bych měl používat funkcionální programování a typované jazyky, musím nejprve předkompilovat Typescript nebo přidat tuto věc Flow.

-Opravit.

A pak to poslat Babelovi, jestli chci použít wait.

-Opravit.

Takže pak můžu používat Fetch, sliby a ovládat tok a všechna ta kouzla.

-Jen nezapomeňte na polyfill Fetch, pokud to není podporováno, Safari to stále nezvládá.

Víš co. Myslím, že jsme tady skončili. Vlastně si myslím, že jsem skončil. S webem jsem skončil, s JavaScriptem jsem skončil úplně.

-To je v pořádku, za pár let budeme všichni kódovat v Elm nebo WebAssembly.

Jen se vrátím zpět k backendu. Prostě nezvládám tolik změn a verzí a edic a kompilátorů a transpilerů. Komunita JavaScriptu je šílená, pokud si myslí, že s tím může někdo držet krok.

-Slyším tě. Pak byste měli zkusit komunitu Pythonu.

Proč?

-Slyšeli jste někdy o Pythonu 3?

Aktualizace: Díky za upozornění na překlepy a chyby, článek aktualizuji, jak je uvedeno. Diskuse v HackerNews a Redditu .