Usando CodeMirror para Construir un Editor de JavaScript con Linting y Autocompletado

Rate this content
Bookmark

Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres paso a través de la documentación para encontrar lo que quieres?


En este masterclass, discutiremos todos estos puntos mientras recorremos un ejemplo general de construir un editor de código usando CodeMirror en React. Todo esto compartiendo algunos de los matices que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.

86 min
30 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Este masterclass cubre varios temas relacionados con el desarrollo de software, incluyendo el uso de la biblioteca CodeMirror para crear editores personalizados, explorar la configuración y temas de CodeMirror, agregar múltiples editores y temas personalizados, implementar funciones de linting y autocompletado, y agregar autocompletado personalizado en CodeMirror. También se discuten las herramientas Hydrogen y Oxygen para crear tiendas personalizadas en Shopify, se presenta la biblioteca de interfaz de usuario Polaris Viz, y se comparten las experiencias y antecedentes de los miembros del equipo. El masterclass enfatiza la complejidad del código de React, los desafíos y beneficios de usar TypeScript, y la importancia de la colaboración y comunicación con los mantenedores en proyectos de código abierto.

Available in English

1. Introducción a la biblioteca CodeMirror

Short description:

En esta parte, discutiremos CodeMirror, una poderosa biblioteca que te permite crear tu propio editor. Cubriremos la configuración básica, agregar temas, linting y funciones de autocompletado. La biblioteca se utiliza ampliamente en Shopify y tuvimos que actualizarla para satisfacer nuestras necesidades específicas. A pesar de la documentación exhaustiva, tuvimos que navegar a través de ejemplos para implementar el linting y el autocompletado personalizado. Utilizaremos ReactCodeMirror, una biblioteca útil que simplifica el uso de CodeMirror. Sumergámonos en el proceso de codificación y sigamos las instrucciones.

Curso 3. Desarrollo en un navegador web "... Voy a explicar cómo instalar React playoffs..." Soy Hussain, soy un desarrollador aquí en Shopify. Me enfoco principalmente en el front-end. He estado usando React durante siete años, de cerca. Quiero decir, desde que salió, hablemos de CodeMirror.

Entonces, ¿qué estamos haciendo con CodeMirror? Hoy, la agenda es hablar sobre la biblioteca en sí. Hablaremos sobre la configuración básica. Agregaremos nuestros propios temas y usaremos temas adicionales que tienen. Agregaremos nuestro propio linting. Es decir, la capacidad de detectar algunos errores. Agregaremos un autocompletado general, algo más complejo de un autocompletado en JavaScript, y haremos un autocompletado personalizado más avanzado.

Usaré JavaScript simplemente porque creo que es más accesible. No todos usan TypeScript. Quería hacerlo más general. Además, ahorra mucho tiempo aquí y todos los errores que podríamos tener. Entonces, ¿por qué estamos hablando de esto? CodeMirror en sí es una biblioteca muy, muy, muy poderosa. Te permite crear tu propio editor desde cero y tiene muchas características y mucha documentación. Cómo llegamos a este problema fue en Shopify, tenemos algunos lugares en toda nuestra aplicación que los comerciantes usan. Diferentes en diferentes bases de código que otros desarrolladores usan en nuestra documentación, donde queremos mostrar un editor de código, ya sea que puedas editarlo o no, en diferentes lenguajes, agregando cierta sintaxis. En toda la aplicación, y Shopify ha estado presente durante mucho tiempo, solo he estado allí durante un año, notamos que CodeMirror era el principal que se usaba. Además, no era la versión más actualizada, así que parte de lo que hice fue aprender CodeMirror y agregar una nueva función donde los comerciantes pueden agregar su propio código, básicamente, agregar su propio código y activar eventos en ese código. Lo que significa es que un comerciante puede decir, después de hacer una venta, por favor envía a Facebook el mensaje sobre mi venta, es decir, decirles que vendí algo, este producto en particular a este precio particular con estos parámetros. Disparamos ese evento por ti, pero tú pones el código que quieres disparar porque quieres enviarlo a Facebook o a cualquier otro lugar. Así que tuvimos que tener un entorno de codificación y esa es solo una de las casos de uso que teníamos.

Creo que gran parte de lo que hacemos aquí como desarrolladores, porque puedes crear tu propio, puedes escribir tu propio CodeMirror, puedes crear tu propio editor y eso es genial, por así decirlo, pero en general, nos encontramos si hay algo mejor ahí fuera, tal vez no sea lo mejor que deberías hacer, y todos sabemos eso y todos tenemos que tomar esas decisiones difíciles sobre si debemos usar esto. ¿Deberíamos hacer el nuestro propio? Y algo como esto que ya existía en la base de código que otros equipos estaban usando, fue una buena idea usar esto. Pero el problema es que no estaba actualizado. Tuvimos que actualizarlo. Y creo que eso me lleva al punto de por qué esto es tan importante, porque me di cuenta de que lo más importante, lo que hago más a menudo, no es escribir cosas nuevas, geniales e innovadoras. En general, estoy trabajando con bibliotecas en el front-end o en elbackend, pero digamos que en el front-end, y tengo que, lo que yo llamo domarlas. Tengo que hacer que funcionen para lo que quiero que hagan. Al final del día, es bueno cuando la biblioteca simplemente funciona. Pero rara vez es ese el caso porque el negocio significa código y el negocio hace que el código sea complicado. Entonces, um, lo que tuve que hacer con CodeMirror y lo que nuestro equipo tuvo que hacer fue hacerlo funcionar para nuestro caso de uso. Y fue un entorno donde ves una documentación como esta y te emocionas mucho porque es muy completa, pero la documentación, lo que aprendí es muy bonito. Pero el problema es que cuando es muy completa, no significa que sea muy fácil descubrir cómo hacer lo que quieres. Así que tuvimos que hacer un linting. Tuvimos que hacer autocompletado. Tuvimos que agregar los nuestros, pero no era muy evidente en los ejemplos, pero la documentación estaba ahí. Así que sigamos adelante y comencemos a codificar aquí. Pero pensé que esta introducción sería importante. Entonces, una cosa a tener en cuenta aquí es que estamos usando ReactCodeMirror. Esto hace que usar CodeMirror sea mucho más fácil. Puedes crear tus propios envoltorios en lo que hacen nuestros equipos, pero esta biblioteca aquí es bastante útil. Básicamente, convierte las cosas en sus propios paquetes y verás que tenemos muchos paquetes aquí y esa es la arquitectura que decidieron hacer para permitirte y darte más flexibilidad. Dan algunos ejemplos básicos de lo que puedes hacer. Admiten varios lenguajes, por lo que es fácil de usar fuera de la caja cuando estás usando React. Sigamos las instrucciones aquí. Algo genial de StackBlitz es que en realidad no necesitas instalar estas bibliotecas directamente, así que debes hacer Yarn add.

2. Explorando la configuración de CodeMirror en StackBlitz

Short description:

En esta parte, exploramos la configuración básica de CodeMirror en StackBlitz. Discutimos la velocidad y la arquitectura de StackBlitz, destacando su uso de WebAssembly para una ejecución rápida. La configuración básica del editor de código permite controlar la altura, proporciona autocompletado, colapsado y características de line-gutter. También mencionamos el poder de las extensiones en CodeMirror y los desafíos de navegar por la extensa documentación. Además, mencionamos la capacidad de agregar TSX True y las limitaciones de agregar divs dentro de JavaScript.

Entonces, verás aquí, si estás siguiendo con StackBlitz, voy a tomar este código aquí con la configuración básica y simplemente lo pegaré aquí. Y simplemente cambiaré esto a app.js. Si funciona, si no funciona, lo revertiremos.

Como puedes ver aquí, ya me está pidiendo que tengo la lista 10-D aquí, así que no puedo ver mucho de lo que estoy haciendo. De acuerdo. Me pedirá que instale estos parámetros. Bastante genial. No sé si te diste cuenta, pero StackBlitz es realmente rápido en comparación con muchas otras cosas aquí. Y muchas de las otras especies de entornos, creo que Code Sandbox particularmente es lo que usé. Y lo que es realmente interesante acerca de su arquitectura es que creo que todo está escrito en, corrígeme si me equivoco, Covey está en WebAssembly, y se carga en tu navegador en lugar de, ya sabes, volver a tu código, lo siento, ir a la nube cada vez que actualizas algo y pedirle cosas a un servidor. Hasta donde sé, eso es lo que hacen. Y es muy, muy rápido si lo usas. No sé si te diste cuenta de eso o si eres un usuario, me enteré de esto hace poco en una llamada.

Sí, hay una diferencia interesante en cómo ejecutan el código en CodeSandbox en comparación con StackBlitz. No conozco los detalles, pero sé que StackBlitz es local, lo cual es genial. Sí, así que gracias por eso, Covey. Como puedes ver aquí, tenemos una configuración básica de un editor de código. Y verás, realmente no tuvimos que hacer mucho aquí, pero hay algunos matices importantes. El primero aquí es que podemos controlar la altura. Una cosa bastante fácil aquí. Puedes hacer que sea 250 si quieres. Verás que aumentó de tamaño. Aquí tenemos un valor inicial. Y mi ratón se está volviendo loco. Y otra cosa que puedes hacer aquí es que tienes algunas cosas listas para usar, como el autocompletado. Por ejemplo, para un bucle for, lo tenemos aquí mismo. Podemos hacer una declaración if. Hará un bloque if de inmediato. No hay errores de linting ni nada parecido de inmediato. Pero como puedes ver aquí, con la configuración básica, incluso puedes hacer colapsar algunas cosas, lo cual es realmente agradable. Tienes esto, lo que se llama line-gutter o el gutter, que te permite mostrar las líneas. Y tienen diferentes colores para resaltar y todo eso. Además, veamos aquí. Puedes hacer un bloque trycatch si quieres. Y es bastante bueno desde el principio. Lo que hace esto posible es que estás conectado a estos complementos o paquetes de lenguaje. Y JavaScript te permite hacer este editor específicamente para JavaScript. Y lo llamas como una función, y está dentro de las extensiones. La extensión es lo más poderoso en Codemirror, y lo que me encanta de ello es que, todo, cada función que quieres agregar, puedes hacerlo a través de extensiones. Ahora, el problema que encontré es que la documentación es extensa. Pero también es confusa porque muchas veces usan su propia terminología en otros objetos y simplemente dicen cosas como, oh, proporciona esto y facetas. Y lo que encontré con eso es que, ya sabes, es un poco abrumador y tienes que profundizar más para entender qué está pasando realmente. No sé tú, pero a mí me gusta seguir ejemplos. Y así es como intentaba hacer las cosas. Así que gran parte de ello fue tratar de encontrar cosas y hacer cosas en línea. Y con la extensión de JavaScript, también puedes agregar, creo, TSX True aquí. Y creo que te dará la capacidad de agregar cosas como divs, pero creo que tienen que estar dentro de algún JavaScript aquí que no puedo recordar aquí. De acuerdo. Veamos, ¿está aquí? De acuerdo, parece que no está funcionando, pero está bien. Así son las demostraciones.

3. Agregando Estilo Básico e Introduciendo Temas

Short description:

En esta parte, agregamos estilo básico al editor de CodeMirror añadiendo un borde. Nos encontramos con un pequeño problema, pero lo resolvemos actualizando la página. Agregar estilo es un proceso sencillo y exploraremos opciones más avanzadas, como agregar temas, en la próxima sección.

De todos modos, agreguemos algo de estilo aquí. Así que tenemos el estilo. Vamos a agregar un estilo muy básico, y vamos a agregar solo un pequeño borde alrededor, solo para que se vea un poco mejor, solo para mostrarte que tienes acceso a cosas predefinidas aquí. Así que creo que espera que sea TSX. Está bien, le daré TSX. Veamos aquí. Uh oh. Bueno, esto es nuevo. Permíteme refrescar aquí, a ver qué sucede. OK, ahora, el refresco al rescate. Tenemos nuestro pequeño borde aquí, todo funciona bien. Así que puedes ver que antes no teníamos eso. Solo fue cuestión de agregar un par de líneas aquí. Eso es algo que puedes hacer, puedes ser muy sofisticado con ello, y te mostraré cómo agregar temas en un momento.

4. Agregando Múltiples Editores y Temas Personalizados

Short description:

En esta parte, aprendemos cómo agregar múltiples editores en una pantalla utilizando CodeMirror. Cada editor es responsable de su propio estado. Exploramos ejemplos de uso de múltiples lenguajes, como JavaScript, HTML, CSS e incluso Python. La gestión del estado es manejada por CodeMirror, y podemos usar la devolución de llamada de actualización de vista para gestionar el estado. También aprendemos cómo instalar temas personalizados y explorar los temas disponibles en la documentación de React CodeMirror.

Entonces, vamos aquí y agreguemos múltiples editores. El siguiente paso aquí es mostrarte cómo puedes tener múltiples editores en una pantalla. Todos serán responsables de su propio estado. Así que vamos a hacer eso. Solo tienes que copiar y pegar, instalar los complementos faltantes, Me encanta esto, y luego deberías estar listo.

Muy bien, como puedes ver aquí, ahora tenemos un editor de JavaScript, tenemos un editor de HTML y tenemos un editor de CSS. En cuanto al HTML, dentro de él, también obtendrás autocompletado, como por ejemplo, puedes hacer algo como section aquí, y tendrás un div, lo mismo aquí, y tal vez un span dentro de aquí. Muy bien, o no, ahí vamos. Así que ese es un ejemplo de lo que puedes hacer aquí. El CSS no es tan útil para el autocompletado, pero te proporciona algunas etiquetas disponibles si lo deseas. Como podemos agregar un H2 aquí así, incluso podemos agregar un div. Así que te brinda algunas habilidades básicas. No sé si va a reconocer los selectores o cosas así, pero solo quería mostrarte que puedes usar múltiples lenguajes. Incluso puedes usar Python si quieres. Así que te mostraré lo fácil que es si quieres hacer un editor de Python. Así que vamos a ir al React code mirror, buscaré Python. Copiaré esto. Esto no está en las instrucciones, pero solo quería mostrarte esto. Vamos a agregar este lenguaje aquí. Importar. Lo siento, mi teclado está teniendo algunos problemas, por supuesto. Muy bien, vamos a agregar Python, reemplazar el CSS, veamos qué sucede aquí. Te permite instalarlo. Muy bien, ahora esto es Python, así que puedes ver que ya tengo algo de autocompletado. Hagamos un bucle for y es un bucle for en Python. La tabulación ya está ahí. Así que eso es bastante genial, eso es algo que viene de fábrica. Ves que solo tomó dos segundos hacer eso. Ahora, una cosa interesante aquí es la no modificación, puedes ver que el estado es gestionado completamente por CodeMirror, así que no tienes que preocuparte por insertar los estados. Proporcionan algunas funciones auxiliares dentro de la no modificación, o lo siento, la devolución de llamada aquí es la actualización de vista. Eso es muy poderoso, esencialmente la actualización de vista te da acceso a la vista misma y puedes gestionar todo el estado dentro de ella. Verás algunos ejemplos aquí que pueden ser un poco complicados, pueden ser un poco complejos, pero hacen uso de esta actualización de vista para acceder a todo dentro de este documento, esencialmente el árbol de sintaxis es lo que vamos a ver más adelante.

Ahora que hemos construido esto, veamos cómo instalar algunos temas. Entonces, una cosa que vamos a hacer aquí es agregar algunos temas personalizados. Y puedes ver aquí en la documentación de React CodeMirror, te han dado una lista de temas que ya existen. Probablemente haya más, pero esto es algo genial, dependiendo de lo que te guste, y a muchos desarrolladores, estas son nuestras preferencias. A algunas personas les gusta el modo claro, a algunas personas les gusta el modo oscuro, cosas así. Así que eso te da la opción, y es bastante agradable. Así que vamos a hacer eso. Importemos este código aquí, o simplemente copiemos este código, copiar y pegar. Veamos qué aparece, instalamos los paquetes que faltan. Y puedes ver aquí que tenemos diferentes temas. Tenemos Sublime, GitHub Dark, Okadia. Incluso puedes tener GitHub Light si quieres. Así que puedes hacer GitHub Light. Entonces, y puedes ver aquí, cada uno tiene sus propios estilos y colores, pero la funcionalidad sigue existiendo más o menos. Así que, si bloque, cosas así, todo está listo. Así que espero que estés siguiendo hasta ahora. Sé que estos son solo ejemplos básicos, pero esto es algo que viene de fábrica para ti. Pero ahora la pregunta es, ¿qué sucede si quieres hacer tu propio tema personalizado? Y esto es algo a lo que te dan acceso de una manera bastante agradable.

5. Agregando Tema Personalizado e Historial

Short description:

En esta parte, aprendemos cómo agregar nuestro propio tema personalizado en CodeMirror. Exploramos el uso del analizador lezer para personalizar el resaltado de sintaxis, centrándonos específicamente en los comentarios de JavaScript. Esto nos permite cambiar el color de los comentarios para cumplir con las preferencias de nuestra organización. Luego pasamos a explorar la función de historial en CodeMirror, que nos permite guardar y acceder al historial del editor en el almacenamiento local. Esta función se agregó recientemente a la documentación y proporciona una forma conveniente de implementar la funcionalidad de deshacer/rehacer. Siguiendo las instrucciones y copiando el código proporcionado, podemos incorporar fácilmente estas características en nuestra aplicación.

Entonces, veamos esta parte. Agregando nuestro propio tema personalizado. Aquí creamos un archivo llamado custom, custom theme.js. Así es como lo haces, vas al botón de suma aquí, custom theme.js y simplemente copias este código. Vamos a copiarlo y verlo. Luego lo explicaremos aquí, solo para facilitar las cosas. Ahora que he copiado esto, por favor, agrega el nuevo código justo debajo. Aquí lo tengo para ti. Volvamos a app.tsx, agrégalo e instala las dependencias faltantes y las que dependen de ellas.

Aquí tengo dos ejemplos de JavaScript, uno con un tema personalizado y otro con el tema predeterminado. Puedes ver que hay algunas diferencias aquí. Principalmente en la sintaxis básica. Cuando hago un bloque if, por ejemplo, hagamos lo mismo aquí, pero verás que se verá diferente, ¿verdad? Te brinda cierto acceso. Y una cosa que te mostraré aquí es cómo cambiar el color de los comentarios. ¿Cómo funciona esto? Puedes ver en los temas personalizados que tienes acceso a algo llamado lezer. Y funciona muy bien con React CodeMirror. Lezer, si pronuncio correctamente, es una especie de analizador, un analizador de lenguaje escrito en JavaScript que te ayuda a escribir tu propio analizador para un lenguaje o a comprender tu propio analizador para un lenguaje. Así que se integra muy bien. Y tal vez no lo estoy explicando de la mejor manera, pero básicamente te permite acceder a ciertas etiquetas en un lenguaje, ciertas variables. Entonces, puedes ver aquí lo que hemos hecho es tener acceso específico a los comentarios de JavaScript. Y tener esa etiqueta, enviarla como estilo y luego darle su propio color. Así que, si voy aquí y simplemente digo, si es un color feo aquí, digamos azul, puedes ver aquí que los comentarios han cambiado de color. Así que te brinda un acceso bastante detallado. Y por qué eso es útil depende de tu organización. Tal vez quieran que los colores sean de una manera específica. Y estas son las cosas que, para los desarrolladores, podrían ser una pesadilla para los desarrolladores front-end cuando estas cosas no se te proporcionan. Como si alguien te da estas cosas y no están disponibles de fábrica, podría ser bastante, no catastrófico, pero podría llevar mucho tiempo y tu tiempo para resolverlo. Y es posible que no encuentres una solución elegante. Así que creo que esto te brinda una solución muy elegante para poder personalizar tu propio tema.

Así que, suficiente sobre los estilos. Vamos a ver algo realmente interesante aquí con el historial. Este es un ejemplo que se proporciona de fábrica, pero creo que es realmente interesante de usar. Entonces, lo que estamos haciendo aquí es básicamente tener nuestro propio historial y guardarlo en el almacenamiento local. Guardar en el almacenamiento local no es algo muy único, pero tener acceso al historial en el almacenamiento local es lo que hace que esto sea bastante genial. Este es un ejemplo reciente que agregaron. Y lo interesante de esto es que esto no solía estar en la documentación, creo, y ahora está ahí. Así que, si quisieras hacer esto antes, tal vez era un poco más complejo. Entonces, una cosa que supongo que podríamos hacer como comunidad es agregar más a la documentación y tal vez debería hacerlo también y brindar a las personas formas predefinidas de hacer cosas que podrían ser útiles para ellos. Solo voy a copiar esto. Puedes hacer lo mismo. Ve a app.tsx. Instalaremos los comandos de paquetes que faltan y veremos qué obtenemos aquí. Bien, ¿qué estamos haciendo aquí? Ahora, vamos a tener, vamos a ver que realmente guarda lo que tenemos. Entonces, si hago, no sé por qué siempre comienzo con un bloque if. Solo hagamos un bucle for regular. Entramos aquí y decimos const s igual a cuatro. Entonces, si voy aquí y agrego otro bloque if, bloque else. Sabes, sé que esto no existe en el ámbito, pero hagamos algo así. Entonces, si actualizo ahora, puedes ver que está ahí porque está en el almacenamiento local y si deshago, mi historial de deshacer está ahí, incluso después de actualizar.

6. Explorando Historial y Agregando un Linter Personalizado

Short description:

En esta parte, exploramos la función de historial de CodeMirror, que nos permite guardar y acceder al historial del editor en el almacenamiento local. También discutimos el proceso de agregar nuestro propio linter y la filosofía detrás del enfoque de CodeMirror para el linting. Mediante el uso de extensiones, podemos incorporar fácilmente nuestro propio linter y tener acceso al estado del código a través de la vista. Esto nos permite detectar errores y proporcionar objetos de diagnóstico. Ahora pasemos a la siguiente etapa.

Así que eso es bastante genial. Entonces, si hago esto, ya sabes, ¡ups! Actualizar. Ahora puedes ver que está ahí y el historial está ahí lo cual es bastante genial. Sé que cuando estás agregando código, el historial puede ser muy importante, especialmente en este contexto cuando probablemente no tienes control de código fuente, puede ser muy útil. Así que es realmente genial cómo lo están haciendo.

Básicamente, tienes la capacidad a través del campo de historial aquí de tener acceso al estado y enviarlo como estado inicial. Y luego, a medida que se actualiza, y esto es a lo que me refiero con lo que la vista puede hacer por ti, tienes acceso al estado que es todo el árbol de estado aquí y lo conviertes en una cadena JSON y luego lo envías, lo conviertes en cadena y lo agregas al almacenamiento local. Así es como funciona. Y eso es muy fácil de hacer porque tienes acceso al estado de manera muy sencilla y puedes convertirlo en diferentes versiones según consideres adecuado. Así que espero que eso haya sido realmente genial de mostrar.

Sigamos adelante con la siguiente etapa. Ahora vamos a agregar nuestro propio linter. El linting aquí es muy interesante. Este ejemplo es algo que nos llevó muchas horas hacer. Pero es solo cuestión de, puedes ver el ejemplo básico allí pero estás tratando de adaptarlo a tu caso de uso. Y eso es algo que quería señalar aquí porque tienen una filosofía muy interesante aquí. No te van a dar, al igual que el autocompletado, algo listo para usar. Dicen que el linting es muy específico, usa tu propio linter. Pero te darán la capacidad de integrarlo en su código fácilmente a través de sus extensiones. Entonces, lo que haremos aquí es simplemente copiar esto y crear un nuevo archivo llamado jslinter.js, nombramiento, ¿verdad? De acuerdo, lo copiaremos. Ahora tenemos nuestro linter aquí y haremos lo mismo y lo explicaremos más adelante. Pero primero quiero obtener una versión funcional. Así que actualicemos nuestro código. Y vayamos a app.tsx y actualicémoslo. Y como siempre, faltan dependencias. Muy bien. Ahora lo que tenemos es, veamos aquí si realmente tenemos algún problema desde el principio aquí. Porque parece que puede que no haya funcionado. JSlinter. Tenemos una importación personalizada aquí. Veamos const. Oh, aquí está. Está funcionando. Solo creo que está un poco retrasado. Entonces, una cosa aquí, podríamos hacer const. Oh, mi teclado está teniendo algunos problemas. Disculpa por eso a todos. Podríamos hacer const test igual a cuatro. Así que está bien. Pero ahora, si intentamos reasignarlo, se quejará. Y dirá, intentando sobrescribir tests, que es una variable constante. Así que esto es algo bastante genial. Y cómo se maneja esto es a través de este linter que escribimos. Entonces, ¿cómo funciona esto? Tienes que usar tu propio linter. En este caso, como ejemplo, estamos usando js-hint solo como un linter básico que puede detectar tus errores. Cómo lo facilitan para ti es una vez que lo pasas a través de las extensiones, puedes tener acceso al estado del código a través de la vista. Y lo que estamos haciendo es pasar el código como texto al analizador o función de js-hint. Y luego podemos deducir nuestros errores desde aquí. Y luego pasamos por los errores y lo que esperan que hagamos es darles un objeto de diagnóstico.

7. Linting and Autocomplete

Short description:

El objeto de diagnóstico es donde se encuentran los errores. Lo agregamos a un array y se lo damos a ellos. Así es como se hace en pocas palabras. Puedes tener tu propio linter para introducir errores específicos. LintGutter, del paquete de lint de CodeMirror, agrega subrayado de errores. Las opciones de linting te permiten gestionar la rigurosidad de los errores. Esto lo proporciona tu linter, como Jshint. Puedes tener funcionalidades similares en cualquier lenguaje utilizando bibliotecas útiles como ESLint. Pasemos al autocompletado.

El objeto de diagnóstico simplemente indica dónde se encuentran los errores. En este caso, solo estamos tomando toda la línea como ejemplo para fines de demostración. Luego podemos darle la gravedad y la razón, que proviene de js-hint. Luego lo agregamos a este array y se lo damos a ellos. Así es como pueden subrayarlo y decirnos que algo está mal. Entonces, eso es básicamente cómo se hace en pocas palabras. Así que siempre y cuando tengas tu propio linter, incluso puedes hacer esto tú mismo si tienes errores específicos que quieres introducir y decir, tal vez sean un poco más complicados, pero puedes obtener algo listo para usar aquí que puede ayudar a los usuarios y saber que esto les causará errores en ese lenguaje en particular. Entonces, nuevamente, ingresamos esto como una extensión con opciones y lo explicaré en un segundo con este LintGutter, todo esto hace que esto salga de la caja de CodeMirror en uno de sus paquetes, del paquete de lint. Y esencialmente, agrega esto aquí para que pueda mostrarle su error de manera más clara. Así que hablemos de estas opciones aquí. Entonces, una cosa aquí es que en realidad es bastante estricto. Entonces, si hago esto, lo subrayará y dirá que falta un punto y coma. Otra cosa es que no creo que puedas simplemente llamarlo como una variable por sí sola, espera una expresión. Entonces, tal vez no quieras que estas cosas sean tan específicas. Entonces, en tu linter real, puedes pasar, por ejemplo, las opciones de linting que tienes. Y por eso tengo esto aquí. Si realmente pasas esto aquí, agreguemos estas opciones a tu linter aquí, puedes ver que ahora no te da ningún error, pero si intentas reasignarlo, te dará un error. Pero ya no le importan los puntos y comas. Esto es algo que no proporciona CodeMirror. Esto es algo que proporciona tu linter en este caso específico Jshint para darte la capacidad de gestionar la complejidad o supongo, la rigurosidad de los errores que estás mostrando. Así que eso también es muy útil. Con esto, puedes tener algo como esto en cualquier lenguaje que desees. Estas bibliotecas son muy útiles. Puedes, creo que ESLint, también puedes usarlo siempre y cuando estos paquetes funcionen bien y todo lo que necesitas que hagan es darte la capacidad de darte un error en una línea específica, como lo hace Jshint. Eso es en términos de linting. Ahora pasemos al siguiente paso sobre el autocompletado. Pero antes de eso, quiero hacer una breve pausa porque hemos pasado por mucho y ver si hay alguna pregunta específica. ¿Las personas tienen problemas con stack splits? ¿Cómo lo están manejando hasta ahora? Siéntanse libres de dejarlo en el chat o en Discord, como prefieran. Omar dice que todo está bien, eso es bueno hasta ahora. De acuerdo, esperaremos un par de segundos más. Mientras tanto, todo esto parece muy fácil, pero les estoy contando cómo funcionan estas cosas. Fue muy complejo llegar a comprender esto mientras intentas hacerlo en código de producción. Bien, Sebastian también está bien. También podría ser útil expandir esa consola porque si alguna vez tienes algún error con el código aquí, entonces puedes depurar y ver lo que estás registrando en la consola si eso te ayuda. ¿Oh, te refieres a eso? Sí. Sí, en realidad no debería haber mencionado eso. Gracias Cubby. Pero sí, pasemos al siguiente paso ahora, que es el autocompletado. Entonces, viste aquí, tenemos algo de autocompletado listo para usar. Oops. Entonces, tenemos algo de autocompletado listo para usar. Es bastante bueno, pero tal vez quieras que sea un poco más complejo. Y aquí es donde, ya sabes, creo que es una parte realmente genial y es un poco compleja, pero también muy, muy poderosa. Entonces, lo que haremos aquí es crear un archivo JS doc completo y el nombre, sé que es malo. Lo siento por eso de antemano, pero solo quería tener algo funcionando aquí para nosotros. Entonces, agregamos esto aquí, veamos que agregó complete js doc.js y dentro de él, vamos a pegar este código aquí, este código aquí y luego lo vamos a conectar a nuestras extensiones como siempre lo hacemos. Nuevamente, copia y pega esto aquí. Espero que tener todo el código aquí haya sido útil porque odio cuando los tutoriales simplemente te dan el código que debes ingresar y luego no sabes exactamente dónde ponerlo en tu código. Y luego pasas mucho tiempo preguntándote, ¿dónde debo poner esto en mi código? Así que esperaba evitar eso. Sé que es mucho más código, pero siento que es más explícito. A veces, lo explícito es mejor.

8. Explorando la finalización de js doc en CodeMirror

Short description:

En esta parte, exploramos la funcionalidad de la finalización de js doc en CodeMirror. Utilizando el árbol de sintaxis proporcionado por el paquete de lenguaje, podemos analizar el código y acceder a nodos específicos. Esto nos permite proporcionar sugerencias de autocompletado basadas en el contexto del código. Demostramos cómo verificar los comentarios de bloque y recuperar los nombres de variables. Además, discutimos la optimización de proporcionar regex y los tipos de auto-retorno. También mencionamos la importancia de agregar extensiones sin anular la funcionalidad de autocompletado original. Ahora pasemos a agregar un tipo diferente de autocompletado.

Entonces, vamos aquí, probablemente tengamos que instalar algunas nuevas extensiones. Veamos aquí. Ahora hemos agregado la finalización de js doc. Veamos si realmente funciona. Entonces, ¿qué es una finalización de js doc? Agregamos nuestros comentarios aquí. Y si quieres agregar, digamos, algo como un constructor, un constructor obsoleto, lo que sea que queramos aquí, todo es con fines de demostración, no para precisión. Y sé que no resalta el nombre de la variable después de escribir tu cuenta como lo hacemos, pero es solo, nuevamente, proporcionándote un autocompletado bastante específico. Porque ahora ves que estamos fuera del bloque de comentarios, o si tenemos comentarios regulares, no aparecerá. Entonces, ¿cómo hace Codemeeror esto posible? De acuerdo. Oh, gracias por eso, Cody. Vamos a ver este ejemplo aquí, y lo que verás aquí que es diferente es algo llamado un árbol de sintaxis. El árbol de sintaxis es proporcionado por el paquete de lenguaje. Y lo que esto te permite hacer es analizar el código esencialmente como un nodo por el que puedes pasar y ser un poco más específico. Entonces, en este caso, lo que estamos haciendo es verificar el nombre del nodo antes, para que obtengamos el nodo, lo procesemos, y puedes console.log esto, y tal vez deberíamos hacerlo aquí para ver cómo se ve esto. Y a medida que escribimos, oh, creo que el objeto es demasiado grande. Entonces tiene que estar en la consola del navegador. De acuerdo, eso no es bueno, pero lo haremos. Tal vez se registró en el navegador? Verifica en la... Sí, sí, se registrará, pero lo que haré, haré a.name aquí. Bien. Puedes ver aquí que analiza cosas, como un nombre de variable, cree que es un nombre de variable. Un bucle for, una declaración for, cree que es un comentario de línea. Entonces eso te da acceso a algo muy poderoso, o puedes buscar el nombre real de la variable si quieres. Y eso es lo que hace esto posible, es que realmente están verificando si esto es un comentario de bloque. Mira aquí, no puedo verlo realmente por la cámara. De acuerdo, no sé cómo detectar si es un comentario de bloque. Oh sí, ahí vamos, porque estás dentro de él. Ahora, lo que estamos haciendo aquí es ser muy explícitos. Estamos diciendo que si no es un comentario de bloque, si esto no existe en el comentario de bloque, particularmente las dos estrellas, entonces no hagas nada. Y esto sucede cada vez que escribes. Entonces es bastante, creo, bastante, podría ser bastante costoso en términos de escribir esto, pero hemos tenido algunas líneas de código muy grandes y no ha hecho, no ha ralentizado las cosas. Pero de todos modos, ese no es el caso de uso general para el que lo estamos usando y parece que funciona bastante bien de inmediato. Ahora, en términos de lo que estás devolviendo, lo que espera es donde comienza el autocompletado y luego tus opciones y también puedes proporcionar una regex. Y esto es en realidad, solo una optimización, especialmente para asegurarte de que a medida que compilas esto una y otra vez, no haga un trabajo extra, según entiendo. Y luego aquí estamos proporcionando los tipos de auto-retorno, los JS docs que queremos hacer, incluso podemos agregar los nuestros aquí. Entonces, cuando venimos aquí y decimos algo como prueba, puedes ver que ahora está disponible. Todo esto es posible gracias al árbol de sintaxis. Y nuevamente, todo lo que estamos haciendo es que lo estamos agregando como una extensión de JS doc, lo siento, como una extensión a CodeMirror a través de esta línea de tipo de lenguaje JavaScript aquí. Y ves, esto es otra cosa con estas líneas, no pude hacer que esto funcionara inicialmente, lo que sucedió fue que el original, la forma en que te dicen que lo hagas en la documentación es usar una anulación. Y es posible que veas allí una anulación en la documentación, bueno, lo que hace la anulación es que es muy difícil o lo que elimina es el autocompletado original, como este muy bueno. Entonces, lo elimina por completo. Así que tuve que buscar en algunos ejemplos y, ya sabes, ejemplos de code sandbox, mirando diferentes en Internet y finalmente encontré que esta es la forma en que se supone que debes hacerlo. Tal vez simplemente soy malo leyendo la documentación, pero no pensé que fuera muy fácil de encontrar. Así que esta línea me llevó bastante tiempo encontrarla, pero eso facilita agregar tus propios autocompletados y verás aquí, agregará más con la adición de mantener el original. Porque si haces una anulación, como te dicen en la documentación, perderás el autocompletado original que es muy útil.

9. Agregando Autocompletado Completo de Objetos Globales

Short description:

En esta parte, exploramos un tipo diferente de autocompletado: el autocompletado completo de objetos globales. Demostramos cómo agregar esta función realizando cambios en el código y eliminando algunas cosas de TypeScript. Discutimos la disponibilidad del autocompletado en varios objetos y funciones dentro del objeto window. Además, mencionamos la existencia de un ejemplo similar en la documentación de CodeMirror que se centra en el autocompletado de JavaScript. Por último, introducimos el concepto de agregar autocompletado personalizado y mencionamos que lo cubriremos en la próxima parte.

De acuerdo, ahora vamos a agregar un tipo diferente de autocompletado. Este será el autocompletado del ámbito global completo y me gusta mucho. Lo que haremos aquí es crear un nuevo archivo, como hemos hecho muchas veces hasta ahora, y agregar nuestro árbol de sintaxis aquí, nuestro procesador, y cambiaremos nuestro código una vez más. No una vez más, un par de veces más aquí.

Oh, en realidad no agregué el original. Lo que haremos aquí es, oh, vale. Creo que no actualicé algo. Lo siento por eso, todos. Pero lo que haremos aquí es ver si podemos agregar esto manualmente, en realidad. Creo que esto funcionará. Solo avísanos si tienes algún problema con esto. Lo que te mostraré aquí es cómo eliminar algunas cosas de TypeScript, lo cual creo que hará que funcione. Sí, creo que lo eliminé del archivo readme hace unos 10 minutos antes de esto, pero no creo que lo hayas actualizado a tiempo. Oh, vale, vale. En realidad está ahí. Debería funcionar. Sí, debería haber desaparecido, esas entradas de tipo. Oh, genial, entonces solo necesito actualizar mi propia pantalla, ¿eso es lo que estás diciendo? Sí. Wow, eso es increíble. Bien, ¿y ahora qué tenemos? Ahora tenemos nuestro autocompletado original. También tenemos nuestro autocompletado de JSDoc. Y ahora, además de eso, tenemos nuestro autocompletado completo de objetos globales. Lo que puedes ver aquí son los documentos. Tengo muchas cosas aquí. Tengo mi event listener. Puedo agregar un click aquí. Y en mi función, puedo hacer cosas como ingresar al objeto window y agregar otras funciones que desee. Y como puedes ver, tengo todo disponible. Y creo que hay autocompletado en algunos de ellos. No estoy seguro si eso funciona completamente de inmediato. Pero este es un ejemplo que se encuentra en su sitio web. De hecho, lo eliminaron de su documentación. No sé por qué. Entonces, si miras su documentación sobre el autocompletado, por alguna razón aquí, y vayamos a los ejemplos. ¿Dónde está el autocompletado? Vemos que el ejemplo principal aquí es el que mostramos con JSDoc. Solía ser el que mostraba el objeto global. Encuentro esto útil cuando estás usando JavaScript. Pero tal vez encontraron esto demasiado complejo o la gente se quejó al respecto. Pero funciona exactamente de la misma manera, excepto que hace este pequeño truco aquí donde busca el nombre de la variable y entras dentro del objeto window y así es como sabe que puede autocompletar dentro de él. Así que eso es solo otro que es muy útil, creo, y agrega cosas más directamente. Pero aquí está la última cosa. ¿Qué pasa si quieres agregar tu propio autocompletado personalizado? Bien, eso es lo que creo, no creo que lo haya agregado aquí. Bien, así que tomaré esto de otra instancia de CodeMirror que tengo, porque he estado practicando esto, como probablemente puedas imaginar. Veamos aquí. Entonces, lo que voy a hacer, y lo siento si hay un poco de confusión aquí, es agregar nuestro propio autocompletado personalizado. No tienes que seguirlo aquí. Tal vez puedas, tal vez podamos agregarlo aquí muy rápidamente.

10. Agregando Autocompletado Personalizado en CodeMirror

Short description:

En esta parte, exploramos el proceso de agregar autocompletado personalizado en CodeMirror. Creamos un archivo personalizado complete.js y agregamos manualmente el código necesario para el autocompletado. Mediante el uso de la variable custom completions, podemos definir nuestras propias sugerencias de autocompletado dentro del editor. Demostramos cómo controlar la posición del cursor y discutimos la flexibilidad del árbol de sintaxis al proporcionar opciones de autocompletado personalizadas. También mencionamos la importancia de nombrar cuidadosamente para evitar posibles efectos secundarios. Ahora vamos a sumergirnos en los detalles de cómo se logra esto.

Voy a, veamos. De acuerdo. Esto debería serlo. Solo voy a hacer un commit YOLO. Veamos aquí. Bien, se ve bien. Vamos a ejecutarlo. Y lo que haremos aquí es crear nuestro propio archivo. Llamémoslo custom autocomplete o custom complete.js. Y lo pegaremos aquí. Y lo agregaremos como siempre, excepto que lo haré un poco manualmente aquí. Pero debería ser fácil.

Así que decimos custom complete. Llamaré a esto custom complete. Um, OK. Vendremos aquí. Crearemos una nueva variable. Llámala custom completions. Lo agregaremos aquí. Veamos si funciona de inmediato. Instalaremos este paquete que falta. Y creo que te pedirá que instales otro, potencialmente. Sí. OK. Y lo que esto nos da aquí es que he agregado el mío propio. Entonces hago test.sub. Sé que estos nombres son malos. Y luego tengo la capacidad de crear mi propia autocompletación dentro de eso. Y luego mi autocompletado realmente lo completa como quiero. Y dice tu código aquí. Nuevamente, lo haré de nuevo. Y diré test.sub. Abriré algunos corchetes. Haré algo así. Y en realidad, el cursor termina aquí. Pero lo he hecho de manera que puedas controlar dónde termina el cursor. Y simplemente no lo hice para ese ejemplo. Entonces, nuevamente, sé que los nombres son un poco extraños aquí, pero podemos cambiar eso a lo que queramos. Pero tal vez podamos decir func method en eso. Veamos si eso lo cambia. Pero sabes qué? En realidad, no quiero cambiar eso porque tendrá algunos efectos secundarios. Así que lo dejaremos así. ¿Qué estoy haciendo aquí? ¿Cómo lo estamos logrando? Ahora que tienes el árbol de sintaxis disponible, puedes personalizarlo tanto como quieras. En este caso, estoy verificando las completaciones para cualquier cosa con a.property además de hacer una completación general solo para test en sí mismo. Entonces, una cosa que estoy haciendo es verificar, veamos aquí. Test en sí mismo, en realidad no agregué ese. Lo siento por eso. Pero cuando veo la palabra test como una variable, tengo la capacidad de agregar cualquier autocompletado que desee. Entonces puedo agregar aquí en caso de sub, puedo agregar label otro, digamos. Y cuando entro aquí, escribo test.otro o sub.

11. Explorando Auto-completado y Proyectos en Shopify

Short description:

En esta parte, exploramos otra capa de auto-completado en CodeMirror. Discutimos el proceso de verificar la existencia de una cadena y proporcionar autocompletado personalizado. Demostramos cómo agregar y aplicar sintaxis de función personalizada y proporcionar eventos específicos. También destacamos la importancia de la secuencia de código y el uso de bloques if para asegurar que la función de autocompletado funcione correctamente. Además, resumimos los temas cubiertos hasta ahora, incluyendo la configuración básica, temas, linter personalizado, múltiples capas de autocompletado y la capacidad de agregar documentación JS personalizada. Enfatizamos los beneficios de usar CodeMirror y el entorno colaborativo en Shopify. Por último, presentamos a Kavya y Helen, quienes comparten sus experiencias y proyectos en Shopify.

Entonces puedo crear mis propios métodos aquí si quiero. Pero como puedes ver, aquí no hay autocompletado. Lo que está sucediendo aquí es otra capa de autocompletado que podemos hacer. Ahora estoy verificando específicamente esto. Tal vez esta no sea la mejor manera, pero es una forma de hacerlo, verificar específicamente la existencia de una cadena y luego proporcionar tus propias sugerencias de autocompletado. Y con eso, tienes la capacidad de agregar y aplicar. Con la función apply, simplemente agrego mi propia sintaxis de función aquí y luego proporciono los eventos que quiero mostrar. Puedes agregar esto como a.sub o puedes hacer otro si quieres. Pero como puedes ver, la secuencia aquí importa. Esto debe estar después de esto. Y eso es un poco molesto. Pero como parte del árbol de sintaxis, se lee muy rápido. Puedes ver aquí que la completación aquí, lo estoy poniendo en un bloque if solo para asegurarme de que tengamos a.property. Esto es necesario para asegurarnos de que el autocompletado siga funcionando a medida que escribes. De lo contrario, si no agregas ese nombre de propiedad, dejará de autocompletar después de escribir los primeros 8. Por eso existe.

Hasta ahora, hemos agregado la configuración básica con JavaScript, hemos visto CSS, HTML, incluso hemos agregado algo de Python, hemos visto temas predefinidos, nuestros propios temas personalizados, hemos agregado nuestro propio linter utilizando JSHint, hemos agregado dos capas adicionales de autocompletado en el objeto window o el objeto document, además de agregar nuestra propia documentación JS personalizada y finalmente, hemos visto una versión más compleja o personalizada de autocompletado, que es posible que desees hacer. Como puedes ver, todo esto fue posible gracias a CodeMirror. Y creo que construir algo como esto desde cero podría ser aún más complicado que seguir con CodeMirror. Pero creo que muchas cosas que suceden en nuestro campo siempre se tratan de compensaciones. Tal vez aquí pasamos mucho tiempo aprendiendo la forma exacta en que estamos haciendo esto con CodeMirror, pero lo que descubrimos es que podemos compartir esto en toda nuestra organización, porque descubrimos que no somos la única base de código que lo utiliza. Hay muchas bases de código que lo utilizan y, de hecho, hemos establecido un grupo donde nos ayudamos mutuamente con diferentes grupos que utilizan CodeMirror, solo para decir, ¿cómo estás haciendo el autocompletado? ¿Cómo estás haciendo esto? ¿Cómo estás haciendo eso? Y nos ayudamos mutuamente con las mejores prácticas o simplemente tenemos a una persona diferente que ha explorado un camino diferente y nos ayuda con lo que han hecho.

Tal vez podamos conocer un poco a las personas que están aquí. ¿En qué estás trabajando? ¿Alguien quiere contarnos qué equipo están, de dónde vienen, en qué están trabajando, qué han pensado hasta ahora? Si tienen algún comentario al respecto, podemos usar este tiempo ahora mismo para hacerlo si quieren. Entonces, Kavya, ¿cuánto tiempo llevas en Shopify? ¿Qué tipo de desarrollo front-end has estado haciendo? Llevo aproximadamente un año y medio en Shopify. ¿Qué tipo de desarrollo front-end he estado haciendo? Principalmente cosas de React y TypeScript, aunque últimamente he estado escribiendo más Ruby. Pero sí, familiarizarme con la infraestructura de TypeScript de Shopify ha sido definitivamente todo un viaje por sí solo. Así que ha sido una experiencia de aprendizaje para mí durante mi tiempo en Shopify, sin duda.

Y hasta ahora, has estado en automatizaciones, ahora has hecho marketing insights, ¿verdad? Sí. Entonces, básicamente, tenemos una sección de marketing para nuestros comerciantes, y una cosa de la que Kavi ha sido parte, creo, desde el principio, son las automatizaciones. Esto es en realidad la capacidad para los comerciantes de, básicamente, agregar una ruta para cómo quieren enviar sus correos electrónicos. Y es a través de una interfaz de usuario, y nos estamos integrando con otra aplicación dentro de Shopify, y esencialmente puedes decir, una vez que alguien compra en mi tienda, una vez que alguien abandona mi proceso de pago, tengo la capacidad de enviarles una secuencia de correos electrónicos basados en acciones. Este fue un proyecto de aproximadamente un año o algo así para llegar a estar completamente disponible y funcionando correctamente, y ahora está disponible en general. Entonces, ese es el primer producto del que eres parte. Sí, sí, definitivamente. Puedes enviar un enlace a las automatizaciones de marketing de Shopify si a alguien le interesa. Y tal vez usemos ese tiempo en el panel si tienen alguna pregunta específica al respecto. Pero Helen, ¿tienes... puedes contarnos un poco sobre lo que estás haciendo en Shopify? Claro. Hola a todos. Soy Helen. Llevo cuatro años en Shopify y actualmente estoy en el equipo de Hydrogen. Lo que hacemos es construir un marco de trabajo que se adapta mejor a la plataforma de comercio de Shopify. Es un marco de trabajo que permite a los desarrolladores construir su propia tienda personalizada de manera fácil y rápida. Y, por supuesto, conectarlo con nuestro Oxygen para que se pueda implementar muy rápidamente. Hemos pensado mucho y hemos hecho muchos esfuerzos para pensar en cómo podemos hacer que todos esos problemas de desarrollo no sean tu problema, sino nuestro problema para resolver. He oído que el control de código fuente es parte de Hydrogen.

12. Hydrogen, Oxygen y Tiendas Personalizadas

Short description:

Los comerciantes pueden conectar sus proyectos de Shopify a sus repositorios de GitHub, lo que permite una configuración fácil e integración con la infraestructura de Oxygen. Hydrogen ofrece la capacidad de crear tiendas personalizadas desde cero, utilizando componentes de interfaz de usuario en React u otros frameworks similares. Mientras que Hydrogen Versión 1 utiliza el componente del servidor de React, la próxima V2 incorporará Remix y Remix build. El objetivo es simplificar el proceso de desarrollo, permitiendo a los desarrolladores centrarse en la creación de características en lugar de preocuparse por los detalles del framework. La separación entre el código del lado del servidor y del lado del cliente se está minimizando, lo que facilita la creación de tiendas personalizadas. Oxygen proporciona múltiples entornos y vistas previas para las tiendas, pero aún faltan algunas APIs, como los productos en borrador. El equipo está trabajando para cubrir estas brechas y mejorar la funcionalidad de la API. En general, Hydrogen y Oxygen ofrecen herramientas poderosas para que los desarrolladores creen y personalicen sus tiendas de Shopify.

¿Es eso cierto? Como los comerciantes pueden tener algún tipo de control de código fuente. ¿Eso forma parte de ello o no? Si te refieres al control de código fuente, es una conexión directa al repositorio de GitHub. Básicamente, cuando creas un proyecto en el administrador de Shopify, puedes conectarlo a tu cuenta de GitHub, y también había otro, creo que era BigBucket. No estoy muy seguro, pero definitivamente GitHub generará un proyecto en tu cuenta de GitHub, creará un proyecto para ti y configurará el webhook para que esté conectado automáticamente a nuestra infraestructura de Oxygen. Y todo se hace en, creo que fue como 30 segundos para ti. Y puedes comenzar tu proyecto, ver la vista previa de tu proyecto, conectarlo a tu tienda y todo eso listo para ti.

De acuerdo, genial. Permíteme darte un poco de contexto. Actualmente, cuando configuras tu tienda, es como si eligieras una plantilla y tienes la capacidad de hacer algunas personalizaciones en ella. Pero con Hydrogen, puedes crear una tienda completamente personalizada desde tu propio código, desde cero. ¿Es eso correcto? Lleva al siguiente nivel. Sí, y proporcionamos componentes de interfaz de usuario que puedes usar, creo que es en React o algo similar, que puedes usar como bloques de construcción. En este momento, estamos utilizando, para Hydrogen Versión 1, el componente del servidor de React. Hubo mucha exploración en esto, diría, algo, bueno, es nuevo, pero es como algo nuevo de hace dos años, un concepto en el que el equipo de React está trabajando. Y ahora es con Next.js. Y estábamos en ese camino, y como todos saben, recientemente tuvimos la adquisición de Remix. Así que ahora es parte de nosotros. Por lo tanto, la V2 será con Remix y Remix build. Así que eso es más o menos donde estamos ahora. Pero sí, en general, nuestro objetivo es proporcionar algo a los desarrolladores para que puedan construir rápidamente su tienda en el framework. Ahí lo tienes.

Entonces, en la V2, ¿tendrás la capacidad de usar solo Remix además de los componentes del servidor o solo Remix? En este momento, solo es Remix. Todavía estamos pensando en cómo encajar el componente del servidor de React en Remix. Pero sí, eso son solo detalles. Los desarrolladores realmente no deberían preocuparse por el componente del servidor de React o los detalles de implementación del framework. Pero si tienen que hacerlo, no es exactamente donde queremos estar. Por lo tanto, esa separación de responsabilidades entre qué código se ejecuta en el servidor y qué código se ejecuta en el cliente es algo que ustedes quieren hacer menos relevante en Hydrogen. En Hydrogen, diría que el objetivo sería más en el sentido de que los desarrolladores solo deberían preocuparse por construir características para su tienda personalizada y no preocuparse por un error en React o en el componente del servidor de React. Creo que ahí es donde se traza la línea, los desarrolladores no deberían tener que preocuparse por el componente del servidor de React, deberían preocuparse por cómo hacer que la internacionalización funcione, cómo agregar un formulario de tarjeta, y queremos que eso sea como un simple plop, solo agregas este componente y le das algunas propiedades y listo, terminaste. Y nunca debería ser complicado construir una tienda personalizada. Eso es genial, lo que me gusta especialmente del control de código fuente es que ese aspecto es como que ahora mismo, si haces ediciones en tu tienda sin Hydrogen, y si cometes un error, básicamente tienes que tener dos versiones de tu tienda, una de prueba y una de producción. ¿Eso es lo que generalmente hacen las personas antes de Hydrogen? ¿Lo sabes? Para Hydrogen, eso es más parte de la infraestructura de Oxygen. Oxygen te permite tener múltiples entornos. Tenemos vistas previas de tu tienda antes de implementar en producción. Eso es un aspecto. Aún faltan algunas APIs, por ejemplo, los borradores que puedes tener en la tienda en línea no están disponibles en la API de la tienda. Por lo tanto, actualmente, las personas no pueden ver productos en borrador en Hydrogen. Eso es una de las cosas en las que estamos tratando de llenar la brecha en este momento con el equipo de la API. Entendido. Eso es realmente genial. Puedo decir que definitivamente cuando vi el contenido de Hydrogen, Oxygen, pensé en lo que estoy trabajando versus en qué están trabajando estas personas. Definitivamente mucho más complicado de lo que estoy haciendo. Pero eso es genial. Creo que en mi caso específico, solo he estado en el equipo principal, comencé con automatizaciones durante un año, luego me mudé a los proyectos de Pixels, que inspiraron el uso de CodeMirror aquí para que las personas agreguen su propio código y finalmente me mudé a Marketing Insights, que es en lo que Covey ha estado trabajando durante el último mes. Ahora estamos profundizando más en la creación de muchos gráficos y cosas así.

13. Presentación de Polaris Viz y Miembros del Equipo

Short description:

En esta parte, discutimos Polaris Viz, una biblioteca de interfaz de usuario de código abierto similar a Material UI. Ofrece componentes personalizables, especialmente útiles para construir paneles de control y mostrar gráficos. También nos presentamos, incluyendo nuestros roles en Shopify y nuestras experiencias con React y TypeScript. Helen comparte su trayectoria desde el análisis hasta React y su trabajo en el equipo de Hydrogen. Tal habla sobre su transición desde Java y C# hasta React y su rol en el equipo de correo electrónico en Shopify.

Tal vez puedas publicar en el chat, Covey, algo sobre Polaris Viz. Creo que Polaris Viz está disponible públicamente, ¿verdad? Sí, definitivamente. Eso es algo que tenemos mucho aquí, como Polaris es open-source igual que Polaris Viz. Estas son bibliotecas de interfaz de usuario equivalentes a Material UI, así que solo quería mencionarlo si no estás familiarizado con esas bibliotecas de interfaz de usuario. No son tan personalizadas, no son tan generales como Material UI, diría yo. Pero creo que tienen muchas cosas interesantes que puedes usar, especialmente si estás construyendo algo como un panel de control, especialmente con cosas como obtener gráficos de barras y cosas así de forma sencilla. Lo estamos usando en Shopify, así que necesitamos que funcione bien. Si no funciona bien para ti, probablemente lo arreglaremos porque necesitamos que funcione bien.

Vamos a ver aquí, empezaré conmigo mismo. Soy un desarrollador senior aquí en Shopify, llevo aproximadamente un año en Shopify. Actualmente estoy en el equipo de análisis de marketing. Lo que ayudamos es dar a los comerciantes de Shopify, a cualquier comerciante, la capacidad de analizar sus datos en cuanto a cómo están gastando su dinero en anuncios y qué tipo de retorno les está generando. Es un proyecto bastante nuevo y es mi tercer equipo en Shopify hasta ahora en el último año y ha sido muy divertido hasta ahora. Actualmente estoy en el equipo de marketing de Shopify. Uso mucho React y TypeScript todos los días y algo de Ruby en el backend pero no toco eso tanto en estos días. Eso es un poco sobre mí, ¿por qué no pasamos a Kavi?

Gracias. Soy Kavi, llevo aproximadamente el mismo tiempo en Shopify. Pero principalmente en marketing. Estoy en el front-end, así que React y TypeScript y en el navegador pero recientemente me alejé más hacia Ruby y sí, estoy basado en Victoria, BC. Eso es todo sobre mí, creo, también en marketing insights con el mismo. ¿Helen? Sí, mi nombre es Helen. Llevo cuatro años en Shopify ahora y actualmente trabajo en el equipo de hydrogen que es completamente React pero soy bastante flexible. A veces tengo que trabajar con RubyStack o cualquier otra cosa para que las cosas funcionen. Puede ser en cualquier lugar siempre que necesite hacer las cosas. Soy bastante flexible en ese sentido. Cómo llegué a React es que mi empresa anterior estaba construyendo con eso y no sabía nada sobre React. Pero luego sabía mucho sobre instrumentar análisis y luego hubo un gran problema. Los análisis en una aplicación de una sola página, ¿qué? Como todos saben, los análisis en una aplicación de una sola página no es lo más fácil de manejar. Así es como entré en React y he estado en todo el framework durante bastante tiempo y ahora Hydrogen, de vuelta a una aplicación de una sola página ahora. Es como un círculo completo ahora. Sí, eso es lo que pensé. La broma recurrente en línea es que estamos volviendo a PHP. Muy bien, veamos. Las cosas vuelven a su lugar, me encanta. Gracias Helen, pasemos a Tal.

Hola a todos, sí, mi nombre es Tal. Llevo unos ocho meses en Shopify más o menos. He estado trabajando en el equipo de correo electrónico, principalmente haciendo front-end con React. Sí, y lo que hacemos básicamente es permitir a los comerciantes, supongo, interactuar mejor con los clientes, aumentar las conversiones y los ingresos. Sí, eso es todo más o menos. ¿Cómo llegaste a React, Tal? Bueno, mi experiencia previa fue con Java y C#. La empresa en la que trabajaba... Sentí que ya no estaba progresando. Así que empecé a tomar algunos cursos en línea. Estaba buscando proyectos de código abierto a los que pudiera contribuir, lo cual realmente me ayudó y me dio confianza para encontrar y conseguir un puesto. Luego encontré un trabajo antes de eso. Y, después de aproximadamente un año, me fui. Dejé ese trabajo y me uní a Shopify. Interesante, un dato poco conocido, Tal y yo trabajamos juntos en esa última empresa. Y yo era el gerente de ingeniería allí. Tal llegó. ¡Qué talento! Tuve que intentar conseguirlo en Shopify.

14. Viaje de React y Antecedentes

Short description:

Entonces, no somos el mismo equipo, pero estábamos bajo el mismo paraguas. Muy contento de tenerlo. Parece que le va muy bien. Ha sido un gran viaje hasta ahora, sin duda. Increíble. Daniel. ¡Hola, qué tal? Sí, en realidad trabajo con Alan. Estoy en el equipo de Hydrogen. Sí, antes solía hacer los mismos componentes, como componentes de interfaz de usuario, en otro equipo de Shopify. Llevo alrededor de tres años. Sí, trabajando en Shopify, un poco más enfocado en React. Originalmente estaba trabajando con Rails antes, y creo que nadie estaba trabajando en el frontend, y recuerdo en otra empresa anterior que era un desastre el frontend. Así que empecé a tomar eso y luego empecé a aprender, oh, ¿qué es esta cosa llamada React que algunas personas de Facebook lanzaron? Y así es como empecé. Pero luego poco a poco empecé a interesarme por los frameworks, y por eso me uní a este equipo de Hydrogen, que es, no sé, para aquellos que no están familiarizados, es un framework para construir tiendas personalizadas en Shopify, y recientemente trabajamos con el equipo de Remix para construir sobre eso. Así que ha sido muy divertido, porque he tenido muchas oportunidades de trabajar con esas partes del código base de Remix, y también Hydrogen, y ha sido divertido. Así que sí. Genial. Increíble, así que parece que tenemos bastantes personas con diferentes antecedentes. Sí, interesante, en cuanto a React, yo mismo me metí en eso por accidente, fue como, me uní a la misma empresa que Tal hace unos años, y en ese momento se había vuelto popular a finales de 2015, por alguna razón cuando me uní mi jefe dijo, ¿puedes construir esto en React? Y yo dije, probablemente. En ese momento estaba usando Angular y Ember, no sé si alguno de ustedes ha usado EmberJS, pero era bastante popular. Y creo que lo que sucedió fue que hicieron una actualización, hicieron un Ember 2.0 que se suponía que era mucho mejor. Pero básicamente rompió Ember 1. Así que la gente se molestó y simplemente no lo actualizó y terminó quedando obsoleto. Aunque ayer vi un anuncio de trabajo en el que decía, no es necesario saber Ember, buscamos desarrollador de EmberJS por una cantidad ridícula de dinero. Y pensé, wow, es muy interesante que todavía esté presente, pero sí, supongo que todos llegamos a React de diferentes maneras.

Entonces, no somos el mismo equipo, pero estábamos bajo el mismo paraguas. Muy contento de tenerlo. Parece que le va muy bien. Ha sido un gran viaje hasta ahora, sin duda. Increíble.

Daniel. ¡Hola, qué tal? Sí, en realidad trabajo con Alan. Estoy en el equipo de Hydrogen. Sí, antes solía hacer los mismos componentes, como componentes de interfaz de usuario, en otro equipo de Shopify. Llevo alrededor de tres años. Sí, trabajando en Shopify, un poco más enfocado en React. Originalmente estaba trabajando con Rails antes, y creo que nadie estaba trabajando en el frontend, y recuerdo en otra empresa anterior que era un desastre el frontend. Así que empecé a tomar eso y luego empecé a aprender, oh, ¿qué es esta cosa llamada React que algunas personas de Facebook lanzaron? Y así es como empecé. Pero luego poco a poco empecé a interesarme por los frameworks, y por eso me uní a este equipo de Hydrogen, que es, no sé, para aquellos que no están familiarizados, es un framework para construir tiendas personalizadas en Shopify, y recientemente trabajamos con el equipo de Remix para construir sobre eso. Así que ha sido muy divertido, porque he tenido muchas oportunidades de trabajar con esas partes del código base de Remix, y también Hydrogen, y ha sido divertido. Así que sí. Genial. Increíble, así que parece que tenemos bastantes personas con diferentes antecedentes. Sí, interesante, en cuanto a React, yo mismo me metí en eso por accidente, fue como, me uní a la misma empresa que Tal hace unos años, y en ese momento se había vuelto popular a finales de 2015, por alguna razón cuando me uní mi jefe dijo, ¿puedes construir esto en React? Y yo dije, probablemente. En ese momento estaba usando Angular y Ember, no sé si alguno de ustedes ha usado EmberJS, pero era bastante popular. Y creo que lo que sucedió fue que hicieron una actualización, hicieron un Ember 2.0 que se suponía que era mucho mejor. Pero básicamente rompió Ember 1. Así que la gente se molestó y simplemente no lo actualizó y terminó quedando obsoleto. Aunque ayer vi un anuncio de trabajo en el que decía, no es necesario saber Ember, buscamos desarrollador de EmberJS por una cantidad ridícula de dinero. Y pensé, wow, es muy interesante que todavía esté presente, pero sí, supongo que todos llegamos a React de diferentes maneras.

Lo que quiero hacer ahora es dar la oportunidad a las personas aquí presentes de hacer preguntas. Pueden escribirlas en el chat, siéntanse libres de abrir su micrófono. Cuéntennos un poco sobre ustedes. Si no, continuaremos. Y básicamente voy a aprovechar su conocimiento en algunas cosas. Y una cosa que quería saber es que tienen mucho contexto en Shopify, alrededor de tres o cuatro años, ¿cómo ha cambiado para ustedes escribir en React? ¿Comenzaron a escribir, cuándo comenzaron, estaban allí cuando comenzamos a escribir en React? ¿Cómo fue eso? ¿O si no, en qué etapa se unieron? ¿Solo en la web? ¿Nuevos repositorios? ¿Cómo fue? Puedo intentarlo. Bueno, para mí, fue como, React es cómo me metí en esto, como dije, fue como una emergencia. Necesitaba arreglar algo y no tenía ningún conocimiento de cómo se codifica React y todo eso. Así que estaba emparejando con otro ingeniero que conocía React y era como, necesito hacer esto. Solo dime dónde tengo que ir en el código base y trato de entenderlo desde allí. Y a medida que pasa el tiempo, aprendí sobre React y es más como tropezar en el camino tratando de entender cosas aquí y allá. Y al final, se volvió familiar, pero diría que no lo suficientemente familiar como para entender qué está sucediendo hasta que necesito construir un componente completamente nuevo para entender qué está sucediendo con React. Y diría que ese proceso fue como, está bien, es el proceso de aprendizaje, es como hacer las cosas de manera rápida. Y en comparación con ahora, donde hay mucho más conocimiento, especialmente en un momento en el que estaba aprendiendo sobre el nuevo componente del servidor de React 18, no solo leímos el RFC y dijimos, oh, está bien, probablemente así es como funciona. Fuimos a React Co y dijimos, ¿qué está pasando en el mundo? ¿Cómo funciona? ¿Cómo funciona el streaming? ¿Cómo funciona el planificador de trabajo? Y luego descubrimos cada detalle, como, está bien, si va al lado del cliente, ¿qué está haciendo en el mundo para descargar los componentes del cliente y luego mantener una referencia de ellos? Luego, en el futuro, si otros componentes van a los mismos componentes, usamos el mismo módulo que ya se evaluó. Es como adentrarse mucho en la comprensión, como los desarrolladores de Node React tienen que hacer eso, pero nosotros necesitamos comprender el nuevo protocolo. Y lo hicimos. Y ese proceso llevó mucho tiempo. Al principio, si lo piensas como desarrollador, oh, es solo un nuevo lenguaje de programación, es solo una cuestión de sintaxis. Pero no, este es como, tuvimos que profundizar mucho y creo que incluso eso me llevó como tres meses para entender ese código base. Lo suficientemente bien, pero no lo suficientemente bien. Wow, ¿así que estás diciendo que tuviste que adentrarte en el código base de React para entender mejor los componentes del servidor? Sí, exactamente. Wow, y ¿qué dirías que, al mirar el código base de React, no anticipaste lo que viste? ¿Donde dijiste, oh, esto realmente tiene sentido, o es como, huh, un poco de ambas cosas? ¿Cómo es leer ese código diferente a leer el código que los clientes usan en Shopify, ya sabes a lo que me refiero? Es bastante diferente en realidad. Si es código que usarías como desarrollador en cualquier framework, es bastante obvio. Es como, oh, solo colocas un componente aquí.

15. Entendiendo la Complejidad del Código de React

Short description:

Cuando te sumerges en la fase del código de React, puede parecer abrumador y complejo. La interconexión de funciones y la naturaleza recursiva del código pueden dificultar su seguimiento. La consola de registro se vuelve esencial para rastrear el flujo y comprender el orden de ejecución. Me llevó un tiempo comprender las complejidades del código.

Aquí es donde defines una ruta para tu enrutador o algo así. Es bastante obvio, en términos de cara al desarrollador. Pero cuando entras en la fase del código de react , parece que nada está conectado, pero todo está conectado. Así que obtienes esta función de programación, que llama a esta otra función, que hace el análisis. Y la otra es como, recursivamente en algunas otras funciones. Es extremadamente difícil de seguir y terminas poniendo el registro de la consola en todas partes para seguir las migas de pan de dónde y hacia dónde voy. Así que es recursivamente como en el árbol en una especie de situación de matriz loca. Y luego, debido a que es un programador de trabajo, ni siquiera sabes cuándo se programará para ejecutarse en el siguiente. Así que simplemente es complejo. Y eso me llevó mucho tiempo entender qué está pasando.

16. Explorando la Base de Código de React y Haciendo Contribuciones

Short description:

Cuando se explora la base de código de React, console.log puede ser una herramienta útil para comprender la funcionalidad del código. El código de React carece de comentarios, lo que dificulta comprender el propósito de las funciones sin declaraciones de console.log. El repositorio de React no proporciona una introducción que explique el funcionamiento interno del código. Para explorar el paquete de React, los desarrolladores a menudo copian el código relevante en sus propios proyectos y utilizan herramientas como NPM alias link para modificarlo. Los depuradores como el depurador de BS code también pueden ayudar a comprender casos complejos. Sin embargo, contribuir a proyectos de código abierto como React y Remix aún puede parecer desalentador debido a la complejidad y la incertidumbre de identificar errores reales versus errores del usuario.

Y sí, es muy diferente. Wow. ¿Qué recomendarías a alguien que quiere leer la base de código de React hoy? ¿Por dónde empiezan? Sí, ¿dónde deberían empezar? ¿Cómo pueden aprovechar mejor su tiempo al leerlo? Sabes, para evitar la confusión inicial o simplemente es parte de ello. Mencionaste que usabas console.log para ver los resultados, pero me gustaría saber tu opinión al respecto.

Personalmente, creo que console.log es lo mejor porque no hay comentarios en el repositorio. Es solo código puro y solo a partir de los nombres de las funciones, no puedes saber exactamente qué están tratando de hacer hasta que agregas algunos console.logs y descubres dónde se están ejecutando y en qué proceso. Y luego tienes que descubrir qué demonios está tratando de hacer la función. No creo que React haya publicado un manual que diga qué estamos haciendo en nuestro código. Si lo hubiera, habría sido mucho más fácil.

Oh, no, eso es un gran aporte. Helen, tenías la mano levantada. Sí, tengo curiosidad. Entonces, cuando intentas explorar los componentes internos de React, del paquete de React, ¿eso significa que cuando escribes estos console logs, ¿lo haces en los archivos de la carpeta node modules? ¿Realmente estás yendo a ese código? Ah, ya veo. Cien por ciento. Como el código de React es, en sí mismo, dependiendo de dónde estés, tratar de descargar su repositorio es casi imposible. Es mucho código y entender dónde necesitas estar es aún más difícil. Así que, muy a menudo, tenemos que ir y copiar un fragmento de código y ponerlo en nuestro propio proyecto para poder modificarlo. Y simplemente usamos NPM, como alias link, o simplemente enlazamos el archivo directamente para que funcione. Y luego podemos... Porque si... Sí, eso es lo que no entendería. Si agregas un console log en el paquete de NPM, ¿cómo lo vuelves a compilar? ¿O cómo haces que se ajuste a esos cambios?

Bueno, descargamos el módulo ES, así que al menos es legible. Correcto. No estamos lidiando con código compilado aquí. Porque hacemos referencia al archivo, no al archivo del módulo, sino al archivo real como parte de pretender que estamos creando un nuevo paquete, que es una copia de React, y luego simplemente enlazamos eso. Oh, loco. Sí, es confuso incluso configurarlo, seguro. Wow, eso es muy interesante. Sé que Daniel, tenías la mano levantada, por favor. Sí, recientemente tuve experiencia con Remix. Por ejemplo, estábamos tratando de modificar algo, y generalmente los repositorios, si tienes suerte, tienen algún tipo de entorno de prueba incluido, y generalmente también están desarrollando en él. Entonces, si descubres cómo configurarlo, probablemente sea más fácil de ejecutar. Y como dijo Ellen, tanto los Console Logs funcionan, como descubrí recientemente el depurador de BS code, donde simplemente ejecuto el depurador, y luego lo recorro muy lentamente para tratar de entender qué están tratando de hacer allí, porque a veces hay tantos casos especiales que están tratando de manejar que si no voy despacio, me pierdo lo que están tratando de hacer. Y sí, como dijo Ellen, es como, creo que lo que hacen en Remix, es que tienen... Lo hacen, digamos, compilan el código en un distribuible, y luego lo copian en la carpeta node modules, del entorno de prueba que crean. Así que se inicia una modificación, se vuelve a hacer. Entonces tienes la última versión. Si estás modificando, quieres probar algo, así que supongo que teóricamente podrías hacer lo mismo para otros, no sé, proyectos que... Proyectos de prueba que tienes. Puedes tener el módulo node, los node modules, y luego vincularlo directamente, y de esa manera podrías obtener la última versión. Sí. Entonces, Daniel y Ellen, ¿se sienten ahora, más seguros para hacer contribuciones de código abierto a Remix o React, ahora que han explorado el código? Como alguien que, cuando lo pienso, digo, oh, hombre, eso es desalentador. ¿Contribuir a React, quién soy yo, sabes a lo que me refiero? Pero ahora, como forma parte de su trabajo, lo han explorado, ¿se siente menos o más así? Diría que es relativo. Quiero decir, realmente depende de la complejidad de las cosas que estamos tratando de solucionar. Para mí, diría que todavía es desalentador porque, en cierto sentido, no sabes si es un error real o no, o si simplemente lo estás usando incorrectamente y luego resulta que no estaba previsto. Y sí, diría que todavía se siente igual. Todavía se siente un poco desalentador contribuir a proyectos de código abierto. Sí, se siente como si tuvieras que, perdón por interrumpir. Adelante, Elizabeth. No, no, no, está bien. Adelante.

17. Mantenedores, Depuración y Aplicaciones de Primera Parte

Short description:

A veces, como desarrollador, puede parecer que tienes que hablar con los mantenedores para determinar si algo es un error o no. Los mantenedores tienen mucho poder sobre la base de código y sus decisiones pueden influir en tu trabajo. No se trata solo de enviar código, sino de trabajar en colaboración. Es interesante ver diferentes enfoques para comprender el código, como usar console.log o un depurador. Ambos métodos tienen sus ventajas y pueden ser efectivos. Es importante encontrar un flujo de trabajo que funcione mejor para ti. Cambiando de tema, hablemos de las dificultades y experiencias de trabajar en el equipo de correo electrónico, que es una aplicación de primera parte dentro de Shopify. Escribir una aplicación de primera parte tiene sus desafíos, especialmente cuando se trata de trabajar dentro del entorno de Shopify. Es un contexto diferente, pero también una oportunidad para crear una experiencia de usuario fluida.

Sí, a veces, como dijiste, parece que tienes que hablar con las personas que son los mantenedores para averiguar si es un error o no, y también para acordar previamente un enfoque, porque si no, sí. Sí, probablemente tengan más contexto que tú sobre dónde vas a colocar el código y qué hacer. Y hay algunas características que definitivamente no te permitirán mover en la dirección que ellos no quieren. Así que parece que los mantenedores tienen mucho poder sobre la base de código. Entonces, aunque puedas saber cómo funciona, podrías influir en sus decisiones. Sí, no es solo como quiero enviar el código y ya está. Tengo que trabajar en ello un poco más que en mi propia base de código. Así que eso es divertido.

Sí, creo que hay un par de cosas interesantes al respecto. Una de ellas es cómo ambos describieron su proceso de comprensión. Y uno de ustedes mencionó console.log, luego mencionaste el depurador. Y encontré eso como un flujo de trabajo interesante porque sé que cuando empecé, algunas personas me decían `Oh, no conoces el depurador, ¿qué te pasa?` Y esa es un poco la forma escolar en la que fui criado. Y luego leí este libro llamado `Coders at Work`. Y luego vi a algunos, creo que uno de los principales contribuyentes a Linux o la invención se ve así exactamente. Y él simplemente dice, simplemente imprimo todo el estado. Y piensas, bueno, supongo que eso funciona para él. Entonces, lo que sea que haga que funcione más rápido, tal vez alguien necesite un depurador. Pero supongo que si ese es tu flujo y cómo trabajas, definitivamente es una forma válida y parece que se puede hacer mucho, ¿sabes a lo que me refiero? Así que sí, solo quería comentar eso porque pensé que era una forma particularmente interesante.

Entonces, si puedes hacer un curso sobre React o Remix y terminé teniéndolo en Udaby. Así que quiero cambiar un poco aquí para averiguar un poco sobre lo que TAL han estado haciendo en el equipo de correo electrónico. La aplicación de correo electrónico es una aplicación de primera parte. ¿Cuáles han sido algunas de tus dificultades hasta ahora trabajando en ella, lo bueno y lo malo, y cómo te resulta trabajar en un entorno de primera parte porque no estás realmente en la web de Shopify, pero estás en Shopify, o no estás realmente en la web, pero estás en la web y el núcleo, ¿verdad? Entonces, ¿cómo es escribir una aplicación de primera parte? Sí, exactamente.

18. Desarrollo de React y TypeScript

Short description:

Abrir React DevTools fue un desafío. El editor de texto enriquecido en el correo electrónico es la parte más complicada. Usamos la biblioteca Slate. Todos estamos escribiendo en TypeScript y tenemos experiencias positivas con él. TypeScript tiene muchos beneficios y hace que el código de producción sea más seguro. Acostumbrarse a TypeScript lleva tiempo, pero vale la pena.

Sí, eso es definitivamente algo a lo que no estoy acostumbrado, porque en primer lugar, como una aplicación en el administrador de Shopify, ya no... Sí, quiero decir que el contexto es un poco diferente, ¿verdad? Porque estás dentro de un Iframe. Así que siento que esto es lo primero que fue un desafío para mí. Abrir React DevTools, quiero decir, se ve diferente. Creo que hay una forma de hacerlo, que estoy tratando de averiguar cómo tenerlo como parte de las herramientas de desarrollo de Chrome. O lo que usamos ahora es una ventana externa de DevTools, lo cual es una experiencia un poco diferente. Así que diría que eso fue definitivamente uno de los desafíos más difíciles. Sí. Uno de los desafíos cuando comencé a trabajar en esto, fue definitivamente diferente a lo que hacía antes. Y luego, específicamente para el correo electrónico, creo que probablemente lo más difícil que estamos haciendo es el editor de texto enriquecido. Básicamente, quieres permitir que un usuario pueda agregar texto, botones, lo que sea que necesite. Básicamente, crear un correo electrónico, como si estuvieras en Google Docs y creando un documento, una experiencia muy similar. Deberían poder seleccionar el texto y luego modificarlo cambiando fuentes, colores, etc. Así que diría que esta es la parte más complicada, al menos para mí hasta ahora, y hablando de código abierto, lo que usamos es una biblioteca llamada Slate, y definitivamente, quiero decir, no es muy sencilla. Tenemos ayudantes, pero aún así es bastante desafiante, al menos para mí hasta ahora. ¿Entonces están escribiendo todo en TypeScript, verdad? ¿Todo sigue siendo más o menos lo mismo? Sí, eso es correcto. Entendido, entendido. Y me da curiosidad, no estoy seguro si podrían compartirlo más públicamente, pero Daniel y Helen, ¿están escribiendo en React o están escribiendo en otro lenguaje? Definitivamente en React con Hydrogen. Todo está basado en React. Entendido, entendido. ¿TypeScript? TypeScript, sí. Supongo que no siempre es 100% React, pero sí, en su mayoría. De acuerdo, de acuerdo. Sí. Entonces, creo que sí, todos estamos escribiendo TypeScript y me gustaría saber sus opiniones hasta ahora. Yo lo he estado usando durante unos dos años pero en serio durante aproximadamente un año. Y sí, definitivamente puedo ver cómo solía escribir, era como, podría compararlo con un vaquero. Simplemente escribías tu código, pero solo escribías y esperabas lo mejor cuando escribías con TypeScript, de alguna manera, como si estuvieras ejecutando pruebas, pero hay muchas declaraciones condicionales. Hay muchas cosas que me di cuenta de que, wow, esto atrapa muchas cosas de antemano. Pero me llevó un tiempo acostumbrarme y todavía me estoy acostumbrando a los tipos. Y, básicamente, cuando hice el taller hoy, quería evitar eso. Así que simplemente usé JavaScript. Y creo que mucha gente tal vez no lo sepa. Así que comencé con JavaScript en un proyecto personal, probablemente usaré JavaScript porque solo quiero evitar, ya sabes, lo antiguo, ya sabes, porque si terminas usando any, terminas preguntándote, ¿por qué estás usando TypeScript, pero me gustaría saber qué piensas y cómo ha sido tu experiencia con TypeScript hasta ahora. Bastante positiva, pero sí, acostumbrarse a ello. Y esto está abierto para cualquiera, por supuesto. Me gustaría expresar mi amor por TypeScript. Me he vuelto más obsesionado con él. Y todavía estoy descubriendo nuevas capacidades que tiene especialmente para inferir tipos en tiempo de ejecución. Hay tantos beneficios, creo que es aterrador. Usar un lenguaje sin tipos como JavaScript en producción. Creo que es una idea aterradora que Shopify solía ejecutarse en eso, y todos estos diferentes frameworks. Es difícil para mí imaginar un tiempo antes de TypeScript o cuando el código de producción en un navegador era seguro. Pero sí, no sé. Me encanta TypeScript, al menos hasta ahora. Microsoft no ha hecho nada que me aleje de él, ese tipo de cosas. Eso es genial. ¿Alguna otra opinión? Quiero decir, creo que comparto una opinión similar, como quiero decir, como TypeScript a veces me confunde, pero sí, creo que en su mayor parte, sí, cuando comencé a usar TypeScript, fue difícil, pero no sé. Para mí, creo que solo se trata de acostumbrarse a ello. Y hoy en día me gusta mucho más, en comparación con cuando comencé.

19. TypeScript: Una Relación de Amor y Odio

Short description:

TypeScript es una relación de amor y odio. Es genial cuando las expectativas son claras, pero desafiante cuando se trata de especificaciones cambiantes y tipos complejos. A pesar de las frustraciones, TypeScript brinda seguridad y beneficios a los desarrolladores. Refugiarse de la complejidad dentro de nuestro ecosistema ha llevado a una mayor apreciación y un entorno de desarrollo cómodo. Contar con un sistema bien construido y herramientas como ESLint brinda un soporte adicional. TypeScript, junto con otras herramientas de Microsoft, ha tenido un impacto significativo. Gracias por unirse y hacer tiempo para esto.

Y hoy en día me gusta mucho más, en comparación con cuando comencé. Sí, creo que eso es, y alguien más tiene algo que compartir, pero sí, puedo compartir algo. Sí, por favor. Diría que TypeScript es una relación de amor y odio. Me encanta cuando sabemos exactamente cómo es, es como esto es lo que estoy esperando y esta es la forma que sabemos que deberíamos esperar. Pero luego, lo odio en el sentido de que tenemos que construirlo para los desarrolladores y hay algunos puntos en los que no sabemos qué vamos a obtener, pero esperamos ciertas cosas que están allí, y luego no estamos muy seguros de lo que vamos a devolver porque esa especificación también está cambiando. Entonces, ¿cómo escribes un TypeScript para eso? Es como, y también como propagar a través de eso es simplemente muy complicado y es difícil escribir para eso, pero luego tenemos que hacerlo, principalmente porque estamos tratando con desarrolladores que se beneficiarían mucho si supieran qué van a obtener y qué deberían ingresar allí. ¿Cómo deberían ingresarlo para obtener lo que querían? Y toda esa forma es difícil. Y muy a menudo, porque tuvimos que lidiar con TypeScript, llegó al punto en el que, es demasiado complejo para TypeScript. ¿Qué quieres decir? Sí, adelante, Daniel. Ese es el ejemplo exacto del que quería hablar, que es genial hasta que TypeScript te dice que las cosas son demasiado complejas, me encanta este error específico que dice que tus tipos son demasiado complejos. Y yo digo, ¿qué es eso? ¿Qué debo hacer al respecto? Es como, sí, creo que si los tipos son demasiado complicados, es cuando realmente puedes frustrarte. Pero si todo es simple y comprensible, entonces es genial. Pero tan pronto como empieces a hacer algunos tipos realmente complicados, puede ser realmente frustrante. Así que creo que esa es la parte en la que dices, bueno, no sé si lo estoy haciendo incorrectamente o, no sé. Aún así, creo que vale la pena, cuando lo haces funcionar y luego, todo es genial. Te brinda tanta seguridad, pero sí, a veces hay momentos frustrantes en los que solo quieres terminar con la función. Sí, no voy a pasar horas quejándome frente a la pantalla. Eso es. Sí, creo que he estado protegido de esa complejidad de muchas maneras, porque vivir en un mundo donde los datos que recibes de nuestras capas de API están todos tipados y todos los paquetes que usamos en la web están tipados. Y así estás muy protegido de esa complejidad adicional que vendría de construir cosas desde cero o simplemente usar cosas que existen fuera de nuestro agradable pequeño ecosistema. Así que creo que ese refugio me ha llevado a apreciarlo mucho más y a construir con él de una manera más cómoda, eso seguro. Sí, definitivamente, tener un sistema bien construido, especialmente como un buen sistema que puede ayudarnos, ya sabes, a pasar por pruebas adicionales y cosas así, para protegerte aún más. Recuerdo cuando comenzamos por ejemplo con ESLint y lo hicimos de una manera en la que, si tenías un error, rompería tu código real. No solo lo mostraría en el navegador, simplemente lo rompería, no lo volvería a compilar. Y eso era común y en algunas partes de React, a la gente le gustaba hacer eso. Y ahora lo hacemos, es como, bueno, la fase de compilación es cuando hace el refugio adicional y te ayuda también allí. Pero sí, siento que, ya sabes, con TypeScript, sí, definitivamente siento esa relación de amor y odio. Y es bueno que las cosas que Microsoft está creando, como VS code, TypeScript, son geniales. No puedo imaginar, como, recuerdo que estaba pasando por diferentes ideas todos los días y ahora solo pienso, bueno, realmente me gusta esta. No quiero cambiar. Gracias a todos por unirse. No quería prolongarlo más. No puedo pensar en nada en particular, pero solo quiero asegurarme de que, ya sabes, gracias por hacer tiempo para venir aquí. Espero que el taller haya sido bueno para aquellos que lo disfrutaron.

Watch more workshops on topic

TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
In this workshop, we will see how to adopt Orama, a powerful full-text search engine written entirely in JavaScript, to make search available wherever JavaScript runs. We will learn when, how, and why deploying it on a serverless function could be a great idea, and when it would be better to keep it directly on the browser. Forget APIs, complex configurations, etc: Orama will make it easy to integrate search on projects of any scale.
Node Congress 2022Node Congress 2022
128 min
Back to the basics
WorkshopFree
“You’ll never believe where objects come from in JavaScript.”
“These 10 languages are worse than JavaScript in asynchronous programming.”
Let’s explore some aspects of JavaScript that you might take for granted in the clickbaitest nodecongress.com workshop.
To attend this workshop you only need to be able to write and run NodeJS code on your computer. Both junior and senior developers are welcome.
Objects are from Mars, functions are from Venus
Let’s deep-dive into the ins and outs of objects and then zoom out to see modules from a different perspective. How many ways are there to create objects? Are they all that useful? When should you consider using them?
If you’re now thinking “who cares?“, then this workshop is probably for you.
Asynchronous JavaScript: the good? parts
Let’s have an honest conversation.
I mean… why, oh why, do we need to bear with all this BS? My guess is that it depends on perspective too. Let’s first assume a hard truth about it: it could be worse… then maybe we can start seeing the not-so-bad-even-great features of JavaScript regarding non-blocking programs.
React Advanced Conference 2022React Advanced Conference 2022
140 min
Getting Started with AG Grid and React – The Best Javascript Grid in the World
WorkshopFree
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation Live 2021JSNation Live 2021
31 min
Vite: Rethinking Frontend Tooling
Top Content
Vite is a new build tool that intends to provide a leaner, faster, and more friction-less workflow for building modern web apps. This talk will dive into the project's background, rationale, technical details and design decisions: what problem does it solve, what makes it fast, and how does it fit into the JS tooling landscape.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.