Cómo se siente aprender JavaScript en 2016

No se crearon marcos de JavaScript durante la redacción de este artículo.

Lo siguiente está inspirado en el artículo “Es el futuro” de Circle CI. Puedes leer el original aquí . Esta pieza es solo una opinión y, como cualquier marco de JavaScript, no debe tomarse demasiado en serio.

Oye, tengo este nuevo proyecto web, pero para ser honesto, no he codificado mucho en la web en algunos años y he oído que el panorama cambió un poco. Eres el desarrollador web más actualizado por aquí, ¿verdad?

-El término real es ingeniero front-end, pero sí, soy el tipo adecuado. Hago web en 2016. Visualizaciones, reproductores de música, drones voladores que juegan al fútbol, lo que sea. Acabo de regresar de JsConf y ReactConf, por lo que conozco las últimas tecnologías para crear aplicaciones web.

Enfriar. Necesito crear una página que muestre la actividad más reciente de los usuarios, así que solo necesito obtener los datos del extremo REST y mostrarlos en algún tipo de tabla filtrable, y actualizarlos si algo cambia en el servidor. Estaba pensando en usar jQuery para obtener y mostrar los datos.

-Oh, Dios mío, no, ya nadie usa jQuery. Deberías intentar aprender React, es 2016.

Ah, OK. ¿Qué es reaccionar?

-Es una biblioteca genial creada por algunos chicos de Facebook, realmente brinda control y rendimiento a su aplicación, al permitirle manejar cualquier cambio de vista con mucha facilidad.

Eso suena bien. ¿Puedo usar React para mostrar datos del servidor?

-Sí, pero primero debes agregar React y React DOM como una biblioteca en tu página web.

Espera, ¿por qué dos bibliotecas?

-Entonces, una es la biblioteca real y la segunda es para manipular el DOM, que ahora puedes describir en JSX.

¿JSX? ¿Qué es JSX?

-JSX es solo una extensión de sintaxis de JavaScript que se parece mucho a XML. Es otra forma de describir el DOM, piénsalo como un mejor HTML.

¿Qué tiene de malo HTML?

-Es 2016. Ya nadie codifica HTML directamente.

Derecha. De todos modos, si agrego estas dos bibliotecas, ¿puedo usar React?

-No exactamente. Debe agregar Babel y luego podrá usar React.

¿Otra biblioteca? ¿Qué es Babel?

-Oh, Babel es un transpilador que te permite apuntar a versiones específicas de JavaScript, mientras codificas en cualquier versión de JavaScript. No TIENES que incluir Babel para usar ReactJS, pero a menos que lo hagas, estás obligado a usar ES5, y seamos realistas, es 2016, deberías codificar en ES2016+ como lo hace el resto de los chicos geniales.

ES5? ES2016+? Me estoy perdiendo por aquí. ¿Qué es ES5 y ES2016+?

-ES5 significa ECMAScript 5. Es la edición que tiene como objetivo a la mayoría de las personas, ya que ha sido implementada por la mayoría de los navegadores en la actualidad.

ECMAScript?

-Sí, ya sabes, el estándar de secuencias de comandos JavaScript se basó en 1999 después de su lanzamiento inicial en 1995, en aquel entonces cuando JavaScript se llamaba Livescript y solo se ejecutaba en Netscape Navigator. Eso fue muy complicado en ese entonces, pero afortunadamente ahora las cosas están muy claras y tenemos como 7 ediciones de esta implementación.

7 ediciones. De verdad. ¿Y ES5 y ES2016+ lo son?

-La quinta y séptima edición respectivamente.

Espera, ¿qué pasó con el sexto?

-Quieres decir ES6? Sí, quiero decir, cada edición es un superconjunto de la anterior, por lo que si está usando ES2016+, está usando todas las funciones de las versiones anteriores.

Derecha. ¿Y por qué usar ES2016+ sobre ES6 entonces?

-Bueno, PODRÍAS usar ES6, pero para usar funciones geniales como async y await, necesitas usar ES2016+. De lo contrario, estará atrapado con generadores ES6 con corrutinas para bloquear llamadas asincrónicas para un flujo de control adecuado.

No tengo idea de lo que acabas de decir, y todos estos nombres son confusos. Mire, solo estoy cargando un montón de datos de un servidor, solía poder incluir jQuery desde un CDN y obtener los datos con llamadas AJAX, ¿por qué no puedo hacer eso?

-Es 2016 hombre, ya nadie usa jQuery, termina en un montón de código espagueti. Todos saben eso.

Derecha. Entonces, mi alternativa es cargar tres bibliotecas para obtener datos y mostrar una tabla HTML.

-Bueno, incluyes esas tres bibliotecas pero las empaquetas con un administrador de módulos para cargar solo un archivo.

Ya veo. ¿Y qué es un administrador de módulos?

-La definición depende del entorno, pero en la web generalmente nos referimos a cualquier cosa que admita módulos AMD o CommonJS.

Bien. ¿Y AMD y CommonJS son…?

-Definiciones. Hay formas de describir cómo deben interactuar varias bibliotecas y clases de JavaScript. Ya sabes, exporta y requiere? Puede escribir varios archivos JavaScript que definen la API de AMD o CommonJS y puede usar algo como Browserify para agruparlos.

OK, eso tiene sentido... creo. ¿Qué es Browserify?

-Es una herramienta que le permite agrupar las dependencias descritas de CommonJS en archivos que se pueden ejecutar en el navegador. Fue creado porque la mayoría de las personas publican esas dependencias en el registro npm.

registro npm?

-Es un repositorio público muy grande donde personas inteligentes ponen código y dependencias como módulos.

¿Como un CDN?

-Realmente no. Es más como una base de datos centralizada donde cualquiera puede publicar y descargar bibliotecas, por lo que puede usarlas localmente para el desarrollo y luego cargarlas en un CDN si lo desea.

¡Oh, como Bower!

-Sí, pero ahora es 2016, ya nadie usa Bower.

Oh, ya veo... ¿entonces necesito descargar las bibliotecas de npm?

-Sí. Entonces, por ejemplo, si desea usar React, descargue el módulo React e impórtelo en su código. Puede hacer eso para casi todas las bibliotecas populares de JavaScript.

¡Oh, como Angular!

-Angular es tan 2015. Pero sí. Angular estaría allí, junto con VueJS o RxJS y otras bibliotecas geniales de 2016. ¿Quieres aprender sobre esos?

Sigamos con React, ya estoy aprendiendo demasiadas cosas ahora. Entonces, si necesito usar React, lo obtengo de este npm y luego uso esta cosa de Browserify.

-Sí.

Eso parece demasiado complicado simplemente tomar un montón de dependencias y unirlas.

-Lo es, es por eso que usa un administrador de tareas como Grunt o Gulp o Broccoli para automatizar la ejecución de Browserify. Diablos, incluso puedes usar Mimosa.

¿Gruñido? ¿Trago? ¿Brócoli? ¿Mimosa? ¿De qué diablos estamos hablando ahora?

-Gestores de tareas. Pero ya no son geniales. Los usamos en 2015, luego usamos Makefiles, pero ahora envolvemos todo con Webpack.

Makefiles? Pensé que se usaba principalmente en proyectos C o C++.

-Sí, pero aparentemente en la web nos encanta complicar las cosas y luego volver a lo básico. Hacemos eso cada año más o menos, solo espéralo, vamos a hacer el ensamblaje en la web en uno o dos años.

Suspiro. ¿Mencionaste algo llamado Webpack?

-Es otro administrador de módulos para el navegador y también es una especie de ejecutor de tareas. Es como una versión mejorada de Browserify.

Ah, OK. ¿Por qué es mejor?

-Bueno, tal vez no mejor, es solo más obstinado sobre cómo deben vincularse sus dependencias. Webpack le permite usar diferentes administradores de módulos, y no solo los de CommonJS, por ejemplo, módulos nativos compatibles con ES6.

Estoy extremadamente confundido por todo esto de CommonJS/ES6.

-Todos lo están, pero no debería importarte más con SystemJS.

Jesucristo, otro sustantivo-js. Bien, ¿y qué es este SystemJS?

-Bueno, a diferencia de Browserify y Webpack 1.x, SystemJS es un cargador de módulos dinámico que le permite vincular varios módulos en varios archivos en lugar de agruparlos en un archivo grande.

¡Espera, pero pensé que queríamos construir nuestras bibliotecas en un archivo grande y cargar eso!

-Sí, pero debido a que HTTP/2 está llegando ahora, múltiples solicitudes HTTP son mejores.

Espera, entonces, ¿no podemos simplemente agregar las tres bibliotecas originales para React?

-Realmente no. Quiero decir, podría agregarlos como scripts externos desde un CDN, pero aún necesitaría incluir Babel entonces.

Suspiro. y eso es malo verdad?

-Sí, estarías incluyendo todo el núcleo de babel y no sería eficiente para la producción. En la producción, debe realizar una serie de tareas previas para preparar su proyecto que hacen que el ritual para convocar a Satanás parezca una receta de huevos duros. Necesita minimizar los activos, afearlos, CSS en línea en la parte superior del pliegue, aplazar los scripts, así como-

Lo tengo, lo tengo. Entonces, si no incluiría las bibliotecas directamente en un CDN, ¿cómo lo haría?

-Lo transpilaría desde Typescript usando un combo Webpack + SystemJS + Babel.

¿Mecanografiado? ¡Pensé que estábamos codificando en JavaScript!

-Typescript ES JavaScript, o mejor dicho, un superconjunto de JavaScript, más específicamente JavaScript en la versión ES6. Ya sabes, ¿esa sexta versión de la que hablamos antes?

¡Pensé que ES2016+ ya era un superconjunto de ES6! ¿POR QUÉ necesitamos ahora esta cosa llamada Typescript?

-Oh, porque nos permite usar JavaScript como lenguaje escrito y reducir los errores en tiempo de ejecución. Es 2016, debería agregar algunos tipos a su código JavaScript.

Y Typescript obviamente hace eso.

-Flow también, aunque solo verifica la escritura, mientras que Typescript es un superconjunto de JavaScript que debe compilarse.

Suspiro… y Flow es?

-Es un comprobador de tipo estático hecho por unos chicos de Facebook. Lo codificaron en OCaml, porque la programación funcional es increíble.

OCaml? ¿Programación funcional?

-Es lo que usan los chicos geniales hoy en día hombre, ya sabes, ¿2016? ¿Programación funcional? ¿Funciones de alto orden? ¿Zurra? ¿Funciones puras?

No tengo idea de lo que acabas de decir.

-Nadie lo hace al principio. Mira, solo necesitas saber que la programación funcional es mejor que la programación orientada a objetos y eso es lo que deberíamos estar usando en 2016.

Espera, aprendí programación orientada a objetos en la universidad, ¿pensé que eso era bueno?

-Así era Java antes de ser comprado por Oracle. Quiero decir, OOP era bueno en el pasado, y todavía tiene sus usos hoy, pero ahora todos se dan cuenta de que modificar estados es equivalente a patear bebés, por lo que ahora todos se están moviendo hacia objetos inmutables y programación funcional. Los chicos de Haskell lo han estado llamando durante años, y no me hagan empezar con los chicos de Elm, pero afortunadamente en la web ahora tenemos bibliotecas como Ramda que nos permiten usar programación funcional en JavaScript simple.

¿Estás soltando nombres por el simple hecho de hacerlo? ¿Qué diablos es Ramnda?

-No. Ramda. como lambda. Ya sabes, ¿la biblioteca de David Chambers?

david quien?

-David Cámaras. chico genial Juega un juego de golpe medio. Uno de los colaboradores de Ramda. También debería consultar a Erik Meijer si realmente quiere aprender programación funcional.

¿Y Erik Meijer es…?

-Chico de programación funcional también. Impresionante chico. Tiene un montón de presentaciones en las que destroza a Agile mientras usa esta camisa de color extraño. También deberías revisar algunas de las cosas de Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Está bien. Voy a detenerte allí. Todo eso está bien y bien, pero creo que todo eso es tan complicado e innecesario solo para obtener datos y mostrarlos. Estoy bastante seguro de que no necesito conocer a estas personas ni aprender todas esas cosas para crear una tabla con datos dinámicos. Volvamos a Reaccionar. ¿Cómo puedo obtener los datos del servidor con React?

-Bueno, en realidad no obtienes los datos con React, solo muestra los datos con React.

Maldita sea. Entonces, ¿qué usas para obtener los datos?

-Utiliza Fetch para obtener los datos del servidor.

¿Lo siento? ¿Usas Fetch para obtener los datos? Quien esté nombrando esas cosas necesita un diccionario de sinónimos.

-¿Yo se, verdad? Fetch es el nombre de la implementación nativa para realizar XMLHttpRequests en un servidor.

Oh, entonces AJAX.

-AJAX es solo el uso de XMLHttpRequests. Pero seguro. Fetch le permite hacer AJAX basado en promesas, que luego puede resolver para evitar el infierno de devolución de llamada.

Infierno de devolución de llamada?

-Sí. Cada vez que realiza una solicitud asincrónica contra el servidor, debe esperar su respuesta, lo que luego lo obliga a agregar una función dentro de una función, que se llama la pirámide de devolución de llamada del infierno.

Ah, OK. ¿Y esto de la promesa lo resuelve?

-Por cierto. Al manipular sus devoluciones de llamada a través de promesas, puede escribir un código más fácil de entender, simularlo y probarlo, así como realizar solicitudes simultáneas a la vez y esperar hasta que se carguen todas.

¿Y eso se puede hacer con Fetch?

-Sí, pero solo si su usuario usa un navegador de hoja perenne, de lo contrario, debe incluir un polifill Fetch o usar Request, Bluebird o Axios.

¿Cuántas bibliotecas necesito saber por el amor de Dios? ¿Cuántos son de ellos?

-Es JavaScript. Tiene que haber miles de bibliotecas que hagan lo mismo. Conocemos bibliotecas, de hecho, tenemos las mejores bibliotecas. Nuestras bibliotecas son enormes y, a veces, incluimos fotos de Guy Fieri en ellas.

¿Acabas de decir Guy Fieri? Terminemos con esto. ¿Qué hacen estas bibliotecas Bluebird, Request, Axios?

-Son bibliotecas para realizar XMLHttpRequests que devuelven promesas.

¿El método AJAX de jQuery no comenzó a devolver promesas también?

-Ya no usamos la palabra "J" en 2016. Simplemente use Fetch y rellénelo cuando no esté en un navegador o use Bluebird, Request o Axios en su lugar. Luego administre la promesa con await dentro de una función asíncrona y boom, tiene el flujo de control adecuado.

Es la tercera vez que mencionas await pero no tengo ni idea de qué es.

-Await le permite bloquear una llamada asíncrona, lo que le permite tener un mejor control sobre cuándo se obtienen los datos y, en general, aumenta la legibilidad del código. Es increíble, solo necesita asegurarse de agregar el ajuste preestablecido de la etapa 3 en Babel, o usar las funciones de sintaxis asíncrona y el complemento de transformación asíncrona a generador.

Esto es una locura.

-No, es una locura el hecho de que necesitas precompilar el código Typescript y luego transpilarlo con Babel para usar await.

¿Qué? ¿No está incluido en Typescript?

-Lo hace en la próxima versión, pero a partir de la versión 1.7 solo se dirige a ES6, por lo que si desea usar await en el navegador, primero debe compilar su código Typescript dirigido a ES6 y luego Babel que se enfoca en ES5.

En este punto no sé qué decir.

-Mira, es fácil. Codifique todo en Typescript. Todos los módulos que usan Fetch los compilan para apuntar a ES6, los transpilan con Babel en un ajuste preestablecido de etapa 3 y los cargan con SystemJS. Si no tiene Fetch, rellénelo o use Bluebird, Request o Axios, y maneje todas sus promesas con await.

Tenemos definiciones muy diferentes de fácil. Entonces, con ese ritual finalmente obtuve los datos y ahora puedo mostrarlos con React, ¿verdad?

- ¿Su aplicación va a manejar cambios de estado?

Err, no lo creo. Solo necesito mostrar los datos.

-Oh, gracias a Dios. De lo contrario, tendría que explicarle Flux e implementaciones como Flummox, Alt, Fluxible. Aunque para ser honesto, deberías estar usando Redux.

Voy a sobrevolar esos nombres. Nuevamente, solo necesito mostrar datos.

-Oh, si solo está mostrando los datos, no necesitaba React para empezar. Habrías estado bien con un motor de plantillas.

¿Me estás tomando el pelo? ¿Crees que esto es gracioso? ¿Es así como tratas a tus seres queridos?

-Solo estaba explicando lo que podrías usar.

Deténgase. Solo para.

-Quiero decir, incluso si solo está usando un motor de plantillas, todavía usaría un combo Typescript + SystemJS + Babel si fuera tú.

Necesito mostrar datos en una página, no realizar el fatality MK original de Sub Zero. Solo dígame qué motor de plantillas usar y lo tomaré a partir de ahí.

-Hay muchas, ¿con cuál estás familiarizado?

Uf, no recuerdo el nombre. Fue hace mucho tiempo.

-jPlantillas? jQote? ¿PURO?

Err, no suena una campana. ¿Otro?

-¿Transparencia? JSRender? MarcadoJS? KnockoutJS? Ese tenía enlace bidireccional.

¿Otro?

-PlacasJS? jQuery-tmpl? ¿Bigote daliniano? Algunas personas todavía lo usan.

Quizás. ¿Hay similares a este último?

-Bigote, guión bajo? Creo que ahora incluso Lodash tiene uno para ser honesto, pero esos son como del 2014.

Err.. tal vez era más nuevo.

-¿Jade? DustJS?

No.

-DotJS? ¿EJS?

No.

-¿Nunjucks? TEC?

No.

-Mah, a nadie le gusta la sintaxis de Coffeescript de todos modos. ¿Jade?

No, ya dijiste Jade.

-Quise decir Pug. Quise decir Jade. Quiero decir, Jade ahora es Pug.

Suspiro. No. No puedo recordar. ¿Cuál usarías?

-Probablemente solo cadenas de plantillas nativas de ES6.

Déjame adivinar. Y eso requiere ES6.

-Correcto.

Que, dependiendo del navegador que esté usando, necesita Babel.

-Correcto.

Que, si quiero incluir sin agregar toda la biblioteca principal, necesito cargarlo como un módulo de npm.

-Correcto.

Lo cual requiere Browserify, o Wepback, o muy probablemente esa otra cosa llamada SystemJS.

-Correcto.

Que, a menos que sea Webpack, idealmente debería ser administrado por un ejecutor de tareas.

-Correcto.

Pero, dado que debería usar programación funcional y lenguajes escritos, primero necesito precompilar Typescript o agregar esta cosa de Flow.

-Correcto.

Y luego enviar eso a Babel si quiero usar await.

-Correcto.

Entonces puedo usar Fetch, las promesas y controlar el flujo y toda esa magia.

-Simplemente no olvides realizar polyfill Fetch si no es compatible, Safari aún no puede manejarlo.

Sabes que. Creo que hemos terminado aquí. En realidad, creo que he terminado. He terminado con la web, he terminado con JavaScript por completo.

-Está bien, en unos años todos vamos a codificar en Elm o WebAssembly.

Solo voy a regresar al backend. Simplemente no puedo manejar tantos cambios y versiones y ediciones y compiladores y transpiladores. La comunidad de JavaScript está loca si cree que cualquiera puede mantenerse al día con esto.

-Te escucho. Deberías probar la comunidad de Python entonces.

¿Por qué?

-¿Has oído hablar de Python 3?

Actualización: gracias por señalar errores tipográficos y errores, actualizaré el artículo como se indica. Discusión en HackerNews y Reddit .