Uso de 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 camino a través de la documentación para encontrar lo que quieres?


En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.

Hussien Khayoon
Hussien Khayoon
Kahvi Patel
Kahvi Patel
86 min
30 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta masterclass cubre varios temas relacionados con el desarrollo de software, incluyendo el uso de la biblioteca CodeMirror para crear editores personalizados, explorando la configuración y los temas de CodeMirror, añadiendo múltiples editores y temas personalizados, implementando características de linting y autocompletado, y añadiendo autocompletado personalizado en CodeMirror. También discute las herramientas Hydrogen y Oxygen para crear tiendas personalizadas en Shopify, introduce la biblioteca Polaris Viz UI, y comparte las experiencias y antecedentes de los miembros del equipo. La masterclass enfatiza la complejidad del código 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, la adición de temas, linting y características 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 linting y autocompletado personalizado. Estaremos usando ReactCodeMirror, una biblioteca útil que simplifica el uso de CodeMirror. Sumérgete en el proceso de codificación y sigue las instrucciones.

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

¿Qué estamos haciendo con CodeMirror? Hoy, la agenda es, vamos a hablar sobre la biblioteca en sí. Vamos a hablar sobre una configuración básica. Vamos a agregar nuestros propios temas y usar temas adicionales que tienen. Agregar nuestro propio linting. Así, la capacidad de detectar algunos errores. Agregar un autocompletado general, algo más complejo de un autocompletado en JavaScript, y vamos a hacer un autocompletado más personalizado.

Voy a 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 obtener. Entonces, ¿por qué estamos hablando de esto? CodeMirror en sí es una biblioteca muy, muy, muy poderosa. Te permite crear tu propio editor de la nada, y tiene muchas características y mucha documentación. Cómo aterrizamos en este problema fue en Shopify, tenemos algunos lugares en nuestra aplicación que los comerciantes usan. Diferente en diferentes bases de código que otros desarrolladores usan en nuestros documentos, donde queremos mostrar un editor de código, ya sea que puedas editarlo o no, en diferentes idiomas, agregando cierta sintaxis. A lo largo de la aplicación, y Shopify ha existido 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, por lo que parte de lo que hice fue aprender CodeMirror y agregar una nueva característica donde los comerciantes pueden agregar su propio código, esencialmente, agregar su propio código y disparar eventos en esos códigos. Lo que eso significa es que un comerciante puede decir, después de hacer una venta, por favor envíe a Facebook el mensaje sobre mi venta, es decir, dígales que vendí algo, este producto en particular a este precio en particular con estos parámetros. Disparamos ese evento por ti, pero tú pones el código que quieres disparar porque quieres enviarlo a Facebook en cualquier otro lugar. Así que tuvimos que tener un entorno de codificación y eso es solo uno de los casos de uso que lo teníamos.

Entonces, creo que mucho 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 más genial, por así decirlo, pero generalmente, nos encontramos si hay algo por ahí que es mejor, tal vez no es lo mejor que deberías hacer, y todos sabemos eso y todos tenemos que tomar esas decisiones difíciles sobre ¿deberíamos usar esto? ¿Deberíamos hacer el nuestro? Y algo como esto que ya existía en la base de código que otros equipos estaban usando, era 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 es porque me encontré, he estado desarrollando durante unos 10 años. Encontré lo más importante, lo que estoy haciendo más no es escribir nuevo, cosas geniales y vanguardistas innovación. En general, estoy dando bibliotecas en el front end o backend, pero digamos front end, y tengo que, lo que llamo domarlas. Tengo que hacer que funcionen para lo que quiero que hagan. Al final del día, es agradable cuando la biblioteca simplemente funciona. Pero rara vez, ese es el caso porque los negocios significan código y los negocios hacen código complicado. Entonces, um, lo que tuve que hacer con CodeMirror y lo que nuestro equipo tuvo que hacer fue esencialmente hacer que funcione para nuestro caso de uso. Y fue un entorno donde ves documentación como esta y te emocionas porque es, es muy exhaustiva, pero documentación, lo que aprendí es muy agradable. Pero el problema es que cuando es muy exhaustivo, no significa que sea muy fácil averiguar cómo hacer lo que quieres. Así que tuvimos que hacer un linting. Tuvimos que hacer autocompletado. Tuvimos que agregar el nuestro, pero no era muy evidente a partir de los ejemplos, pero la documentación estaba allí. Así que vamos a pasar por aquí y vamos a empezar a codificar aquí. Pero pensé que esa introducción sería importante. Así que una cosa a tener en cuenta aquí es que estamos usando ReactCodeMirror. Esto simplemente hace que usar CodeMirror sea mucho más fácil. Puedes hacer tus propios envoltorios en lo que hacen nuestros equipos, pero esta biblioteca aquí es bastante útil. Esencialmente solo convierte las cosas en sus propios paquetes y verás que tenemos muchos paquetes aquí y eso es solo la arquitectura que decidieron hacer para permitirte y darte más flexibilidad. Dan algunos ejemplos básicos de lo que puedes hacer. Soportan múltiples idiomas, por lo que es fácil de usar fuera de la caja cuando estás usando React. Así que sigamos las instrucciones aquí. Una cosa que es genial acerca de StackBlitz es que en realidad no necesitas instalar estas bibliotecas directamente, por lo que deberías 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 línea de guía. También tocamos 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.

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

Como puedes ver aquí, ya me está pidiendo que tenga la lista 10-D aquí, así que no puedo ver mucho de lo que estoy haciendo. Vale. Me va a pedir que instale estos parámetros. Muy guay. No sé si te has dado cuenta, pero StackBlitz es realmente bastante, bastante rápido comparado con muchas de las cosas aquí. Y muchos de los otros tipos de entornos, creo que Code Sandbox particularmente es lo que usé. Y lo que es realmente interesante de su architecture es que todo creo que está escrito en, corrígeme si me equivoco, Covey está en WebAssembly, y simplemente cargado en tu navegador en lugar de, ya sabes, volver a tu code, lo siento, ir a la cloud cada vez que actualizas algo y pides cosas a un servidor. Hasta donde yo sé, eso es lo que hacen. Y es muy, muy rápido si lo usas. Así que no sé si te has dado cuenta de eso o si eres un usuario, acabo de descubrir esto bastante recientemente de una llamada.

Sí, hay una diferencia interesante entre cómo ejecutan code en CodeSandbox versus en StackBlitz. No conozco los detalles de ello, pero sí sé que StackBlitz es local, lo cual es genial. Sí, así que, gracias por eso, Covey. Así que como puedes ver aquí, tenemos una configuración básica de un editor de code. Y ves, realmente no necesitamos hacer mucho aquí, pero hay algunas sutilezas importantes. La primera aquí es, podemos controlar la altura. Algo bastante fácil aquí. Puedes hacer esto 250 si quieres. Verás que ha aumentado de tamaño. Ves aquí, tenemos un valor inicial. Y mi ratón se está volviendo loco. Y otra cosa que puedes hacer aquí es, puedes ver que tienes algunas cosas de serie, como el autocompletado. Por ejemplo, para el bucle for, lo tenemos aquí mismo. Podríamos hacer una declaración if. Va a hacer un bloque if de serie. No hay errores de linting ni nada de eso de serie. Pero puedes ver aquí, con la configuración básica, incluso puedes hacer algunos colapsos, lo cual es realmente agradable. Tienes esto, lo que se llama una línea de guía o la guía, 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 agradable de serie. Así que lo que hace esto posible es que tienes, estás conectado a estos plugins o paquetes de lenguaje. Y JavaScript te permite esencialmente 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, todo, cada característica que quieres añadir, puedes hacerlo a través de extensiones. Ahora, el problema con ello, encontré que la documentation es extensa. Pero también es confusa porque muchas veces lo que hacen es que usan su propia terminología en otros objetos y simplemente dicen como, oh, proporciona esto y facetas. Y lo que encontré con eso es como, estoy, ya sabes, es un poco abrumador y tienes que profundizar más para entender lo que realmente está pasando. No sé tú, pero a mí me gusta seguir ejemplos. Así que, y así es como intentaba hacer las cosas. Así que mucho de ello fue tratar de encontrar cosas y hacer cosas en línea. Y con la extensión de JavaScript, también puedes añadir, creo, TSX True aquí. Y creo que, te dará la capacidad de añadir cosas como divs, pero creo que tienen que estar dentro de algún JavaScript aquí no puedo recordar aquí. Vale. Déjame ver, ¿está aquí? Vale, no parece estar funcionando, pero eso está bien. Así es como van las demostraciones.

3. Añadiendo Estilos Básicos e Introduciendo Temas

Short description:

En esta parte, añadimos estilos básicos al editor CodeMirror añadiendo un borde. Nos encontramos con un pequeño problema pero lo resolvemos refrescando la página. Añadir estilos es un proceso sencillo, y exploraremos opciones más avanzadas, como añadir temas, en la siguiente sección.

De todos modos, vamos a añadir algunos estilos aquí. Así que tenemos el estilo. Vamos a añadir un estilo muy básico, y vamos a añadir solo un pequeño borde alrededor, solo para hacerlo un poco más agradable, solo para mostrarles que ustedes tienen acceso a cosas fuera de la caja aquí. Creo que espera que sea TSX. Está bien, le daré TSX. Así que veamos aquí. Uh oh. Bueno, esto es nuevo. Déjame refrescar aquí, a ver qué pasa. OK, así que ahora, refrescar al rescate. Tenemos nuestro pequeño borde aquí, todo funciona bien. Así que puedes ver antes, no teníamos eso. Fue solo cuestión de añadir un par de líneas aquí. Eso es algo que puedes hacer, puedes ser muy sofisticado con ello, y te mostraré cómo añadir temas en un momento.

4. Añadiendo Múltiples Editores y Temas Personalizados

Short description:

En esta parte, aprendemos cómo añadir múltiples editores en una pantalla usando 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 manejar el estado. También aprendemos cómo instalar temas personalizados y exploramos los temas disponibles en la documentación de React CodeMirror.

Así que vamos aquí y añadimos múltiples editores. El siguiente paso aquí es que quiero mostrarles cómo pueden tener múltiples editores en una pantalla. Todos serán responsables de su propio estado. Así que vamos a hacer eso. Pueden simplemente copiar y pegar, instalar los complementos que faltan, me encanta esto, y luego deberían estar listos.

Muy bien, así que pueden ver aquí, ahora tenemos un editor de JavaScript, tenemos un editor de HTML, y tenemos un editor de CSS. En términos del HTML, dentro de él, también obtendrán algo de autocompletado, como podrían hacer como sección aquí, y van a tener como un div, lo mismo aquí, y tal vez como un span dentro de aquí. Muy bien, o no, ahí vamos. Eso es un ejemplo de lo que pueden hacer aquí. El CSS no es tan útil para autocompletar, pero sí les da algunas etiquetas disponibles si quieren. Como podemos añadir un H2 aquí así, incluso podemos añadir un div. Así que sí les da algunas habilidades básicas. No sé si va a conocer los selectores o cosas así, pero sólo quería mostrarles que pueden usar múltiples lenguajes. Incluso pueden usar Python si quieren. Así que les mostraré lo fácil que es si quieren hacer un editor de Python. Así que vamos a entrar en el espejo de código de React, buscaré Python. Copiaré esto. Esto no está en las instrucciones, pero sólo quería mostrarles esto. Vamos a añadir este lenguaje aquí. Así que importar. Lo siento, mi teclado está teniendo algunos problemas por supuesto. Muy bien, vamos a añadir Python, reemplazar el CSS, veamos qué pasa aquí. Te permite instalarlo. Muy bien, así que ahora esto es Python, así que pueden ver que ya tengo algo de autocompletado. Hagamos un bucle for y es un bucle for de Python. La pestaña ya está ahí. Eso es bastante genial, eso es justo fuera de la caja. Ven que tomó dos segundos hacer eso. Así que, ahora una cosa interesante aquí es el cambio aquí, pueden ver que el estado es gestionado completamente por CodeMirror, así que no tienen que preocuparse por insertar los estados. Ellos proporcionan algunos ayudantes dentro del cambio, 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 manejar todo el estado dentro de ella. Verán algunos ejemplos aquí que podrían ser un poco complicados, podrían ser un poco complejos, pero hacen uso de esta actualización de vista para tener acceso a todo dentro de este documento, esencialmente el árbol de sintaxis es lo que vamos a ver más adelante.

Así que ahora que hemos construido esto, vamos a ver cómo instalar algunos temas. Así que una cosa que vamos a hacer aquí es añadir algunos temas personalizados. Y pueden ver aquí en la React Codemirror documentation, te han dado una lista de temas aquí que ya existen. Probablemente hay más, pero esto es algo genial, dependiendo de lo que te guste, y muchos desarrolladores, estas son nuestras preferencias. Algunas personas odian los modos claros, algunas personas quieren el modo oscuro, cosas así. Así que eso te da la opción, y es bastante agradable. Así que vamos a hacer eso. Así que vamos a importar este code aquí, o simplemente copiamos este code, copiamos y pegamos. Veamos qué sale, instalamos los paquetes que faltan. Y pueden ver aquí que tenemos diferentes temas aquí. Tenemos Sublime, GitHub Dark, Okadia. Incluso pueden tener GitHub Light si quieren. Así que pueden hacer GitHub Light. Así que, y pueden ver aquí, cada uno tiene sus propios estilos y colores, pero la funcionalidad todavía existe más o menos. Así que, bloque if, cosas así, listo para ir. Así que espero que estén siguiendo hasta ahora. Sé que estos son sólo ejemplos básicos, pero esto es algo que está justo fuera de la caja para ustedes. Pero ahora la pregunta se convierte en, ¿qué pasa si quieren hacer su propia tematización personalizada? Y esto es algo a lo que te dan acceso de una manera bastante agradable.

5. Añadiendo Tema Personalizado e Historial

Short description:

En esta parte, aprendemos cómo añadir 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 fue recientemente añadida a la documentación y proporciona una forma conveniente de implementar la funcionalidad de deshacer/rehacer. Al copiar el código proporcionado y seguir las instrucciones, podemos incorporar fácilmente estas características en nuestra aplicación.

Así que vamos a ver esta parte. Añadiendo nuestro propio tema personalizado. Así que aquí creamos un archivo llamado custom, custom theme.js. Así que cómo lo haces es que vas al botón de más aquí, custom theme.js y simplemente copias este code. Y vamos a copiarlo y a mirarlo. Y luego lo vamos a explicar aquí sólo para hacer las cosas más fáciles. Así que ahora que he copiado esto, por favor, adelante y añade el nuevo code justo debajo. Lo tengo para ti aquí. Así que volvamos a la app.tsx, añadamos eso, e instalemos las dependencias que faltan y las que dependen de ello.

Y puedes ver aquí que tengo dos ejemplos de JavaScript, uno con un tema personalizado y uno con el tema de serie. Así que puedes ver que hay algunas diferencias aquí. Principalmente en la sintaxis básica. Así que cuando hago un bloque if, digamos, veamos, hago cons test igual a cuatro. Haremos lo mismo aquí, pero verás que se verá diferente, ¿verdad? Así que te da cierto acceso. Y una cosa que te mostraré aquí es que tal vez podamos cambiar el color del comentario. ¿Y cómo funciona esto? Puedes ver en los temas personalizados, que tienes acceso a algo llamado lezer. Y funciona muy bien con el React CodeMirror. Lezer, si creo que lo estoy pronunciando correctamente, es una especie de analizador, un analizador de lenguaje escrito en JavaScript que te ayuda a escribir, ya sea a escribir tu propio analizador para un lenguaje o a entender tu propio analizador para un lenguaje. Así que, se integra muy bien. Y tal vez no lo estoy explicando de la mejor manera, pero esencialmente, te permite tener acceso a ciertas etiquetas en un lenguaje, ciertas variables. Así que, puedes ver aquí lo que hemos hecho es que podemos tener acceso específicamente a los comentarios de JavaScript. Y tener esa etiqueta, enviarla como un estilo, y luego darle su propio color. Así que, si voy aquí y digo, si es un color feo aquí, digamos azul, puedes ver aquí que los comentarios han cambiado de color. Así que, te da un acceso bastante minucioso. Y por qué eso es útil depende de tu organización. Tal vez quieren 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 de front-end cuando esto no te es dado. Como si alguien te da esto y no está disponible de serie, podría ser bastante, no catastrófico, pero podría llevar mucho tiempo y tu tiempo para averiguarlo. Y podrías no hacer una solución elegante. Así que, creo que esto te da muy mucho una solución muy elegante para poder personalizar tu propio tema.

Así que, suficiente sobre estilos. Vamos a entrar en algo realmente interesante aquí con el historial. Así que, este es un ejemplo dado de serie, pero creo que es realmente interesante de usar. Así que, lo que estamos haciendo aquí esencialmente es que vamos a tener nuestro propio historial y vamos a guardar esto en el almacenamiento local. Así que, guardar en el almacenamiento local no es algo muy único, pero tener acceso al historial en el almacenamiento local es lo que hace esto bastante interesante. Así que, este es un ejemplo reciente que añadieron. Y lo interesante de esto es que esto no solía estar en la documentación, creo, y ahora está ahí. Así que, si querías hacer esto antes, tal vez era un poco más complejo. Así que, una cosa que supongo que podríamos hacer como comunidad es añadir más a la documentación y tal vez debería hacer eso también y dar a la gente formas de hacer cosas que podrían ser útiles para ellos. Así que, sólo voy a copiar esto. Puedes hacer lo mismo. Ve a app.tsx. Instalaremos los comandos de paquetes que faltan y veremos qué obtenemos aquí. Muy bien, entonces, ¿qué estamos haciendo aquí? Ahora, vamos a tener, vamos a ver que realmente guarda lo que tenemos. Así que, si hago, no sé por qué siempre empiezo con un bloque if. Sólo haz un bucle for regular. Entramos aquí y decimos const s igual a cuatro. Así que, si voy aquí y añado otro bloque if, un bloque else. Ya sé que esto no existe en el alcance, pero hagamos algo así. Así que, si refresco 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 refrescar.

6. Explorando el Historial y Añadiendo 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 añadir nuestro propio linter y la filosofía detrás del enfoque de CodeMirror para el linting. Al usar extensiones, podemos conectar 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.

Entonces, eso es bastante genial. Entonces, si hago esto, sabes, vaya. Refrescar. Ahora, ves que está ahí y el historial está ahí lo cual es bastante genial. Sé que cuando estás añadiendo code, el historial puede ser muy importante, especialmente en este contexto cuando probablemente no tienes control de fuente, puede ser muy útil. Entonces, es realmente genial cómo lo están haciendo.

Esencialmente, tienes la capacidad a través del campo de historial aquí para tener acceso al estado y enviarlo como el estado inicial. Y luego a medida que se actualiza, y esto es lo que quiero decir con lo que la actualización de 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 añades al almacenamiento local. Así es como funciona. Y eso es muy fácil de hacer porque tienes acceso al estado tan fácilmente y puedes convertirlo en diferentes tipos de versiones como te parezca conveniente. Así que, espero que eso haya sido realmente genial de mostrar.

Vamos a seguir adelante y pasar a la siguiente etapa. Entonces, ahora vamos a añadir nuestro propio linter. Entonces, 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 fue algo que solo quería señalar allí porque tienen una filosofía muy interesante aquí. No te van a dar, al igual que el auto-completado, no te van a dar algo listo para usar. Dicen, el linting es muy específico, usa tu propio linter. Pero te daremos la capacidad de conectarte a nuestro code bastante fácilmente a través de nuestras extensiones. Entonces lo que haremos aquí es simplemente copiar esto y hacer un nuevo archivo llamado jslinter.js, ¿naming, verdad? Vale, entonces lo copiaremos. Entonces ahora tenemos nuestro linter aquí y haremos lo mismo y lo explicaremos más tarde. Pero solo quiero obtener una versión funcional primero. Entonces actualicemos nuestro code. Y vayamos a la app.tsx y actualicemos eso. Y comencemos con las dependencias faltantes como siempre. Muy bien. Entonces ahora lo que tenemos es, veamos aquí si realmente tenemos algún problema desde el principio aquí. Porque parece que podría no haber funcionado. JSlinter. Entonces tenemos una importación personalizada aquí. Veamos const. Ah, aquí vamos. Está funcionando. Solo creo que está un poco atrasado. Entonces una cosa aquí, podríamos hacer const. Oh, mi teclado está teniendo algunos problemas. Lo siento por eso a todos. Podríamos hacer cons test igual a cuatro. Entonces eso está bien. Pero ahora si intentamos reasignarlo, se quejará. Y dirá, intentando sobrescribir las pruebas, que es una variable constante. Entonces esto es algo que es bastante genial. Y cómo se gestiona esto es a través de este linter que escribimos. Entonces, ¿cómo funciona esto? Tienes que usar tu propio linter. Entonces en este caso, como ejemplo, estamos usando js-hint solo como un linter básico que es capaz de detectar tus errores. Cómo te facilitan esto es una vez que lo pasas a través de las extensiones, puedes tener acceso al estado del code a través de la vista. Y lo que estamos haciendo es pasar el code como texto a la función o parser de js-hint. Y luego somos capaces de deducir nuestros errores de aquí. Y luego pasamos por los errores y lo que esperan que hagamos es darles un objeto de diagnóstico.

7. Linting y Autocompletado

Short description:

El objeto de diagnóstico es donde estaban los errores y hasta dónde llegaron. Lo introducimos en un array y les damos este array. Así es como se hace en resumen. Puedes tener tu propio linter para introducir errores específicos. LintGutter, del paquete lint de CodeMirror, añade subrayado de errores. Las opciones de linting te permiten gestionar la rigurosidad de los errores. Esto es proporcionado por tu linter, como Jshint. Puedes tener una funcionalidad similar en cualquier idioma utilizando bibliotecas útiles como ESLint. Pasemos al autocompletado.

El objeto de diagnóstico es simplemente donde estaban los errores y hasta dónde llegaron. En este caso, estamos haciendo toda la línea solo para fines de demostración. Y luego podemos dar la gravedad y la razón, que proviene de js-hint. Y luego lo introducimos en este array y les damos este array. Y así es como pueden subrayar esto y decirnos que algo está mal. Así que esencialmente así es como se hace en resumen. Así que puedes tener, 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 serán un poco más complicados pero puedes obtener algo de la caja aquí que puede ayudar a los usuarios y saber que estos les van a causar errores en ese idioma en particular. Así que de nuevo, lo introducimos como una extensión con opciones y lo explicaré en un segundo con este LintGutter, todo lo que hace este LintGutter esto viene de serie de CodeMirror en uno de sus paquetes, del paquete lint. Y esencialmente, añade esto aquí para que pueda mostrarte tu error de una manera más clara. Así que hablemos de estas opciones aquí. Así que una cosa aquí es que en realidad es bastante estricto. Así que si hago esto, subrayará y dirá que falta un punto y coma. Otra cosa es que no creo que puedas simplemente llamar a una variable por sí misma, espera una expresión. Así que tal vez no quieras que estas cosas sean tan específicas. Así que 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í, añadamos estas opciones a tu linter aquí, puedes ver que ahora estos no te dan ningún error pero aún si intentas reasignarlo, te dará un error. Pero ya no le importan los puntos y coma. Así que esto no es algo proporcionado por CodeMirror. Esto es algo proporcionado por 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 es bastante genial de tener también. Así que con esto puedes tener algo como esto en cualquier idioma que quieras. Estas bibliotecas son muy útiles. Podrías, creo que ESLint, podrías usar también siempre y cuando estos paquetes jueguen bien y todo lo que necesitas que hagan es darte la capacidad de darte un error en una línea específica algo así como lo hace Jshint. Así que eso es en términos de linting. Ahora pasemos al siguiente paso sobre el autocompletado pero antes de eso, solo quiero hacer una pausa muy breve porque hemos pasado por mucho y ver si hay alguna pregunta específica. ¿La gente tiene problemas con las divisiones de pila en sí? ¿Cómo lo están manejando hasta ahora? Siéntete libre de dejarlo en el chat o en el discord, depende de ti. Así que Omar dice que todo está bien, eso es bueno hasta ahora. Bueno, solo esperaremos un par de segundos más. Mientras tanto, todo esto parece muy fácil pero te digo cómo van estas cosas. Fue muy complejo llegar a entender esto mientras estás tratando de hacer esto como en producción code. Muy bien, Sebastian también está bien. Así que también, podría ser útil expandir eso console porque si alguna vez tienes algún error como con el code aquí, entonces puedes debug y ver lo que estás registrando en la console si eso ayudaría. Oh, ¿te refieres a ahí? Sí. Sí, en realidad debería haber mencionado eso. Gracias Cubby. Pero sí, pasemos al siguiente paso ahora que es el autocompletado. Así que viste aquí, tenemos algo de autocompletado de serie. Oops. Así que tenemos algo de autocompletado de serie. Es bastante bonito pero tal vez quieras hacerlo un poco más complejo. Y aquí es donde, sabes, creo que es una parte realmente genial y es un poco compleja, pero también muy, muy poderosa. Así que lo que vamos a hacer aquí es crear un js doc completo que JS file y el nombre sé que es malo. Lo siento por eso de antemano pero solo quería conseguir algo que funcionara aquí para nosotros. Así que, lo añadimos aquí, veamos que se añadió complete js doc.js y dentro de él, vamos a pegar esto aquí, este code aquí y luego lo vamos a conectar en nuestras extensiones como siempre lo hacemos. Así que de nuevo, copia y pega aquí. Espero que tener todo el code aquí fuera realmente útil porque odio simplemente, sabes, cuando los tutoriales simplemente te dan la cosa que tú, el code que deberías introducir y luego no sabes exactamente dónde ponerlo. Y luego pasas mucho tiempo siendo como, ¿dónde pongo esto en realidad en mi code? Y esperaba evitar eso. Sé que es mucho más code, pero siento que eso 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 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.

Así que vamos aquí, probablemente tengamos que instalar algunas nuevas extensiones. Veamos aquí. Ahora hemos añadido la finalización de js doc. Veamos si realmente funciona. Entonces, ¿qué es una finalización de js doc? Añadimos nuestros comentarios aquí. Y si quieres añadir digamos, algo como un constructor, un constructor, obsoleto, lo que queramos aquí, y todo es para 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, de nuevo, proporcionándote algún autocompletado que es bastante específico. Porque ves ahora que estamos fuera del bloque de comentarios, o si tenemos comentarios regulares, no va a aparecer. Entonces, ¿cómo hace Codemeeror esto posible? Vale. 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 code esencialmente como un nodo al que puedes pasar y ser un poco más específico. Así que en este caso, lo que estamos haciendo es estamos comprobando el nombre del nodo anterior, así que obtenemos el nodo, lo procesamos, y puedes hacer un console.log de esto, y tal vez deberíamos hacerlo aquí para ver cómo se ve. Y mientras escribíamos, oh, creo que el objeto es demasiado grande. Así que tiene que estar en el navegador console. Vale, eso no es bueno, pero lo haremos. ¿Quizás se registró en el navegador? ¿Comprobaste en el... Sí, sí, se va a registrar, pero lo que haré, haré un a.name aquí. Genial. Puedes ver aquí que analiza cosas, como un nombre de variable, piensa que es un nombre de variable. Un bucle for, una declaración for, piensa que es un comentario de línea. Así que 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 están comprobando si esto es un comentario de bloque. Mira aquí, no puedo ver por causa de la cámara. Bueno, 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. Así que es bastante, creo, bastante, podría ser bastante costoso en términos de escribir esto, pero hemos tenido algunos code multilíneas muy grandes y no ha, no ha ralentizado las cosas. Pero de todos modos, ese no es el caso de uso general para el que lo estamos utilizando y parece estar funcionando bastante bien de serie. Ahora, en términos de lo que estás devolviendo que espera es donde comienza el autocompletado y luego tus opciones y también puedes proporcionar un regex. Y esto es en realidad, solo una optimization, particularmente solo para asegurarte de que mientras compilas esto una y otra vez, no hace un trabajo extra, hasta donde entiendo. Y luego aquí estamos proporcionando los tipos de auto-retorno, los JS docs que queremos hacer, incluso podemos añadir los nuestros aquí. Así que cuando venimos aquí y decimos algo como prueba, puedes ver que ahora está disponible. Así que todo esto es posible gracias al árbol de sintaxis. Y de nuevo, todo lo que estamos haciendo es que estamos entrando y lo estamos añadiendo 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 pasó fue que el original, la forma en que te dicen que hagas esto en los docs es usar una anulación. Y podrías ver allí como una anulación en los docs, bueno, lo que hace la anulación es que es muy difícil o lo que quita es el autocompletado original, como este muy bonito. Así que lo quita completamente. Así que tuve que buscar un poco en algunos ejemplos y en realidad, sabes, ejemplos de code sandbox, mirando diferentes en internet y finalmente encontré que esta es la forma que se supone que debes hacerlo. Tal vez soy malo leyendo los docs, pero no pensé que fuera muy fácil de encontrar. Así que esta línea me llevó bastante encontrarla, pero eso facilita que añadas tus propios autocompletados y verás aquí, añadirá más con la adición de mantener el original. Porque si haces una anulación, como te dicen en la documentation, perderás el autocompletado original que es muy útil.

9. Añadiendo Autocompletado Completo del Objeto Global

Short description:

En esta parte, exploramos un tipo diferente de autocompletado: el autocompletado completo del objeto global. Demostramos cómo agregar esta característica realizando cambios en el código y eliminando algunas cosas de TypeScript. Discutimos la disponibilidad de autocompletado en varios objetos y funciones dentro del objeto de la ventana. Además, mencionamos la existencia de un ejemplo similar en la documentación de CodeMirror que se centra en el autocompletado de JavaScript. Finalmente, introducimos el concepto de agregar autocompletado personalizado y mencionamos que lo cubriremos en la siguiente parte.

Bueno, entonces ahora vamos a añadir un tipo diferente de autocompletado. Así que esto va a ser todo el ámbito global y este me gusta mucho. Así que lo que vamos a hacer aquí de nuevo, hacer un nuevo archivo, lo hemos hecho muchas veces hasta ahora y añadir nuestro árbol de sintaxis aquí, nuestro procesador y cambiaremos nuestro code una vez más. No una vez más, un par de veces más aquí.

Oh, en realidad no añadí ese original. Lo que haremos aquí es, oh, está bien. No creo que haya actualizado algo. Lo siento por eso a todos. Pero lo que haremos aquí es que veremos, podemos añadir esto manualmente, en realidad. Así que creo, no creo que lo haya comprometido. Veamos aquí. Así que queremos importar, veamos aquí. Creo que esto realmente funcionará. Avísanos si tienes algún problema con esto. Lo que te mostraré aquí es simplemente eliminar algunas cosas de TypeScript, lo que creo que lo hará funcionar. Sí, creo que lo eliminé del readme justo 10 minutos antes de esto, pero no creo que lo hayas actualizado a tiempo. Oh, está bien, está bien. En realidad está ahí. Debería funcionar. Sí, deberían haberse ido, esas inscripciones de tipo. Oh, genial, entonces, ¿solo necesito actualizar mi propia pantalla, es eso lo que estás diciendo? Sí. Wow, eso es increíble. Bueno, ¿qué tenemos ahora? Así que ahora tenemos nuestro autocompletado original. También tenemos nuestro autocompletado JSDoc. Y ahora, además de eso, tenemos nuestro autocompletado completo del objeto global. Lo que puedes ver aquí es ahora los documentos. Tengo muchas cosas aquí. Tengo mi escuchador de eventos. Puedo añadir un clic aquí. Y mi función, puedo hacer cosas como entrar en el objeto de la ventana y añadir algunas otras funciones que quiero. Y ves, tengo todo disponible. Y creo que hay autocompletado en algunos de ellos. No estoy seguro si eso funciona completamente de serie. Pero este es un ejemplo dado en su sitio web. En realidad lo eliminaron de su documentation. No sé por qué. Así que si miras su tipo de documentation sobre autocompletado por alguna razón aquí, y vamos a los ejemplos. ¿Dónde está el autocompletado? Vemos que el ejemplo principal aquí es el que mostramos con el JS doc. Solía ser el del objeto global. Encuentro esto bastante útil para cuando estás usando JavaScript. Pero tal vez lo encontraron demasiado complejo o la gente se quejó de ello. 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 de la ventana y así es como sabe que puede autocompletar dentro de él. Así que eso es solo otro que es muy útil, creo, y añade cosas más de serie. Pero aquí está la última cosa aquí. Entonces, ¿qué pasa si quieres añadir tu propio autocompletado personalizado? Bien, y eso es lo que creo, no creo que lo haya añadido aquí. Bien, así que lo tomaré de otra instancia de CodeMirror que tengo, porque he estado practicando esto como probablemente puedas imaginar. Veamos aquí. Así que lo que voy a hacer, y lo siento si hay un poco de confusión aquí, es añadir nuestro propio autocompletado personalizado. Así que no tienes que seguir aquí. Tal vez puedas, tal vez podamos añadirlo aquí muy rápidamente.

10. Añadiendo Autocompletado Personalizado en CodeMirror

Short description:

En esta parte, exploramos el proceso de añadir autocompletado personalizado en CodeMirror. Creamos un archivo custom complete.js personalizado y añadimos manualmente el código necesario para el autocompletado. Mediante el uso de la variable de autocompletados personalizados, 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 para proporcionar opciones de autocompletado personalizado. También mencionamos la importancia de un nombramiento cuidadoso para evitar posibles efectos secundarios. Ahora vamos a profundizar en los detalles de cómo se logra esto.

Voy a, veamos. Vale. Así debería ser. Así que solo voy a ir y hacer un commit YOLO. Y veamos aquí. Vale, parece bien. Tomemos eso aquí para una prueba. Y lo que haremos aquí es que crearemos nuestro propio archivo aquí. Llamémoslo autocompletado personalizado o custom complete.js. Y lo publicaremos aquí. Y lo añadiremos como hacemos con todo, aunque lo haré un poco manualmente aquí. Pero debería ser fácil.

Así que decimos autocompletado personalizado. Así que llamaré a esto autocompletado personalizado. Um, OK. Vendremos aquí. Haremos una nueva variable. Llámala autocompletados personalizados. Añadiremos esto aquí. Veamos si funciona de serie. Instalaremos este paquete faltante. Y creo que te pedirá que instales otro, potencialmente. Sí. OK. Y lo que esto nos da aquí es que he añadido mi propio personalizado. Así que hago test.sub. Sé que estos nombres son malos. Y luego tengo la capacidad de crear mi propio autocompletado dentro de eso. Y luego mi autocompletado realmente lo completa como yo quiero. Y dice tu code aquí. Así que de nuevo, lo haré de nuevo. Y diré test.sub. Abriré algunos corchetes. Iré así. Y en realidad, el cursor termina aquí. Pero lo he hecho de maneras en las que puedes controlar dónde termina el cursor. Y simplemente no lo hice para ese ejemplo. Así que de nuevo, sé que el nombre es un poco raro aquí, pero podemos cambiarlo para que sea lo que queramos. Pero tal vez podemos decir método func en él. Veamos si eso lo cambia. Pero ¿sabes qué? En realidad, no quiero cambiar eso porque tendrá algunos efectos secundarios. Así que lo mantendremos así. Entonces, ¿qué estoy haciendo aquí? ¿Cómo estamos logrando esto? Ahora que tienes el árbol de sintaxis disponible, puedes ser tan personalizado con esto como quieras. Así que en este caso, estoy comprobando los autocompletados para cualquier cosa con a.property además de hacer solo una finalización general para solo test en sí. Así que una cosa que estoy haciendo es que estoy comprobando, veamos aquí. Test en sí, en realidad no añadí ese. Lo siento por eso. Pero cuando veo la palabra test como una variable, tengo la capacidad de añadir cualquier autocompletado que quiera. Así que puedo añadir aquí en caso de que sea sub, puedo añadir la etiqueta otro más, digamos. Y cuando vengo aquí, voy a test.otro más o sub.

11. Explorando la Autocompletación y los Proyectos de Shopify

Short description:

En esta parte, exploramos otra capa de autocompletación en CodeMirror. Discutimos el proceso de comprobación de la existencia de una cadena y proporcionamos autocompletados personalizados. Demostramos cómo añadir y aplicar una 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, los temas, el linter personalizado, las múltiples capas de autocompletado, y la capacidad de añadir JS docs personalizados. Enfatizamos los beneficios de usar CodeMirror y el entorno colaborativo en Shopify. Finalmente, presentamos a Kavya y Helen, quienes comparten sus experiencias y proyectos en Shopify.

Así que puedo crear mis propios métodos aquí si quiero. Pero ves aquí que no hay autocompletado. Y lo que está pasando aquí, esto es otra capa de autocompletado que podemos hacer. Ahora estoy comprobando específicamente esto. Y tal vez esta no sea la mejor manera, pero esta es una forma en que puedes hacerlo es que puedes probar específicamente la existencia de una cadena. Y luego de ahí, proporcionar tus propios autocompletados. Y con ello, tienes la capacidad de añadir y aplicar. Y con la aplicación, simplemente estoy añadiendo mi propia sintaxis de función aquí, y luego proporcionando los eventos que quiero mostrar. Así que puedes añadir esto como a.sub. O puedes hacer.otro si quieres. Pero como puedes ver, la secuencia aquí importa. Esto necesita ser 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 finalización aquí, la estoy poniendo en un bloque if aquí, sólo para asegurarme de que tenemos a.property. Esto es necesario sólo para asegurarse de que el autocompletado sigue funcionando a medida que escribes. De lo contrario, si no añades ese nombre de propiedad, dejará de autocompletar después de que escribas el primer 8. Por eso existe eso.

Así que, hasta ahora, lo que hemos hecho es que hemos añadido una configuración básica con JavaScript, hemos mirado CSS, HTML, hemos añadido incluso algo de Python, hemos mirado los temas que existen de serie, hemos mirado nuestros propios temas personalizados, hemos añadido nuestro propio linter usando JSHint, hemos mirado cómo añadir dos capas adicionales de autocompletado en el objeto de la ventana o el objeto del documento, además de añadir nuestros propios JS docs personalizados, y finalmente, mirando una versión más compleja o personalizada de autocompletado, que podrías querer hacer. Así que como puedes ver, todo esto fue posible gracias a Codemirror. Y creo que construir algo así desde cero podría ser incluso más complicado que hacer esto, que seguir con Codemirror. Pero creo que muchas cosas que ocurren en nuestro campo es que siempre se trata de compromisos. Tal vez aquí pasamos mucho tiempo aprendiendo la forma exacta en que estamos haciendo esto con Codemirror, pero lo que encontramos es que somos capaces de compartir esto en toda nuestra organización, porque descubrimos que no somos la única base de code que lo utiliza. Hay muchas bases de code que lo utilizan, e incluso establecimos un grupo donde nos ayudamos mutuamente con diferentes grupos que están utilizando Codemirror sólo para decir, oh, ¿cómo estás haciendo la autocompletación? ¿Cómo estás haciendo esto? ¿Cómo estás haciendo eso? Y ayudándonos a asegurarnos de que estamos siguiendo las best practices o simplemente teniendo a una persona diferente que se metió en un agujero de conejo diferente y nos ayudó con lo que han hecho.

Tal vez podemos averiguar un poco sobre las personas que están aquí. ¿En qué están trabajando? ¿Alguien quiere contarnos a qué equipo pertenecen, de dónde vienen, en qué están trabajando, qué han pensado hasta ahora. Si tienen alguna idea sobre esto, retroalimentación, podemos usar ese tiempo ahora mismo para hacer eso si quieren. Entonces, Kavya, ¿cuánto tiempo llevas en Shopify? ¿Qué tipo de front end has estado haciendo? He estado en Shopify durante aproximadamente un año y medio. ¿Qué tipo de front end he estado haciendo? Principalmente cosas de React TypeScript, aunque últimamente he estado escribiendo más Ruby. Pero sí, familiarizarme con la infraestructura de TypeScript de Shopify es definitivamente toda una aventura por sí sola. Así que, esa ha sido una experiencia de aprendizaje para mí durante mi tiempo en Shopify, seguro.

Y has estado, hasta ahora has estado en automatizaciones, has hecho ahora insights de marketing, ¿correcto? Sí. Así que, esencialmente, tenemos una sección de marketing para nuestros comerciantes, y una cosa de la que Kavi ha sido parte, creo, desde el principio, fueron las automatizaciones. Así que, eso es en realidad la capacidad para los comerciantes de, ya sabes, esencialmente, como, añadir un camino para cómo quieren enviar sus correos electrónicos. Y es a través de una interfaz de usuario, y estamos integrando con otra aplicación dentro de Shopify, y puedes decir esencialmente, una vez que alguien compra en mi tienda, una vez que alguien abandona mi checkout, tengo la capacidad de enviarles una secuencia de correos electrónicos basados en acciones. Este fue un proyecto de aproximadamente un año o así para que estuviera completamente disponible y funcionando correctamente, y ahora está generalmente disponible. Así que, ese es el primer producto del que fuiste parte. Sí, sí, definitivamente. Puedes enviar un enlace a las automatizaciones de marketing de Shopify si eso es interesante para alguien. Y tal vez usaremos ese tiempo en el panel si tienes alguna pregunta específica sobre eso. Pero Helen, ¿tenías... ¿Puedes contarnos un poco sobre lo que estás haciendo en Shopify? Claro. Así que, hola a todos. Soy Helen. He estado en Shopify durante cuatro años y actualmente estoy en el equipo de Hydrogen. Y lo que hacemos es construir un framework que es el más adecuado para la plataforma de comercio de Shopify. Así que es un framework que permite a los desarrolladores construir su tienda personalizada de manera muy fácil y rápida. Y por supuesto para conectarla con nuestro Oxygen para que pueda ser desplegada muy rápidamente. Y sí, hemos puesto muchos pensamientos y esfuerzos en pensar en cómo podemos hacer que todos esos problemas de desarrollo, no sean tu problema, sino nuestro problema para lidiar. Escuché que tienes control de fuente como 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 fácil configuración 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 o marcos similares. Mientras que la versión 1 de Hydrogen utiliza el componente de 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 construcción de características en lugar de preocuparse por los detalles del marco. Se está minimizando la separación entre el código del lado del servidor y del cliente, facilitando la construcción de tiendas personalizadas. Oxygen proporciona múltiples entornos y vistas previas para las tiendas, pero todavía faltan algunas APIs, como los productos en borrador. El equipo está trabajando para llenar estos vacíos 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 que los comerciantes pueden tener algún tipo de control de fuente. ¿Es eso parte de ello o no? Si te refieres a control de fuente, es una conexión directa al repositorio de GitHub. Así que esencialmente cuando creas un proyecto en el administrador de Shopify, puedes conectarlo a tu, creo que GitHub. Y luego había otro, creo que era BigBucket. Y no estoy muy seguro, pero GitHub seguro que generará un proyecto en tu cuenta de GitHub, creará un proyecto para ti, configurará el web hook para que esté conectado a nuestra infraestructura de Oxygen automáticamente. Y todo se hace en como, creo que fueron como 30 segundos para ti. Y puedes empezar tu proyecto, puedes ver la vista previa de tu proyecto, conectarlo a tu tienda y todo eso listo para ti.

Vale, genial. Así que dame un poco de antecedentes. 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 hacer una tienda completamente personalizada con tu propio code desde cero. ¿Es eso correcto? Lleva al siguiente nivel. Sí. Y proporcionamos algo así como componentes de UI que puedes usar, creo que es en React o algo similar que puedes usar simplemente como bloques de construcción para ello. En este momento, estamos usando, para la versión 1 de Hydrogen, el componente de servidor de React. Así que hubo mucha exploración en esto, diría que, algo, bueno, es nuevo, pero es como dos años nuevo, concepto, en el que el equipo de React está trabajando. Y ahora es como con Next.js. Y así que estábamos en ese camino, y como todos saben, recientemente tuvimos la adquisición de Remix. Así que ahora es parte de nosotros. Así que 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 muy rápidamente su tienda en el framework. Así que ahí está.

Entonces, en la V2, ¿vas a tener la capacidad de usar simplemente Remix además de los componentes del servidor o solo Remix? En este momento es solo Remix. Todavía estamos pensando en el componente del servidor de React, cómo puede encajar en Remix. Pero sí, esos son solo detalles. Los desarrolladores en realidad no deberían tener que preocuparse por el componente del servidor de React. Detalles de implementación o realmente del framework. Pero si tienen que hacerlo, entonces no es exactamente donde queremos estar. Así que esa separación de preocupaciones entre qué code se ejecuta en el servidor versus qué code 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 bien en el sentido de que los desarrolladores deberían estar solo preocupados por construir características para su tienda personalizada. Y no preocuparse por un error en React o como el componente del servidor de React. Así que creo que ahí es donde se traza la línea es como, los desarrolladores no deberían tener que preocuparse por el componente del servidor de React, deberían preocuparse por cómo hago que la internationalization funcione? ¿Cómo añado un formulario de tarjeta? Y queremos que eso sea solo como un plop in, solo añades este componente y das algunas propiedades y luego, ya está. Has terminado. Y nunca debería ser complicado construir una tienda personalizada. Eso es genial, lo que me gusta de el control de fuente específicamente es como ese aspecto es como ahora, 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 pruebas y una de producción. ¿Es eso lo que la gente generalmente está haciendo antes de hydrogen? ¿Sabes? Para hydrogen, eso es en realidad más de las infraestructuras de oxygen. Así que oxygen, puedes tener múltiples entornos. Tenemos como vistas previas para tu tienda antes de que la despliegues a producción. Así que ese es un aspecto. Todavía falta bastante de las APIs, por ejemplo, como los borradores que puedes tener en la tienda online que no están disponibles en la API de la tienda. Así que la gente no puede ver productos en borrador en este momento en hydrogen. Así que eso es una de las cosas que estamos tratando de llenar el vacío en este momento con el equipo de API. Te entiendo. Eso es realmente genial. Puedo decir que definitivamente cuando vi el contenido de hydrogen, oxygen salir, yo estaba como, ¿en qué 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 conmigo específicamente, solo he estado en el equipo central, empecé con las automatizaciones en un año, luego me trasladaron a los proyectos de Pixels, que inspiraron el uso de CodeMirror aquí para que la gente añada su propio code y finalmente me trasladaron a Marketing Insights, que es lo que está con Covey ahora durante el último mes. Ahora estamos yendo más profundo 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 y mostrar gráficos. También nos presentamos, incluyendo nuestros roles en Shopify y nuestras experiencias con React y TypeScript. Helen comparte su viaje desde la analítica hasta React y su trabajo en el equipo de Hydrogen. Tal habla sobre su transición de Java y C# a React y su papel en el equipo de correo electrónico en Shopify.

Quizás puedes publicar en el chat allí, Covey, algo sobre tal vez darles algo como Polaris Viz. Creo que Polaris Viz está disponible públicamente, ¿verdad? Sí, definitivamente. Eso es algo que creo que tenemos mucho aquí como Polaris es open-source igual que Polaris Viz. Estos son como bibliotecas de UI equivalentes a el material UI así que solo quería dejar eso allí si no estás familiarizado con esas bibliotecas de UI. No están tan personalizadas, no son tan generales como material UI, diría yo. Pero creo que tiene muchas cosas geniales que puedes usar, especialmente si estás construyendo algo como un panel de control, especialmente con cosas como simplemente obtener gráficos de barras y cosas así de la caja. Lo estamos usando en Shopify, así que necesitamos que funcione bien. Así que si no está funcionando bien para ti, probablemente lo arreglaremos porque necesitamos que funcione bien.

Veamos aquí, empezaré conmigo mismo. Soy un desarrollador senior aquí en Shopify, he estado en Shopify durante aproximadamente un año y actualmente estoy en el equipo de insights de marketing. Así que lo que ayudamos es a dar al comerciante de Shopify, a cualquier comerciante la capacidad de mirar a través de sus análisis en lo que respecta a cómo están gastando su dinero en anuncios y qué tipo de retorno está trayendo para ellos. Es un proyecto bastante nuevo y es mi tercer equipo de Shopify hasta ahora en el último año y ha sido muy divertido hasta ahora. Así que actualmente estoy en el equipo de marketing para Shopify. He estado usando mucho React y TypeScript todos los días y algo de Ruby en el backend pero no toco eso tanto estos días. Así que eso es un poco sobre mí, ¿por qué no seguimos con Kavi?

Gracias. Soy Kavi, he estado en Shopify aproximadamente el mismo tiempo pero principalmente todo en marketing. Estoy en el front end, así que React y TypeScript y en el navegador pero recientemente me he alejado más hacia Ruby y sí, estoy basado en Victoria, BC. Eso es todo para mí, creo, también en insights de marketing con el mismo. ¿Helen? Sí, mi nombre es Helen. He estado en Shopify durante cuatro años ahora y actualmente trabajando en el equipo de hydrogen que es totalmente React pero soy bastante flexible. A veces tendré que entrar en RubyStack o lo que sea solo para que las cosas funcionen. Podría estar en cualquier lugar siempre y cuando necesite hacer las cosas. Soy bastante flexible en ese asunto. Cómo llegué a React es que mi empresa anterior estaba construyendo en él y no sé nada sobre React. Pero entonces sé mucho sobre la instrumentación de análisis y entonces hay un infierno de arreglo. Los análisis en la aplicación de una sola página es como, ¿qué? Como todos saben, los análisis en la aplicación de una sola página no es la cosa más fácil de tratar. Así es como llego a 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. Bueno, veamos. Sí, vienen a completar el círculo, me encanta. Gracias Helen, vamos a seguir con Tal.

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

14. Viaje y Antecedentes de React

Short description:

Entonces, no somos el mismo equipo, pero estábamos bajo el mismo paraguas. Muy contento de tenerlo. Parece que lo está haciendo genial. 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 UI, en otro equipo en 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, parece que tenemos bastantes personas con diferentes antecedentes. Sí, interesante, en cuanto a React, yo mismo me metí en ello 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 iba a ser mucho mejor. Pero básicamente rompió Ember 1. Así que la gente se molestó y simplemente no lo actualizó y terminó siendo eliminado. Aunque ayer vi una oferta de trabajo en la que alguien decía, no es necesario saber Ember, buscamos desarrollador de EmberJS por una cantidad ridícula de dinero. Y pensé, wow, es 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 lo está haciendo genial. 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 UI, en otro equipo en 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, parece que tenemos bastantes personas con diferentes antecedentes. Sí, interesante, en cuanto a React, yo mismo me metí en ello 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 iba a ser mucho mejor. Pero básicamente rompió Ember 1. Así que la gente se molestó y simplemente no lo actualizó y terminó siendo eliminado. Aunque ayer vi una oferta de trabajo en la que alguien decía, no es necesario saber Ember, buscamos desarrollador de EmberJS por una cantidad ridícula de dinero. Y pensé, wow, es 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, ¿fue solo en la web? ¿Fueron 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 trabajando en pareja con otro ingeniero que conocía React y era como, necesito hacer esto. Y solo dime dónde debo ir en el código base y tratar de entenderlo desde allí. Y a medida que pasa el tiempo, aprendí sobre React y fue 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 nuevo tipo de componente 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 que estábamos aprendiendo sobre el nuevo componente del servidor 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 tareas? Y luego descubrimos todos los detalles, como, está bien, si va al lado del cliente, ¿qué está haciendo 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 profundizar 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, esto es como, tuvimos que profundizar realmente, y creo que incluso eso me llevó como tres meses para entender ese código base. Lo suficiente, pero no lo suficiente. Wow, ¿así que estás diciendo que tuviste que entrar 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? ¿Dónde dijiste, oh, esto realmente tiene sentido, o es como, huh, un poco de ambos? Como, ¿cómo es leer ese código diferente que leer el código que los clientes usan en Shopify, sabes a lo que me refiero? Es realmente bastante diferente. Si es como código que usarías como desarrollador en cualquier framework, es bastante obvio. Es como, oh, simplemente colocas un componente aquí.

15. Entendiendo la Complejidad del Código de React

Short description:

Al sumergirse 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. El registro en consola se vuelve esencial para rastrear el flujo y entender el orden de ejecución. Me llevó un tiempo comprender las complejidades del código.

Aquí es donde defines una ruta para tu router o algo así. Es bastante obvio, en términos de más orientado al desarrollador. Pero cuando entras en la fase del react code, parece que nada está conectado, pero todo está conectado. Entonces obtienes como esta función de planificador, que se llama esta otra función, que es la que hace el análisis. Y la otra es como, se recurre recursivamente en algunas otras funciones. Simplemente es extremadamente difícil de seguir y terminas poniendo el console log en todas partes para seguir la pista de dónde y a dónde voy. Así que es recursivamente como en el árbol en alguna loca situación de matriz. Y luego porque es como un planificador de trabajo, entonces ni siquiera sabes cuándo se ha programado cuál para ser ejecutado en el siguiente. Así que simplemente es complejo. Y eso me llevó mucho tiempo para entender qué está pasando.

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

Short description:

Al explorar la base de código de React, console.log puede ser una herramienta útil para entender la funcionalidad del código. El código de React carece de comentarios, lo que dificulta la comprensión del propósito de las funciones sin las declaraciones de console.log. El repositorio de React no proporciona un manual 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 código BS también pueden ayudar a entender los casos límite complejos. Sin embargo, contribuir a proyectos de código abierto como React y Remix puede seguir siendo desalentador debido a la complejidad y la incertidumbre de identificar errores reales frente a errores de usuario.

Y sí, es como que es muy diferente. Wow. Entonces, ¿qué recomendarías a alguien que quiere leer la base de código de React hoy? ¿Por dónde empiezan? Sí, ¿por dónde deberían empezar? ¿Cómo pueden hacer el mejor uso de su tiempo al leerlo? Ya sabes, para evitar un poco la confusión inicial o simplemente tiene que ser, es parte de ello. Mencionaste algunas cosas, estabas como console.logging algunas cosas para ver los resultados, pero me pregunto qué piensas al respecto?

Personalmente, siento 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 en sí, realmente no puedes decir qué es exactamente lo que están tratando de hacer hasta que pones algunos console.logs y averiguas dónde están en qué proceso. Y luego tienes que averiguar qué diablos está tratando de hacer la función. No creo que React haya publicado nunca un manual que diga esto es lo que estamos haciendo en nuestro código. Si hubiera sido mucho más fácil.

Oh, no, eso es una gran idea. Helen, tenías la mano levantada. Sí. Tengo curiosidad. Entonces, supongo que cuando estás tratando de explorar los internos del CD de React, del paquete de React, ¿eso significa que cuando estás escribiendo estos registros de consola, estás escribiendo en los archivos en la carpeta de módulos de nodo? ¿Estás realmente entrando en ese código? Oh, ya veo. Cien por ciento. El código de React es, como, en sí mismo, dependiendo de dónde estés, tratar de descargar su repositorio es casi imposible. En el sentido de que es mucho código, y entender dónde necesitas estar es aún más difícil. Entonces, a menudo, en realidad teníamos que ir y, digamos, copiar un pedazo de código y ponerlo en nuestro propio proyecto para que podamos modificarlo. Y simplemente, como, NPN, como alias link, o simplemente enlazar a ese archivo en particular para que funcione. Y luego podemos... Porque si tú... Sí, eso es lo que no entendería. Como, si añades un registro de consola en el paquete de NPM, entonces, ¿cómo haces que se recompile? ¿O cómo haces que se ajuste a esos cambios?

Bueno, bajamos el módulo ES, así que al menos es legible. Correcto. No estamos lidiando con código compilado aquí. Porque referenciamos el archivo, no al archivo de módulo no, sino al archivo real como parte de pretender que estamos creando un nuevo paquete, que es una copia de React, y luego simplemente enlazamos a eso. Oh, locura. Sí, es confuso incluso configurar eso seguro. Wow, eso es super cool. Sé que Daniel, tenías la mano levantada, por favor. Sí, recientemente tuve experiencia con Remix. Por ejemplo, estamos tratando de modificar algo, y normalmente los repositorios, si tienes suerte, tienen algún tipo de playground incluido, y normalmente también están desarrollando en él. Así que si encuentras cómo configurarlo, entonces probablemente tienes la cosa más fácil de ejecutar. Y como dijo Ellen, ya sea que los registros de consola funcionen, o recientemente descubrí el depurador de código BS, donde simplemente me gusta correr en el depurador, y luego pasar por él muy lentamente para tratar de averiguar qué estaban tratando de hacer allí, porque a veces hay tantos casos límite de los que están tratando de cuidar 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 hace Remix, es que tienen el... Ellos hacen, digamos, compilar el código en un distribuible, y luego lo copian en los módulos de nodo del playground que crean. Así que se inició una modificación, lo hace de nuevo. Así que entonces tienes la última versión. Si estás modificando, quiero probar algo, así que supongo, podrías teóricamente hacer lo mismo para otros, no sé, proyectos que... Proyectos de prueba que tienes. Puedes tener el módulo de nodo, los módulos de nodo, y luego enlazarlo directamente, y luego de esa manera podrías obtener la última versión. Sí. Entonces, Daniel y Ellen, ¿se sienten ahora, más seguros de hacer contribuciones de código abierto a Remix o React, ahora que han, profundizado en el código? Como para alguien que como, si piensas como cuando pienso en ello, estoy como, oh hombre, eso es desalentador. Como yo hacer una contribución a React, como quién soy yo, ¿sabes a qué me refiero? Pero ahora que es parte de tu trabajo, como has pasado por ello, ¿se siente menos o más? Dar y tomar, diría? Quiero decir, realmente depende de la complejidad de las cosas que estamos tratando de arreglar. Para mí diría que, todavía es desalentador porque como en el sentido de que, no sabes si es un error real o no, o si solo estabas usándolo mal y entonces es como que no se anticipó. Y sí, diría que, todavía se siente igual. Todavía se siente un poco desalentador contribuir al código abierto. Sí, se siente como que tienes que, lo siento 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 empujar código, sino de trabajar en colaboración. Es interesante ver diferentes enfoques para entender 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 luchas 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 se siente como si, como dijiste, tuvieras que hablar con las personas que son los mantenedores para averiguar si es un error o no, y también para acordar de antemano un enfoque, porque si no lo haces, entonces, sí. Como, sí, probablemente tienen más contexto que tú sobre dónde vas a poner el code y qué hacer. Y hay algunas características que definitivamente no te permitirán moverlas en la dirección que ellos no quieren. Así que parece que los mantenedores tienen mucho poder sobre la base de code. Así que aunque quizás sepas cómo funciona, quizás solo puedas influir en sus decisiones. Sí, no es solo que quiero empujar el code y eso es todo. Tengo que trabajar un poco más en ello que en mi base de code. Eso es gracioso.

Sí, creo que hay un par de cosas interesantes sobre eso. Una cosa es cómo ambos describieron su proceso de comprensión. Uno de ustedes mencionó console.log, y tú mencionaste el depurador. Y encontré que ese es un flujo de trabajo interesante porque cuando empecé, algunas personas me decían Oh, no conoces el depurador, ¿qué te pasa? Y esa es la forma escolar en la que me criaron. Luego leí este libro llamado Coders at Work. Y vi que uno de los principales contribuyentes a Linux o el inventor parece que eso es exactamente lo que hace. Y él simplemente dice, solo imprimo el estado de todo. Y piensas, bueno, supongo que simplemente funciona para él. Así que lo que haga que funcione más rápido, quizás 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 puedes hacer mucho, ¿sabes a qué me refiero? Así que sí, solo quería comentar sobre eso porque pensé que es una forma particularmente interesante.

Así que si puedes poner un curso sobre cómo profundizar en React o Remix y terminé teniendo eso en Udaby. Quiero cambiar un poco de tema aquí para averiguar un poco sobre lo que TAL ha 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 luchas con ella trabajando hasta ahora, buenas y malas, y cómo te está yendo trabajando en un entorno de primera parte porque realmente no estás en Shopify web, pero estás en Shopify, o realmente no estás en web, pero estás en web y core, ¿verdad? ¿Cómo es escribir una aplicación de primera parte? Sí, exactamente.

18. Desarrollo en 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.

Entonces sí, definitivamente eso es algo a lo que no estoy acostumbrado, porque en primer lugar, como una aplicación en Shopify admin, ya no... Sí, quiero decir que el contexto es un poco diferente, ¿verdad? Porque tu aplicación está 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 tus herramientas de desarrollador de Chrome. O lo que usamos ahora es como una ventana externa de DevTools, que es una experiencia un poco diferente. Así que diría que definitivamente fue uno de los más desafiantes. Sí. Uno de los desafío desafíos cuando comencé a trabajar en ello, fue definitivamente diferente a lo que había hecho 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 al usuario ser capaz de agregar texto, botones, lo que necesiten. Básicamente para crear un correo electrónico, igual que si vas a Google Doc y creas 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 de, 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 directa. Tenemos como ayudantes, pero aún así es bastante desafiante, al menos para mí hasta ahora. Entonces, ¿estás escribiendo todo en TypeScript, correcto? ¿Como todo sigue siendo prácticamente lo mismo? Sí, eso es correcto. Entendido, entendido. Y tengo curiosidad, no estoy seguro si puedes compartir esto más públicamente, pero como 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 realmente 100% React, pero sí, en su mayoría. Vale, vale. Sí. Entonces creo que sí, todos estamos escribiendo más o menos en TypeScript y tengo curiosidad por tus pensamientos hasta ahora. Como probablemente lo he estado usando durante dos años pero como lo he estado usando seriamente durante un año. Y sí, definitivamente puedo ver como la forma en que solía escribir, era como, podría compararlo con un vaquero. Como que escribes tu prueba, pero solo escribes y esperas lo mejor cuando escribes con TypeScript, de alguna manera, como que estás ejecutando pruebas, pero hay muchas declaraciones if. Hay muchas cosas que me di cuenta de que, vaya, esto está atrapando muchas cosas de antemano. Pero me llevó un tiempo acostumbrarme y todavía me estoy acostumbrando a los tipos. Y como, esencialmente cuando hice la masterclass hoy, como que quería evitar eso. Así que solo hice JavaScript. Y creo que mucha gente tal vez no lo sabe. Así que comencé con JavaScript en un proyecto personal, probablemente haré JavaScript porque solo quiero evitar, ya sabes, lo viejo, ya sabes, porque si terminas usando cualquier cosa, terminas como, ¿por qué estás usando TypeScript, pero tengo curiosidad por lo que pensaste y cómo ha sido tu experiencia con TypeScript hasta ahora. Me bastante positiva, pero sí, acostumbrándome a ello. Y esto está abierto para cualquiera, por supuesto. Me gustaría profesarme como un amante de TypeScript. Me he ido obsesionando lentamente 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 tipado como JavaScript en producción. Creo que es una idea aterradora que Shopify solía funcionar de esa manera, y todos estos diferentes frameworks. Es difícil para mí imaginar un tiempo antes de TypeScript o como el código de producción en un navegador era seguro. Pero sí, no sé. Estoy muy metido en TypeScript, al menos hasta ahora. Microsoft no ha hecho nada que, no sé, me desanime, ese tipo de cosas. Eso es genial. ¿Algunos otros pensamientos? Quiero decir, creo que comparto una opinión similar, como quiero decir, como TypeScript me desconcertaría a veces, pero sí, creo que en su mayor parte, sí, como cuando comencé a usar TypeScript, creo que fue duro, pero no sé. Para mí, creo que solo se necesita acostumbrarse. Y hoy 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 están claras, pero desafiante cuando se trata de especificaciones cambiantes y tipos complejos. A pesar de las frustraciones, TypeScript aporta 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. Tener un sistema bien construido y herramientas como ESLint proporciona un apoyo adicional. TypeScript, junto con otras herramientas de Microsoft, ha tenido un impacto significativo. Gracias por unirse y hacer el tiempo.

Y hoy me gusta mucho más, en comparación con cuando comencé. Sí, creo que eso es, y si alguien más tiene algo que compartir, pero sí, quiero decir. Puedo compartir algo. Sí, por favor. Diría que TypeScript es una relación de amor y odio. Me encanta si sabemos exactamente es como esto es lo que estoy esperando y esta es la forma que sabemos que deberíamos estar esperando. Pero entonces, lo odio en el sentido de porque tenemos que construirlo para los desarrolladores y hay algunos puntos donde no sabemos lo que vamos a obtener, pero esperamos algunas cosas que están ahí, 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 propagarlo es simplemente muy complicado y simplemente, es difícil escribir para eso, pero entonces tenemos que hacerlo, principalmente porque estamos tratando con desarrolladores que se beneficiarían enormemente si supieran lo que van a obtener y qué deben ingresar allí. ¿Cómo deberían ingresarlo para que puedan obtener lo que querían? Y toda esa forma es simplemente difícil. Y luego con bastante frecuencia, porque tuvimos que lidiar con TypeScript, simplemente, llegó al punto, es como, esto es demasiado complejo para TypeScript. Es como, ¿qué quieres decir? Sí, adelante, Daniel. Ese es el ejemplo exacto de lo 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 estoy como, ¿qué es eso? ¿Qué debería hacer al respecto? Es solo que, sí, creo que si los tipos son demasiado complicados, es cuando realmente puedes frustrarte. Pero si todo es más o menos simple y comprensible, entonces es genial. Pero tan pronto como quizás empieces a hacer algunos tipos realmente complicados, puede ser realmente frustrante. Entonces creo que esa es la parte donde estás como, está bien, no sé si lo estoy haciendo incorrectamente o, no sé. Todavía creo que vale la pena, cuando lo haces funcionar y luego simplemente, todo es genial. Te brinda mucha seguridad, pero sí, hay algunos momentos frustrantes a veces donde solo quieres terminar con la característica. Sí, no voy a pasar horas quejándome de la pantalla de tipos. Eso es algo así. Sí, creo que he estado protegido de esa complejidad de muchas maneras, porque como viviendo en un web donde los datos que obtienes de nuestras capas de API están tipados y todos los paquetes que usamos en web están tipados. Y entonces estás muy protegido de supongo que esa complejidad adicional que vendría de construir cosas desde cero o simplemente usar cosas que existen fuera de nuestro agradable ecosistema. Entonces creo que ese refugio me ha llevado a apreciarlo mucho más y a construir con él de una manera en un entorno más cómodo, seguro. Sí, definitivamente, sabes, tener un buen especialmente un buen sistema construido que pueda ayudarnos, sabes, a realizar pruebas adicionales y cosas así, para protegerte más. Recuerdo cuando empezamos algo como ESLint y lo hicimos de una manera en la que rompería tu código real si tenías un error. No solo lo mostraría en el navegador simplemente lo rompería, no lo recompilaría. Y eso era común y en algunas partes en React, como la gente lo haría. Y ahora lo hacemos, es como, sabes, bueno, como la fase de construcción es cuando hace el refugio adicional y te ayuda adicionalmente allí. Pero sí, siento que, sabes, con TypeScript sí, definitivamente siento esa relación de amor y odio. Y es bueno como las cosas que Microsoft está inventando como VS Code, TypeScript, algunas cosas geniales. Quiero decir, no puedo imaginar, como, recuerdo que estaba pasando por diferentes ideas todos los días y ahora estoy como, 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, sabes, bueno, gracias por tomarse el tiempo para venir aquí. Espero que la masterclass haya sido buena para aquellos que la disfrutaron allá afuera.

Watch more workshops on topic

Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
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.
0 to Auth in an Hour Using NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
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
Build a powerful DataGrid in few hours with Ag Grid
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Mike Ryan
Mike Ryan
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
JavaScript-based full-text search with Orama everywhere
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
Michele Riva
Michele Riva
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.
Back to the basics
Node Congress 2022Node Congress 2022
128 min
Back to the basics
WorkshopFree
Guillermo Gutierrez Almazor
Guillermo Gutierrez Almazor
“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.
Getting Started with AG Grid and React – The Best Javascript Grid in the World
React Advanced Conference 2022React Advanced Conference 2022
140 min
Getting Started with AG Grid and React – The Best Javascript Grid in the World
WorkshopFree
Brian Love
Brian Love
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

Vite: Rethinking Frontend Tooling
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.
Scaling Up with Remix and Micro Frontends
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 Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
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. 
Full Stack Components
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.
Making JavaScript on WebAssembly Fast
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.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
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.