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!

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.

David S. Price
David S. Price
32 min
17 Jun, 2022

Comments

Sign in or register to post your comment.

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.

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

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

No resuelvas problemas, elimínalos
React Advanced 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
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.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
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.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
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.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
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.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
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.
El Epic Stack
React Summit US 2023React Summit US 2023
21 min
El Epic Stack
Top Content
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.

Workshops on related topic

React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
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.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced 2021React Advanced 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
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.
Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
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: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
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
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
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
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
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.