Aký je to pocit učiť sa JavaScript v roku 2016

Počas písania tohto článku neboli vytvorené žiadne rámce JavaScript .

Nasledujúci text je inšpirovaný článkom „Je to budúcnosť“ od Circle CI. Originál si môžete prečítať tu . Tento kúsok je len názor a ako každý rámec JavaScriptu by sa nemal brať príliš vážne.

Hej, dostal som tento nový webový projekt, ale ak mám byť úprimný, už niekoľko rokov som toho veľa na webe nenakódoval a počul som, že sa prostredie trochu zmenilo. Ste tu najaktuálnejší webový vývojár, však?

-Skutočný výraz je front End inžinier, ale áno, som správny chlap. Robím web v roku 2016. Vizualizácie, hudobné prehrávače, lietajúce drony, ktoré hrajú futbal, čo si len spomeniete. Práve som sa vrátil z JsConf a ReactConf, takže poznám najnovšie technológie na vytváranie webových aplikácií.

V pohode. Potrebujem vytvoriť stránku, ktorá zobrazuje najnovšiu aktivitu používateľov, takže potrebujem získať údaje z koncového bodu REST a zobraziť ich v nejakej filtrovateľnej tabuľke a aktualizovať ich, ak sa na serveri niečo zmení. Myslel som, že možno použiť jQuery na načítanie a zobrazenie údajov?

-Preboha nie, už nikto nepoužíva jQuery. Mali by ste sa skúsiť naučiť React, je rok 2016.

Oh, dobre. Čo je React?

-Je to super skvelá knižnica, ktorú vytvorili niektorí chlapci z Facebooku, skutočne prináša ovládanie a výkon vašej aplikácie tým, že vám umožňuje veľmi jednoducho zvládnuť akékoľvek zmeny zobrazenia.

To znie pekne. Môžem použiť React na zobrazenie údajov zo servera?

-Áno, ale najprv musíte pridať React a React DOM ako knižnicu na vašu webovú stránku.

Počkať, prečo dve knižnice?

-Takže jedna je skutočná knižnica a druhá je na manipuláciu s DOM, ktorú teraz môžete opísať v JSX.

JSX? čo je JSX?

-JSX je len rozšírenie syntaxe JavaScriptu, ktoré vyzerá skoro ako XML. Je to trochu iný spôsob, ako opísať DOM, predstavte si ho ako lepší HTML.

Čo je zlé na HTML?

-Je rok 2016. Nikto už nekóduje HTML priamo.

Správne. Každopádne, ak pridám tieto dve knižnice, môžem použiť React?

-Nie tak celkom. Musíte pridať Babel a potom budete môcť používať React.

Ďalšia knižnica? Čo je Babel?

-Ach, Babel je transpiler, ktorý vám umožňuje zacieliť na konkrétne verzie JavaScriptu, zatiaľ čo kódujete v akejkoľvek verzii JavaScriptu. Aby ste mohli používať ReactJS, NEMUSÍTE zahrnúť Babel, ale ak to neurobíte, nebudete musieť používať ES5, a buďme skutoční, je rok 2016, mali by ste programovať v ES2016+ ako ostatné skvelé deti.

ES5? ES2016+? Strácam sa tu. Čo je ES5 a ES2016+?

-ES5 je skratka pre ECMAScript 5. Je to edícia, na ktorú sa zameriava väčšina ľudí, keďže ju v súčasnosti implementuje väčšina prehliadačov.

ECMAScript?

-Áno, viete, skriptovací štandard JavaScript bol založený v roku 1999 po jeho prvom vydaní v roku 1995, vtedy, keď sa JavaScript volal Livescript a bežal iba v Netscape Navigator. Vtedy to bolo veľmi chaotické, ale našťastie teraz sú veci veľmi jasné a máme napríklad 7 vydaní tejto implementácie.

7 vydaní. Skutočne. A ES5 a ES2016+ sú?

- Piate a siedme vydanie.

Počkaj, čo sa stalo so šiestym?

-Myslíš ES6? Áno, myslím, že každé vydanie je nadmnožinou predchádzajúcej verzie, takže ak používate ES2016+, používate všetky funkcie predchádzajúcich verzií.

Správne. A prečo potom používať ES2016+ oproti ES6?

-Môžete použiť ES6, ale na používanie skvelých funkcií, ako je async a wait, musíte použiť ES2016+. V opačnom prípade budete uviaznutí s generátormi ES6 s korutínmi na blokovanie asynchrónnych volaní pre správny tok riadenia.

Neviem, čo ste práve povedali, a všetky tieto mená sú mätúce. Pozrite, práve načítavam množstvo údajov zo servera, kedysi som bol schopný zahrnúť jQuery z CDN a získať údaje iba pomocou volaní AJAX, prečo to nemôžem urobiť?

-Píše sa rok 2016, jQuery už nikto nepoužíva, skončí to v hromade kódu na špagety. Každý to vie.

Správne. Takže moja alternatíva je načítať tri knižnice na načítanie údajov a zobrazenie tabuľky HTML.

-No, zahrniete tieto tri knižnice, ale spojíte ich so správcom modulov, aby ste načítali iba jeden súbor.

vidím. A čo je správca modulov?

-Definícia závisí od prostredia, ale na webe zvyčajne myslíme čokoľvek, čo podporuje moduly AMD alebo CommonJS.

Riiight. A AMD a CommonJS sú...?

-Definície. Existujú spôsoby, ako opísať, ako by mali viaceré knižnice a triedy JavaScript interagovať. Viete, exportuje a vyžaduje? Môžete napísať viacero súborov JavaScript definujúcich AMD alebo CommonJS API a na ich spojenie môžete použiť niečo ako Browserify.

OK, to dáva zmysel... myslím. Čo je to Browserify?

-Je to nástroj, ktorý vám umožňuje spojiť závislosti opísané v CommonJS do súborov, ktoré je možné spustiť v prehliadači. Bol vytvorený, pretože väčšina ľudí publikuje tieto závislosti v registri npm.

register npm?

-Je to veľmi veľké verejné úložisko, kam šikovní ľudia vkladajú kód a závislosti ako moduly.

Ako CDN?

-Ani nie. Je to skôr ako centralizovaná databáza, kde môže ktokoľvek publikovať a sťahovať knižnice, takže ich môžete použiť lokálne na vývoj a potom ich nahrať do CDN, ak chcete.

Oh, ako Bower!

-Áno, ale teraz je rok 2016, Bower už nikto nepoužíva.

Aha, chápem... takže potrebujem stiahnuť knižnice z npm?

-Áno. Napríklad, ak chcete použiť React , stiahnete si modul React a importujete ho do svojho kódu. Môžete to urobiť pre takmer každú populárnu knižnicu JavaScript.

Oh, ako Angular!

-Angular je tak 2015. Ale áno. Angular by tam bol spolu s VueJS alebo RxJS a ďalšími skvelými knižnicami 2016. Chcete sa o nich dozvedieť?

Zostaňme pri Reacte, už teraz sa učím príliš veľa vecí. Takže, ak potrebujem použiť React, získam ho z tohto npm a potom použijem túto vec Browserify?

-Áno.

Zdá sa, že je príliš komplikované chytiť veľa závislostí a spojiť ich.

-Je, to je dôvod, prečo používate správcu úloh ako Grunt alebo Gulp alebo Broccoli na automatizáciu spustenia Browserify. Sakra, môžete dokonca použiť Mimosa.

Grunt? Prehltnúť? brokolica? Mimosa? Sakra, o čom teraz hovoríme?

- Manažéri úloh. Ale už nie sú cool. Používali sme ich v roku 2015, potom sme používali Makefiles, ale teraz všetko zabalíme do Webpacku.

Makefiles? Myslel som, že sa to väčšinou používa v projektoch C alebo C++.

-Áno, ale zjavne na webe milujeme robiť veci komplikovanými a potom sa vrátiť k základom. Robíme to tak každý rok, len si počkajte, o rok alebo dva ideme robiť montáž na webe.

Povzdych. Spomenuli ste niečo, čo sa nazýva Webpack?

-Je to ďalší správca modulov pre prehliadač, pričom je tiež akýmsi spúšťačom úloh. Je to ako lepšia verzia Browserify.

Oh, dobre. Prečo je to lepšie?

-No, možno nie lepšie, je to len viac názorov na to, ako by mali byť vaše závislosti viazané. Webpack vám umožňuje používať rôznych manažérov modulov, nielen CommonJS, teda napríklad natívne moduly podporované ES6.

Som veľmi zmätený z celej tejto veci CommonJS/ES6.

-Všetci sú, ale so SystemJS by vás to už nemalo zaujímať.

Ježiš Kristus, ďalšie podstatné meno-js. Dobre, a čo je to SystemJS?

-No, na rozdiel od Browserify a Webpack 1.x, SystemJS je dynamický nakladač modulov, ktorý vám umožňuje spájať viacero modulov do viacerých súborov namiesto ich spájania do jedného veľkého súboru.

Počkajte, ale myslel som, že chceme naše knižnice postaviť do jedného veľkého súboru a načítať ho!

-Áno, ale pretože teraz prichádza HTTP/2, viaceré požiadavky HTTP sú v skutočnosti lepšie.

Počkajte, takže nemôžeme pridať tri pôvodné knižnice pre React?

-Ani nie. Myslím, že by ste ich mohli pridať ako externé skripty z CDN, ale aj tak by ste potom museli zahrnúť Babel.

Povzdych. A to je zlé že?

-Áno, zahrnuli by ste celé jadro babel a nebolo by to efektívne pre výrobu. Pri výrobe musíte vykonať sériu predbežných úloh, aby ste pripravili svoj projekt, vďaka čomu bude rituál na privolanie Satana vyzerať ako recept na varené vajcia. Musíte minimalizovať aktíva, oškliviť ich, vkladať css nad záhybom stránky, odkladať skripty a tiež-

Mám to, mám to. Ak by ste teda nezahrnuli knižnice priamo do CDN, ako by ste to urobili?

-Preložil by som to z Typescript pomocou kombinácie Webpack + SystemJS + Babel.

Strojopis? Myslel som, že kódujeme v JavaScripte!

-Typescript JE JavaScript, alebo lepšie povedané, nadmnožina JavaScriptu, konkrétnejšie JavaScript vo verzii ES6. Vieš, tá šiesta verzia, o ktorej sme hovorili predtým?

Myslel som, že ES2016+ je už nadstavba ES6! PREČO teraz potrebujeme túto vec s názvom Typescript?

-Och, pretože nám to umožňuje používať JavaScript ako typizovaný jazyk a znižuje chyby pri spustení. Je rok 2016, do kódu JavaScript by ste mali pridávať niektoré typy.

A Typescript to očividne robí.

-Flow tiež, hoci kontroluje iba písanie, zatiaľ čo Typescript je nadmnožinou JavaScriptu, ktorý je potrebné skompilovať.

Povzdych... a Flow je?

-Je to statická kontrola typov, ktorú vytvorili niektorí chlapi na Facebooku. Kódovali to v OCaml, pretože funkčné programovanie je úžasné.

OCaml? Funkčné programovanie?

-To je to, čo dnes používajú skvelé deti, vieš, rok 2016? Funkčné programovanie? Funkcie vysokého poriadku? Kariovanie? Čisté funkcie?

Neviem, čo si práve povedal.

-Na začiatku to nikto nerobí. Pozrite, musíte len vedieť, že funkčné programovanie je lepšie ako OOP a práve to by sme mali v roku 2016 používať.

Počkaj, naučil som sa OOP na vysokej škole, myslel som si, že je to dobré?

-Taká bola Java predtým, ako ju kúpila spoločnosť Oracle. Chcem povedať, že OOP bol dobrý v minulosti a má svoje využitie aj dnes, ale teraz si každý uvedomuje, že modifikovanie stavov je ekvivalentné kopaniu detí, takže teraz každý prechádza na nemenné objekty a funkčné programovanie. Chlapci z Haskellu to nazývali roky - a nezačnite ma s Elm chlapcami - ale našťastie teraz na webe máme knižnice ako Ramda, ktoré nám umožňujú používať funkčné programovanie v jednoduchom JavaScripte.

Vypúšťaš mená len kvôli tomu? Čo je do pekla Ramnda?

-Nie. Ramda. Ako Lambda. Viete, tá knižnica Davida Chambersa?

David kto?

-David Chambers. V pohode chlap. Hrá hru o prevrate. Jeden z prispievateľov pre Ramdu. Mali by ste tiež skontrolovať Erika Meijera, ak to s učením funkcionálneho programovania myslíte vážne.

A Erik Meijer je...?

-Aj funkčný programátor. Úžasný chlap. Má veľa prezentácií, kde šrotuje Agile a používa toto zvláštne farebné tričko. Mali by ste tiež skontrolovať niektoré veci od Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Dobre. Tam ťa zastavím. To všetko je dobré a v poriadku, ale myslím si, že všetko je také komplikované a zbytočné na to, aby bolo možné len načítať údaje a zobraziť ich. Som si celkom istý, že na vytvorenie tabuľky s dynamickými údajmi nepotrebujem poznať týchto ľudí alebo sa učiť všetky tie veci. Vráťme sa k Reactu. Ako môžem získať údaje zo servera pomocou React?

-No, v skutočnosti nevyčítate údaje pomocou React, iba ich zobrazíte pomocou React.

Oh, do čerta. Čo teda používate na získanie údajov?

-Na načítanie údajov zo servera používate funkciu Fetch.

prepáč? Používate Fetch na načítanie údajov? Ktokoľvek pomenúva tieto veci, potrebuje tezaurus.

- Viem dobre? Fetch je názov natívnej implementácie na vykonávanie XMLHttpRequests na serveri.

Takže AJAX.

-AJAX je len použitie XMLHttpRequests. Ale iste. Fetch vám umožňuje robiť AJAX na základe sľubov, ktoré potom môžete vyriešiť, aby ste sa vyhli peklu spätného volania.

Spätné volanie do pekla?

-Áno. Zakaždým, keď vykonáte asynchrónnu požiadavku na server, musíte počkať na jeho odpoveď, čo vás potom prinúti pridať funkciu v rámci funkcie, ktorá sa nazýva pyramída spätného volania z pekla.

Oh, dobre. A tento sľub to vyrieši?

- Naozaj. Manipuláciou so spätnými volaniami prostredníctvom sľubov môžete písať zrozumiteľnejší kód, zosmiešňovať ich a testovať, ako aj vykonávať simultánne požiadavky naraz a čakať, kým sa všetky načítajú.

A to sa dá urobiť pomocou Fetch?

-Áno, ale iba vtedy, ak váš používateľ používa evergreen prehliadač, inak musíte zahrnúť polyfill Fetch alebo použiť Request, Bluebird alebo Axios.

Koľko knižníc musím preboha vedieť? Koľko ich je?

-Je to JavaScript. Musia existovať tisíce knižníc, ktoré všetky robia to isté. Poznáme knižnice, v skutočnosti máme tie najlepšie knižnice. Naše knižnice sú obrovské a niekedy do nich zahrnieme aj obrázky Guya Fieriho.

Práve ste povedali Guy Fieri? Nech to máme za sebou. Čo robia tieto knižnice Bluebird, Request, Axios?

-Sú to knižnice na vykonávanie požiadaviek XMLHttp, ktoré vracajú sľuby.

Nezačala AJAX metóda jQuery vracať aj sľuby?

-V roku 2016 už nepoužívame slovo „J“. Stačí použiť Fetch a polyfill to, keď to nie je v prehliadači, alebo namiesto toho použite Bluebird, Request alebo Axios. Potom spravte sľub s čakaním v rámci asynchrónnej funkcie a bum, máte správny tok kontroly.

Je to už tretíkrát, čo spomínaš, že čakáš, ale netuším, čo to je.

-Await vám umožňuje zablokovať asynchrónny hovor, čo vám umožní mať lepšiu kontrolu nad tým, kedy sa údaje načítavajú, a celkovo zvýšiť čitateľnosť kódu. Je to úžasné, len sa musíte uistiť, že pridáte predvoľbu 3. stupňa v Babel, alebo použijete funkcie syntax-async a doplnok transform-async-to-generator.

To je šialené.

-Nie, šialený je fakt, že musíte predkompilovať kód Typescript a potom ho preložiť pomocou Babel, aby ste ho mohli použiť.

Čo? Nie je súčasťou strojopisu?

-V ďalšej verzii áno, ale od verzie 1.7 sa zameriava iba na ES6, takže ak chcete v prehliadači použiť wait, najprv musíte skompilovať svoj kód typu Typescript zameraný na ES6 a potom Babel, ktorý sa posral, aby zacielil na ES5.

V tejto chvíli neviem, čo povedať.

-Pozri, je to ľahké. Kódujte všetko v Typescript. Všetky moduly, ktoré používajú Fetch, ich kompilujú tak, aby zacielili na ES6, transpilujú ich pomocou Babel na predvoľbe fázy 3 a načítajú do nich SystemJS. Ak nemáte Fetch, polyfill to, alebo použite Bluebird, Request alebo Axios a vybavte všetky svoje sľuby s čakaním.

Máme veľmi odlišné definície ľahkého. Takže s týmto rituálom som konečne získal údaje a teraz ich môžem zobraziť pomocou React, však?

- Zvládne vaša aplikácia nejaké zmeny stavu?

Err, myslím, že nie. Potrebujem len zobraziť údaje.

-Och, vďaka bohu. Inak by som vám musel vysvetliť Flux a implementácie ako Flummox, Alt, Fluxible. Aj keď úprimne povedané, mali by ste používať Redux.

Len preletím tie mená. Opäť mi stačí zobraziť údaje.

-Ach, ak len zobrazujete údaje, ktoré ste nepotrebovali, Reagujte na začiatok. Boli by ste v pohode s nástrojom na vytváranie šablón.

Si robíš srandu? Zdá sa vám to vtipné? Takto sa správate k svojim blízkym?

-Len som ti vysvetľoval, čo môžeš použiť.

Stop. Len prestaň.

-Myslím, že aj keď je to len pomocou nástroja na vytváranie šablón, na tvojom mieste by som stále používal kombináciu Typescript + SystemJS + Babel.

Potrebujem zobraziť údaje na stránke, nie vykonať pôvodnú smrteľnosť MK Sub Zero. Len mi povedzte, aký nástroj na vytváranie šablón mám použiť, a potom to vezmem.

-Je toho veľa, ktorý poznáš?

Uf, nepamätám si meno. Bolo to veľmi dávno.

-jTemplates? jQote? ČISTÝ?

Err, nezvoní. Ďalší?

-Transparentnosť? JSRender? MarkupJS? KnockoutJS? Ten mal obojsmerné viazanie.

Ďalší?

-PlatesJS? jQuery-tmpl? Riadidlá? Niektorí ľudia to stále používajú.

Možno. Existujú podobné ako tomu poslednému?

-Fúzy, podčiarknutie ? Myslím, že teraz má aj lodash, aby som bol úprimný, ale to je niečo ako rok 2014.

Err.. možno to bolo novšie.

-Jade? DustJS?

Nie

-DotJS? EJS?

Nie

-Nunjuckovia? ECT?

Nie

-Mah, aj tak nikto nemá rád syntax Coffeescript. Jade?

Nie, už si povedal Jade.

- Myslel som Pug. Myslel som Jade. Teda, Jade je teraz Pug.

Povzdych. Nie. Nepamätám si. Ktorý by ste použili?

-Pravdepodobne len reťazce natívnej šablóny ES6.

Nechaj ma hádať. A to si vyžaduje ES6.

- Správne.

Ktorý v závislosti od toho, aký prehliadač používam, potrebuje Babel.

- Správne.

Ktorú, ak chcem zahrnúť bez pridania celej základnej knižnice, musím ju načítať ako modul z npm.

- Správne.

Čo si vyžaduje Browserify alebo Wepback alebo s najväčšou pravdepodobnosťou inú vec nazývanú SystemJS.

- Správne.

Čo, pokiaľ to nie je Webpack, by mal v ideálnom prípade spravovať task runner.

- Správne.

Ale keďže by som mal používať funkcionálne programovanie a písané jazyky, musím najprv predkompilovať Typescript alebo pridať túto vec Flow.

- Správne.

A potom to poslať Babelovi, ak chcem použiť wait.

- Správne.

Takže potom môžem použiť Fetch, sľuby a ovládať tok a všetku tú mágiu.

-Len nezabudnite na polyfill Fetch, ak to nie je podporované, Safari to stále nezvláda.

Vieš čo. Myslím, že sme tu skončili. Vlastne si myslím, že som skončil. S webom som skončil, s JavaScriptom som úplne skončil.

-To je v poriadku, o pár rokov budeme všetci kódovať v Elm alebo WebAssembly.

Len sa vrátim späť na backend. Jednoducho nezvládam toľko zmien a verzií a vydaní a kompilátorov a transpilátorov. Komunita JavaScriptu je šialená, ak si myslí, že s tým môže niekto držať krok.

-Počujem ťa. Potom by ste mali vyskúšať komunitu Python.

prečo?

-Počuli ste už o Pythone 3?

Aktualizácia: Ďakujeme za upozornenie na preklepy a chyby, článok aktualizujem podľa pokynov. Diskusia v HackerNews a Reddit .