¿Cómo (Diablos) Terminamos Aquí?!

Rate this content
Bookmark
Slides

El desarrollo web ha cambiado significativamente en los últimos 15 años, y echaremos un vistazo satírico a lo desafiante que es para los recién llegados comenzar en la actualidad. Al hacerlo, discutiremos lo que es necesario para construir una aplicación web completa, y repasaré la mayoría de las tecnologías que personalmente me gusta usar para eso.

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

FAQ

En sus primeros proyectos, el autor gestionaba los datos con MySQL y desplegaba las aplicaciones simplemente cargando archivos a través de FTP.

El autor tiene aproximadamente 15 años de experiencia en desarrollo web, habiendo comenzado con JavaScript y PHP.

Al principio de su carrera, el autor tenía que elegir entre Dreamweaver y Eclipse para el desarrollo web.

Actualmente se utilizan tecnologías como React, Next, Remix, Solid, y herramientas de gestión de base de datos como Planetscale, Prisma, Drizzle y Kiesli.

El autor menciona que los modernos flujos de trabajo de desarrollo web son complicados, involucrando múltiples plataformas y herramientas, y requieren más tiempo en resolver problemas de devops que puede superar los ahorros en costos.

Para aplicaciones modernas se sugiere alojar backends en servicios como fly.io o railway, y utilizar conexiones clásicas o controladores sin servidor en entornos de borde.

Los ORM y generadores de consultas como Prisma y Drizzle ofrecen seguridad de tipos y facilitan la comunicación con la base de datos, contribuyendo a una economía de desarrollador más eficiente.

Christian Ivicevic
Christian Ivicevic
6 min
06 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
El desarrollo web ha evolucionado significativamente en los últimos 25 años, con la introducción de JavaScript y PHP. Las opciones de IDE eran limitadas, pero el desarrollo local se facilitaba con XAMP y la implementación era tan simple como FTP. El desarrollo web moderno implica seleccionar una biblioteca o framework de UI, implementar el front-end en plataformas como Vercel o CloudFlare, y utilizar proveedores sin servidor para datos persistentes. Los ORM y los constructores de consultas como Prisma y Drizzle facilitan la comunicación con la base de datos. Las empresas deben priorizar la entrega de productos sobre soluciones personalizadas para evitar problemas innecesarios de devops.

1. Evolution of Web Development

Short description:

El desarrollo web ha evolucionado significativamente en los últimos 25 años. Comenzando con JavaScript y PHP hace 15 años, las opciones de IDE estaban limitadas a Dreamweaver y Eclipse. Escribir una versión simplificada de un libro de visitas implicaba crear un formulario HTML, obtener comentarios de una base de datos y manejar el envío del formulario. El desarrollo local se facilitaba con XAMP y la implementación era tan simple como FTP. El desarrollo web moderno implica seleccionar una biblioteca o framework de UI, implementar el front-end en plataformas como Vercel o CloudFlare, y utilizar proveedores sin servidor para datos persistentes. Los ORM y los generadores de consultas como Prisma y Drizzle facilitan la comunicación con la base de datos. A pesar de la conveniencia de los servicios sin servidor, ciertas cargas de trabajo requieren un backend con estado. Las aplicaciones de hoy en día tienen numerosas capacidades, pero las empresas deben priorizar la entrega de productos sobre soluciones personalizadas para evitar problemas innecesarios de devops.

El desarrollo web ha cambiado drásticamente en los últimos 25 años y aunque ahora trabajo como ingeniero de software en JetBrains, me gusta recordar que fue hace unos 15 años cuando comencé con JavaScript y PHP. Abróchense los cinturones y acompáñenme en un viaje por el camino de la memoria hasta donde comencé con el desarrollo web. Hoy en día hay una gran cantidad de IDE disponibles, pero en ese entonces no había una tienda de PHP y recuerdo que tenía que elegir entre Dreamweaver y Eclipse. Siendo un adolescente sin dinero, la elección fue bastante fácil y definitivamente no obtuve una versión correcta de Dreamweaver, así que elegí Eclipse. Sin embargo, esta captura de pantalla no es realmente representativa del pasado porque desafortunadamente no había un tema oscuro. Comencemos escribiendo una versión simplificada de un libro de visitas en un solo archivo. Primero necesitamos un formulario HTML clásico en el que los usuarios puedan completar con sus comentarios. Luego necesitamos obtener los comentarios existentes de una base de datos utilizando consultas MySQL y luego necesitamos iterar sobre ellos para mostrarlos. Hasta ahora todo bien. Finalmente, necesitamos manejar el envío del formulario por parte del usuario y escribir el nuevo comentario en la base de datos. Por supuesto, nada en este código era seguro en cuanto a tipos o seguro contra inyecciones, pero hizo el truco y me permitió presumir frente a mis amigos. Curiosamente, sin mis gafas no podía realmente notar la diferencia entre este código y una aplicación de remix, ya que ambas utilizan la misma estructura que separa el controlador de acciones, el cargador y el contenido real. Ejecutar esto localmente era fácil con XAMP, que era una forma conveniente de ejecutar Apache y MySQL localmente. Implementar este libro de visitas era tan fácil como cargar un archivo a través de FTP. Todo era bastante fácil, a diferencia de los flujos de trabajo de hoy en día desafortunadamente.

Entonces veamos el desarrollo web moderno en comparación. Primero tenemos que seleccionar nuestra biblioteca o framework de UI de elección, ya sea vanilla React o un framework con sabor como Next, Remix o algo diferente como Solid. Por supuesto, hay otras opciones disponibles si estás trabajando con clientes que aún no se han puesto al día. Para nuestra arquitectura, tenemos un front-end que debe implementarse en algún lugar, preferiblemente Vercel o CloudFlare para evitar lidiar directamente con AWS o GCP. El front-end requerirá datos persistentes almacenados en una base de datos para lo cual tenemos múltiples proveedores sin servidor dependiendo de tu elección, siendo Planetscale mi favorito absoluto. La seguridad de tipos y el deseo de una economía de desarrollador decente han llevado a ORM y generadores de consultas como Prisma, Drizzle o Kiesli, que serán nuestras herramientas para comunicarnos con la base de datos. En la era de los servicios sin servidor, también debemos ser conscientes de usar conexiones clásicas a la base de datos o utilizar controladores sin servidor que son compatibles en entornos de borde. Otra cosa más a tener en cuenta. A pesar de todo el discurso sobre los servicios sin servidor, hay ciertas cargas de trabajo como tareas de larga duración que realmente no funcionan en estos entornos y que requieren un backend clásico con estado que podemos alojar en fly.io o railway. No hace falta decir que estos también intercambiarán datos con la base de datos utilizando nuestro ORM o nuestro generador de consultas. Aún no hemos terminado. Las aplicaciones de hoy en día tienen muchas más capacidades, como la autenticación, el registro de eventos en tiempo real y más. Para todo lo imaginable, hay alguna plataforma o servicio útil, pero en comparación con cargar solo un archivo PHP o al menos algunos de ellos en un solo servidor, realmente me pregunto cómo diablos llegamos hasta aquí. La respuesta es bastante simple: dinero. Veo con demasiada frecuencia que las empresas intentan ahorrar cientos de dólares ideando soluciones personalizadas y descuidando que el tiempo que los desarrolladores dedican a solucionar problemas de devops supera con creces los ahorros. Centrémonos en entregar productos y no lidiar con demasiados problemas de devops en el camino, ¿de acuerdo? Eso es todo lo que tengo por hoy. Aquí está mi nombre de usuario de Twitter y disfruten del resto de la conferencia.

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.
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.
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.
Luchando contra la Deuda Técnica con la Refactorización Continua
React Day Berlin 2022React Day Berlin 2022
29 min
Luchando contra la Deuda Técnica con la Refactorización Continua
Top Content
This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.
Programación AHA
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
Programación AHA
Top Content
The Talk discusses the concept of AHA programming, which emphasizes thoughtful abstractions. It presents a live-coded example of the life-cycle of an abstraction and demonstrates how to fix bugs and enhance abstractions. The importance of avoiding complex abstractions and the value of duplication over the wrong abstraction are highlighted. The Talk also provides insights on building the right abstractions and offers resources for further learning.

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.