De la Idea a la Producción: Desarrollo de React con un Toque Visual

Así que, hola a todos. Es genial estar aquí. Comenzando con una breve introducción. Soy Omer, lidero el producto de Codex desde el equipo principal. Somos un equipo genial en Wix. Les contaré un poco más en un segundo. Me uní a Wix hace más de cuatro años. He estado trabajando en el producto Codex casi todo el tiempo. Anteriormente, cofundé Rapid UI, que es un producto que estaba en las mismas áreas de Codex, herramientas visuales para trabajar con código pero aún escribiendo código al mismo tiempo. Lo verán en un segundo. Más de ocho años en el ámbito de herramientas y codificación visual en el front-end. Hoy me acompañan algunos de nuestros increíbles miembros del equipo principal para ayudar durante la sesión práctica. Nuestra empresa se dedica principalmente a desarrollar herramientas para desarrolladores, herramientas para equipos de desarrollo. Somos un equipo muy técnico en Wix. Y lo mismo ocurre con nuestros productos. Tenemos dos productos principales. Uno de ellos es Stylable. Es un preprocesador CSS de código abierto. Les hablaremos un poco sobre él hoy. Y CodeX, que es de lo que estamos aquí para hablar. Verán que tenemos a alguien que se nos une. Un poco sobre Wix. Para aquellos que no lo sepan, Wix fue fundada en 2006 para hacer posible que todos tengan éxito en línea. Comenzamos con la creación de una presencia visual y luego agregamos muchas formas de gestionar negocios y crear lo que sea necesario para tener una presencia en línea. Líderes de la industria en creación de sitios web y gestión empresarial. 230 millones de usuarios en todo el mundo y estamos presentes en 17 países. Así que les mostraremos la nueva oferta de Wix para equipos de desarrollo.

Entonces, los objetivos de hoy son: presentar CodeX y nuestro enfoque visual para el frontend. Van a instalar el producto. Van a aprender cómo usarlo y, con suerte,

Entonces, por lo general, ese sería el flujo común de pasos, múltiples personas trabajando en múltiples entornos que generalmente están separados entre sí, generalmente cada uno con su propia forma de trabajar. Ahora, no solo eso, necesitamos trabajar con entornos separados. Nos enfrentamos a algunos problemas y puntos problemáticos con los que todos podemos relacionarnos. Así que comienza con encontrar nuestro lugar, ¿verdad? No solo es nuestro proyecto, ¿verdad? Por lo general, no es algo que comencemos desde cero. E incluso si es nuestro proyecto que comenzamos siempre necesitamos volver y mantenerlo. Y comprender el código en el que estamos tratando de escribir puede ser complejo, ¿verdad? ¿Qué hace esta cosa? ¿Cómo debo cambiarla? ¿Estoy cambiando lo correcto? ¿Dónde debo cambiar la cosa para que funcione como necesito? ¿Qué hace? Comúnmente nos encontramos jugando con DevTools, dibujando estos rectángulos rojos, tratando de señalar el elemento del DOM que necesitamos seleccionar para hacer el cambio. Así que es muy desafiante ingresar a un código existente o incluso a nuestro propio código que escribimos hace algún tiempo y saber qué necesitamos hacer y dónde. No solo eso, ¿verdad? Tenemos la estructura de nuestro proyecto, tenemos la forma en que deben estar los archivos, alineados. Tenemos nuestras propias convenciones de equipo. Tenemos la forma en que queremos que se estructuren las carpetas, y todo eso. Así que encontrar tu lugar puede ser más desafiante de lo que parece. Ahora, no solo eso. Queremos mantener la confianza y queremos avanzar rápido. Cosas que nos encontramos haciendo, queriendo hacer el cambio, incluso si ya sabemos lo que queríamos hacer, ¿verdad? Tenemos la solicitud de design y sabemos dónde necesitamos hacer el cambio en el código, pero ¿cómo lo hacemos? ¿Siempre sabemos qué necesitamos cambiar y dónde y cómo lo hacemos? Así que en estos dos ejemplos estoy tratando de representar estos casos en los que siempre tenemos que confiar en esta otra herramienta. Un cuarto entorno. Algo que nos ayudará a descubrir cómo implementar correctamente lo correcto. Muchas veces, para cosas visuales, nos encontramos trabajando con herramientas visuales para ayudarnos a asegurarnos de que estamos obteniendo el resultado correcto. Ahora, lo último que nos importa es estar seguros. Queremos asegurarnos de que no hayamos cambiado realmente algo que no queríamos o que hayamos logrado cubrir todos los casos. Cambiar algo. ¿Cómo sé que cubro todos los casos? Lo que vemos aquí es la distribución de Android en diferentes dispositivos que fue en 2015, creo, así que puedes imaginar cómo ha evolucionado desde entonces. Y no solo se trata de pantallas. ¿Afecté algo que no debía? ¿Tengo la validation adecuada para asegurarme de que no cambié algo que no debía? ¿Tengo una confirmación de que el cambio que se hizo se realizó en todos mis diseños? Y, por supuesto, para ayudar a otros a trabajar con mi código y estar seguros cuando se unan a mi flujo de trabajo, necesito ayudarlos, ¿verdad? Así que estoy creando estas páginas de documentation o incluso desde el lado de Linux, creando esta documentation de API para asegurarme de que las personas puedan interactuar con el código de la forma en que queremos. Así que volviendo a lo que acabamos de hablar. Comprender el código sería lo primero. ¿Qué debo hacer? ¿Dónde debo implementarlo? ¿Cómo debo implementarlo? ¿Qué necesito cambiar realmente y cómo puedo ser efectivo? ¿Cómo puedo asegurarme de hacerlo lo más rápido posible? Y por último, ¿cómo puedo confirmar que no cambié algo que no quería? ¿Que tengo todo lo que necesito cubierto? Con eso, permítanme presentarles Codex.

Y la última solución de estilo que admitimos, Tailwind, que fue muy solicitada por la community desde que lanzamos el producto. Y acabamos de agregarlo a nuestra última versión. Así que, eso es realmente genial. De acuerdo. Entonces, ese sería el momento de la demostración. Así que, voy a pasar a CodeX por un segundo. Perdón. Permíteme repasarlo. Entonces, para la demostración, hemos creado este proyecto. Se llama Git Ducks. Es una nueva startup. Es un proveedor de servicios. Tiene todas las características brillantes de una solución de gestión de Git. Pero tiene un gran impacto en la conexión entre diferentes desarrolladores. Por supuesto, no es una empresa real. Lo creamos para esta demostración. Pero representa un caso de uso real de una aplicación React y TypeScript. Hoy vamos a hacer dos tareas. La primera será rediseñar esta barra superior. Entonces, el equipo de design del producto de Git Ducks tiene una nueva necesidad. Quieren hacer que las conexiones entre los desarrolladores sean más prominentes. Lo han desglosado, lo han especificado y este es el resultado deseado para el equipo. Así que, tuvimos una reunión y este es el resultado deseado que queremos construir. Y vamos a ver cómo podemos usar Codecs para design esto. Así que, vamos a reorganizar esto. Y vamos a cambiar el design del botón de conexión. Pasemos a Codecs.

De acuerdo. Antes de comenzar, repasemos lo que vemos aquí. Esta es la página del proyecto

Aquí, en el centro, tenemos el stage. Este es el entorno de renderizado de Codecs. Aquí es donde renderizamos el código, por supuesto. Ahora puedes jugar con él como si fuera como las herramientas de desarrollo o algo que vemos en el navegador. Los estados se activan. Los comportamientos que deben ser activados por la interacción del usuario se activan. Así que todo aquí está vivo. Es un componente React. Pero al mismo tiempo, puedes ver que cuando estoy cambiando a este modo, puedo tocar los diferentes elementos y básicamente puedo acceder a todas las partes que construyen este componente de la aplicación o este componente de la página de perfil o lo que sea. Puedes ver que me estoy moviendo en diferentes ámbitos, cambiando lo que estoy editando en cada punto, pero puedo tocar todas las piezas que al final del día, este componente está compuesto. Ahora, eso se puede hacer desde el stage o desde el lado izquierdo aquí, puedes ver el panel de elementos. El panel de elementos es una representación de la estructura del DOM combinada con tu código fuente. Puedes ver que tenemos elementos HTML, componentes de mi proyecto o de bibliotecas de terceros, y expresiones, cosas que hacen que otros elementos se comporten o se muestren, cosas como mapas, repetidores, condiciones, otras expresiones que pueden no mostrarse en el DOM pero tienen un gran impacto en cómo se ve el DOM al final del día. Entonces, como dije, es una combinación del DOM y el código fuente. A la derecha, el panel de propiedades, ese es el primero. Aquí es donde editamos las props del componente. Ahora, verás en un segundo cómo lo hacemos y cuándo debemos usarlo. Pero al igual que el panel de elementos, el panel de propiedades es un reflejo del código. Cualquier cambio que haga en mi código afectará a todos los paneles en consecuencia. Y viceversa. Por supuesto, estamos editando la misma fuente. Justo debajo, el panel de estilos calculados. Y como probablemente lo sepas, representa los estilos del elemento que actualmente he seleccionado. Entonces, es una herramienta muy útil cuando intento verificar que hice todo correctamente, que implementé todo correctamente, que estoy usando los valores correctos, una forma para que los miembros de mi equipo verifiquen mi trabajo también. Pero no es solo una herramienta para verificar mi código para validación.

Es una herramienta muy útil para la navegación. ¿Ves este botón aquí? Al hacer clic en él, me llevará al lugar correcto que necesito para editar este color de fondo si quiero cambiarlo. Entonces, voy a hacer clic en él y me redirige al tercer panel aquí. El panel de estilos. Este es nuestro editor de CSS. Ahora aquí, estoy editando básicamente todo lo que es estilo. Considera que ya estaba seleccionado en este botón seleccionar todo. Y tengo todas las propiedades que necesito editar aquí mismo frente a mí. Fin. Todo aquí siempre está disponible a través del código. Entonces, esta vez salté al código de la hoja de estilos. Pero tienes acceso a todos los archivos de este proyecto en todo momento. Esto es como tu ID. Entonces, los archivos siempre se pueden acceder a través de Codex también. Comencemos con la primera tarea. Entonces, solo recordemos a todos cuál era. Entonces, vamos a hacer este rediseño. Esto es Codex. Voy a volver a la página de inicio y queremos manipular el componente de la barra superior. Entonces, puedes ver que ya he creado tres boards. Estos son los diferentes estados de esta componente, permutaciones que eran importantes para asegurarme de que existieran. Entonces, lo que queremos hacer sucede aquí. Así que echemos un vistazo rápido a cómo se construye este código y qué queremos hacer con él. Entonces, el primer cambio sería reestructurar la posición de este botón. Así que simplemente lo voy a arrastrar aquí y lo voy a colocar en la parte superior. Entonces, como puedes ver, simplemente moví el elemento en el orden JSX. Lo estoy editando desde el stage y mantengo mi código como estaba. Simplemente lo reemplacé donde quería que estuviera. Eso fue fácil.

Bien, asegurémonos de que todo se vea bien, ¿de acuerdo? Tenía tres estados que creé anteriormente, y puedes ver que es el mismo componente, ¿verdad? Vemos el mismo componente de la barra superior colocando todos estos tres tableros, y veo que el diseño no se vio afectado más de lo que quería, ¿verdad? Así fue como se diseñó. Lo mismo ocurre con mi componente de la aplicación, ¿verdad?

Esa fue la primera tarea. La completamos bastante rápido. Muy bien. Lo enviamos de vuelta al equipo de design. Les gustó mucho y lanzamos el producto. Pero recibimos una nueva solicitud. Vale, no solo queremos conectar a los desarrolladores. También queremos asegurarnos de que entiendan cuántas conexiones tienen. En este caso, se nos pidió crear esta nueva cosa. Así que vamos a crear un nuevo componente juntos que mostrará al usuario cuántas conexiones tiene. Así que voy a volver a Codex. Volviendo a la pantalla de inicio, voy a crear un nuevo componente. Puedes ver este botón aquí mismo. Ahora se me ofrece usar las plantillas que tengo en este proyecto. Voy a llamar al componente Conexiones. Esta plantilla puede ser lo que quieras. Puedes elegir la estructura de archivos y carpetas que quieras reutilizar. Si tienes eso, las plantillas de componentes en Codex son completamente tuyas para crear y controlar. Si tienes una estructura que te gusta, archivos, variables que se importan, contexto, lo que necesites en tu componente, puedes crear las plantillas que necesitas para acelerar tu flujo de trabajo.

Echemos un vistazo rápido a lo que acabamos de recibir aquí. Tenemos este componente de Conexiones. Renderiza el texto.

Aquí puedes ver que es una estructura básica del componente React. Tengo esta hoja de estilos aquí que fue creada. Este proyecto utiliza Sass modules. Esta es la hoja de estilos que fue creada. Nuevamente, esto se basa en las plantillas que tengo. No tiene nada adentro. Y el tablero, el tablero simplemente renderiza mi componente Conexiones. Y si más adelante necesitamos pasar datos al componente, lo utilizaremos. Lo verás en un segundo.

Entonces, comencemos creando el componente. Voy a hacer clic en este botón Agregar, y veré el panel de agregar elementos. Ahora, esta es una forma de agregar más y más elementos a la estructura. Puedo usar diferentes elementos HTML, componentes de mi proyecto o de bibliotecas de terceros. En este caso, se está demostrando Bootstrap, pero siéntete libre de usar lo que quieras. Voy a comenzar con el componente de icono. Ese es el primer elemento que queremos agregar. Nuevamente, puedo arrastrarlo aquí al escenario. Y puedes ver que se importa al archivo, ¿verdad? Y se agrega a la estructura JSX. Pero aún veo este error. Y obtengo este error de tipo. Y dice que falta esta propiedad requerida. También puedo verlo aquí en el panel de props. Como dije, las props son una representación de la interfaz de ese componente. Así que simplemente lo reflejamos de manera visual. Ahora mostramos que hay un error aquí y obtengo todos estos valores que esta propiedad puede aceptar. Entonces, si elijo este valor de seguidores, este es el diseño que necesitamos. Puedes ver que ya no vemos el error y todo se renderiza como se espera.

Bien, voy a agregar otro elemento. Voy a usar un span. Esto se usará para representar el número de conexiones que tiene este usuario.

Pero en este caso, no solo queremos tener un texto fijo. Queremos conectarlo a una data que proviene de una fuente externa. Necesitamos que el usuario vea el número real de conexiones. Por lo tanto, en este caso, vamos a exponer una propiedad para esta interfaz del componente.

Ahora, esto es algo que actualmente no cubrimos en Codecs desde los paneles visuales. Estamos trabajando en algunos de estos aspectos y nos encantaría recibir tus comentarios. Así que todavía sucede en el código. Solo quiero mostrarte cómo puedo pasar a VS Code para implementar el cambio que quiero hacer y volver a Codecs.

Voy a llamar a esta propiedad 'count' y voy a usar un número. Lo agregaré a la estructura de este componente, y reemplazaré este texto con la propiedad 'count'. Ahora, una vez que guardo y vuelvo a Codecs, veo aquí que ya no veo el texto, pero veo en el árbol de elementos que tengo una expresión. Ahora, puedes ver que también se cambió en el código aquí. Básicamente, todo funciona en conjunto.

Ahora volveré al tablero y veré las props de este componente. Puedes ver que ahora tenemos una nueva propiedad agregada, la propiedad 'count'. Y una vez que le pase cualquier valor, lo veré renderizado como queremos que se vea. También puedes verlo aquí. El tablero es solo un archivo en tu repositorio. Puedes hacer lo que quieras. Si quieres gestionar las cosas con código, está bien. También puedes hacerlo desde VS Code. Los tableros se agregan a tu proyecto, y puedes colocarlos donde quieras y gestionarlos desde VS Code o desde donde desees, si así lo deseas. Bien. Eso es más o menos lo que queríamos, ¿verdad? Vemos que tenemos un problema de diseño, pero antes de arreglarlo, solo quiero asegurarme de que todo se vea bien en esta composición, ¿de acuerdo? Esta es la tarea que hemos recibido.

Voy a hacer clic en agregar panel nuevamente, y ahora veré este nuevo componente, el componente 'connections' aquí mismo, ¿verdad? Y lo agregaré en la parte inferior donde el diseñador lo ha indicado. Y ya puedo ver que tengo esta data que no se muestra, ¿verdad? Entonces, en este caso, quiero conectarlo a la data que proviene de la interfaz de 'Toppar'. Entonces, lo que acabo de hacer aquí fue exponerlo a la interfaz de usuario que este componente 'Toppar' está pasando. Ahora, una vez que lo he conectado, puedes ver que se muestra un número. Este es el número que proviene del tablero de este componente 'Toppar'. Y ahí es donde quería que estuviera conectado. Ahora, una vez que hemos cubierto eso, podemos hacer la última cosa, que sería arreglar el diseño aquí mismo.

Entonces, nuevamente, al profundizar en el componente de conexiones, ahora puedes ver que básicamente puedo editarlo desde cualquier ámbito, ¿verdad? Este es el componente Toppar, y esto es lo mismo, solo aislado de los demás. En este caso, voy a usar un diseño de flexbox bastante básico. Quiero que veas el código mientras lo hago. Así que voy a elegir flexbox y quiero que las cosas estén alineadas al centro. Y voy a usar un pequeño espacio entre columnas de tres píxeles, eso es según el design. Y puedo ver que se ve exactamente como debería, ¿verdad?

Así que pude cambiar básicamente todo lo que necesitaba cambiar desde esta experiencia visual. El código se ve bien. Ahora asegurémonos de que se vea bien en estos tres estados. Veo que no afecté nada. Lo mismo ocurre con mi aplicación. Puedes ver aquí que se ve genial. Tengo diferentes data en mi aplicación. Así que eso es increíble. Significa que estoy realmente conectado a los data que fluyen, pero los estoy representando correctamente. Esa sería la última cosa que tengo que hacer, volver a guardar mis cambios para que mis compañeros de equipo puedan obtener ese componente. Por supuesto, si tienes confirmaciones eventuales y todo eso, siéntete libre de usarlas. A partir de ahora, eso es tuyo. Y eso es todo. Eso es más o menos lo que quería que vieras. He terminado mi tarea. He hecho el rediseño, creado un nuevo componente, me he asegurado de que todos los estados afecten lo que deberían afectar. Lo he probado en diferentes estados. Puedo volver aquí y crear otro tablero para mi componente de Conexiones si quiero. Digamos, conexiones número largo. Si solo quiero asegurarme de que no afecté algo que no debería haber afectado, puedo darle un ancho máximo y agregar puntos suspensivos si quiero. Esa es mi forma de asegurarme de que todos los estados se gestionen correctamente. Al final del día, todo lo que hago se refleja aquí. Eso es lo que queríamos mostrarte en Codex. Te ayudaremos a instalar el producto. Por cierto, estos son los enlaces.

Volveremos a eso en un segundo. Así que te ayudaremos a instalar el producto Codex. Si quieres hacerlo en este descanso de unos minutos, eres más que bienvenido. Ve a codex.com. Te mostraré el código QR en un segundo. Descárgalo. Tienes todos los diferentes sistemas operativos. Deberíamos tenerlos todos cubiertos. Creo que sí.

En este punto, una vez que lo inicies, nos aseguraremos de que tengas Git y node instalados. Estos son los dos requisitos de Codex para poder ejecutar proyectos reales. Y tendrás que iniciar sesión. Inicia sesión con tu cuenta de Wix o crea una nueva. Y una vez que lo hagas, deberías estar dentro de Codex. Así que nuevamente, siéntete libre de usar este código QR para escanear. Fue un poco más rápido, así que volveré cinco minutos antes de las cinco en punto. Eso serían 12 minutos a partir de ahora. Así que tómate tu tiempo. Descarga Codex mientras tanto e instálalo.

Lo siguiente que haremos será comenzar la configuración del proyecto y comenzar a realizar algunas acciones. Y nuevamente, si necesitas ayuda, hay varios de nosotros aquí que estaríamos encantados de ayudarte con lo que necesites hacer. Si tienes algún problema, simplemente escríbelo aquí en el chat. Ya hemos creado salas de trabajo previas, así que si necesitas asistencia personalizada, no dudes en pedirla. Estamos aquí para ayudarte.