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!
This talk has been presented at React Summit 2022, check out the latest edition of this React Conference.
FAQ
Una aplicación Full Stack es aquella que incluye tanto el desarrollo del frontend (la parte visible al usuario) como del backend (la parte que procesa los datos y maneja la lógica de negocio), integrando diversas herramientas y tecnologías para su funcionamiento.
Los principales desafíos incluyen la gestión de la diversidad y modularidad del ecosistema JS, la alta tasa de innovación, y el manejo de dependencias y configuraciones que pueden complicarse a medida que el proyecto crece.
Redwood.js es un framework de código abierto para desarrollar aplicaciones Full Stack, que integra tecnologías como GraphQL, React, Prisma, y Storybook, diseñado para simplificar los procesos desde el desarrollo hasta la producción.
Redwood.js utiliza un concepto llamado 'Redwood Cells' para manejar datos y estados, separando efectivamente las responsabilidades del frontend y backend pero facilitando su integración a través de una estructura organizada y convenciones claras.
Storybook es una herramienta que permite a los desarrolladores construir y organizar componentes de UI en aislamiento. Se integra con Redwood.js para proporcionar un entorno de desarrollo donde se puede trabajar directamente con los componentes y visualizar cambios en tiempo real, apoyando en la configuración y simulación de datos.
Redwood.js implementa seguridad por defecto en sus aplicaciones, utilizando autenticación integrada y permitiendo configurar fácilmente rutas y endpoints para que sean seguros, garantizando que solo los usuarios autorizados puedan acceder a ciertas partes de la aplicación.
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.
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.
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.
¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.
¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas ¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™? Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida? Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.
Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.
Tabla de contenidos: - Introducción a Vue3 - API de Composición - Bibliotecas principales - Ecosistema Vue3
Requisitos previos: IDE de elección (Inellij o VSC) instalado Nodejs + NPM
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Comments