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 sincero, no he codificado mucha web en unos pocos años y he escuchado que el panorama cambió un poco. Usted es el desarrollador web más actualizado por aquí, ¿verdad?

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

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

-Oh, Dios mío, nadie usa jQuery nunca más. Deberías intentar aprender React, es 2016.

Oh, está bien. ¿Qué es Reaccionar?

-Es una biblioteca súper genial hecha por algunos chicos en Facebook, realmente trae control y rendimiento a tu aplicación, permitiéndote manejar cualquier cambio de vista muy fácilmente.

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

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

Espera, ¿por qué dos bibliotecas?

-Así que 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 una especie de otra forma de describir el DOM, piense en ello como un mejor HTML.

¿Qué pasa con HTML?

– Es 2016. Ya nadie codifica HTML directamente.

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

-No exactamente. Necesita agregar Babel, y luego puede usar Reaccionar.

Otra biblioteca? ¿Qué es Babel?

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

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

-ES5 significa ECMAScript 5. Es la edición a la que se dirige la mayoría de las personas, ya que ha sido implementada por la mayoría de los navegadores hoy en día.

ECMAScript?

-Sí, ya sabes, el JavaScript estándar de scripts 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 aquel 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 + son?

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

Espera, ¿qué pasó con el sexto?

-¿Te refieres a ES6? Sí, quiero decir, cada edición es un superconjunto de la anterior, por lo que si está utilizando ES2016 +, está usando todas las características de las versiones anteriores.

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

-Bueno, PODRÍA usar ES6, pero para usar funciones interesantes como async y esperar, necesita usar ES2016 +. De lo contrario, está atascado con los generadores ES6 con corutinas para bloquear las llamadas asíncronas para un flujo de control adecuado.

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

-Es 2016 hombre, nadie usa jQuery nunca más, termina en un montón de código spaghetti. Todos saben eso.

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

-Bueno, incluye esas tres bibliotecas pero las combina 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 los módulos AMD o CommonJS.

Riiight. ¿Y AMD y CommonJS son …?

-Definiciones. Hay formas de describir cómo deben interactuar múltiples bibliotecas y clases de JavaScript. Ya sabes, exporta y requiere? Puede escribir varios archivos JavaScript que definan AMD o CommonJS API 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 la gente publica esas dependencias en el registro npm.

registro npm?

-Es un repositorio público muy grande donde las personas inteligentes ponen el código y las 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, para que pueda usarlas localmente para el desarrollo y luego cargarlas en un CDN si así lo desea.

¡Oh, como Bower!

-Sí, pero es 2016 ahora, nadie usa Bower nunca más.

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

-Sí. Entonces, por ejemplo, si desea usar React, descarga el módulo React e impórtelo en su código. Puede hacerlo 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 geniales bibliotecas de 2016. ¿Quieres aprender sobre eso?

Continuemos con React, ya estoy aprendiendo muchas cosas ahora. Entonces, si necesito usar React, lo obtengo de esta npm y luego uso Browserify.

-Sí.

Parece demasiado complicado simplemente agarrar un grupo de dependencias y unirlas.

-Lo es, es por eso que utilizas 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?

-Pregunta a los gerentes. 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 espere, vamos a hacer ensamblaje en la web en uno o dos años.

Suspiro. ¿Mencionaste algo llamado Webpack?

– Es otro administrador de módulos para el navegador mientras que también es un corredor de tareas. Es como una mejor versión de Browserify.

Oh, Ok. ¿Por qué es mejor?

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

Estoy extremadamente confundido por todo este asunto CommonJS / ES6.

-Todo el mundo lo es, pero ya no deberías preocuparte por SystemJS.

Jesucristo, otro sustantivo-js. Ok, 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 gran archivo y cargar eso!

-Sí, pero debido a que HTTP / 2 viene ahora, múltiples solicitudes HTTP son en realidad mejores.

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

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

Suspiro. Y eso está mal ¿no?

-Sí, incluirías todo el babel-core, 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 haga que el ritual para convocar a Satanás parezca una receta de huevos duros. Necesitas minificar los activos, uglificarlos, css en línea arriba del pliegue, aplazar los guiones, así como-

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

– Lo transcribirí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 esto llamado Typescript?

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

Y Typescript obviamente hace eso.

-Flujo también, aunque solo comprueba si se escribe, mientras que Typescript es un superconjunto de JavaScript que debe compilarse.

Suspiro … y Flow es?

-Es un verificador de tipo estático hecho por algunos tipos en Facebook. Lo codificaron en OCaml, porque la programación funcional es asombrosa.

OCaml? Programación funcional?

-Es lo que usan los chicos guapos hoy en día hombre, ¿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 OOP y eso es lo que deberíamos usar en 2016.

Espera, aprendí OOP en la universidad, ¿pensé que eso era bueno?

-Así que fue Java antes de ser comprado por Oracle. Quiero decir, la POO era buena en los últimos tiempos, y todavía tiene su uso hoy en día, pero ahora todos se están dando cuenta de que modificar estados equivale 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 hablen de los tipos Elm, pero afortunadamente en la web ahora tenemos bibliotecas como Ramda que nos permiten usar programación funcional en JavaScript.

¿Estás dejando caer nombres por el simple hecho de hacerlo? ¿Qué demonios es Ramnda?

-No. Ramda. Como Lambda. Ya sabes, esa biblioteca de David Chambers?

David, ¿quién?

-David Chambers. Genial. Juega un juego de Coup media. Uno de los contribuyentes de Ramda. También debe consultar a Erik Meijer si realmente quiere aprender programación funcional.

¿Y Erik Meijer es …?

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

De acuerdo. Voy a detenerte allí. Todo eso es bueno y está 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 React. ¿Cómo puedo recuperar los datos del servidor con React?

-Bueno, en realidad no traes los datos con React, solo muestras los datos con Reaccionar.

Oh, maldita sea. Entonces, ¿qué usas para buscar los datos?

– Usas Fetch para buscar los datos del servidor.

¿Lo siento? ¿Usas Fetch para buscar los datos? Quien quiera que nombre 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 retorno de llamada.

¿Retrollamado?

-Sí. Cada vez que realiza una solicitud asíncrona contra el servidor, necesita esperar su respuesta, lo que le hace agregar una función dentro de una función, que se llama la pirámide de devolución de llamada desde el infierno.

Oh, Ok. Y esta promesa lo soluciona?

-En efecto. Al manipular sus devoluciones de llamada a través de promesas, puede escribir código más fácil de entender, simular y probar, 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 perenne, de lo contrario debe incluir un Fichero de relleno o usar Solicitud, 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 tampoco comenzó a devolver las promesas?

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

Es la tercera vez que mencionas espera pero no tengo idea de qué se trata.

-Await le permite bloquear una llamada asincrónica, lo que le permite tener un mejor control sobre cuándo se están obteniendo los datos y, en general, aumentar la legibilidad del código. Es increíble, solo necesita asegurarse de agregar el preset stage-3 en Babel, o usar sintaxis-async-functions y el plugin transform-async-to-generator.

Esto es una locura.

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

Wat? 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 utilizar await en el navegador, primero debe compilar su código de Typescript que se dirige a ES6 y luego a Babel que lo machaca para apuntar a ES5.

En este punto, no sé qué decir.

-Mira, es fácil. Codifica todo en Typescript. Todos los módulos que usan Fetch los compilan para apuntar a ES6, los transponen con Babel en un preajuste de stage 3 y los cargan con SystemJS. Si no tiene Fetch, polyfill it, o use Bluebird, Request o Axios, y maneje todas sus promesas con aguardo.

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

– ¿Su aplicación va a manejar cualquier cambio de estado?

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

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

Voy a volar sobre esos nombres. De nuevo, solo necesito mostrar los datos.

-Oh, si solo estás mostrando los datos, no necesitas Reaccionar para empezar. Hubieras 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.

Detener. Solo para.

-Quiero decir, incluso si solo usa el motor de plantillas, aún usaría un combo Typescript + SystemJS + Babel si fuera usted.

Necesito mostrar los datos en una página, no realizar la fatalidad MK original de Sub Zero. Solo dígame qué motor de plantillas usar y lo tomaré desde allí.

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

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

-jTemplates? jQote? ¿PURO?

Err, no suena la campana. ¿Otro?

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

¿Otro?

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

Tal vez. ¿Hay algo similar a ese último?

-Mustache, guión bajo? Creo que ahora incluso lodash tiene uno para ser sincero, pero eso es algo así como 2014.

Err … tal vez era más nuevo.

-¿Jade? DustJS?

No.

-DotJS? EJS?

No.

-Nunjucks? ECT?

No.

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

No, ya dijiste Jade.

-Me refiero a Pug. Me refería a Jade. Quiero decir, Jade ahora es Pug.

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

-Probablemente solo cadenas de plantillas nativas ES6.

Déjame adivinar. Y eso requiere ES6.

-Correcto.

Lo cual, según el 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 un paquete web, idealmente debería ser administrado por un corredor de tareas.

-Correcto.

Pero, como debería usar programación funcional y mecanografiar idiomas, primero necesito precompilar Typescript o agregar Flow thingy.

-Correcto.

Y luego enviar eso a Babel si quiero usar aguardar.

-Correcto.

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

-Solo no te olvides de rellenar Polyfill si no es compatible, Safari aún no puede manejarlo.

Sabes que. Creo que hemos terminado aquí. En realidad, creo que he terminado. Ya terminé con la web, ya terminé con JavaScript.

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

Voy a regresar al backend. Simplemente no puedo manejar estos muchos cambios y versiones y ediciones y compiladores y transpilers. La comunidad de JavaScript está loca si cree que alguien puede estar al tanto de 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 .

Hacker Noon es cómo los hackers comienzan sus tardes. Somos parte de la familia @AMI . Ahora estamos aceptando presentaciones y estamos felices de conversar sobre oportunidades de publicidad y patrocinio .

Si disfrutaste esta historia, te recomendamos que leas nuestras últimas historias tecnológicas e historias tecnológicas de tendencia . Hasta la próxima, ¡no des por sentado las realidades del mundo!