Ecosistema Web

Como un vistazo actual de las tecnologías disponibles para desarrollar sistemas web de frontend y backend. Se dará un análsis rápido y general de una pequeña selección de las opciones disponibles.

Bundlers

En el mundo del desarrollo web, Javascript es el motor de las aplicaciones web dinámicas, interactivas y de una sola página. Sin embargo, a medida que crece la complejidad de las aplicaciones web modernas, también lo hace el número de bibliotecas, frameworks y dependencias de Javascript. Esto conduce a una base de código hinchada e ineficiente, que compromete el rendimiento y la experiencia del usuario.

Para hacer frente a este reto, se introdujeron los bundlers de Javascript. Estos asistentes de optimización están especializados en refinar el código y potenciar el rendimiento.

En el pasado, los desarrolladores solían incrustar las etiquetas <script /> directamente en el HTML o enlazar varios archivos dentro de las páginas HTML. Pero las cosas se complicaron a medida que crecía la web. La antigua técnica hacía que las páginas web se cargaran lentamente debido a demasiadas peticiones al servidor y daba lugar a código repetitivo, lo que obligaba a los desarrolladores a hacer que las cosas funcionaran para distintos navegadores web.

Los bundlers de JavaScript son algo más que utilidades de moda; son los arquitectos de la eficiencia en el desarrollo web. Estas herramientas no sólo minimizan la sobrecarga de peticiones, sino que también mejoran la estructura del código, aumentan el rendimiento y agilizan los flujos de trabajo de desarrollo.

En esencia, funcionan como conductores, organizando el código armoniosamente, acelerando el desarrollo y garantizando que todo funcione sin problemas en diversos escenarios.

El bundler puede realizar varias transformaciones en el código JavaScript antes de ensamblarlo en un bundle. Estas transformaciones pueden incluir:

  • Minificación: eliminación de caracteres y espacios innecesarios del código, lo que da como resultado un bundle más compacto y racionalizado.

  • Transpilación: convertir el código JavaScript moderno en versiones antiguas para garantizar la compatibilidad en distintos navegadores y entornos.

  • Optimización: aplicando diversas técnicas para mejorar la eficacia del código. Esto puede incluir reordenar y reestructurar el código para reducir la redundancia o incluso aplicar algoritmos sofisticados para mejorar el rendimiento

Aunque los bundlers de JavaScript son conocidos por empaquetar código JavaScript, también pueden empaquetar otros activos (imágenes y archivos CSS) mediante un proceso llamado empaquetado de activos.

Sin embargo, es importante tener en cuenta que no todos los bundlers tienen esta función incorporada. Para algunos bundlers, la agrupación de activos puede requerir una configuración adicional de plugins, cargadores y ajustes de configuración.

(Kinsta, 2023)

Webpack

Webpack es una herramienta vital en el mundo del desarrollo web. Nació en 2012, cuando el desarrollo web estaba evolucionando y surgían nuevos retos, sobre todo a la hora de gestionar eficazmente los activos de las aplicaciones web modernas. Para los desarrolladores web que buscan personalización y flexibilidad, Webpack se ha erigido como la elección de confianza. (Kinsta, 2023).

Esbuild

Esbuild es un compilador de JavaScript extremadamente rápido y eficiente en términos de memoria. Es una herramienta que transforma el código JavaScript en un formato ejecutable en el navegador o en un servidor. Esbuild es conocido por su velocidad, ya que es capaz de compilar grandes proyectos en poco tiempo (Dominicode, 2023).

Webassembly

WebAssembly es un nuevo tipo de código que puede ser ejecutado en navegadores modernos — es un lenguaje de bajo nivel, similar al lenguaje ensamblador, con un formato binario compacto que se ejecuta con rendimiento casi nativo y provee un objetivo de compilación para lenguajes como C/C++, Go y Rust que les permite correr en la web. También está diseñado para correr a la par de JavaScript, permitiendo que ambos trabajen juntos.

(module
  (func $i (import "my_namespace" "imported_func") (param i32))
  (func (export "exported_func")
    i32.const 42
    call $i
  )
)

Frameworks CSS

Los frameworks de CSS son colecciones preescritas de código CSS que simplifican y aceleran el desarrollo de sitios web. En lugar de empezar desde cero cada vez, puedes utilizar estos frameworks para crear diseños hermosos y receptivos con un esfuerzo mínimo. (Dreamhost, 2025).

Bootstrap

Bootstrap ha estado presente desde 2011 y se ha convertido en un elemento básico en el mundo del desarrollo web. Una de las mayores ventajas de Bootstrap es su extensa biblioteca de componentes preconstruidos.

Ninguna herramienta es perfecta, y Bootstrap tiene sus limitaciones. Algunos desarrolladores argumentan que es demasiado opinionado, lo que significa que puede ser difícil de personalizar si quieres alejarte demasiado de los estilos predeterminados. Otros señalan que el tamaño del archivo de Bootstrap puede ser bastante grande, lo que puede ralentizar los tiempos de carga de tu sitio web. (Dreamhost, 2025).

<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
  <li class="nav-item" role="presentation">
    <button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
  </li>
</ul>

Tailwind

A diferencia de Bootstrap, que depende en gran medida de componentes preconstruidos, Tailwind toma un enfoque diferente. Proporciona un conjunto de clases de utilidad de bajo nivel que puedes usar para construir tus propios diseños personalizados.

Esto significa que tienes un control completo sobre el aspecto y la sensación de tu sitio web, sin estar limitado por decisiones de diseño de otra persona. Sin embargo, no encontrarás muchas plantillas preconstruidas para secciones de páginas. En lugar de usar nombres de clases semánticas como btn-primary, verás cosas como bg-blue-500 y px-4.

Al igual que Bootstrap, Tailwind tampoco es perfecto.

Algunos desarrolladores encuentran la curva de aprendizaje un poco más empinada, especialmente si están acostumbrados a frameworks de CSS más tradicionales. Y debido a que Tailwind depende tanto de clases de utilidad, tu HTML puede empezar a sentirse un poco abarrotado y más difícil de leer (Dreamhost, 2025).

<button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700">
Save changes
</button>

Frameworks de Frontend

Los frameworks de frontend proporcionan herramientas y estructuras para organizar una aplicación web.

Renderizado en cliente

Se renderizan tradicionalmente en el cliente utilizando un bundler. La principal desventaja es que aumentan considerablemente el tamaño de los archivos a descargar para un sitio web, si no se realiza una correcto manejo de los tamaños. Además la seguridad es menor debido a que se debe almacenar las credenciales en el cliente, lo que no los hace recomendables para operaciones delicadas como acceso a la base de datos, obligando al uso de un servidor con una API Rest o similar.

  • jQuery: Muy usado en principios de la década del 2010, hoy no tanto.

  • Alpine.js: Una versión más simple de manipular el DOM sin necesidad de frameworks más grandes como React.

  • React (Next.js): Framework muy usado actualmente.

  • Angular (Nest.js): Popular para aplicaciones con Springboot.

  • Vue: Popular en aplicaciones con Laravel.

  • Svelte: Una excelente alternativa a React, Vue y Angular que combina múltiples ideas de cada uno.

Híbridos

Las herramientas como Inertia proporcionan un híbrido entre el servidor y el cliente web. Presentan un puente que permite conectar un framework web y endpoints en el servidor. Logrando facilidad de comunicación sin necesidad de crear endpoints dedicados como si fuera usando un framework de frontend tradicional, disminuyendo la complejidad del sistema y aumentando la cohesión de los componentes.

Renderizado en servidor

Los siguientes frameworks utilizan una conexión por websockets o estrategias de long polling para la comunicación del servidor con el cliente. Por lo que la mayoría de la renderización es en el servidor, no necesitando de frameworks de cliente como React.

LiveView (Elixir)

Su modo de uso es muy similar a React.js. Si se utiliza la extensión SurfaceUI es aún más similar. Es la opción recomendable y predeterminada de realizar aplicaciones con Phoenix y Elixir. Es la principal inspiración de soluciones como Blazor y Livewire.

<button phx-click="inc_temperature">+</button>
def handle_event("inc_temperature", _value, socket) do
  {:noreply, update(socket, :temperature, &(&1 + 1))}
end

Frameworks de Backend

En general los frameworks de backends se separan en dos categorías principales. Uno que proporciona un conjunto de herramientas completo y otro más minimalista que proporciona una estructura base, la cual puede ser expandida según la necesidad. Escoger entre estas dos estrategias queda a juicio del equipo de desarrollo y las necesidades del proyecto. La opción recomendable es utilizar el framework más completo debido a que es más sencillo tomar las decisiones y se estandariza el conjunto de herramientas a usar.

Los frameworks que impulsaron este ecosistema son Ruby on Rails y Django. Ambos fueron los pioneros en la forma de estructurar los proyectos y herramientas anexas (como la línea de comandos) que permitieron y dieron inspiración a frameworks actuales como Laravel y Phoenix.

Beam

Item Descripcion

Phoenix (Elixir)

Framework más popular y completo para la generación de web y APIs en Elixir. Es la opción recomendada dentro del ecosistema Beam.

Nitrogen (Erlang)

Framework completo en Erlang para elaboración de sistemas web simples y complejos.

Elli (Erlang)

Pequeño framework pensado para APIs y peticiones web en Erlang.

Ruby

Item Descripcion

Ruby on Rails

Framework principal de Ruby. Tiene un amplio ecosistema y ha sido la inspiración para muchos frameworks posteriores.

Hanami

Framework liviano de Ruby. Recomendado para soluciones más acotadas que no necesiten toda la infraestructura proporcionada por Rails.

Python

Item Descripcion

Django

Framework full stack de Python. Tan venerable como Ruby on Rails.

FastAPI

Framework que ofrece mayor velocidad para Python. Pensado principalmente para la creación de APIs.

Masonite

Framework similar a Laravel pero hecho en Python.

PHP

Item Descripcion

Laravel

Framework más popular de PHP, similar a Rails en muchos aspectos.

Symphony

Conjunto de componentes y framework web. Laravel utiliza mucho de sus componentes.

Phalcon

Framework de PHP creado como extensión del lenguaje para mayor velocidad.

Go

Item Descripcion

Goravel

Framework de Go muy similar a Laravel.

Buffalo

Conjunto de componentes y framework web en Go.

Fiber

Framework más liviano pensado para APIs.

Javascript

Item Descripcion

Redwood SDK

Framework fullstack recomendado para Javascript.

Express

Framework más conocido para APIs en Javascript, aunque existen alternativas más modernas como Koa.

Koa.js

Framework para APIs en Javascript.

Swift

Item Descripcion

Vapor.code

Framework más popular para backends con Swift.

JVM

Item Descripcion

Springboot

Framework más popular para Java. Usado comunmente como alternativa a ASP.net por empresas grandes como bancos. Normalmente emparejado con Angular.

Dropwizard

Framework para backends restful con herramientas preseleccionadas sólidas.

Spark

Framework más liviano que Springboot, pensado para Kotlin y Java. Similar a frameworks como ExpressJS.

Ktor

Framework web pensado para Kotlin.

.NET

Item Descripcion

ASP.NET Core

El framework oficial de Microsoft para crear aplicaciones y servicios web con .NET y C#.

ASP.NET MVC

Versión anterior de ASP.NET Core, la cual era exclusiva de Windows. Si bien fue reemplazada por ASP.NET Core, muchas empresas todavía la usan en sus proyectos legacy.

Stacks Comunes

Entre las distintas combinaciones de herramientas los siguientes stacks pueden ser encontrados dentro de diversos proyectos.

Stack Descripción

PETaL

Phoenix, Postgres, Elixir, Tailwind, LiveView. Stack utilizado en la mayoría de los proyectos con Elixir. Se podría añadir también Ash Framework como una capa de abastracción para la gestión de recursos de datos.

LAMPP

Linux, Apache, Mysql + (PHP o Perl). Un stack venerable, pero muy usado en proyectos legacy y páginas web con Wordpress. La mayoría de los hostings compartidos tienen este stack pre configurado.

MERN

Mongo, Express, React, Node.js. Un stack popular por el 2015, pero ya no muy usado actualmente. Ahora se prefiere soluciones como Nest.js o Redwood.js y bases de datos como Postgres.

VITL

Vue, Inertia, Tailwind, Laravel. En Laravel es muy común utilizar el framework Vue.js para generar sus vistas. Combinándolo con Inertia.js también genera mayor facilidad de gestionar el código que utilizando Blade. Una alternativa a Vue sería Livewire.

Ruby on Rails + Hotwire

El stack recomendado para aplicaciones Ruby on Rails modernas.

Springboot + Angular

Muy común en aplicaciones empresariales como bancos.

ASP.Net + Blazor

Común en ambientes empresariales que utilizan las tecnologías C# de Microsoft.

CMS

  • Wordpress: CMS popular para la creación de sitios web informativos como blogs. Se puede encontrar múltiples plantillas gratuitas y de pago para armar sitios web rápidamente. Pero se vuelve engorroso al poco tiempo.

  • ProcessWire: Excelente alternativa a Wordpress cuando se necesita mayor nivel de personalización y control.

Servidores Web

  • Apache2: Servidor popular con aplicaciones PHP como Wordpress.

  • Yaws: Una alternativa similar a Apache2 pero desarrollada en Erlang.

  • Nginx: Servidor muy popular como proxy reverso y servir archivos estáticos.

  • Monkey HTTP: Servidor web creado en Chile.

Backend as a Service

  • Firebase: Servidor todo en uno, principalmente para aplicaciones móviles.

  • Supabase: Gestión de base de datos, excelente alternativa a firebase.

Servicios en la Nube

  • AWS Lambda

  • GCP

  • Azure

  • Vercel

¿Cómo elegir la tecnología?

Se recomienda seleccionar un stack y profundizarlo mínimo 2 años. Esto permitirá ganar experiencia y conocer tanto sus fortalezas como sus debilidades. Lo ideal es tener almenos un framework backend y un framework frontend dominado para poder abarcar mayor número de ofertas laborales.

  • Phoenix + Liveview: Opción recomendada para aplicaciones con Elixir. Se recomienda obtener certificaciones de la Erlang Foundation.

  • Laravel + Vue: Opción con gran oferta laboral en PHP.

  • Springboot + Angular: Opción recomendada para aplicaciones bancarias y de alta rigurosidad. Se recomienda obtener certificaciones asociadas.

  • ASP.NET Core + Blazor: Opción recomendada para nuevas aplicaciones en C#. Se recomienda obtener certificaciones asociadas.

  • React.js: Framework con mayor cantidad de ofertas laborales. Se recomienda aprender React como alternativa a Vue y LiveView.

Referencias