Kakav je osjećaj naučiti JavaScript u 2016

Nijedan JavaScript okvir nije kreiran tokom pisanja ovog članka.

Sledeće je inspirisano člankom „To je budućnost“ iz Circle CI. Original možete pročitati ovdje . Ovaj članak je samo mišljenje, i kao i svaki JavaScript okvir, ne treba ga uzimati previše ozbiljno.

Hej, dobio sam ovaj novi web projekat, ali da budem iskren, nisam kodirao mnogo weba nekoliko godina i čuo sam da se krajolik malo promijenio. Vi ste najsvježiji web dev ovdje, zar ne?

-Pravi izraz je Front End inženjer, ali da, ja sam pravi tip. Radim na webu 2016. Vizualizacije, muzički plejeri, leteći dronovi koji igraju fudbal, svejedno. Upravo sam se vratio sa JsConf-a i ReactConf-a, tako da poznajem najnovije tehnologije za kreiranje web aplikacija.

Cool. Moram da kreiram stranicu koja prikazuje najnovije aktivnosti korisnika, tako da samo trebam da dobijem podatke sa REST krajnje tačke i da ih prikažem u nekoj vrsti tabele koja se može filtrirati, i ažurirati je ako se nešto promeni na serveru. Razmišljao sam da možda koristim jQuery za dohvaćanje i prikaz podataka?

-O moj Bože, ne, niko više ne koristi jQuery. Trebalo bi da probate da naučite React, 2016 je.

Oh, OK. Šta je React?

-To je super kul biblioteka koju su napravili neki momci iz Facebooka, ona zaista donosi kontrolu i performanse vašoj aplikaciji, omogućavajući vam da vrlo lako upravljate svim promjenama pogleda.

To zvuči uredno. Mogu li koristiti React za prikaz podataka sa servera?

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

Čekaj, zašto dvije biblioteke?

- Dakle, jedna je stvarna biblioteka, a druga je za manipulisanje DOM-om, koji sada možete opisati u JSX-u.

JSX? Šta je JSX?

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

Šta nije u redu sa HTML-om?

- 2016. je. Niko više ne kodira direktno HTML.

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

-Ne baš. Morate dodati Babel i tada ćete moći koristiti React.

Druga biblioteka? Šta je Babel?

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

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

-ES5 je skraćenica od ECMAScript 5. To je izdanje koje cilja većinu ljudi budući da je implementirano u većini današnjih pretraživača.

ECMAScript?

-Da, znate, JavaScript je bio baziran na standardu za skriptiranje 1999. nakon njegovog prvobitnog izdanja 1995. godine, tada kada je JavaScript nazvan Livescript i radio samo u Netscape Navigatoru. To je tada bilo vrlo neuredno, ali na sreću sada su stvari vrlo jasne i imamo, otprilike, 7 izdanja ove implementacije.

7 izdanja. Stvarno. A ES5 i ES2016+ jesu?

-Peto i sedmo izdanje.

Čekaj, šta se desilo sa šestim?

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

U redu. I zašto onda koristiti ES2016+ preko ES6?

-Mogli biste koristiti ES6, ali da biste koristili cool funkcije poput async i čekanja, morate koristiti ES2016+. Inače ste zaglavljeni sa ES6 generatorima sa korutinama za blokiranje asinhronih poziva za ispravan tok kontrole.

Nemam pojma šta ste upravo rekli, a sva ova imena su zbunjujuća. Gledajte, ja samo učitavam gomilu podataka sa servera, nekada sam mogao samo da uključim jQuery sa CDN-a i samo dobijem podatke pomoću AJAX poziva, zašto to ne mogu da uradim?

- 2016 je čovječe, niko više ne koristi jQuery, završi u hrpi špageti koda. Svi to znaju.

U redu. Dakle, moja alternativa je da učitam tri biblioteke za dohvat podataka i prikaz HTML tabele.

-Pa, vi uključujete te tri biblioteke, ali ih spajate sa modul menadžerom da učitate samo jedan fajl.

Vidim. A šta je menadžer modula?

-Definicija zavisi od okruženja, ali na webu obično mislimo na sve što podržava AMD ili CommonJS module.

Riiight. A AMD i CommonJS su…?

-Definicije. Postoje načini da se opiše kako više JavaScript biblioteka i klasa treba da komuniciraju. Znate, izvoz i potrebe? Možete napisati više JavaScript datoteka koje definiraju AMD ili CommonJS API i možete koristiti nešto poput Browserify da ih povežete.

OK, to ima smisla... Mislim. Šta je Browserify?

-To je alat koji vam omogućava da grupišete CommonJS opisane zavisnosti u fajlove koji se mogu pokrenuti u pretraživaču. Nastao je zato što većina ljudi objavljuje te zavisnosti u npm registru.

npm registry?

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

Kao CDN?

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

Oh, kao Bower!

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

Oh, razumijem... znači onda moram preuzeti biblioteke sa npm-a?

-Da. Tako, na primjer, ako želite koristiti React, preuzimate React modul i uvozite ga u svoj kod. To možete učiniti za skoro 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 za 2016. godinu. Želite li naučiti o njima?

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

-Da.

Čini se da je previše komplikovano samo zgrabiti gomilu zavisnosti i povezati ih zajedno.

-To je razlog zašto koristite menadžer zadataka kao što su Grunt ili Gulp ili Broccoli za automatizaciju pokretanja Browserify-a. Dovraga, čak možete koristiti i mimozu.

Grunt? Gulp? Brokoli? Mimoza? O čemu mi sada pričamo?

-Menadžeri zadataka. Ali više nisu kul. Koristili smo ih u 2015. godini, zatim smo koristili Makefiles, ali sada sve omotavamo Webpackom.

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

-Da, ali očigledno na webu volimo da komplikujemo stvari i da se onda vratimo osnovama. To radimo svake godine ili tako nešto, samo pričekajte, za godinu-dvije ćemo napraviti montažu na webu.

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

-To je još jedan menadžer modula za pretraživač, a istovremeno je i pokretač zadataka. To je kao bolja verzija Browserify-a.

Oh, ok. Zašto je bolje?

-Pa, možda ne i bolje, samo je više mišljenja o tome kako bi vaše zavisnosti trebalo da budu povezane. Webpack vam omogućava da koristite različite menadžere modula, a ne samo one CommonJS, tako na primjer izvorne ES6 podržane module.

Izuzetno sam zbunjen cijelom ovom CommonJS/ES6 stvari.

-Svi jesu, ali vas više nije briga za SystemJS.

Isuse Kriste, još jedna imenica-js. Ok, a šta je ovo SystemJS?

-Pa, za razliku od Browserify i Webpack 1.x, SystemJS je dinamički modul za učitavanje koji vam omogućava da povežete više modula u više datoteka umjesto da ih grupišete u jednu veliku datoteku.

Čekaj, ali mislio sam da želimo sagraditi naše biblioteke u jednu veliku datoteku i učitati je!

-Da, ali pošto HTTP/2 sada dolazi, višestruki HTTP zahtjevi su zapravo bolji.

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

-Ne baš. Mislim, mogli biste ih dodati kao eksterne skripte iz CDN-a, ali biste i dalje morali uključiti Babel tada.

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

-Da, uključili biste čitavo babel-jezgro, a to ne bi bilo efikasno za proizvodnju. U produkciji morate obaviti niz pred-zadataka kako biste pripremili svoj projekt koji će učiniti da ritual prizivanja Sotone izgleda kao recept za kuhana jaja. Morate minimizirati sredstva, uglificirati ih, umetnuti css iznad preloma, odgoditi skripte, kao i-

Shvatio sam, shvatio sam. Dakle, ako ne biste uključili biblioteke direktno u CDN, kako biste to učinili?

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

Typescript? Mislio sam da kodiramo u JavaScriptu!

-Typescript JE JavaScript, ili bolje rečeno, nadskup JavaScripta, tačnije JavaScript na verziji ES6. Znate, ona šesta verzija o kojoj smo ranije 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ćava da koristimo JavaScript kao kucani jezik i smanjimo greške tokom izvođenja. 2016. je, trebali biste dodati neke tipove svom JavaScript kodu.

A Typescript to očigledno radi.

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

Uzdah… a Flow je?

-To je statička provera tipa koju su napravili neki momci na Facebooku. Kodirali su ga u OCaml, jer je funkcionalno programiranje fenomenalno.

OCaml? Funkcionalno programiranje?

-To je ono što kul deca koriste danas čoveče, znaš, 2016? Funkcionalno programiranje? Funkcije visokog reda? Currying? Čiste funkcije?

Nemam pojma šta si upravo rekao.

-Niko ne radi 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 koledžu, mislio sam da je to dobro?

-Kao i Java prije nego što ju je kupio Oracle. Mislim, OOP je bio dobar u danima, i još uvijek ima svoju upotrebu danas, ali sada svi shvataju da je modifikacija stanja ekvivalentna šutiranju beba, tako da sada svi prelaze na nepromjenjive objekte i funkcionalno programiranje. Momci iz Haskell-a su to zvali godinama, - i nemojte me tjerati da počnem s Elm momcima - ali srećom na webu sada imamo biblioteke poput Ramde koje nam omogućavaju da koristimo funkcionalno programiranje u običnom JavaScriptu.

Da li samo izbacujete imena zbog toga? Šta je dođavola Ramnda?

-Ne. Ramda. Kao Lambda. Znate onu biblioteku Davida Chambersa?

David koji?

-David Chambers. Cool momak. Igra zlobnu igru Državnog udara. Jedan od saradnika za Ramdu. Također biste trebali provjeriti Erika Meijera ako ste ozbiljni u učenju funkcionalnog programiranja.

A Erik Meijer je…?

-Također i tip za funkcionalno programiranje. Sjajan momak. Ima gomilu prezentacija u kojima uništava Agile dok koristi ovu čudnu košulju u boji. Također biste trebali provjeriti neke od stvari od Tj-a, Jasha Kenasa, Sindre Sorhus, Paul Irish, Addy Osmani-

Ok. Tu ću te zaustaviti. Sve je to dobro i fino, ali mislim da je sve to tako komplikovano i nepotrebno za samo dohvaćanje podataka i njihovo prikazivanje. Prilično sam siguran da ne moram poznavati ove ljude ili naučiti sve te stvari da bih napravio tabelu sa dinamičkim podacima. Vratimo se na React. Kako mogu dohvatiti podatke sa servera pomoću Reacta?

-Pa, vi zapravo ne preuzimate podatke pomoću Reacta, već samo prikazujete podatke pomoću Reacta.

Oh, proklet bio. Dakle, šta koristite za preuzimanje podataka?

- Koristite Fetch za preuzimanje podataka sa servera.

žao mi je? Koristite Fetch za dohvaćanje podataka? Ko god da imenuje te stvari treba tezaurus.

-Znam zar ne? Dohvati to ime matične implementacije za izvođenje XMLHttpRequests-a na serveru.

Oh, tako AJAX.

-AJAX je samo upotreba XMLHttpRequests-a. Ali sigurno. Fetch vam omogućava da radite AJAX na osnovu obećanja, koje onda možete riješiti kako biste izbjegli pakao povratnog poziva.

Pakao povratnog poziva?

-Da. Svaki put kada izvršite asinhroni zahtjev prema serveru, morate čekati njegov odgovor, što vas onda tjera da dodate funkciju unutar funkcije, koja se zove piramida povratnog poziva iz pakla.

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

-Zaista. Manipulirajući povratnim pozivima kroz obećanja, možete pisati lakši za razumijevanje kod, ismijavati ga i testirati ga, kao i izvoditi simultane zahtjeve odjednom i čekati dok se svi ne učitaju.

I to se može uraditi sa Fetch-om?

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

Koliko biblioteka treba da znam za ime Boga? Koliko ih je?

-To je JavaScript. Mora postojati hiljade biblioteka koje sve rade istu stvar. Znamo biblioteke, u stvari, imamo najbolje biblioteke. Naše biblioteke su ogromne i ponekad u njih ubacimo slike Guya Fierija.

Jesi li upravo rekao Guy Fieri? Hajde da završimo sa ovim. Šta rade ove biblioteke Bluebird, Request, Axios?

-To su biblioteke za izvođenje XMLHttpRequesta koji vraćaju obećanja.

Nije li jQueryjev AJAX metod također počeo vraćati obećanja?

-U 2016. više ne koristimo riječ “J”. Samo koristite Fetch i popunite ga kada nije u pretraživaču ili umjesto toga koristite Bluebird, Request ili Axios. Zatim upravljajte obećanjem sa await unutar async funkcije i bum, imate ispravan tok kontrole.

To je treći put da spominješ čekaj, ali nemam pojma šta je to.

-Await vam omogućava da blokirate asinhroni poziv, omogućavajući vam bolju kontrolu kada se podaci dohvaćaju i općenito povećavajući čitljivost koda. Sjajno je, samo treba da budete sigurni da ste dodali predefinisanu fazu-3 u Babel-u ili koristite sintakse-async-funkcije i dodatak transform-async-to-generator.

Ovo je ludo.

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

Šta? Nije uključeno u Typescript?

-U sljedećoj verziji ima, ali od verzije 1.7 cilja samo na ES6, tako da ako želite da koristite await u pretraživaču, prvo morate kompajlirati svoj Typescript kod koji cilja ES6, a zatim Babel to sranje da cilja ES5.

U ovom trenutku ne znam šta da kažem.

-Vidi, lako je. Kodirajte sve u Typescript-u. Svi moduli koji koriste Fetch kompajliraju ih da ciljaju ES6, transpiliraju ih sa Babel-om na prethodno postavljenoj fazi 3 i učitavaju ih sa SystemJS-om. Ako nemate Fetch, popunite ga ili koristite Bluebird, Request ili Axios i obradite sva svoja obećanja sa await.

Imamo veoma različite definicije lakog. Dakle, sa tim ritualom sam konačno dohvatio podatke i sada ih mogu prikazati pomoću React-a, zar ne?

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

Err, mislim da nije. Samo treba da prikažem podatke.

-Oh, hvala Bogu. Inače bih morao da vam objašnjavam Flux i implementacije kao što su Flummox, Alt, Fluxible. Iako da budem iskren, trebali biste koristiti Redux.

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

-Oh, ako samo prikazujete podatke, nije vam trebao React za početak. Bilo bi vam dobro sa šablonom.

Šališ se? Mislite li da je ovo smiješno? Da li se tako ponašate prema svojim voljenima?

-Samo sam objašnjavao šta bi ti moglo koristiti.

Stani. Samo prestani.

-Mislim, čak i ako koristi samo šablonski mehanizam, i dalje bih koristio kombinaciju Typescript + SystemJS + Babel da sam na vašem mjestu.

Moram prikazati podatke na stranici, a ne izvoditi Sub Zeroov originalni MK fatality. Samo mi recite koji šablonski mehanizam da koristim i ja ću to preuzeti odatle.

-Ima mnogo, koji vam je poznat?

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

-jŠabloni? jQote? PURE?

Err, ne zvoni. Još jedan?

-Transparentnost? JSRender? MarkupJS? KnockoutJS? Taj je imao dvosmjerno vezivanje.

Još jedan?

-PlatesJS? jQuery-tmpl? Upravljači? Neki ljudi ga i dalje koriste.

Možda. Ima li sličnih ovom posljednjem?

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

Err.. možda je bilo novije.

-Jade? DustJS?

br.

-DotJS? EJS?

br.

-Nunjucks? ECT?

br.

-Mah, ionako niko ne voli Coffeescript sintaksu. Jade?

Ne, već si rekao Jade.

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

Uzdah. Ne. Ne mogu da se setim. Koji biste koristili?

-Vjerovatno samo ES6 izvorni nizovi šablona.

Pusti me da pogodim. A za to je potreban ES6.

-Tačno.

Koji, u zavisnosti od toga koji pretraživač koristim, treba Babel.

-Tačno.

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

-Tačno.

Što, zahtijeva Browserify, ili Wepback, ili najvjerovatnije onu drugu stvar koja se zove SystemJS.

-Tačno.

Kojim, osim ako nije Webpack, idealno bi trebao upravljati pokretač zadataka.

-Tačno.

Ali, pošto bih trebao koristiti funkcionalno programiranje i kucane jezike, prvo moram unaprijed kompajlirati Typescript ili dodati ovu Flow stvar.

-Tačno.

I onda to pošalji Babelu ako želim da koristim čekanje.

-Tačno.

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

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

Znaš šta. Mislim da smo završili ovde. Zapravo, mislim da sam gotov. Završio sam s webom, završio sam s JavaScriptom.

-U redu je, za nekoliko godina ćemo svi kodirati u Elm ili WebAssembly.

Samo ću se vratiti na pozadinu. Jednostavno ne mogu podnijeti ove mnoge promjene i verzije i izdanja i kompajlere i transpilere. JavaScript zajednica je luda ako misli da bilo ko može pratiti ovo.

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

Zašto?

- Jeste li ikada čuli za Python 3?

Ažuriranje: Hvala što ukazujete na greške u kucanju i greške, ažurirat ću članak kako je navedeno. Diskusija na HackerNews -u i Redditu .