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

6 min
06 Jun, 2023

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.

Available in English

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

React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
AHA Programming
Top Content
Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction.
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Top Content
Modern web development is fantastic. There are so many great tools available! Modern web development is exhausting. There are so many great tools available! Each of these sentiments is true. What's great is that most of the time, it's hard to make a choice that is wrong. Seriously. The trade-offs of most of the frameworks and tools you could use to build your application fit within the constraints of the vast majority of apps. Despite this, engineers consistently struggle with analysis paralysis.Let's talk about this, and a solution I am working on for it.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)