Kakav je osjećaj naučiti JavaScript u 2016

Tijekom pisanja ovog članka nisu stvoreni JavaScript okviri.

Sljedeće je inspirirano člankom “To je budućnost” iz Circle CI. Izvornik možete pročitati ovdje . Ovaj je dio samo mišljenje i, kao i svaki JavaScript framework, ne treba ga shvaćati previše ozbiljno.

Hej, dobio sam ovaj novi web projekt, ali da budem iskren, nisam mnogo kodirao web nekoliko godina i čuo sam da se krajolik malo promijenio. Vi ste najažurniji web programer ovdje, zar ne?

-Pravi pojam je Front End inženjer, ali da, ja sam pravi tip. Radim web 2016. Vizualizacije, svirači glazbe, leteći dronovi koji igraju nogomet, što god hoćete. Upravo sam se vratio s JsConfa i ReactConfa, tako da znam najnovije tehnologije za izradu web aplikacija.

Cool. Moram stvoriti stranicu koja prikazuje najnoviju aktivnost korisnika, tako da samo trebam dobiti podatke iz krajnje točke REST i prikazati ih u nekoj vrsti tablice koja se može filtrirati, i ažurirati je ako se bilo što promijeni na poslužitelju. Mislio sam možda koristiti jQuery za dohvaćanje i prikaz podataka?

-O moj Bože ne, nitko više ne koristi jQuery. Trebali biste pokušati naučiti React, 2016. je.

Oh, OK. Što je React?

-To je super cool biblioteka koju su napravili neki dečki iz Facebooka, ona stvarno donosi kontrolu i performanse vašoj aplikaciji, dopuštajući vam da vrlo lako upravljate svim promjenama prikaza.

To zvuči lijepo. Mogu li koristiti React za prikaz podataka s poslužitelja?

-Da, ali prvo morate dodati React i React DOM kao biblioteku na svoju web stranicu.

Čekaj, zašto dvije knjižnice?

- Dakle, jedan je stvarna biblioteka, a drugi je za manipuliranje DOM-om, koji sada možete opisati u JSX-u.

JSX? Što je JSX?

-JSX je samo proširenje JavaScript sintakse koje izgleda prilično slično XML-u. To je neki drugi način da se opiše DOM, zamislite ga kao bolji HTML.

Što nije u redu s HTML-om?

-2016. godina je. Nitko više ne kodira HTML izravno.

Pravo. U svakom slučaju, ako dodam ove dvije biblioteke onda mogu koristiti React?

-Ne sasvim. Morate dodati Babel, a zatim možete koristiti React.

Još jedna knjižnica? Što je Babel?

- Oh, Babel je transpiler koji vam omogućuje da ciljate određene verzije JavaScripta, dok kodirate u bilo kojoj verziji JavaScripta. Ne MORATE uključiti Babel da biste koristili ReactJS, ali ako to ne učinite, zaglavili ste s korištenjem ES5, a budimo realni, 2016. je, trebali biste kodirati u ES2016+ kao što to rade i ostala cool djeca.

ES5? ES2016+? Gubim se ovdje. Što je ES5 i ES2016+?

-ES5 je skraćenica za ECMAScript 5. To je izdanje koje većina ljudi cilja jer ga implementira većina današnjih preglednika.

ECMAScript?

-Da, znate, JavaScript se temeljio na standardu za skriptiranje 1999. godine nakon svog početnog izdanja 1995. godine, tada kada se JavaScript zvao Livescript i pokretao se samo u Netscape Navigatoru. Tada je to bilo vrlo zbrkano, ali srećom sada su stvari vrlo jasne i imamo otprilike 7 izdanja ove implementacije.

7 izdanja. Za stvarno. A ES5 i ES2016+ jesu?

-Peto i sedmo izdanje.

Čekaj, što se dogodilo sa šestom?

-Misliš na ES6? Da, mislim, svako je izdanje nadskup prethodnog, tako da ako koristite ES2016+, koristite sve značajke prethodnih verzija.

Pravo. I zašto onda koristiti ES2016+ umjesto ES6?

-Pa, MOGLI biste koristiti ES6, ali da biste koristili cool značajke kao što su async i čekanje, trebate koristiti ES2016+. Inače ste zapeli s ES6 generatorima s korutinama za blokiranje asinkronih poziva radi ispravnog tijeka kontrole.

Nemam pojma što ste upravo rekli, a sva ova imena su zbunjujuća. Gledajte, upravo učitavam hrpu podataka s poslužitelja, prije sam mogao samo uključiti jQuery iz CDN-a i jednostavno dobiti podatke s AJAX pozivima, zašto jednostavno to ne mogu?

-Čovječe, 2016. godina, nitko više ne koristi jQuery, završi u hrpi špageti koda. To svi znaju.

Pravo. Dakle, moja alternativa je učitavanje tri biblioteke za dohvaćanje podataka i prikaz HTML tablice.

-Pa, uključite te tri biblioteke, ali ih spojite s upraviteljem modula da učitate samo jednu datoteku.

Vidim. A što je upravitelj modula?

-Definicija ovisi o okruženju, ali na webu obično mislimo na sve što podržava AMD ili CommonJS module.

Bože. A AMD i CommonJS su...?

-Definicije. Postoje načini da se opiše kako bi višestruke JavaScript biblioteke i klase trebale komunicirati. Znate, izvozi i zahtijevaju? Možete napisati više JavaScript datoteka koje definiraju AMD ili CommonJS API i možete koristiti nešto poput Browserifyja da ih grupirate.

OK, to ima smisla… mislim. Što je Browserify?

-To je alat koji vam omogućuje spajanje ovisnosti opisanih CommonJS u datoteke koje se mogu pokrenuti u pregledniku. Nastala je jer većina ljudi objavljuje te ovisnosti u npm registru.

npm registar?

-To je vrlo veliko javno spremište u koje pametni ljudi stavljaju kod i ovisnosti kao module.

Kao CDN?

- Ne baš. To je više kao centralizirana baza podataka u kojoj svatko može objavljivati i preuzimati biblioteke, tako da ih možete koristiti lokalno za razvoj, a zatim ih prenijeti na CDN ako želite.

Oh, kao Bower!

-Da, ali sada je 2016., nitko više ne koristi Bower.

Oh, shvaćam... znači moram preuzeti biblioteke s npm-a?

-Da. Na primjer, ako želite koristiti React, preuzmite React modul i uvezite ga u svoj kod. To možete učiniti za gotovo svaku popularnu JavaScript biblioteku.

Oh, kao Angular!

-Angular je tako 2015. Ali da. Angular bi bio tu, uz VueJS ili RxJS i druge cool biblioteke iz 2016. Želite li naučiti o njima?

Držimo se Reacta, sada već učim previše stvari. Dakle, ako trebam koristiti React, dohvaćam ga iz ovog npm-a i zatim koristim ovu stvar Browserify?

-Da.

Čini se previše komplicirano samo zgrabiti hrpu ovisnosti i povezati ih zajedno.

-Jest, zato koristite upravitelj zadataka kao što je Grunt ili Gulp ili Broccoli za automatiziranje pokretanja Browserifyja. Dovraga, čak možete koristiti i Mimosu.

Roktati? Gutljaj? Brokula? mimoza? O čemu sad pričamo?

- Voditelji zadataka. Ali oni više nisu cool. Koristili smo ih otprilike 2015., zatim smo koristili Makefile, ali sada sve omotavamo Webpackom.

Makefiles? Mislio sam da se to uglavnom koristi na C ili C++ projektima.

-Da, ali očito na webu volimo komplicirati stvari i onda se vraćati osnovama. To radimo svake godine ili tako nešto, samo pričekajte, napravit ćemo montažu u webu za godinu ili dvije.

Uzdah. Spomenuli ste nešto što se zove Webpack?

-To je još jedan upravitelj modula za preglednik, a istovremeno je i neka vrsta pokretača zadataka. To je kao bolja verzija Browserifyja.

Oh, ok. Zašto je bolje?

-Pa, možda ne bolje, samo je više mišljenja o tome kako bi vaše ovisnosti trebale biti vezane. Webpack vam omogućuje korištenje različitih upravitelja modula, a ne samo CommonJS, tako da na primjer izvorni ES6 podržani moduli.

Izuzetno sam zbunjen cijelom ovom stvari s CommonJS/ES6.

-Svi jesu, ali vas više ne bi trebalo biti briga za SystemJS.

Isus Krist, druga imenica-js. Ok, a što je to SystemJS?

-Pa, za razliku od Browserifyja i Webpacka 1.x, SystemJS je dinamički učitavač modula koji vam omogućuje da povežete više modula u više datoteka umjesto da ih grupirate u jednu veliku datoteku.

Čekaj, ali mislio sam da želimo izgraditi naše biblioteke u jednoj velikoj datoteci i učitati je!

-Da, ali budući da sada dolazi HTTP/2, višestruki HTTP zahtjevi su zapravo bolji.

Čekaj, pa zar ne možemo samo dodati tri originalne biblioteke za React??

- Ne baš. Mislim, mogli biste ih dodati kao vanjske skripte s CDN-a, ali tada biste ipak morali uključiti Babel.

Uzdah. I to je loše, zar ne?

-Da, uključili biste cijelu babel-core, a to ne bi bilo učinkovito za proizvodnju. Tijekom proizvodnje morate izvršiti niz predzadataka kako biste pripremili svoj projekt da bi ritual prizivanja Sotone izgledao kao recept za kuhana jaja. Morate minimizirati sredstva, učiniti ih uglificiranim, umetnuti css iznad preklopa, odgoditi skripte, kao i-

Shvaćam, shvaćam. Dakle, ako ne biste uključili knjižnice izravno u CDN, kako biste to učinili?

-Ja bih to transpilirao iz Typescripta koristeći kombinaciju Webpack + SystemJS + Babel.

strojopis? Mislio sam da kodiramo u JavaScriptu!

-Typescript JE JavaScript, ili bolje rečeno, nadskup JavaScripta, točnije JavaScripta na verziji ES6. Znate, ona šesta verzija o kojoj smo prije pričali?

Mislio sam da je ES2016+ već superset ES6! ZAŠTO nam sada treba ova stvar koja se zove Typescript?

-Oh, zato što nam omogućuje da koristimo JavaScript kao tipizirani jezik i smanjimo pogreške tijekom izvođenja. 2016. je, trebali biste dodati neke vrste u svoj JavaScript kod.

A Typescript to očito čini.

-Flow također, iako provjerava samo tipkanje dok je Typescript nadskup JavaScripta koji treba kompajlirati.

Uzdah… a Flow je?

-To je statična tipka za provjeru koju su napravili neki ljudi na Facebooku. Kodirali su ga u OCamlu, jer je funkcionalno programiranje sjajno.

OCaml? Funkcionalno programiranje?

-To je ono što cool klinci danas koriste, čovječe, znaš, 2016.? Funkcionalno programiranje? Funkcije visokog reda? Curry? Čiste funkcije?

Nemam pojma što si upravo rekao.

- Nitko ne zna na početku. Gledajte, samo trebate znati da je funkcionalno programiranje bolje od OOP-a i to je ono što bismo trebali koristiti u 2016.

Čekaj, naučio sam OOP na faksu, mislio sam da je to dobro?

-Takva je bila i Java prije nego ju je kupio Oracle. Mislim, OOP je bio dobar u svoje dane, i još uvijek ima svoju upotrebu danas, ali sada svi shvaćaju da je modificiranje stanja jednako udaranju beba, tako da sada svi prelaze na nepromjenjive objekte i funkcionalno programiranje. Momci iz Haskell-a su to zvali godinama, -i nemojte me započeti s momcima iz Elma- ali srećom na webu sada imamo biblioteke poput Ramde koje nam omogućuju korištenje funkcionalnog programiranja u običnom JavaScriptu.

Izbacujete li imena samo radi toga? Što je dovraga Ramnda?

-Ne. Ramda. Kao Lambda. Znate, ona knjižnica Davida Chambersa?

David tko?

- David Chambers. Cool tip. Igra opaku igru državnog udara. Jedan od suradnika za Ramdu. Također biste trebali provjeriti Erika Meijera ako ozbiljno namjeravate učiti funkcionalno programiranje.

A Erik Meijer je...?

-I tip koji se bavi funkcionalnim programiranjem. Strašan tip. Ima hrpu prezentacija u kojima uništava Agile dok nosi ovu majicu čudne boje. Također biste trebali provjeriti neke od stvari od Tj-a, Jasha Kenasa, Sindre Sorhusa, Paula Irish, Addy Osmani-

U redu. Tu ću vas zaustaviti. Sve je to dobro i u redu, ali mislim da je sve to toliko komplicirano i nepotrebno za samo dohvaćanje podataka i njihovo prikazivanje. Prilično sam siguran da ne moram poznavati te ljude niti naučiti sve te stvari da bih stvorio tablicu s dinamičkim podacima. Vratimo se na React. Kako mogu dohvatiti podatke s poslužitelja s Reactom?

-Pa, vi zapravo ne dohvaćate podatke s Reactom, vi samo prikazujete podatke s Reactom.

Oh, proklet bio. Dakle, što koristite za dohvaćanje podataka?

-Koristite Fetch za dohvaćanje podataka s poslužitelja.

oprosti? Koristite li Fetch za dohvaćanje podataka? Tko god imenuje te stvari treba tezaurus.

-Znam zar ne? Dohvati to je naziv izvorne implementacije za izvođenje XMLHttpRequests protiv poslužitelja.

Oh, dakle AJAX.

-AJAX je samo korištenje XMLHttpRequests. Ali svakako. Fetch vam omogućuje da radite AJAX temeljen na obećanjima, koja zatim možete razriješiti kako biste izbjegli povratni poziv.

Pakao povratnog poziva?

-Da. Svaki put kada izvršite asinkroni zahtjev prema poslužitelju, trebate pričekati njegov odgovor, što vas onda tjera da dodate funkciju unutar funkcije, što se naziva piramida povratnog poziva iz pakla.

Oh, ok. I ovo obećanje to rješava?

-Doista. Manipulirajući svojim povratnim pozivima putem obećanja, možete pisati kod koji je lakše razumjeti, ismijavati ih i testirati, kao i izvršavati simultane zahtjeve odjednom i čekati dok se svi ne učitaju.

A to se može s Fetchom?

-Da, ali samo ako vaš korisnik koristi evergreen preglednik, inače morate uključiti Fetch polyfill ili koristiti Request, Bluebird ili Axios.

Koliko knjižnica trebam znati, zaboga? Koliko ih je?

-To je JavaScript. Mora postojati tisuće knjižnica koje sve rade istu stvar. Mi poznajemo knjižnice, zapravo, imamo najbolje knjižnice. Naše su biblioteke ogromne i ponekad u njih uključimo slike Guya Fierija.

Jeste li upravo rekli Guy Fieri? Završimo s ovim. Što rade te biblioteke Bluebird, Request, Axios?

-Oni su knjižnice za izvođenje XMLHttpRequests koji vraćaju obećanja.

Nije li i jQueryjeva AJAX metoda počela vraćati obećanja?

- U 2016. više ne koristimo riječ na J. Samo upotrijebite Fetch i ispunite ga polifilom kada nije u pregledniku ili umjesto toga upotrijebite Bluebird, Request ili Axios. Zatim upravljajte obećanjem pomoću čekanja unutar asinkrone funkcije i bum, imate ispravan protok kontrole.

Već treći put spominješ čekanje, ali nemam pojma što je to.

-Await vam omogućuje da blokirate asinkroni poziv, što vam omogućuje bolju kontrolu vremena dohvaćanja podataka i sveukupno povećanje čitljivosti koda. Sjajno je, samo se trebate pobrinuti da dodate fazu 3 unaprijed u Babelu ili upotrijebite syntax-async-functions i transform-async-to-generator dodatak.

Ovo je suludo.

-Ne, suluda je činjenica da trebate unaprijed kompajlirati Typescript kod i zatim ga transpilirati s Babelom da biste koristili await.

što? Nije uključeno u Typescript?

-Ima u sljedećoj verziji, ali od verzije 1.7 cilja samo na ES6, pa ako želite koristiti čekanje u pregledniku, prvo trebate kompajlirati svoj Typescript kod koji cilja na ES6, a zatim Babel to sranje do cilja na ES5.

U ovom trenutku ne znam što bih rekao.

- Gledajte, lako je. Kodirajte sve u Typescriptu. Svi moduli koji koriste Fetch ih kompajliraju kako bi ciljali ES6, transpiliraju ih s Babelom na unaprijed postavljenoj razini 3 i učitavaju ih s SystemJS. Ako nemate Fetch, ispunite ga polifilom ili upotrijebite Bluebird, Request ili Axios i obradite sva svoja obećanja pomoću čekanja.

Imamo vrlo različite definicije lakoće. Dakle, s tim sam ritualom konačno dohvatio podatke i sada ih mogu prikazati s Reactom, zar ne?

- Hoće li vaša aplikacija podnijeti promjene stanja?

Err, ne mislim tako. Samo trebam prikazati podatke.

- Oh, hvala bogu. Inače bih vam morao objasniti Flux i implementacije kao što su Flummox, Alt, Fluxible. Iako bi, da budem iskren, trebao koristiti Redux.

Samo ću preletjeti ta imena. Opet, samo trebam prikazati podatke.

-Oh, ako samo prikazujete podatke React vam nije trebao za početak. Dobro bi vam odgovarao mehanizam za izradu predložaka.

zajebavaš me? Mislite li da je ovo smiješno? Tako se ponašate prema svojim voljenima?

-Samo sam objašnjavao što možeš koristiti.

Stop. Samo stani.

-Mislim, čak i ako se samo koristi mehanizam za izradu predložaka, ja bih i dalje koristio kombinaciju Typescript + SystemJS + Babel da sam na vašem mjestu.

Moram prikazati podatke na stranici, a ne izvoditi Sub Zeroov izvorni MK fatality. Samo mi recite koji mehanizam za izradu predložaka da koristim i ja ću preuzeti dalje.

-Ima ih puno, koji vam je poznat?

Uf, ne mogu se sjetiti imena. Bilo je to davno.

-jPredlošci? jQote? ČISTO?

Err, ne zvoni. Još jedan?

-Transparentnost? JSRender? MarkupJS? NokautJS? Taj je imao dvosmjerni uvez.

Još jedan?

-PločeJS? jQuery-tmpl? Upravljači? Neki ljudi ga još uvijek koriste.

Možda. Ima li sličnih ovoj zadnjoj?

-Brkovi, podvlaka? Mislim da sada čak i lodash ima jedan da budem iskren, ali to je nekako 2014.

Err.. možda je bio noviji.

-Žad? DustJS?

Ne.

-DotJS? EJS?

Ne.

-Nundžuke? ECT?

Ne.

- Ma, ionako nitko ne voli sintaksu Coffeescripta. Žad?

Ne, već si rekao Jade.

- Mislio sam na Mopsa. Mislio sam na Jade. Mislim, Jade je sada Mops.

Uzdah. Ne, ne mogu se sjetiti. Koji biste vi koristili?

-Vjerojatno samo izvorni nizovi predložaka ES6.

Da pogodim. A to zahtijeva ES6.

-Točno.

Koji, ovisno o pregledniku koji koristim, treba Babel.

-Točno.

Koju, ako želim uključiti bez dodavanja cijele osnovne biblioteke, moram je učitati kao modul iz npm-a.

-Točno.

Što zahtijeva Browserify, ili Wepback, ili najvjerojatnije ono drugo što se zove SystemJS.

-Točno.

Kojim bi, osim ako nije Webpack, u idealnom slučaju trebao upravljati pokretač zadataka.

-Točno.

No, budući da bih trebao koristiti funkcionalno programiranje i tipkane jezike, prvo moram pre-kompilirati Typescript ili dodati ovu Flow stvarčicu.

-Točno.

A onda to pošaljite Babelu ako želim koristiti čekanje.

-Točno.

Tako da onda mogu koristiti Fetch, obećanja i kontrolu protoka i svu tu magiju.

-Samo ne zaboravite polifilirati Fetch ako nije podržan, Safari to još uvijek ne može podnijeti.

znaš što Mislim da smo ovdje gotovi. Zapravo, mislim da sam gotova. Završio sam s webom, završio sam s JavaScriptom.

-To je u redu, za nekoliko godina svi ćemo kodirati u Elmu ili WebAssemblyju.

Samo ću se vratiti na pozadinu. Jednostavno ne mogu podnijeti ovoliko promjena i verzija i izdanja i kompajlera i transpilera. JavaScript zajednica je luda ako misli da itko može pratiti ovo.

-Čujem te. Onda biste trebali isprobati Python zajednicu.

Zašto?

- Jeste li ikada čuli za Python 3?

Ažuriranje: hvala na ukazivanju na tipfelere i pogreške, ažurirat ću članak kako je navedeno. Rasprava u HackerNewsu i Redditu .