Com se sent aprendre JavaScript el 2016

No es va crear cap marc de JavaScript durant l'escriptura d'aquest article.

El següent està inspirat en l'article "És el futur" de Circle CI. Podeu llegir l'original aquí . Aquesta peça és només una opinió i, com qualsevol marc de JavaScript, no s'ha de prendre massa seriosament.

Ei, tinc aquest nou projecte web, però per ser sincer, no he codificat gaire web en uns quants anys i he sentit que el panorama ha canviat una mica. Ets el desenvolupador web més actualitzat d'aquí, oi?

-El terme real és enginyer de front-end, però sí, sóc el tipus adequat. Jo faig web l'any 2016. Visualitzacions, reproductors de música, drons voladors que juguen a futbol, que sigui. Acabo de tornar de JsConf i ReactConf, així que conec les últimes tecnologies per crear aplicacions web.

Genial. Necessito crear una pàgina que mostri l'última activitat dels usuaris, de manera que només necessito obtenir les dades del punt final REST i mostrar-les en una mena de taula filtrable i actualitzar-la si canvia alguna cosa al servidor. Estava pensant que potser utilitzar jQuery per obtenir i mostrar les dades?

-Déu meu no, ja ningú fa servir jQuery. Hauríeu d'intentar aprendre React, som el 2016.

Oh, d'acord. Què és React?

-És una biblioteca fantàstica feta per alguns nois de Facebook, realment aporta control i rendiment a la vostra aplicació, ja que us permet gestionar qualsevol canvi de vista amb molta facilitat.

Això sona net. Puc utilitzar React per mostrar dades del servidor?

-Sí, però primer heu d'afegir React i React DOM com a biblioteca a la vostra pàgina web.

Espera, per què dues biblioteques?

-Per tant, una és la biblioteca real i la segona és per manipular el DOM, que ara podeu descriure a JSX.

JSX? Què és JSX?

-JSX és només una extensió de sintaxi de JavaScript que s'assembla molt a XML. És una altra manera de descriure el DOM, penseu-hi com un HTML millor.

Què passa amb HTML?

-Som el 2016. Ja ningú codifica HTML directament.

D'acord. De totes maneres, si afegeixo aquestes dues biblioteques, puc utilitzar React?

-No del tot. Heu d'afegir Babel i, a continuació, podreu utilitzar React.

Una altra biblioteca? Què és Babel?

-Oh, Babel és un transpiler que us permet orientar-vos a versions específiques de JavaScript, mentre codifiqueu en qualsevol versió de JavaScript. No heu d'incloure Babel per utilitzar ReactJS, però tret que ho feu, us quedareu enganxats amb l'ús d'ES5, i siguem reals, és el 2016, hauríeu de codificar a ES2016+ com ho fan la resta de nens fantàstics.

ES5? ES2016+? M'estic perdent per aquí. Què és ES5 i ES2016+?

-ES5 són les sigles de ECMAScript 5. És l'edició a la qual s'adreça més gent ja que ha estat implementada per la majoria de navegadors actuals.

ECMAScript?

-Sí, ja ho sabeu, l'estàndard de scripting JavaScript es va basar el 1999 després del seu llançament inicial el 1995, aleshores quan JavaScript es va anomenar Livescript i només funcionava al Netscape Navigator. Aleshores era molt desordenat, però per sort ara les coses estan molt clares i tenim, com ara, 7 edicions d'aquesta implementació.

7 edicions. De veritat. I ES5 i ES2016+ ho són?

-La cinquena i la setena edició respectivament.

Espera, què va passar amb el sisè?

-Vols dir ES6? Sí, vull dir, cada edició és un superconjunt de l'anterior, de manera que si utilitzeu ES2016+, feu servir totes les funcions de les versions anteriors.

D'acord. I per què utilitzar ES2016+ sobre ES6 llavors?

-Bé, podríeu utilitzar ES6, però per utilitzar funcions interessants com ara sincronitzar i esperar, heu d'utilitzar ES2016+. En cas contrari, us enganxeu amb generadors ES6 amb corrutines per bloquejar les trucades asíncrones per a un flux de control adequat.

No tinc ni idea del que acabes de dir, i tots aquests noms són confusos. Mira, només estic carregant un munt de dades des d'un servidor, abans només podia incloure jQuery des d'un CDN i obtenir les dades amb trucades AJAX, per què no ho puc fer?

-Som el 2016 home, ja ningú fa servir jQuery, acaba en un munt de codi espaguetis. Això ho sap tothom.

D'acord. Per tant, la meva alternativa és carregar tres biblioteques per obtenir dades i mostrar una taula HTML.

-Bé, incloeu aquestes tres biblioteques però les agrupeu amb un gestor de mòduls per carregar només un fitxer.

ho veig. I què és un gestor de mòduls?

-La definició depèn de l'entorn, però a la web normalment ens referim a qualsevol cosa que admeti mòduls AMD o CommonJS.

Riiight. I AMD i CommonJS són...?

-Definicions. Hi ha maneres de descriure com han d'interaccionar diverses biblioteques i classes de JavaScript. Saps, exporta i requereix? Podeu escriure diversos fitxers JavaScript que defineixin l'API AMD o CommonJS i podeu utilitzar alguna cosa com Browserify per agrupar-los.

D'acord, això té sentit... crec. Què és Browserify?

-És una eina que us permet agrupar les dependències descrites en CommonJS als fitxers que es poden executar al navegador. Es va crear perquè la majoria de la gent publica aquestes dependències al registre npm.

registre npm?

-És un repositori públic molt gran on la gent intel·ligent posa codi i dependències com a mòduls.

Com un CDN?

-No realment. S'assembla més a una base de dades centralitzada on qualsevol pot publicar i descarregar biblioteques, de manera que les podeu utilitzar localment per al desenvolupament i després penjar-les a un CDN si voleu.

Oh, com Bower!

-Sí, però ara som el 2016, ja ningú fa servir Bower.

Ah, ja veig... així que necessito descarregar les biblioteques de npm?

-Sí. Així, per exemple, si voleu utilitzar React, descarregueu el mòdul React i l'importeu al vostre codi. Podeu fer-ho per a gairebé totes les biblioteques de JavaScript populars.

Oh, com Angular!

-Angular és així el 2015. Però sí. Angular hi seria, al costat de VueJS o RxJS i altres biblioteques interessants del 2016. Vols aprendre sobre aquests?

Quedem-nos amb React, ara ja estic aprenent massa coses. Aleshores, si necessito utilitzar React, l'agafo des d'aquest npm i, a continuació, faig servir aquesta cosa de Browserify?

-Sí.

Sembla massa complicat agafar un munt de dependències i lligar-les.

-És per això que utilitzeu un gestor de tasques com Grunt o Gulp o Broccoli per automatitzar l'execució de Browserify. Heck, fins i tot podeu utilitzar Mimosa.

Grunyit? Gup? Bròquil? Mimosa? Diablos estem parlant ara?

- Gestors de tasques. Però ja no són genials. Els vam fer servir el 2015, després vam fer servir Makefiles, però ara ho emboliquem tot amb Webpack.

Makefiles? Vaig pensar que s'utilitzava sobretot en projectes C o C++.

-Sí, però pel que sembla a la web ens agrada complicar les coses i després tornar al bàsic. Ho fem cada any més o menys, només espereu-ho, farem muntatge a la web d'aquí a un o dos anys.

Sospir. Has esmentat una cosa que es diu Webpack?

-És un altre gestor de mòduls per al navegador alhora que és una mena d'executor de tasques. És com una versió millor de Browserify.

Oh, d'acord. Per què és millor?

-Bé, potser no millor, només és més opinió sobre com s'han de lligar les vostres dependències. Webpack us permet utilitzar diferents gestors de mòduls, i no només els de CommonJS, per exemple, mòduls compatibles amb ES6 nadius.

Estic molt confós per tot això de CommonJS/ES6.

-Tothom ho és, però ja no us hauria de preocupar amb SystemJS.

Jesucrist, un altre substantiu-js. D'acord, i què és aquest SystemJS?

-Bé, a diferència de Browserify i Webpack 1.x, SystemJS és un carregador de mòduls dinàmic que us permet lligar diversos mòduls en diversos fitxers en lloc d'agrupar-los en un fitxer gran.

Espereu, però vaig pensar que volíem crear les nostres biblioteques en un fitxer gran i carregar-lo!

-Sí, però com que HTTP/2 arriba ara múltiples sol·licituds HTTP són realment millors.

Espera, així que no podem afegir les tres biblioteques originals per a React?

-No realment. Vull dir, els podríeu afegir com a scripts externs des d'un CDN, però encara haureu d'incloure Babel aleshores.

Sospir. I això és dolent oi?

-Sí, inclouries tot el babel-core, i no seria eficient per a la producció. A la producció, heu de realitzar una sèrie de tasques prèvies per preparar el vostre projecte que fan que el ritual per convocar Satanàs sembli una recepta d'ous durs. Heu de reduir els actius, engreixar-los, css en línia a sobre del plec, ajornar els scripts, així com-

Ho tinc, ho tinc. Per tant, si no inclouríeu les biblioteques directament en un CDN, com ho farieu?

-El transpilaria de Typescript utilitzant un combo Webpack + SystemJS + Babel.

Mecanografia? Vaig pensar que estàvem codificant en JavaScript!

-Typescript IS JavaScript, o millor dit, un superconjunt de JavaScript, més concretament JavaScript a la versió ES6. Sabeu, aquesta sisena versió de la qual vam parlar abans?

Vaig pensar que ES2016+ ja era un superconjunt d'ES6! PER QUÈ necessitem ara això que es diu Typescript?

-Oh, perquè ens permet utilitzar JavaScript com a llenguatge escrit i reduir els errors en temps d'execució. Som el 2016, hauríeu d'afegir alguns tipus al vostre codi JavaScript.

I Typescript, òbviament, ho fa.

-Flow també, tot i que només verifica l'escriptura mentre que Typescript és un superconjunt de JavaScript que s'ha de compilar.

Sospir... i Flow és?

-És un verificador de tipus estàtic fet per alguns nois de Facebook. Ho van codificar a OCaml, perquè la programació funcional és increïble.

OCaml? Programació funcional?

-És el que fan servir els nens cool d'avui, home, saps, 2016? Programació funcional? Funcions d'alt ordre? Curry? Funcions pures?

No tinc ni idea del que acabes de dir.

-Ningú ho fa al principi. Mira, només has de saber que la programació funcional és millor que la POO i això és el que hauríem d'utilitzar el 2016.

Espera, vaig aprendre OOP a la universitat, vaig pensar que era bo?

-També era Java abans de ser comprat per Oracle. Vull dir, la POO era bona en els dies, i encara té els seus usos avui en dia, però ara tothom s'adona que modificar els estats és equivalent a donar puntades als nadons, així que ara tothom s'està movent a objectes immutables i programació funcional. Els nois de Haskell feia anys que l'anomenaven, -i no em comencis amb els nois d'Elm-, però per sort a la web ara tenim biblioteques com Ramda que ens permeten utilitzar programació funcional en JavaScript senzill.

Esteu deixant noms només per això? Què dimonis és Ramnda?

-No. Ramda. Com Lambda. Saps, aquella biblioteca de David Chambers?

David qui?

- David Chambers. Genial noi. Juga a un joc de cop d'estat dolent. Un dels col·laboradors de Ramda. També hauríeu de comprovar l'Erik Meijer si us interessa aprendre programació funcional.

I Erik Meijer és...?

-Programador funcional també. Genial tipus. Té un munt de presentacions en què embruta Agile mentre utilitza aquesta camisa de colors estranys. També hauríeu de comprovar algunes de les coses de Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

D'acord. Jo t'aturaré allà. Tot això és bo i bé, però crec que tot això és tan complicat i innecessari només per obtenir dades i mostrar-les. Estic bastant segur que no necessito conèixer aquestes persones ni aprendre totes aquestes coses per crear una taula amb dades dinàmiques. Tornem a Reaccionar. Com puc obtenir les dades del servidor amb React?

-Bé, en realitat no obteniu les dades amb React, només mostreu les dades amb React.

Oh, maleït jo. Aleshores, què feu servir per obtenir les dades?

-Utilitzeu Fetch per obtenir les dades del servidor.

ho sento? Feu servir Fetch per obtenir les dades? Qui anomena aquestes coses necessita un tesaurus.

-Ho sé, oi? Fetch és el nom de la implementació nativa per realitzar XMLHttpRequests contra un servidor.

Ah, doncs AJAX.

-AJAX és només l'ús de XMLHttpRequests. Però segur. Fetch us permet fer AJAX basat en promeses, que després podeu resoldre per evitar l'infern de devolució de trucada.

L'infern de retorn de trucada?

-Sí. Cada vegada que realitzeu una sol·licitud asíncrona contra el servidor, heu d'esperar la seva resposta, cosa que us fa afegir una funció dins d'una funció, que s'anomena piràmide de devolució de trucada de l'infern.

Oh, d'acord. I això de la promesa ho soluciona?

-De fet. En manipular les vostres devolucions de trucada mitjançant promeses, podeu escriure un codi més fàcil d'entendre, simular-los i provar-los, així com realitzar sol·licituds simultànies alhora i esperar fins que es carreguin totes.

I això es pot fer amb Fetch?

-Sí, però només si el vostre usuari utilitza un navegador perenne, en cas contrari haureu d'incloure un polyfill Fetch o utilitzar Request, Bluebird o Axios.

Quantes biblioteques necessito saber per l'amor de Déu? Quants en són?

-És JavaScript. Hi ha d'haver milers de biblioteques que facin totes el mateix. Coneixem biblioteques, de fet, tenim les millors biblioteques. Les nostres biblioteques són enormes i, de vegades, hi incloem imatges de Guy Fieri.

Acabes de dir Guy Fieri? Acabem amb això. Què fan aquestes biblioteques Bluebird, Request i Axios?

-Són biblioteques per realitzar XMLHttpRequests que retornen promeses.

El mètode AJAX de jQuery no va començar a tornar promeses també?

-L'any 2016 ja no fem servir la paraula “J”. Només cal que utilitzeu Fetch i ompliu-lo quan no estigui en un navegador o feu servir Bluebird, Request o Axios. A continuació, gestioneu la promesa amb l'espera dins d'una funció asíncrona i boom, teniu un flux de control adequat.

És la tercera vegada que menciones l'espera, però no tinc ni idea de què és.

-Await us permet bloquejar una trucada asíncrona, la qual cosa us permet tenir un millor control sobre quan s'estan obtenint les dades i augmentar la llegibilitat del codi en general. És increïble, només heu d'assegurar-vos d'afegir el valor predefinit de l'etapa 3 a Babel o utilitzar les funcions de sintaxi-async i el connector de transformació-async-a-generador.

Això és una bogeria.

-No, una bogeria és el fet que necessiteu precompilar el codi Typescript i després transpilar-lo amb Babel per utilitzar-lo await.

Què? No està inclòs a Typescript?

-Ho fa a la següent versió, però a partir de la versió 1.7 només s'adreça a ES6, de manera que si voleu utilitzar await al navegador, primer haureu de compilar el vostre codi Typescript dirigit a ES6 i després Babel que caga fins a ES5.

En aquest moment no sé què dir.

-Mira, és fàcil. Codifiqueu-ho tot en Typescript. Tots els mòduls que utilitzen Fetch els compilen per orientar-los a ES6, els transpilen amb Babel en un preajust de l'etapa 3 i els carreguen amb SystemJS. Si no teniu Fetch, ompliu-lo de manera polivalent o utilitzeu Bluebird, Request o Axios i gestioneu totes les vostres promeses amb l'espera.

Tenim definicions molt diferents de fàcil. Aleshores, amb aquest ritual finalment vaig obtenir les dades i ara les puc mostrar amb React, oi?

-La vostra aplicació gestionarà algun canvi d'estat?

Err, no ho crec. Només necessito mostrar les dades.

-Oh, gràcies a Déu. En cas contrari, hauria d'explicar-vos Flux i implementacions com Flummox, Alt, Fluxible. Encara que, per ser sincer, hauríeu d'utilitzar Redux.

Vaig a sobrevolar aquests noms. De nou, només necessito mostrar dades.

-Oh, si només esteu mostrant les dades, no necessiteu React per començar. T'hauria anat bé amb un motor de plantilles.

Estàs fent broma? Creus que això és divertit? És així com tractes els teus éssers estimats?

-Acabo d'explicar què pots fer servir.

Atureu-vos. Simplement para.

-Vull dir, fins i tot si només s'utilitza el motor de plantilles, encara faria servir una combinació Typescript + SystemJS + Babel si fos tu.

Necessito mostrar dades en una pàgina, no realitzar la fatalitat MK original de Sub Zero. Només digueu-me quin motor de plantilles utilitzar i ho agafaré a partir d'aquí.

-N'hi ha moltes, amb quina coneixeu?

Uf, no recordo el nom. Va ser fa molt de temps.

-jPlantilles? jQote? PUR?

Err, no toca cap campana. Un altre?

-Transparència? JSRender? MarkupJS? KnockoutJS? Aquell tenia enquadernació bidireccional.

Un altre?

-PlatesJS? jQuery-tmpl? Manillars? Algunes persones encara l'utilitzen.

Potser. Hi ha semblants a aquest últim?

-Bigoti, subratllat? Crec que ara fins i tot Lodash en té un per ser sincer, però són una mena de 2014.

Err.. potser era més nou.

-Jade? DustJS?

No.

-DotJS? EJS?

No.

-Monges? ECT?

No.

-Mah, a ningú li agrada la sintaxi de Coffeescript de totes maneres. Jade?

No, ja has dit Jade.

-Em volia dir Pug. Volia dir Jade. Vull dir, Jade és ara Pug.

Sospir. No. No ho recordo. Quin faries servir?

-Probablement només cadenes de plantilles natives ES6.

Deixa'm endevinar. I això requereix ES6.

-Correcte.

El qual, depenent del navegador que utilitzo, necessita Babel.

-Correcte.

Que, si vull incloure sense afegir tota la biblioteca principal, l'he de carregar com a mòdul des de npm.

-Correcte.

La qual cosa requereix Browserify, o Wepback, o molt probablement una altra cosa anomenada SystemJS.

-Correcte.

Que, tret que sigui Webpack, idealment hauria de ser gestionat per un responsable de tasques.

-Correcte.

Però, com que hauria d'utilitzar programació funcional i llenguatges escrits, primer he de compilar prèviament Typescript o afegir aquesta cosa de Flow.

-Correcte.

I després envieu-ho a Babel si vull fer servir l'espera.

-Correcte.

Així que puc utilitzar Fetch, promeses i control de flux i tota aquesta màgia.

-No us oblideu de polyfill Fetch si no és compatible, Safari encara no ho pot gestionar.

Ja saps què. Crec que hem acabat aquí. De fet, crec que ja he acabat. He acabat amb el web, ja he acabat amb JavaScript.

-Està bé, d'aquí a uns anys tots estarem codificant a Elm o WebAssembly.

Només tornaré al backend. Simplement no puc gestionar aquests molts canvis i versions i edicions i compiladors i transpiladors. La comunitat de JavaScript és una bogeria si creu que algú pot estar al dia amb això.

- T'escolto. Aleshores hauríeu de provar la comunitat Python.

Per què?

- Has sentit parlar mai de Python 3?

Actualització: gràcies per assenyalar errors d'ortografia i errors, actualitzaré l'article tal com s'ha indicat. Discussió a HackerNews i Reddit .