De Frontend a Full-Stack: Añadiendo Funcionalidades Sin Añadir Tiempo

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Bookmark
Rate this content

Estamos todos aquí porque amamos React, y lo amamos porque es un sistema simple e intuitivo para crear sitios web hermosos e interactivos. ¿Qué pasaría si construir aplicaciones full-stack pudiera ser igual de simple e intuitivo? ¡Gestionar datos y recursos en tus aplicaciones web no tiene que ser complejo y llevar mucho tiempo! Aprende cómo conectar bases de datos, APIs y otros servicios a tus aplicaciones en minutos para crear experiencias interactivas en tiempo real para tus usuarios. En esta sesión, comenzarás con una página en blanco y terminarás con una aplicación digna de portafolio y las habilidades que necesitas para construir tu próxima aplicación.

This workshop has been presented at React Summit US 2024, check out the latest edition of this React Conference.

Jen Person
Jen Person
95 min
10 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Comencemos configurando una aplicación en la consola de Squid. Squid AI es una plataforma de desarrollo que ofrece facilidad de uso y capacidades de IA. Aprende cómo construir aplicaciones full-stack más rápido usando Squid. Explora las características y la documentación para agregar funcionalidad, ver y gestionar datos, actualizar y eliminar elementos en la base de datos, y asegurar tu aplicación. Implementa triggers, schedulers y web hooks para automatización y comunicación asincrónica. Descubre cómo agregar funcionalidad de IA con los agentes de IA de Squid. Configura una nueva aplicación, agrega un agente de IA y proporciona contexto para las consultas. Construye y consulta tareas en la base de datos usando agentes de IA. Los controles de acceso y las opciones de precios están disponibles en la consola de Squid. Únete a la comunidad de Discord para obtener soporte y compartir tus proyectos.
Video transcription and chapters available for users with access.

Watch more workshops on topic

Webinar gratuito: Construyendo aplicaciones Full Stack con Cursor
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
71 min
Webinar gratuito: Construyendo aplicaciones Full Stack con Cursor
Top Content
WorkshopFree
Mike Mikula
Mike Mikula
Para asistir al webinar, por favor regístrate aquí.En este webinar cubriré un proceso repetible sobre cómo iniciar aplicaciones Full Stack en Cursor. Espera entender técnicas como usar GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usar esos en notas para generar listas de verificación que guíen el desarrollo de la aplicación. Profundizaremos más en cómo corregir alucinaciones/errores que ocurren, indicaciones útiles para hacer que tu aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espera poder ejecutar tu propia aplicación Full Stack generada por IA en tu máquina!
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
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.
Masterclass de GraphQL en la Nube con Neo4j Aura, Next.js y Vercel
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Masterclass de GraphQL en la Nube con Neo4j Aura, Next.js y Vercel
Workshop
William Lyon
William Lyon
En este masterclass construiremos y desplegaremos una aplicación de GraphQL de pila completa utilizando Next.js, Neo4j y Vercel. Utilizando un grafo de conocimiento de artículos de noticias, primero construiremos una API de GraphQL utilizando las rutas de API de Next.js y la Biblioteca de GraphQL de Neo4j. A continuación, nos enfocaremos en el front-end, explorando cómo utilizar GraphQL para la obtención de datos con una aplicación de Next.js. Por último, exploraremos cómo agregar personalización y recomendación de contenido en nuestra API de GraphQL para servir artículos relevantes a nuestros usuarios, luego desplegaremos nuestra aplicación en la nube utilizando Vercel y Neo4j Aura.

Tabla de contenidos:
- Visión general de Next.js y cómo empezar con Next.js
- Rutas de API con Next.js y construcción de una API de GraphQL
- Utilizando la Biblioteca de GraphQL de Neo4j
- Trabajando con Apollo Client y obtención de datos de GraphQL en Next.js
- Despliegue con Vercel y Neo4j Aura
El Viaje Desde el Desarrollo Frontend con React al Desarrollo Fullstack con Next.js
React Advanced 2024React Advanced 2024
143 min
El Viaje Desde el Desarrollo Frontend con React al Desarrollo Fullstack con Next.js
Workshop
Eric Burel
Eric Burel
Únete a nosotros en el viaje desde el desarrollo frontend con React al desarrollo fullstack con Next.js. Durante esta masterclass, seguiremos el tutorial oficial de Next.js Learn con Eric Burel, entrenador profesional y autor de NextPatterns.dev. Juntos, configuraremos un sitio web con Next.js y exploraremos sus características del lado del servidor para construir aplicaciones de alto rendimiento.
- Introducción: descubriendo Next.js y su filosofía centrada en el servidor- Creación de un sitio web multipágina perfectamente optimizado- Entendiendo las capacidades de renderizado del lado del servidor de Next.js- Conclusión: cómo Next.js te empodera como desarrollador de React
Construyendo aplicaciones GraphQL de pila completa con Hasura y Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Construyendo aplicaciones GraphQL de pila completa con Hasura y Vue 3
Workshop
Gavin Ray
Gavin Ray
El ecosistema frontend avanza a un ritmo frenético. Este masterclass tiene como objetivo equipar a los participantes con una comprensión del estado del ecosistema Vue 3 + GraphQL, explorando ese ecosistema - prácticamente y a través del desarrollo de aplicaciones de pila completa.

Tabla de contenidos
- Los participantes utilizarán Hasura para construir una API GraphQL en tiempo real respaldada por Postgres. Juntos recorreremos su consumo desde un frontend y haremos que el frontend sea reactivo, suscrito a los cambios de datos.
- Además, analizaremos las herramientas comúnmente utilizadas en el stack Vue GraphQL (como Apollo Client y Urql), discutiremos algunas alternativas menos conocidas y abordaremos los problemas frecuentemente encontrados al comenzar.
- Se describirán varios patrones para gestionar datos con estado y sus compensaciones durante el masterclass, y se mostrará una implementación básica para cada patrón discutido.
Nivel del masterclass

NOTA: No se requiere experiencia previa con GraphQL, pero puede ser útil para ayudar a la comprensión. Se cubrirán los fundamentos.

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

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.
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
Top Content
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.
Patrones de Arquitectura Remix
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Patrones de Arquitectura Remix
Top Content
This Talk introduces the Remix architecture patterns for web applications, with over 50% of participants using Remix professionally. The migration from single page applications to Remix involves step-by-step refactoring and offers flexibility in deployment options. Scalability can be achieved by distributing the database layer and implementing application caching. The backend for frontend pattern simplifies data fetching, and Remix provides real-time capabilities for collaborative features through WebSocket servers and Server-SendEvents.
Pensando Como un Arquitecto
React Summit 2025React Summit 2025
32 min
Pensando Como un Arquitecto
Top ContentPremium
Modern software development shift towards developers involves more complex architecture decisions with trade-offs and long-term consequences. 11 tips learned from diverse projects and roles. Focus on decentralization, avoid technology-first approach, and consider context for great architecture. Understanding the holistic approach to architecture. Linking architecture to culture and structure. Importance of aligning decisions with business needs using techniques like event storming and domain storytelling. Netflix's core domain focuses on content accessibility and tailored user experience. Supporting domains like personalization ensure usability even during downtime. Payment methods, a generic domain, are essential for subscription. Adapting boundaries and architectural characteristics is crucial for evolving businesses. Define evolving core domains and adapt characteristics accordingly. Select key architectural characteristics for system design. Consider different availability needs for various subdomains like core and generic. Latency varies based on functions; strict for finance, flexible for integration. Understand and apply specific characteristics to subdomains for optimal system performance. Understand the need for different approaches in system design. Consider availability requirements for active architecture. Evaluate decisions impacting software design and technology. Modularize workload at code or code-infrastructure level. Consider context in choosing between monoliths and microservices. Adapt system modularity based on context and team structure. Consider modularity based on system requirements. Be pragmatic in architectural decisions. Utilize event-driven architecture in distributed systems. Leverage infrastructure for efficient service stitching and delivery. Adapt to changing system characteristics for scalability and efficiency. Consider cost implications of shifting from event-based to cron job. Design software for evolution, embracing changes and tradeoffs for user-focused systems. Create a sociotechnical system balancing long-term vision and immediate needs with a lean mindset. Embrace an iterative approach to software development, understanding the domain, consumers, and the system. Master communication skills for architects by focusing on communication, inclusion, and documentation. Translate technology reasons into business benefits to effectively communicate with various stakeholders. Change language to match audience, share reasoning effectively. Involve others in decision-making for better understanding and solutions. Master architectural decision records and architecture as code. Utilize written communication for API changes, involve all voices. Sequence diagrams aid team understanding; master architecture as code. Focus on key aspects, prioritize effectively to avoid distractions.
Remixando tu Stack en un Espacio de Trabajo Monorepo
Remix Conf Europe 2022Remix Conf Europe 2022
22 min
Remixando tu Stack en un Espacio de Trabajo Monorepo
Let's talk about remixing our stack in a Monorepo workspace, which allows for incremental migration and is suitable for transitioning from a Next.js app to a remix stack. Refactoring may be required for feature-specific and Next.js-coupled components, but the process is simplified because the features have already been moved out. Configuring the Monorepo to reference packages locally and linking them to the Next.js application is necessary. Nx provides benefits like fast refreshing, pre-configured setups, and features like local and remote caching.
Full-stack JS hoy: Fastify, GraphQL y React
React Summit 2022React Summit 2022
25 min
Full-stack JS hoy: Fastify, GraphQL y React
The Talk discusses building a modern full stack application with JavaScript and GraphQL, emphasizing the importance of prioritizing the critical 20% of challenges. It highlights the benefits of building a productive and transparent tech stack with modularity and developer-friendly tools. The use of PostGrey as a relational database and Fastify as a server framework is recommended. The Talk also explores the advantages of using Mercurius and Urql for GraphQL implementation. Additionally, it mentions the use of React, SSR, and Fastify Vite for full-stack SSR and modular components. The Talk concludes by mentioning the advantages of this stack for complex functionality and the possibility of using Fastify in a serverless infrastructure.