¿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.

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 Conference 2021React Advanced Conference 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Los humanos son solucionadores de problemas naturales y somos lo suficientemente buenos en eso que hemos sobrevivido a lo largo de los siglos y nos hemos convertido en la especie dominante del planeta. Debido a que somos tan buenos en eso, a veces también nos convertimos en buscadores de problemas, buscando problemas que podemos resolver. Aquellos que logran sus objetivos de la manera más exitosa son los eliminadores de problemas. Hablemos de la distinción entre resolver y eliminar problemas con ejemplos de dentro y fuera del mundo de la codificación.
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
Jotai es una biblioteca de gestión de estado. La hemos estado desarrollando principalmente para React, pero conceptualmente no está vinculada a React. En esta charla, veremos cómo funcionan los átomos de Jotai y aprenderemos sobre el modelo mental que deberíamos tener. Los átomos son una abstracción agnóstica del marco para representar estados, y básicamente son solo funciones. Comprender la abstracción de átomo ayudará a diseñar e implementar estados en sus aplicaciones con Jotai
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.
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
Afrontémoslo: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de Frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica. En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.
El Epic Stack
React Summit US 2023React Summit US 2023
21 min
El Epic Stack
Top Content
El desarrollo web moderno es fantástico. ¡Hay tantas herramientas geniales disponibles! El desarrollo web moderno es agotador. ¡Hay tantas herramientas geniales disponibles! Cada uno de estos sentimientos es cierto. Lo que es genial es que la mayoría de las veces, es difícil tomar una decisión que sea incorrecta. En serio. Los compromisos de la mayoría de los marcos y herramientas que podrías usar para construir tu aplicación se ajustan a las limitaciones de la gran mayoría de las aplicaciones. A pesar de esto, los ingenieros luchan constantemente con la parálisis del análisis.Hablemos de esto, y de una solución en la que estoy trabajando para ello.
Programación AHA
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
Programación AHA
Top Content
¿Eres el tipo de programador que prefiere no ver el mismo código en dos lugares, o haces uso liberal de copiar/pegar? Muchos desarrolladores juran por la filosofía de No Repetirte (DRY) mientras que otros prefieren Escribir Todo Dos Veces (WET). Pero, ¿cuál de estos produce bases de código más mantenibles? He visto cómo ambos enfoques arruinan las bases de código y tengo una nueva ideología que me gustaría proponerte: Evitar Abstracciones Precipitadas (AHA). En esta masterclass, hablaremos sobre la abstracción y cómo puedes mejorar una base de código aplicando y creando abstracciones de manera más reflexiva, así como cómo salir de un lío de sobre o sub-abstracción.

Workshops on related topic

React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 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 Conference 2021React Advanced Conference 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 Kuznetcov
Mikhail Kuznetcov
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.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)