Cum te simți să înveți JavaScript în 2016

Nu au fost create cadre JavaScript în timpul scrierii acestui articol.

Următorul este inspirat din articolul „Este viitorul” de la Circle CI. Puteți citi originalul aici . Această piesă este doar o opinie și, ca orice cadru JavaScript, nu ar trebui luată prea în serios.

Hei, am primit acest nou proiect web, dar sincer să fiu, nu am codificat prea mult web de câțiva ani și am auzit că peisajul s-a schimbat puțin. Sunteți cel mai recent dezvoltator web de aici, nu?

- Termenul actual este inginer front-end, dar da, sunt tipul potrivit. Eu fac web în 2016. Vizualizări, playere de muzică, drone zburătoare care joacă fotbal, ce vrei. Tocmai m-am întors de la JsConf și ReactConf, așa că cunosc cele mai recente tehnologii pentru a crea aplicații web.

Rece. Trebuie să creez o pagină care să afișeze cea mai recentă activitate a utilizatorilor, așa că trebuie doar să obțin datele de la punctul final REST și să le afișez într-un fel de tabel filtrabil și să le actualizez dacă se schimbă ceva pe server. Mă gândeam că pot folosi jQuery pentru a prelua și afișa datele?

-Doamne, nu, nimeni nu mai folosește jQuery. Ar trebui să încerci să înveți React, este 2016.

Oh, bine. Ce este React?

-Este o bibliotecă super cool făcută de niște băieți de la Facebook, aduce cu adevărat control și performanță aplicației tale, permițându-ți să gestionezi foarte ușor orice modificări de vizualizare.

Sună frumos. Pot folosi React pentru a afișa date de pe server?

-Da, dar mai întâi trebuie să adăugați React și React DOM ca bibliotecă în pagina dvs. web.

Stai, de ce două biblioteci?

-Așadar, una este biblioteca reală, iar a doua este pentru manipularea DOM-ului, pe care acum o puteți descrie în JSX.

JSX? Ce este JSX?

-JSX este doar o extensie de sintaxă JavaScript care seamănă aproape cu XML. Este un fel de alt mod de a descrie DOM, gândiți-vă la el ca un HTML mai bun.

Ce este în neregulă cu HTML?

-Este 2016. Nimeni nu mai codifică HTML direct.

Corect. Oricum, dacă adaug aceste două biblioteci, pot folosi React?

- Nu chiar. Trebuie să adăugați Babel și apoi puteți utiliza React.

O altă bibliotecă? Ce este Babel?

-Oh, Babel este un transpiler care vă permite să vizați versiuni specifice de JavaScript, în timp ce codificați în orice versiune de JavaScript. Nu TREBUIE să includeți Babel pentru a utiliza ReactJS, dar dacă nu o faceți, sunteți blocat să utilizați ES5 și să fim reali, este 2016, ar trebui să codificați în ES2016+ așa cum fac restul copiilor cool.

ES5? ES2016+? Mă pierd aici. Ce este ES5 și ES2016+?

-ES5 înseamnă ECMAScript 5. Este ediția care vizează cei mai mulți oameni, deoarece a fost implementată de majoritatea browserelor din zilele noastre.

ECMAScript?

-Da, știți, standardul de scripting JavaScript s-a bazat în 1999, după lansarea sa inițială în 1995, atunci când JavaScript era numit Livescript și rula doar în Netscape Navigator. Era foarte dezordonat atunci, dar din fericire acum lucrurile sunt foarte clare și avem, de exemplu, 7 ediții ale acestei implementări.

7 editii. Adevărat. Și ES5 și ES2016+ sunt?

-A cincea și respectiv a șaptea ediție.

Stai, ce s-a întâmplat cu al șaselea?

-Te referi la ES6? Da, adică, fiecare ediție este un superset al celei anterioare, așa că dacă utilizați ES2016+, utilizați toate caracteristicile versiunilor anterioare.

Corect. Și atunci de ce să folosești ES2016+ peste ES6?

-Ei bine, PUTEȚI folosi ES6, dar pentru a utiliza funcții interesante, cum ar fi asincronizarea și așteptarea, trebuie să utilizați ES2016+. În caz contrar, sunteți blocat cu generatoare ES6 cu corutine pentru a bloca apelurile asincrone pentru un flux de control adecvat.

Habar n-am ce tocmai ai spus și toate aceste nume sunt confuze. Uite, doar încarc o grămadă de date de pe un server, obișnuiam să includ jQuery dintr-un CDN și să obțin datele cu apeluri AJAX, de ce nu pot face asta?

-Este 2016 omule, nimeni nu mai folosește jQuery, ajunge într-o grămadă de cod spaghetti. Toată lumea știe asta.

Corect. Deci alternativa mea este să încărc trei biblioteci pentru a prelua date și pentru a afișa un tabel HTML.

-Ei bine, includeți acele trei biblioteci, dar le combinați cu un manager de module pentru a încărca un singur fișier.

Înțeleg. Și ce este un manager de module?

-Definiția depinde de mediu, dar în web ne referim de obicei la orice acceptă module AMD sau CommonJS.

Riiight. Și AMD și CommonJS sunt...?

-Definitii. Există modalități de a descrie modul în care ar trebui să interacționeze mai multe biblioteci și clase JavaScript. Știi, exportă și necesită? Puteți scrie mai multe fișiere JavaScript care definesc API-ul AMD sau CommonJS și puteți folosi ceva precum Browserify pentru a le grupa.

OK, asta are sens... cred. Ce este Browserify?

-Este un instrument care vă permite să grupați dependențele descrise CommonJS în fișiere care pot fi rulate în browser. A fost creat deoarece majoritatea oamenilor publică acele dependențe în registrul npm.

registru npm?

-Este un depozit public foarte mare în care oamenii inteligenți pun cod și dependențe ca module.

Ca un CDN?

-Nu chiar. Este mai mult ca o bază de date centralizată în care oricine poate publica și descărca biblioteci, astfel încât să le puteți utiliza local pentru dezvoltare și apoi să le încărcați pe un CDN, dacă doriți.

Oh, ca Bower!

-Da, dar acum e 2016, nimeni nu mai folosește Bower.

Oh, înțeleg... deci trebuie să descarc bibliotecile de pe npm atunci?

-Da. Deci, de exemplu, dacă doriți să utilizați React, descărcați modulul React și îl importați în codul dvs. Puteți face asta pentru aproape fiecare bibliotecă JavaScript populară.

Oh, ca Angular!

-Angular este atât de 2015. Dar da. Angular ar fi acolo, alături de VueJS sau RxJS și alte biblioteci cool din 2016. Vrei să afli despre acestea?

Să rămânem cu React, deja învăț prea multe lucruri acum. Deci, dacă trebuie să folosesc React, îl aduc din acest npm și apoi folosesc acest lucru Browserify?

-Da.

Pare prea complicat să luați o grămadă de dependențe și să le legați împreună.

-De aceea folosești un manager de activități precum Grunt sau Gulp sau Broccoli pentru a automatiza rularea Browserify. La naiba, poți chiar să folosești Mimosa.

Grunt? Înghiţitură? Broccoli? Mimoza? La naiba vorbim acum?

- Manageri de sarcini. Dar nu mai sunt cool. Le-am folosit în 2015, apoi am folosit Makefiles, dar acum împachetăm totul cu Webpack.

Makefiles? Credeam că este folosit mai ales pe proiecte C sau C++.

-Da, dar se pare că în web ne place să complicăm lucrurile și apoi să revenim la elementele de bază. Facem asta în fiecare an sau cam așa ceva, doar așteptați, vom face asamblarea pe web într-un an sau doi.

Suspin. Ai menționat ceva numit Webpack?

-Este un alt manager de module pentru browser, fiind și un fel de alergător de sarcini. Este ca o versiune mai bună a Browserify.

Oh, bine. De ce este mai bine?

-Ei bine, poate nu mai bine, doar că este mai obișnuit cu privire la modul în care ar trebui să fie legate dependențele tale. Webpack vă permite să utilizați diferiți manageri de module, și nu numai pe cei CommonJS, deci, de exemplu, modulele native suportate de ES6.

Sunt extrem de confuz de toată chestia asta cu CommonJS/ES6.

-Toată lumea este, dar nu ar trebui să-ți mai pese cu SystemJS.

Iisus Hristos, un alt substantiv-js. Ok, și ce este acest SystemJS?

-Ei bine, spre deosebire de Browserify și Webpack 1.x, SystemJS este un încărcător de module dinamic care vă permite să legați mai multe module în mai multe fișiere în loc să le grupați într-un singur fișier mare.

Stai, dar am crezut că vrem să ne construim bibliotecile într-un singur fișier mare și să încărcăm asta!

-Da, dar pentru că HTTP/2 vine acum, solicitările HTTP multiple sunt de fapt mai bune.

Așteaptă, așa că nu putem adăuga doar cele trei biblioteci originale pentru React?

-Nu chiar. Adică, le-ați putea adăuga ca scripturi externe dintr-un CDN, dar ar trebui să includeți Babel atunci.

Suspin. Și asta e rău, nu?

-Da, ai include întregul miez babel și nu ar fi eficient pentru producție. În producție, trebuie să efectuați o serie de sarcini prealabile pentru a vă pregăti proiectul, care fac ca ritualul de a-l chema pe Satan să arate ca o rețetă de ouă fierte. Trebuie să reduceți activele, să le urâți, să inline css deasupra foldului, să amânați scripturile, precum și-

Am înțeles, am înțeles. Deci, dacă nu ați include bibliotecile direct într-un CDN, cum ați proceda?

-L-aș transpila din Typescript folosind un combo Webpack + SystemJS + Babel.

Dactilografiat? Credeam că codificăm în JavaScript!

-Typescript este JavaScript, sau mai bine spus, un superset de JavaScript, mai precis JavaScript pe versiunea ES6. Știi, a șasea versiune despre care am vorbit înainte?

Credeam că ES2016+ este deja un superset al ES6! DE CE avem nevoie acum de chestia asta numită Typescript?

-Oh, pentru că ne permite să folosim JavaScript ca limbaj de tastare și să reducem erorile de rulare. Este 2016, ar trebui să adăugați câteva tipuri la codul JavaScript.

Și Typescript, evident, face asta.

-Flow, de asemenea, deși verifică doar tastarea în timp ce Typescript este un superset de JavaScript care trebuie compilat.

Suspin... și Flow este?

-Este un verificator de tip static făcut de niște tipi de la Facebook. L-au codificat în OCaml, deoarece programarea funcțională este minunată.

OCaml? Programare functionala?

-Este ceea ce folosesc copiii cool din ziua de azi omule, știi, 2016? Programare functionala? Funcții de ordin înalt? curry? Funcții pure?

Habar n-am ce tocmai ai spus.

-Nimeni nu o face la început. Uite, trebuie doar să știi că programarea funcțională este mai bună decât OOP și asta ar trebui să folosim în 2016.

Stai, am învățat OOP la facultate, am crezut că e bine?

-La fel a fost Java înainte de a fi cumpărat de Oracle. Vreau să spun, OOP era bun în vremuri și își are și astăzi utilizările, dar acum toată lumea își dă seama că modificarea stărilor echivalează cu lovirea copiilor, așa că acum toată lumea trece la obiecte imuabile și la programare funcțională. Băieții Haskell îl numeau de ani de zile, - și nu mă face să încep cu cei din Elm - dar, din fericire, în web acum avem biblioteci precum Ramda care ne permit să folosim programarea funcțională în JavaScript simplu.

Doar renunți la nume de dragul asta? Ce dracu este Ramnda?

-Nu. Ramda. Ca Lambda. Știi, biblioteca aia lui David Chambers?

David cine?

- David Chambers. Mișto tip. Joacă un joc de lovitură răutăcioasă. Unul dintre colaboratorii pentru Ramda. Ar trebui să-l verificați și pe Erik Meijer dacă sunteți serios să învățați programarea funcțională.

Și Erik Meijer este...?

-De asemenea, tip programator funcțional. Un tip grozav. Are o grămadă de prezentări în care aruncă la gunoi Agile în timp ce folosește această cămașă de culoare ciudată. Ar trebui să verificați, de asemenea, unele dintre lucrurile de la Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Bine. Am de gând să te opresc acolo. Toate acestea sunt bune și bune, dar cred că toate acestea sunt atât de complicate și inutile pentru a prelua date și a le afișa. Sunt destul de sigur că nu trebuie să cunosc acești oameni sau să învăț toate acele lucruri pentru a crea un tabel cu date dinamice. Să revenim la React. Cum pot prelua datele de pe server cu React?

-Ei bine, de fapt nu aduci datele cu React, ci doar afișezi datele cu React.

Oh, la naiba. Deci, ce folosiți pentru a prelua datele?

-Folosiți Fetch pentru a prelua datele de pe server.

Îmi pare rău? Folosiți Fetch pentru a prelua datele? Cine numește acele lucruri are nevoie de un tezaur.

-Nu-i așa? Preluați este numele implementării native pentru efectuarea cererilor XMLHttp pe un server.

Oh, deci AJAX.

-AJAX este doar utilizarea XMLHttpRequests. Dar sigur. Fetch vă permite să faceți AJAX bazat pe promisiuni, pe care apoi le puteți rezolva pentru a evita iadul de apel invers.

Iadul de apel invers?

-Da. De fiecare dată când efectuați o solicitare asincronă împotriva serverului, trebuie să așteptați răspunsul acestuia, ceea ce vă face să adăugați o funcție într-o funcție, care se numește piramida de apel invers din iad.

Oh, bine. Și chestia asta cu promisiunea o rezolvă?

-Într-adevăr. Prin manipularea apelurilor dvs. prin promisiuni, puteți scrie cod mai ușor de înțeles, le puteți bate joc și le puteți testa, precum și să efectuați solicitări simultane și să așteptați până când toate sunt încărcate.

Și asta se poate face cu Fetch?

-Da, dar numai dacă utilizatorul dvs. folosește un browser evergreen, în caz contrar, trebuie să includeți o umplere de tip Fetch polyfill sau să utilizați Request, Bluebird sau Axios.

Câte biblioteci trebuie să știu pentru numele lui Dumnezeu? Câți sunt dintre ei?

- Este JavaScript. Trebuie să existe mii de biblioteci care fac toate același lucru. Cunoaștem biblioteci, de fapt, avem cele mai bune biblioteci. Bibliotecile noastre sunt uriașe și, uneori, includem imagini cu Guy Fieri în ele.

Tocmai ai spus Guy Fieri? Să terminăm cu asta. Ce fac aceste biblioteci Bluebird, Request, Axios?

-Sunt biblioteci pentru a efectua XMLHttpRequests care returnează promisiuni.

Metoda AJAX a jQuery nu a început să returneze și promisiuni?

-Nu mai folosim cuvântul „J” în 2016. Folosiți doar Fetch și completați-l când nu este într-un browser sau utilizați în schimb Bluebird, Request sau Axios. Apoi gestionați promisiunea cu așteptare într-o funcție asincronă și boom, aveți un flux de control adecvat.

Este a treia oară când menționezi că așteaptă, dar habar n-am ce este.

-Await vă permite să blocați un apel asincron, permițându-vă să aveți un control mai bun asupra momentului în care datele sunt preluate și, în general, crește lizibilitatea codului. Este minunat, trebuie doar să te asiguri că adaugi presetarea stadiului 3 în Babel sau folosești funcții-async-sync și plugin-ul transform-async-to-generator.

Asta este o nebunie.

-Nu, nebun este faptul că trebuie să precompilezi codul Typescript și apoi să îl transpilezi cu Babel pentru a-l folosi await.

Ce? Nu este inclus în Typescript?

-Se întâmplă în versiunea următoare, dar începând cu versiunea 1.7 vizează doar ES6, așa că dacă doriți să utilizați await în browser, mai întâi trebuie să compilați codul Typescript care vizează ES6 și apoi Babel that shit până la țintirea ES5.

În acest moment nu știu ce să spun.

- Uite, e ușor. Codați totul în Typescript. Toate modulele care folosesc Fetch le compilează pentru a ținti ES6, le transpilează cu Babel pe o presetare a etapei 3 și le încarcă cu SystemJS. Dacă nu aveți Fetch, completați-l în mod polivalent sau utilizați Bluebird, Request sau Axios și gestionați-vă toate promisiunile cu așteaptă.

Avem definiții foarte diferite pentru ușor. Deci, cu acel ritual am preluat în sfârșit datele și acum le pot afișa cu React, nu?

- Aplicația dumneavoastră va gestiona vreo schimbare de stare?

Err, nu cred. Trebuie doar să afișez datele.

-O, slavă Domnului. În caz contrar, ar trebui să vă explic Flux și implementări precum Flummox, Alt, Fluxible. Deși, pentru a fi sincer, ar trebui să utilizați Redux.

O să zbor peste acele nume. Din nou, trebuie doar să afișez date.

-Oh, dacă afișați doar datele, nu aveați nevoie de React pentru început. Ți-ar fi fost bine cu un motor de șabloane.

Glumești cu mine? Crezi că asta e amuzant? Așa îi tratezi pe cei dragi?

- Tocmai îți explicam ce ai putea folosi.

Stop. Oprește-te.

- Adică, chiar dacă folosește doar motorul de șabloane, tot aș folosi o combinație Typescript + SystemJS + Babel dacă aș fi în locul tău.

Trebuie să afișez date pe o pagină, nu să efectuez fatalitatea MK originală a lui Sub Zero. Spune-mi doar ce motor de șabloane să folosesc și o voi lua de acolo.

-Sunt multe, cu care ești familiar?

Uf, nu-mi amintesc numele. A fost cu mult timp în urmă.

-jȘabloane? jQote? PUR?

Err, nu sună. Altul?

-Transparenţă? JSRender? MarkupJS? KnockoutJS? Acela avea legare în două sensuri.

Altul?

-PlatesJS? jQuery-tmpl? Ghidon? Unii oameni încă îl folosesc.

Pot fi. Sunt similare cu ultima?

-Mustață, subliniere? Cred că acum chiar și Lodash are unul, să fiu sincer, dar sunt cam 2014.

Err.. poate era mai nou.

-Jad? DustJS?

Nu.

-DotJS? EJS?

Nu.

- Călugărițe? ECT?

Nu.

-Mah, oricum nimănui nu-i place sintaxa Coffeescript. Jad?

Nu, ai spus deja Jade.

- Mă refeream la Pug. Mă refeream la Jade. Adică, Jade este acum Pug.

Suspin. Nu. Nu-mi amintesc. Pe care ai folosi-o?

-Probabil doar șiruri de șabloane native ES6.

Lasă-mă să ghicesc. Și asta necesită ES6.

-Corecta.

Care, în funcție de browserul pe care îl folosesc, are nevoie de Babel.

-Corecta.

Pe care, dacă vreau să îl includ fără a adăuga întreaga bibliotecă de bază, trebuie să o încarc ca modul din npm.

-Corecta.

Care, necesită Browserify, sau Wepback, sau cel mai probabil acel alt lucru numit SystemJS.

-Corecta.

Care, cu excepția cazului în care este Webpack, în mod ideal ar trebui să fie gestionat de un administrator de sarcini.

-Corecta.

Dar, din moment ce ar trebui să folosesc programare funcțională și limbaje tipizate, trebuie mai întâi să precompilez Typescript sau să adaug acest lucru Flow.

-Corecta.

Și apoi trimite-l lui Babel dacă vreau să folosesc așteaptă.

-Corecta.

Așa că apoi pot folosi Fetch, promisiunile și controlul fluxului și toată acea magie.

-Nu uitați să completați Fetch dacă nu este acceptat, Safari tot nu se poate descurca.

Știi ce. Cred că am terminat aici. De fapt, cred că am terminat. Am terminat cu web-ul, am terminat cu JavaScript.

- În regulă, în câțiva ani toți vom codifica în Elm sau WebAssembly.

Mă voi întoarce la backend. Pur și simplu nu pot face față acestor multe modificări și versiuni și ediții și compilatoare și transpilere. Comunitatea JavaScript este nebună dacă crede că cineva poate ține pasul cu asta.

-Te aud. Ar trebui să încercați comunitatea Python atunci.

De ce?

-Ai auzit vreodată de Python 3?

Actualizare: Vă mulțumim pentru greșelile și greșelile de tipar, voi actualiza articolul așa cum am menționat. Discuție în HackerNews și Reddit .