Flujo de trabajo de desarrollo de extremo a extremo impulsado por el diseño que escala

Rate this content
Bookmark

Voy a mostrarte algo que no has visto antes: un flujo de trabajo simple e integrado hecho posible por React, RedwoodJS y Storybook. Comenzaremos desde cero, generaremos código para componentes, diseñaremos y simularemos estados, y luego terminaremos con una API segura y una interfaz de usuario CRUD.


¿Suena difícil? Lo era. ¡Pero ya no más! 🤯


Aprenderás cómo cerrar las brechas de desarrollo existentes entre diseños con estado, obtención de datos y tu API utilizando los componentes de Redwood Cell: una tienda única de React para obtener datos, manejar estados, simular y diseñar. Los equipos pueden avanzar más rápido. Los desarrolladores solitarios pueden iterar más rápidamente. Y hay beneficios secundarios desde la documentación hasta la seguridad y la accesibilidad, que se suman a mejorar la mantenibilidad a largo plazo a gran escala.


¡Prepárate para inspirarte con lo que podrás construir!

32 min
17 Jun, 2022

Video Summary and Transcription

Esta charla analiza los desafíos de construir aplicaciones full stack e introduce Redwood.js como solución. Se enfatiza la importancia de los flujos de trabajo impulsados por el diseño y el uso de las Celdas de Redwood para manejar el estado y simplificar tareas complejas. La charla también destaca la integración perfecta entre el front-end y el back-end utilizando datos simulados y la optimización del flujo de trabajo para equipos de alto rendimiento. Concluye mencionando las características de autenticación de Redwood y la importancia de la comunidad y la colaboración.

Available in English

1. Introducción a la construcción de aplicaciones Full Stack

Short description:

Hola, Ámsterdam. Es realmente bueno estar aquí. ¿Está bien si nos divertimos un poco? Vamos a divertirnos. Mi nombre es David y vengo a hablar sobre la construcción de una aplicación Full Stack. A veces las cosas pueden salirse de control rápidamente al construir una aplicación Full Stack. Hay mucha complejidad dinámica al ensamblar todas las partes. El ecosistema de JS tiene tanto belleza como tensiones. Nuestro objetivo es lanzar características lo antes posible.

Hola, Ámsterdam. Gente de Internet, de todo el mundo. Es realmente bueno estar aquí. ¿Está bien si nos divertimos un poco? ¿Estaría bien eso? Muy bien. Quiero decir, parte de esto será un recorrido. Pero parte de esto, bueno, puede volverse un poco extraño. Pero nos vamos a divertir. Nuevamente, mi nombre es David y vengo a hablar sobre la construcción de una aplicación Full Stack. Si, oh, sí, ahí vamos. Oh, nos pasamos. Mi controlador. Mi controlador hizo clic. Esa es una pregunta que quiero hacerles. ¿Así que quieren construir una aplicación Full Stack? ¿Sí? Muy bien. Tengo buenas noticias. Pero por supuesto, siempre se empieza con las malas noticias. Y las malas noticias son que a veces las cosas pueden salirse un poco de control, ¿verdad? ¿Alguien, una pregunta para ustedes, alguien que haya construido una aplicación Full Stack, ¿quién diría levantando las manos que ha utilizado probablemente el 75% de esas herramientas o herramientas similares en su aplicación? ¿Levantando las manos? ¿Correcto? ¿Qué tal el 80, 90%? ¿Levantando las manos? Correcto. Tal vez tres de cada cuatro, pero eso es parte de la belleza del ecosistema en el que trabajamos. Y también es una de las tensiones del ecosistema en el que trabajamos. Entonces, ¿qué pasó antes de que este tren literalmente se descarrilara? Están lanzando características, ¿verdad? Solo quieren construir características lo más rápido posible, diseño, desarrollo, implementación, repetir. Y a veces no siempre va como quieres que vaya. Hay una forma en la que ensamblamos todas las partes que agrega mucha complejidad dinámica, ¿verdad? Y la complejidad a menudo significa salirse de los rieles. La belleza del ecosistema de JS es su diversidad, modularidad y tasa de innovación. La desgracia del ecosistema de JS es su diversidad, modularidad y tasa de innovación. ¿Verdad? Es poderoso, pero a veces sale mal por las mismas razones por las que sale bien. Muy bien. Entonces, nuevamente, nuestro objetivo, queremos lanzar características, queremos hacerlo con frecuencia.

2. Desafíos de Arquitectura y Proceso

Short description:

Y a medida que nuestra aplicación crece, queremos lanzar características de manera continua. Necesitamos una arquitectura y un proceso que funcionen de manera eficiente en todo el stack. La configuración, la integración y las dependencias añaden sobrecarga. La separación de responsabilidades es importante, pero requiere integración y configuración al volver a unirlas.

Queremos lanzar características lo antes posible. Y a medida que nuestra aplicación, a medida que nuestro equipo crece, nuestro base de usuarios crece, queremos lanzar características de manera continua, frecuentemente. Diseño, desarrollo e implementación. Y no se trata solo de la tecnología. Entonces, de eso es de lo que quiero hablar hoy. Necesitamos tanto una arquitectura como un proceso que funcione en todo el stack de manera eficiente como sea posible. Entonces, ¿qué obstaculiza la arquitectura y el proceso? Oh, hizo algo de nuevo. Espera un segundo. Sabes, ya no confío en mi controlador. Uh-oh. ¿Acabo de revelar algo? Muy bien. ¿Qué obstaculiza? ¿Alguien ha trabajado con configuración antes? Vamos, levanten las manos. Sé que llegaremos allí, ¿verdad? Sí, configuración. Bueno, vamos, en JavaScript todo lo que hacemos es configurar. Si no están levantando las manos, entonces están mintiendo. Soy un desarrollador de frameworks, así que todo lo que hago es configurar, pero no sé si me gusta la configuración. Integración, configuración, dependencias, todo eso añade sobrecarga con el tiempo, porque también tienes que moverte rápido y mantener el ritmo con esas dependencias. A medida que ocurren cambios y roturas, tienes que mantener el ritmo con la configuración. Convenciones. Separación de responsabilidades. Ahora esto es realmente interesante. En el stack completo, te enseñan a separar responsabilidades, lo cual tienes que hacer. Esto puede ser a nivel de un punto de extremo específico. Tal vez estás creando una integración con una aplicación de terceros. Toda tu API, ¿verdad? Queremos separar responsabilidades. Queremos separar del front end, ¿verdad? Trabajando con React, trabajando con estado, trabajando con datos. Si solo queremos hacer diseño y maquetación, queremos separar responsabilidades. ¿Qué sucede cuando necesitas volver a unir esas responsabilidades separadas nuevamente? ¿Qué estás haciendo? Vamos, eso fue... Entonces, ¿qué fue la sobrecarga? Estás haciendo integración y configuración, ¿verdad? Incluso cuando separas responsabilidades, luego

3. Diseño impulsado por flujo de trabajo Full Stack

Short description:

El clicker me falló hoy. Seguridad. ¿Tu API es segura? Flujo de trabajo Full Stack impulsado por diseño. Un flujo de trabajo para personas a las que les gusta lanzar características. Te mostraré cómo tener un flujo de trabajo Full Stack desde el inicio hasta la escala. Comenzando con un proyecto independiente, crearemos componentes, aislamiento de diseño y trabajaremos con datos. Construiremos una API y una interfaz de usuario para CRUD y la haremos segura. Todo en esta presentación.

tenemos que volver y hacer integración y configuración en ellos, ¿verdad? Ok, siguiente. Clicker. El clicker me falló hoy. Seguridad. ¿Tu API es segura? ¿De verdad? ¿Porque tú lo hiciste? ¿También escribiste las pruebas de CI, verdad? Bueno, malas noticias. Vamos a las buenas noticias. Diseño impulsado por flujo de trabajo Full Stack. Sí, lo inventamos un poco. Pero es un flujo de trabajo para personas a las que les gusta lanzar características. Y te mostraré cómo puedes tener un flujo de trabajo Full Stack de principio a fin que incluye ese proceso de arquitectura del que hablé, que te permite lanzar de manera eficiente desde el inicio de tu proyecto hasta la escala. Entonces, esto es lo que significa. Quiero comenzar con un proyecto independiente. Y vamos a tener un archivo que será HTML y CSS. Y vamos a hacer un recorrido. Me lleva unos 25 minutos y sabía que eso no funcionaría. Así que vamos a ver algunas grabaciones y hacer un poco al final. Quiero mostrar esto. Vamos a comenzar con un archivo HTML, CSS, JSX. Vamos a crear un componente. Vamos a diseñar un aislamiento y hacer el diseño. Y luego este acoplamiento. Necesitamos trabajar con datos porque los datos son lo que necesitamos acoplar. Pero la falta de poder simular datos específicamente para fetch y estado es a menudo donde se rompe el acoplamiento. ¿Verdad? Así que vamos a trabajar en esa etapa de simular datos. Y luego vamos a construir toda nuestra API para CRUD. Vamos a construir toda nuestra interfaz de usuario para CRUD. Y luego la haremos segura. Y voy a hacer todo eso. ¿Cuánto tiempo tengo, Ellie?

4. Soluciones Full Stack impulsadas por diseño

Short description:

Y eso es lo que llamamos Full Stack impulsado por diseño. Entonces, ¿cómo resuelve el Full Stack impulsado por diseño esos cuatro desafíos que les mostré? Sobrecarga. Vamos a manejar la sobrecarga. Quiero mostrarles e introducirles una innovación en Redwood llamada Redwood Cells. Y por último, les mostraré cómo se ve ser seguro por defecto, su frontend y backend. Y nuevamente, esto es con Redwood. Ahí es donde trabajo. Soy cofundador de Redwood. Es un proyecto de código abierto, así que, ya saben, trabajo, pero hay otras formas de hacer esto en otros sistemas.

No importa. No respondas a eso. Pero lo haremos en esta presentación. Y eso es lo que llamamos Full Stack impulsado por diseño. ¿Suena bien? ¿Lo ven ahora? ¡Eso es bueno! Tal vez esté un poco somnoliento. Así que todos ustedes me están ayudando. Sigan así. Entonces, ¿cómo resuelve el Full Stack impulsado por diseño esos cuatro desafíos que les mostré? Sobrecarga. Vamos a tener configuración endian, configuración cero, listo para usar. Vamos a tener generadores de código y generadores de configuración, para que puedan comenzar sin tener que pensar en, espera, ¿qué complemento necesito para Storybook otra vez? Espera, ¿cómo simulo realmente datos en Storybook? Pero luego, ¿qué le digo a mis desarrolladores de backend al respecto? Así que vamos a manejar la sobrecarga.

¿Convenciones? Cierto. Quiero mostrarles e introducirles una innovation en Redwood llamada Redwood Cells. Y Redwood Cells son una forma de manejar datos, estado y fetch. Y quiero mostrarles la separación de preocupaciones y cómo usamos datos como acoplamiento, luego, una vez que tenemos la estructura de datos definida, pasar a Crud e integrar el frontend y el backend. Y por último, les mostraré cómo se ve ser seguro por defecto, su frontend y backend. Y nuevamente, esto es con Redwood. Ahí es donde trabajo. Soy cofundador de Redwood. Es un proyecto de código abierto, así que, ya saben, trabajo, pero hay otras formas de hacer esto en otros sistemas. Y solo quiero mostrarles, para sus stacks, algunas ideas y conceptos que pueden aplicar. Así que tengan paciencia conmigo por un segundo. Una analogía. Bien. Digamos que quieres aprovechar todo el poder en el universo para construir tu aplicación Full Stack, podrías intentar buscar el guantelete del infinito, ¿verdad? Porque qué más... Lo sé. Esto va a ponerse, tengan paciencia, va a ponerse un poco extraño, ¿verdad? Queremos agarrar el guantelete del infinito para poder aprovechar todo el poder del ecosistema de JavaScript que quiere desviarnos de nuestro camino, para poder hacer nuestra aplicación Full Stack. Así que cada uno de estos pasos diferentes, pueden imaginar, ¿no es hermoso? Saben, si convierten Keynote en un videojuego, es mucho más divertido hacer diapositivas. Cada uno de ellos es una gema del infinito. Nuestra misión es ir y agarrar la gema del infinito para poder obtener el guantelete del infinito antes, ¿ese es el Titán Loco mismo? Thanos también está tratando de obtener el guantelete del infinito porque toda buena historia tiene un villano, así que la nuestra también tiene un villano, y es Thanos. Queremos lanzar características, y ¿recuerdan a Thanos? Él quería hacer exactamente lo contrario. ¿De acuerdo? Así que esa es nuestra misión. Pero, ¿cómo vencemos a Thanos? Todos hemos visto la película, tuvo mucho éxito en taquilla. ¿Cómo vencemos a Thanos?

5. Construyendo una aplicación dinámica con Redwood.js

Short description:

Vamos a construir una aplicación dinámica y simbolizar a los Vengadores. Comenzaremos con un archivo JSX de HTML y CSS utilizando Tailwind. Luego, crearemos una página web dinámica con una interfaz de usuario CRUD y una API. Redwood.js es una aplicación de pila completa, totalmente integrada y con todas las funciones que incluye GraphQL y React.

¡Sí! Creo que sé quién fue. ¿Verdad? Con un equipo. De acuerdo, aquí es donde vamos. Necesitamos a los Vengadores. Y lo que vamos a hacer es construir una aplicación dinámica y vamos a simbolizar a los Vengadores. ¿Ven? Es divertido, ¿verdad? Nos vamos a divertir mucho aquí. De acuerdo, porque lo que realmente quiero mostrarles es un montón de código. Pero lo que haremos es comenzar con el archivo JSX allí, y todo lo que es es HTML y CSS. Por cierto, vamos a usar Tailwind y vamos a construir una página dinámica para reunir a los Vengadores y a todos los miembros del equipo allí. ¿Suena bien? De acuerdo. Veamos cómo va esto. De acuerdo, comencemos con un pequeño video rápido. Pero este es el archivo con el que comenzaremos. Tiene algunos datos en él que vamos a usar y solo quiero mostrarles que es HTML y CSS. Y luego a dónde queremos llegar, esta será la página web dinámica con la que terminaremos, ¿de acuerdo? Aquí está la interfaz de usuario CRUD. Viene con una API. Si se dieron cuenta, Vision estaba ausente. Ese tipo. Por cierto, WandaVision estuvo genial. En fin, pueden agregar a Vision y ahora tenemos una aplicación CRUD completa, ¿verdad? Eso es lo que vamos a hacer. De acuerdo. Redwood.js. Un poco rápido sobre Redwood. Creado por un tipo llamado Tom Preston Warner. Fue cofundador de GitHub. Construyó una de las aplicaciones Rails más grandes que existen. También construyó en Jekyll. Y hace cuatro años, se iniciaron conversaciones sobre lo que podría ser Redwood. Ahora, Redwood.js es una aplicación de pila completa, totalmente integrada y con todas las funciones que decimos que va de un proyecto secundario a una startup lo más rápido posible. E incluye algunas de sus herramientas favoritas.

6. Creando una aplicación Redwood con Storybook y Yarn

Short description:

Estamos en la conferencia de React. Prisma. Storybook y vamos a usar Tailwind. Infinity Stone 1. Overhead. ¿Qué tan rápido podemos pasar de la instalación a la codificación de funciones? Vamos a crear una nueva aplicación Redwood. Se inicia en, ya sé. Yarn, paquetes, instalación. Acabamos de iniciar Storybook. Código de pila completa, Storybook se inicia, todos los complementos ya están listos para ti. Una nota rápida sobre el código base del proyecto Redwood. Tienes espacios de trabajo de Yarn. Dos proyectos principales, tu API y tu web. Una API adecuada, como los servicios de Rails para tu lógica empresarial.

¿verdad? Entonces, reconocerás GraphQL. React. Estamos en la conferencia de React. Prisma. Storybook y vamos a usar Tailwind. De acuerdo. Esas son nuestras herramientas. Infinity Stone 1. ¿Ves? Ya es más divertido, ¿verdad? Infinity Stone 1. Overhead. ¿Qué tan rápido podemos pasar de la instalación a la codificación de funciones? Y todo lo que quería mostrarte es que no estaba haciendo trampa, ¿de acuerdo? Bueno, podría haber estado haciendo trampa porque podría haber editado los videos, pero no necesitas saber eso. De acuerdo. Así que vamos a crear una nueva aplicación Redwood. Se inicia en, ya sé. Yarn, paquetes, instalación. De acuerdo. Así que aceleré todo eso. Vamos a CD en el directorio. Oh, lo siento. Y luego inmediatamente no iniciamos nuestro servidor de desarrollo local. Esto es realmente importante. Acabamos de iniciar Storybook. ¿De acuerdo? Código de pila completa, iniciado Storybook, Storybook se inicia, todos los complementos ya están listos para ti. Aún no hay historias porque ni siquiera hemos comenzado a codificar. La accesibilidad está activada. Storybook está listo para comenzar. Así que ese fue nuestro primer paso, instalar, ejecutar el proceso de Storybook. Una nota rápida sobre el código base del proyecto Redwood. Tienes espacios de trabajo de Yarn. Por lo tanto, hay dos proyectos principales allí, tu API y tu web. Lo llamamos una API adecuada. Si estás familiarizado con Rails,

7. Creating a Page with Storybook and Tailwind

Short description:

También tenemos funciones para listas de servidores o para usar Fastify para implementar. La web es una aplicación React. Lo primero que debemos hacer es preparar nuestra página. Usamos un generador para crear la página. Te darás cuenta de Storybook, que te permite diseñar dentro de él utilizando código. Viene con tres archivos generados: archivo JSX principal, archivo de historia y una prueba. A medida que realices cambios en tu CSS, verás inmediatamente esos cambios dentro de Storybook. Storybook es una herramienta maravillosa para el desarrollo de UI.

se sentirá y se verá mucho como los servicios de Rails para tu lógica empresarial. También tenemos funciones para listas de servidores o para usar Fastify para implementar, GraphQL para los SDL. Y te darás cuenta de que Jest viene preconfigurado. Y la web es una aplicación React. Nos adentraremos un poco más en eso. Pero eso es la base de código. No tengo más tiempo para profundizar en ello ahora de lo que vamos a ver. Lo primero que debemos hacer es preparar nuestra página. Y nuevamente, estamos capturando la primera piedra aquí. Quiero mostrarte qué hacemos con el código base. Entonces, este es un generador para crear la página. ¿No generas el equipo de la página, verdad? Tienes que empezar con la página del equipo. Eso está hecho. Te darás cuenta de Storybook, el proceso se está ejecutando y de inmediato Storybook, ahora estás viendo esa página. Solo tenemos un poco de data de plantilla que aparece y ¿no sería bueno si con un solo comando pudieras configurar Tailwind? ¿Y funcionó con Storybook? Y así, de inmediato estás diseñando dentro de Storybook utilizando el código que vas a utilizar. Observa que se generaron tres archivos. Esto va muy rápido, lo sé. Y esos tres archivos son tu archivo JSX principal, tu archivo de historia y una prueba. Así que viene con una prueba por defecto. Y todo lo que estoy haciendo aquí es copiar y pegar. Queremos trabajar dentro de nuestro nuevo componente de página. Así que estoy copiando y pegando ese código de inicio que tenía. Y ahora tienes tu página creada dentro de Storybook, no maquetada. Y a medida que haces cambios en tu CSS, en este caso, solo quiero reproducirlo ahí. A medida que haces cambios en tu CSS, verás inmediatamente esos cambios dentro de Storybook. ¿Alguien ha usado Storybook antes? Sí. ¿Les encanta? Vamos. Nos encanta. Storybook es maravilloso.

8. Introducing Redwood Cells and Handling State

Short description:

Recomiendo echar un vistazo a Storybook. A continuación, simplifiquemos las cosas difíciles e introduzcamos las celdas de Redwood. Estas celdas manejan el estado de React, GraphQL, cliente-servidor, solicitudes de búsqueda y puntos finales. En la arquitectura de componentes, tenemos una página, un componente de miembro del equipo para diseño y estilo, y una celda de Redwood que maneja los datos y pasa props al componente de miembro del equipo. Generemos la celda de Redwood para los miembros del equipo, que incluye manejar el estado: vacío, error, carga y éxito.

Y si no lo has usado, probablemente sea por la configuración y la integración. Realmente te recomiendo que lo pruebes. Storybook es una herramienta increíble. Muy bien. A continuación, convenciones. Entonces, ¿cómo podemos simplificar las cosas difíciles y obtener la Gema del Infinito Número 2? Quiero presentarte las celdas de Redwood. Y las celdas de Redwood se encargarán de todas las cosas difíciles sobre el estado de React. GraphQL, cliente-servidor, porque nos gusta hablar de GraphQL, pero no sé si nos gusta GraphQL. Y también solicitudes de búsqueda y puntos finales. Esta es la arquitectura de componentes que voy a desarrollar. Comencé con una página. Así que ya tengo la página. A continuación tendré un componente de miembro del equipo. Y lo usaré predominantemente solo para el diseño y el estilo de un miembro del equipo. El componente de la página, básicamente, puedes pensar en él como un envoltorio. Lo siento, diseño. De la forma en que lo estoy haciendo aquí. Pero ahora hay un componente intermedio. Y ese es la celda de Redwood. Y lo que usaré eso, el trabajo que esa celda va a hacer... Esa es una buena metáfora, ¿verdad? ¿Sería una analogía o una metáfora? A veces me confundo con eso. De todos modos. El trabajo que la celda va a hacer es que va a manejar los datos y pasar las props al componente de miembro del equipo. Y eso es todo. Te mostraré ese código aquí en un segundo. Pero primero, empecemos. Y por supuesto hay un generador para eso. Quiero mostrarte cómo generar la celda de Redwood para los miembros del equipo. Y de inmediato, ves esta historia, pero hay cuatro subhistorias allí.

9. La estructura y los beneficios de las celdas de Redwood

Short description:

¿No es interesante? La celda de miembros del equipo en Redwood es efectivamente un componente de orden superior que maneja consultas y estados. Ayuda a simplificar tareas complejas aprovechando convenciones.

Y eso es manejar el estado. Vacío, error, carga y éxito. ¿No es interesante? ¿De dónde sacamos eso? Y si miras la celda de miembros del equipo, tenemos varias cosas dentro de este componente. Tenemos una consulta. Tenemos todos nuestros estados. Carga, vacío, error y éxito. También tenemos otros dos archivos que se generaron allí, las historias y las pruebas. Pero, ¿alguien sabe a qué nos recuerda esto? Esto es una celda de Redwood. La estructura de una celda de Redwood. ¿Esto le recuerda algo a alguien en el habla de React? Es efectivamente un componente de orden superior. No técnicamente. Dije efectivamente, porque nos corrigieron. Pero puedes pensar en ello como un componente de orden superior. Así que tiene la consulta para GraphQL. Estamos usando el cliente Apollo. Tienes cuatro estados dentro de un solo componente. Y, de nuevo, esta gema del infinito, ves, la analogía está funcionando realmente bien. Esta gema del infinito nos está ayudando con las convenciones. Y nos permite aprovechar las convenciones para que

10. Cascading Code and Passing Props

Short description:

Te mostraré cómo el código se cascada desde el componente de página hasta la celda de miembro del equipo. Se utilizan consultas GraphQL para pasar props a la celda. Se crea un mock para Storybook.

podemos simplificar muchas cosas que son realmente difíciles y complejas. Hablé un poco sobre la celda. Pero, nuevamente, notarás en la parte superior que hay una consulta, una consulta GraphQL. Haremos más trabajo en eso. Y luego tenemos, efectivamente, cuatro componentes, el de carga, vacío, error y éxito. Muy bien. En el próximo video, quiero mostrarte, hay mucho código moviéndose. Pero recuerda ese diagrama que te mostré, la arquitectura, la jerarquía que quiero crear? Página, celda y luego un miembro del equipo dentro de ella. Te lo explicaré. Pero todo lo que estoy haciendo es mover el código hacia abajo en la jerarquía. Así que estoy cascando el código. Para que cada componente pueda hacer su trabajo individualmente. Aquí vamos. Primero vamos a empezar, el componente de página es donde está el código. Y comienzo importando la celda de miembro del equipo que he creado. Así que voy hacia abajo. Ya no necesito estos data aquí. ¿Verdad? Eso nunca fue más que para iniciar el proceso. Y aquí, en lugar de mi lista desordenada, es donde la celda de miembro del equipo va a hacer el trabajo. Y ahora, estoy en la celda de miembro del equipo. En esa lista desordenada que acabo de copiar, ahora la estoy pegando. ¿Verdad? Solo estoy trabajando hacia abajo en la jerarquía. Y también... como... conozco las consultas GraphQL. Da miedo. Pero solo son props. Piensa en props. ¿Qué props necesito? Y los estoy poniendo en mi consulta justo aquí. A continuación, viene un mock. Y este es un mock para

11. Mock Files and Creating the Team Member Component

Short description:

Estamos utilizando mockServiceWorkers con Storybook para mostrar el estado de éxito con datos simulados. Puedes ver instantáneamente tus componentes con datos simulados en diferentes estados. Hay un archivo de historia de celda y un archivo simulado de celda. El archivo de historia obtiene sus datos de algún lugar. Necesitamos un componente más, el miembro del equipo. La celda se encargará de los datos, mientras que el nuevo componente se enfocará en el diseño utilizando HTML y CSS.

storybook. ¿Verdad? Entonces, si nunca has visto un archivo simulado antes... por cierto, estamos utilizando mockServiceWorkers para esto. Va con Storybook. ¿Verdad? Es lo que Storybook está utilizando para mostrar el estado de éxito con datos simulados. ¿No es genial? Y lo que no puedes ver... simplemente no pude hacerlo lado a lado mientras codificaba. Pero estás trabajando en Storybook e instantáneamente estás viendo tus componentes con datos simulados en cada uno de los estados... lo siento, datos simulados en cada uno de los estados de inmediato. Así que eso es bastante divertido. Una cosa que quiero mostrarte muy rápidamente, hay un archivo de historia de celda y un archivo simulado de celda. No hay magia ahí. Es solo una importación. ¿De acuerdo? ¿Tiene sentido en cierto modo? El archivo de historia está obteniendo sus datos de algún lugar. De acuerdo. A continuación, tenemos... había un componente más que necesitábamos. ¿Recuerdas? Miembro del equipo. Sí, recuerdas. En realidad estabas prestando atención. Eso es bueno. Miembro del equipo. Y... quiero que la celda haga el trabajo de los datos. Porque eso es consulta y estado para mí. Entonces, eso es obtener y estado. Quiero mover todo lo demás a un nuevo componente que llamo mi miembro del equipo. Y ahí es donde puedo pensar en mi diseño para los miembros del equipo. Así que eso será HTML y CSS. Nuevamente, solo moviendo código.

12. Importando el Componente Miembro del Equipo y Usando Mocks

Short description:

Pero es mucho más eficiente. Ahora estamos importando el componente miembro del equipo en la celda de miembros del equipo. Por último, ese mock que creé para mi celda, puedo usar ese mismo archivo mock para el componente miembro del equipo porque quiero verlo en Storybook. Tengo todos mis componentes mostrando historias dentro de un Storybook. Es algo hermoso y realmente divertido y mágico de usar.

Es extraño no estar escribiendo esto. Pero es mucho más eficiente. Y no llegas a descubrir qué malo soy escribiendo a máquina. Muy bien, aquí estamos. Ahora estamos importando el componente miembro del equipo en la celda de miembros del equipo, en plural para ayudarnos a recordar que está iterando. Limpiando nuestras props. Y aquí dentro del miembro del equipo, este es el componente. Y ahora aquí es donde estará todo el HTML para el diseño. Y necesito asegurarme de pasar el miembro. En realidad, me alegra no estar haciendo esto en vivo ahora mismo. No hubiera salido bien. No te hubiera impresionado. Muy bien. Por último, ese mock que creé para mi celda, puedo usar ese mismo archivo mock para el componente miembro del equipo porque quiero verlo en storybook, ¿verdad? En una celda, pasaremos las props hacia abajo a un miembro del equipo, así que en este caso, puedo manejarlo a nivel de mock. Y luego inmediatamente, y nuevamente, es más impresionante si lo ves a pantalla completa. Tengo todos mis componentes mostrando historias dentro de un storybook, ¿verdad? Los data se pasan al nivel de la página. Puedo ver los mocks para la celda y el miembro. Todo está ahí, simplemente está.

13. Acoplando Frontend y Backend con Datos Falsos

Short description:

De acuerdo. Hasta ahora tenemos dos piedras. Vamos a acoplar el desarrollo del frontend y el backend utilizando datos falsos y estado. Crearemos un modelo en nuestro esquema de datos utilizando la misma estructura que la consulta de la celda de miembro del equipo. Con el servidor de desarrollo de Redwood, podemos pasar rápidamente del desarrollo local a trabajar en todo el stack. La alineación entre el frontend y el backend es crucial, y la logramos con celdas y datos falsos.

es algo hermoso y realmente divertido y mágico de usar. De acuerdo. Hasta ahora tenemos dos piedras. Siguiendo un poco. ¿Está bien? ¿Alguien ha visto algo así antes con storybook? Sí, no pensé que quisiéramos que esto fuera. Esta fue una visión que teníamos para el uso de storybook. Así que sé que es una visión de storybook. Nos encanta trabajar con el equipo de storybook que también tenían. De acuerdo, dos piedras abajo, nos queda una piedra aquí. La tercera piedra del infinito, separación de concurrencia, en realidad tenemos dos. ¿Cómo podemos acoplar el desarrollo del frontend y backend utilizando datos falsos en estado? Y cómo vamos a hacer eso es tomando esa consulta de la celda de miembro del equipo. Ya tenemos nuestra estructura de datos. Y ahora en nuestro modelo de datos o en nuestro esquema de datos, vamos a crear un modelo utilizando esa misma estructura. Estamos utilizando prisma. No te preocupes mucho por los atributos. Pero tienes el mismo modelo de datos, ID, nombre, imagen, URL. Y déjame mostrarte lo rápido que podemos avanzar una vez que iniciamos el servidor de desarrollo de Redwood. Ahora estamos en desarrollo local. ¿De acuerdo? Ya no estamos trabajando en storybook porque vamos a trabajar en todo. Y esta es esa pieza de acoplamiento. Por lo general, en el frontend o trabajarías todo lo que necesitas para la interfaz de usuario del frontend. Y luego tienes que averiguar cómo se verá eso en el backend o si eres un desarrollador de backend, comenzarás en el backend y pensarás en las tablas y modelos que podrías necesitar. Y luego puedes intentar avanzar en el frontend. Es como construir un túnel debajo de una montaña. Si te equivocas, te equivocas por millas. Así que tratar de unir esas dos cosas, realmente quieres tener alineación. Y eso es lo que estamos usando, celdas y datos falsos.

14. Optimizando el Flujo de Trabajo para Equipos de Alto Rendimiento

Short description:

Lo que sucedió allí es que con el comando Prisma Migrate, ahora tenemos una base de datos local SQLite con el mismo esquema y tabla que se necesita para el código del frontend. Quiero hablar sobre Thanos y la importancia de que los equipos de alto rendimiento construyan productos de alto rendimiento. Necesitamos optimizar el proceso para que las personas afecten el conjunto.

estado para hacer. Lo que sucedió allí es que con el comando Prisma Migrate, ahora tenemos una base de datos local SQLite con el mismo esquema y tabla que se necesita para el código del frontend. Esto será rápido. Esto es de lo que realmente quería hablarles. Quiero hablar sobre Thanos. Hay un enfoque maravilloso en el rendimiento de las herramientas. Y con razón. El rendimiento web, el rendimiento web. Eso es importante. Necesitamos hacer eso. Pero Thanos, estoy hablando de Thanos a un grupo de adultos. Thanos, ¿cómo vences a Thanos, de nuevo? Con un equipo. Los Vengadores. Así que, si quieres vencer a Thanos, eso es lo que tienes que hacer. Necesitas un equipo. Me encanta esto. Fue genial. Es un poco ridículo. Los equipos de alto rendimiento construyen productos de alto rendimiento. Hay una gran cantidad de investigaciones que hablan de esto, ¿verdad? Podemos centrarnos en la tecnología, y necesitamos hacerlo, pero también necesitamos afectar el conjunto, y necesitamos optimizar el proceso para las personas con el fin de afectar el conjunto, ¿de acuerdo? Entonces, déjenme mostrarles cómo se ve eso en este escenario cuando optimizas un flujo de trabajo para las personas con las que estaremos trabajando en la aplicación.

15. Creando una Aplicación Full Stack con Demo CRUD

Short description:

En un solo comando, ejecutamos scaffold para la interfaz de usuario y la API, creando una aplicación full stack. Los archivos generados incluyen archivos SDL y de servicio para la lógica, así como diferentes celdas para el manejo de datos. Mostramos la interfaz de administración con una demostración rápida de CRUD, comenzando con una página de equipo vacía y agregando un miembro del equipo. Hacemos una transición perfecta desde el front end al back end. Por último, hablamos sobre la importancia de la seguridad.

cómo podría verse eso. Entonces, en un solo comando, vamos a ejecutar scaffold para la interfaz de usuario, y esto creará todo lo que necesitamos en la API, todos nuestros endpoints basados en ese modelo de data que tenemos, y esto creará todo lo que necesitamos en la interfaz de usuario para poder ejecutar CRUD. Y en este punto, ahora tenemos una aplicación full stack. Se generaron muchos archivos, pero nuevamente, son los archivos SDL, son los archivos de servicio donde se lleva a cabo nuestra lógica, y en el front end, son las diferentes celdas las que hacen el trabajo de data por nosotros para que podamos hacer CRUD. Y muy rápidamente, esta es la interfaz de administración real, una demostración rápida de CRUD. Verás que no hay nada en la página del equipo. Aún no hemos creado ningún miembro del equipo. Ahora estamos dentro de una aplicación dinámica. Aparentemente, Falcon es a quien elegí para comenzar. ¿Verdad? Y boom, tenemos a Falcon. Si volvemos atrás, editar miembros del equipo, podemos editar eso. Eso es bastante genial, ¿verdad? Muy bien. Pasamos del front end al back end en un solo flujo. Ah, por cierto, estado vacío, ¿verdad? Está ahí para ti. Y un poco... sí, un poco, pero si lo hiciera demasiado simple, entonces tu mente no se sorprendería pero debería sorprenderse solo un poco. Solo un poco. Muy bien. Hay una última piedra del infinito y lo haré muy rápido. ¿Cuál fue la última piedra del infinito que necesitábamos? Me salté eso muy rápido, ¿verdad? Seguridad. Entonces, ¿cómo podemos hacer seguridad que prometí que sería nuestro bono? Oh, hombre. Spoiler. Y lo mostraré muy rápidamente. Pero primero, ¿lo logramos? Pantalla principal. No funcionará si mis pantallas no funcionan. ¿Estoy en línea? No. Es mi cosa, no va a funcionar. Lo sé. Sabes, es una pena cuando el gran final no sale como quieres. Pero eso es

16. Redwood Autenticación y Flujo de Trabajo

Short description:

Redwood tiene autenticación por defecto y en un solo comando. Los archivos SDL tienen directivas que los hacen seguros por defecto. Puedes cambiar fácilmente un archivo SDL de autenticado a omitir para crear una API pública. Agregar 'private' a una ruta en el archivo de rutas la oculta y redirige a la página de inicio. Estas características fueron diseñadas para crear un flujo de trabajo amigable para el usuario.

muy bien. Voy a saltar esa parte y volver a mis diapositivas. Redwood tiene autenticación por defecto y en un solo comando, y te explicaré esto muy rápidamente. Cuando configuras la autenticación de Redwood, esos archivos SDL que te mostré, tienen directivas en ellos y todos son seguros por defecto. Entonces, esa página pública que viste, para los miembros del equipo, ya no sería accesible, aunque la página en sí misma lo sería, pero tu endpoint sería seguro por defecto y luego con un cambio de directiva en un archivo SDL, lo cambiarías de autenticado a omitir. Tendrías una API pública. Y luego, dentro de nuestro archivo de rutas, si agregas 'private' a cualquier ruta, esa ruta se vuelve oculta. Puedes redirigirlos a la página de inicio. Y nuevamente, ¿por qué hicimos esas cosas con Redwood? Hicimos esas cosas porque queríamos construir un flujo de trabajo para

17. Final Remarks and Redwood Community

Short description:

Si estás interesado en Redwood, la mejor manera de aprender Redwood es hacer el tutorial de Redwood y unirte a nuestra comunidad de más de 400 colaboradores. Sígueme en Twitter para obtener más información. Gracias por tu generosidad.

personas. Muy bien, tengo una diapositiva final. ¿Podemos mostrarla de nuevo por casualidad? Quería esto, también estaba emocionado por esto. ¿Va a aparecer? No. De acuerdo. Tenía a Tony Stark al final. Tienes que terminar una presentación con Tony Stark si vas a hablar de Thanos, ¿verdad? De acuerdo, las diapositivas no están apareciendo. De acuerdo, lo entiendo. Vamos. ¿En serio? De acuerdo. Gracias. Han sido muy amables. Esa no es la forma en que quería terminar. Si estás interesado en Redwood, la mejor manera de aprender Redwood es hacer el tutorial de Redwood, y la mejor manera de tener éxito con el tutorial es unirte a nuestra comunidad. Tenemos una maravillosa comunidad de colaboradores, más de 400, y amamos a nuestros colaboradores. Tenemos una dinámica de ayuda en nuestros foros y en nuestro Discord, y por último, prometo que pondré esta demo en línea y podrás echarle un vistazo allí. Sígueme en Twitter si quieres obtener más información. Gracias. Han sido muy generosos. Gracias, David. Recuerden, David, nadie se mueve. Estaremos en el stand de los oradores afuera donde tal vez él haga la demostración para ustedes. Ese es su tiempo, no mi tiempo. De acuerdo, David, ¿qué hay de la renderización del lado del servidor con Redwood y TypeScript? Sí. ¿Qué hay de la renderización del lado del servidor y TypeScript? Me refería a la presentación y lo omití. Recuerden salir en silencio como muestra de respeto para que todos podamos escuchar. Gracias. No, está genial. Sí, completamente tipado. Me olvidé de mencionarlo cuando comenzamos el proyecto.

18. JavaScript Project and Redwood Features

Short description:

Acabo de comenzar con un proyecto de JavaScript porque hace que las demostraciones sean un poco más fáciles cuando estás trabajando con código. No hacemos renderizado del lado del servidor en este momento. ¿Puede Redwood generar contratos de TypeScript basados en la API simulada? Redwood admite otros marcos además de React. Es un proyecto de código abierto. La importancia de la comunidad y el equipo en mi vida.

pero puedes pasar TypeScript. Acabo de comenzar con un proyecto de JavaScript porque hace que las demostraciones sean un poco más fáciles cuando estás trabajando con código. El renderizado del lado del servidor significa muchas cosas hoy en día con el lenguaje de marketing. No hacemos renderizado del lado del servidor en este momento. Hacemos una pre-renderización, que es básicamente una generación de sitio estático. Pronto tendremos pre-renderización dinámica y... no me debes mucho, pero verás un renderizado del lado del servidor antes de que termine el año.

¿Es una promesa o una amenaza? Será genial. Muy bien. ¿Puede Redwood generar contratos de TypeScript basados en la API simulada? Probablemente, Orda. No es un problema que quieras, porque necesitarías admitir algunos formularios de RLs. Sí, eso es Orda, el chico de TypeScript. Entonces, lo que dijo Orda, y esto es útil, esa es probablemente la pregunta correcta. Pero en el contexto de Redwood, eso no es algo que necesitarías. Genial. ¿Admite otros marcos además de React? Esa es una pregunta fantástica. Redwood, debido a los espacios de trabajo que mencioné, puedes ejecutar Redwood como una API independiente, ¿y por qué usaríamos GraphQL si no tuviéramos la intención de que sea multi-cliente? Porque hoy en día, ¿qué productos no son multi-cliente? Quiero decir, hay muchos sitios geniales que se quedan ahí, pero nuestra intención es que sea multi-cliente desde el principio. Así que sí, hay muchas startups geniales en este momento que están usando la API de Redwood con Next, ejecutando multi-cliente a través de Electron, CLI, utilizando diferentes sitios web en los que están implementados. Así que sí, esa es la respuesta. ¿Y es gratis, o cómo se monetiza? Sí, Redwood es un proyecto de código abierto. Está patrocinado, pero es código abierto. Si no lo mencioné al principio, fue mi error. Código abierto y será código abierto. Antes de dejarlos ir, creo que tenías algo que compartir. Sí, lo tengo. Gracias, Ellie, por el tiempo. Los últimos años han sido un poco locos para todos, y lo que quería dejar en claro es lo importante que es la comunidad y el equipo en mi vida. Hay un buen amigo aquí que nunca antes había conocido, y... Lo siento, ha sido una semana larga. Toby, solo quería saludarte, porque nada de esto lo hice solo. Fue hecho con una maravillosa comunidad de personas, y es una lástima que sea el único que está aquí contándote sobre ello. Así que quería decir Toby, ven aquí arriba. Solo quería conocerte por primera vez. Hola, hombre. Ese es un gran abrazo. Gracias, amigo. Me equivoqué al final. Es un placer conocerte. Es realmente bueno conocerte. Eso fue todo. Gracias nuevamente a David por unirse a nosotros, y a Toby.

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

React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
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.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)