Articles

¿Qué es un framework web y por qué debería utilizarlo?

← Home

«Framework» es una palabra muy utilizada en relación con el código. Entonces, ¿qué es siquiera un framework? Cuando hablamos de frameworks, esos frameworks normalmente se dividen en tres categorías diferentes: frontend, backend y CSS o frameworks de interfaz de usuario. Pero incluso una vez que sabes qué son los frameworks, ¿cuál deberías aprender o usar y por qué? Este post discutirá lo que es un framework, qué frameworks existen, y cómo tomar decisiones sobre qué tipo de framework deberías usar para tus proyectos!

Qué son los Frameworks

Si miramos un par de aplicaciones web diferentes podemos ver que hay un montón de características duplicadas. Muchas tienen autenticación de usuarios, páginas que se renderizan, se conectan a bases de datos, tienen perfiles que puedes mirar, todas tienen feeds estilizados de información, etc. Si quisiera, podría escribir toda esa lógica yo mismo cada vez que quiera construir una nueva aplicación; sin embargo, también hay muchas herramientas disponibles que pueden hacer eso por nosotros.

Además, muchas veces cuando construimos aplicaciones queremos formatear nuestro código de ciertas maneras que nos ayuden a ser más eficientes y a que otros desarrolladores entiendan nuestro código. Los frameworks web nos ayudan a conseguir una estructura en nuestras aplicaciones, y nos dan características adicionales que podemos añadir sin demasiado trabajo extra. Los frameworks nos dan un punto de partida para que podamos centrarnos en las características en lugar de en los detalles de configuración.

El código se lee muchas más veces de las que se escribe, y es muy importante cuando se trabaja con otros desarrolladores que sepan dónde se escribe el código para ciertas tareas para que puedan utilizarlo en su propio código. Los frameworks también tienen convenciones sobre cómo se escribe y se estructura el código, que estandarizan la forma en que los desarrolladores escriben su código.

La mayoría de los sitios web comparten una estructura muy similar (por no decir idéntica). El objetivo de los frameworks es proporcionar una estructura común para que los desarrolladores no tengan que rehacerla desde cero y puedan reutilizar el código proporcionado. De este modo, los frameworks nos permiten recortar gran parte del trabajo y ahorrar mucho tiempo.

Para resumir: no es necesario reinventar la rueda.

Desde Awwwards.

Dentro del capó, los frameworks no son más que bibliotecas de código (es decir, el código de otras personas), ¡y los más populares son de código abierto! Así que usted puede mirar el código de su biblioteca en línea!

Backend vs Frontend

  • El frontend de una aplicación web es la parte que se ve y con la que se interactúa. Consiste en el diseño web y la interacción del sitio. En términos de lenguajes de programación, casi siempre está compuesto por el CSS, HTML y JavaScript de la página.

  • El backend consiste en el servidor, la base de datos y el código que interactúa con ellos. También consiste en el código que da datos dinámicos al frontend del sitio. Esto puede ser manejado en la mayoría de los lenguajes de programación. Los que discutiremos principalmente hoy son Python, Ruby y Node JavaScript, pero hay innumerables otros.

What I Wish I Knew Before Learning to Code Ebook Cover

¿Quieres más consejos para aprender a codificar?

¡Descarga mi Ebook gratuito!

Framas de interfaz de usuario

Los marcos de interfaz de usuario ayudan a crear aplicaciones web estilizadas y de aspecto profesional. La mayoría incluyen algún tipo de sistema de rejilla para que puedas alinear los elementos, tienen esquemas de color para que se manejen por ti, y estilizan tus componentes HTML usando CSS para que se vean limpios y profesionales. Estos están dentro del dominio del frontend; sin embargo, normalmente cuando nos referimos a frameworks de frontend estamos hablando de frameworks de JavaScript.

Algunos frameworks de interfaz de usuario incluyen:

  • Bootstrap
    • Muy conocido y construido por Twitter
    • Fácil de aprender y de aspecto profesional
    • Puede ser fácil de detectar «Sitios Bootstrap»
    • Puede ser difícil de personalizar los componentes
  • Materialize
    • De aspecto limpio
    • .

    • Un poco más «divertido» que Bootstrap
    • Muchas opciones de estilo y color
    • Sigue la guía de estilo Material de Google
  • Foundation
    • Muchos ejemplos
    • De aspecto profesional
  • UI semántica
    • Muchos construidos-en
    • Temas incorporadosen temas para que sea personalizable
  • Grommet
    • Tiene un gran enfoque en la accesibilidad
    • Se ve realmente limpio
    • No tan usado como otros
    • Hecho para React JS (otro framework que veremos más adelante)

Elegir un framework de interfaz de usuario

Elegir un framework de interfaz de usuario se reduce principalmente a la preferencia personal en cuanto a la apariencia y los objetivos del sitio. Los diferentes estilos pueden apelar a diferentes industrias o pueden transmitir un mensaje diferente a los usuarios.

Frontend Frameworks

Frontend frameworks son, en la mayoría de los casos, escritos en JavaScript y son para organizar la funcionalidad, la interactividad de su sitio web. Algunos de estos incluyen:

  • Vue
    • Fácil de aprender
    • Muy rápido
    • Todas las herramientas asociadas a él están bien empaquetadas
    • Toma partes de Angular y React y las optimiza
    • Menos adoptado que algunos otros
    • Flexible — puedes usarlo de múltiples maneras
  • AngularJS
    • Construido por Google
    • Bien soportado
    • Enorme número de características
    • Mejora la escalabilidad de la aplicación
    • Difícil de depurar
    • Grande curva de aprendizaje
  • Angular 2+
    • Construido por Google
    • Bien soportado
    • Fomenta la reutilización
    • Mejora la escalabilidad de la aplicación
    • Gran curva de aprendizaje
  • React
    • Construido por Facebook
    • Aglutina el código del frontend en componentes
    • Organiza el código y los datos para hacer el código más reutilizable
    • Gran curva de aprendizaje
  • Ember
    • Da una gran cantidad de funcionalidad fuera de la caja
    • Opinión (tienes que usar su formato)
    • Curva de aprendizaje pronunciada

Elegir un Frameworks Frontend

El mundo de los frameworks frontend está evolucionando especialmente rápido, parece que cada pocos meses aparece un nuevo framework frontend. Aprende lo que tiene sentido para ti, y no te preocupes demasiado por cuál es el más «caliente» del momento.

Algunas personas argumentan que React y Vue son librerías en lugar de frameworks, pero mucha gente los considera frameworks, ¡así que los he incluido!

Frameworks de Backend

Los frameworks de Backend son mucho más variados. Están escritos en una variedad de lenguajes de programación y tienen una gran variedad de características. A continuación, al igual que la lista anterior, es una lista muy incompleta de algunos de los frameworks que existen para escribir backends de aplicaciones.

  • Spring MVC
    • Java (lenguaje más difícil de aprender)
    • Muy rápido
    • Menos opinable
  • Django
    • Python (lenguaje más fácil de aprender)
    • Medio feliz entre ser muy opinable y menos estructurado
    • Te da mucha funcionalidad fuera de la caja (como autenticación de usuarios, conexiones de base de datos, y la representación de la vista)
    • Puede ser difícil de integrar un front-end de lujo.
    • El manejo de datos de Python es increíble
  • Flask
    • Python (lenguaje más fácil de aprender)
    • Menos opinable y más personalizable que Django
    • Te da menos fuera de la caja (tienes que construir más)
  • Ruby on Rails
    • Ruby (lenguaje más fácil de aprender)
    • Muy opinable
    • Tiene grandes herramientas como scaffolding para que puedas construir cosas rápidamente
    • Te da mucha funcionalidad fuera de la caja (como autenticación de usuarios, conexiones de base de datos, y renderización de vistas)
    • El asset pipeline ayuda con el desarrollo front-end
    • Ruby tarda más en ejecutar programas que otros lenguajes de programación
  • Meteor
    • JavaScript (lenguaje más fácil de aprender)
    • Te da mucha funcionalidad desde el principio (como autenticación de usuarios, conexiones a bases de datos, y renderización de vistas)
    • Se integra muy bien con los front-ends modernos
  • Express
    • JavaScript (lenguaje más fácil de aprender)
    • Muy personalizable
    • Muy ligero
    • Menos características incorporadasen características
    • Node es muy rápido

Elegir un framework de backend

Por lo general, eliges un framework de backend basándote en el lenguaje de programación en el que está escrito. Además, ten en cuenta qué características quieres añadir — si quieres autenticación (o inicio de sesión de usuario) para tu sitio web, por ejemplo, escribirlo en Django donde la autenticación está incorporada será mucho más fácil que escribirlo en Flask donde necesitarías un servicio adicional.

Aprende más

Si quieres usar o aprender un framework, aquí tienes un montón de aplicaciones construidas con diferentes, para que puedas evaluar cuál tiene más sentido para ti. Hay muchos más frameworks por ahí de diversos tamaños y popularidad, pero este artículo da una breve visión de algunos de los más populares por ahí y dónde empezar. No hay una respuesta correcta sobre qué aprender primero. Todo tiene sus pros y sus contras, así que sopesa lo que es más importante para ti y parte de ahí. Los frameworks son muy útiles y hacen que la escritura de código sea mucho más rápida en la mayoría de los casos, pero tener una sólida base de programación antes de eso también es muy importante, así que asegúrate de conocer bien el lenguaje en el que está escrito tu framework. Los frameworks son súper útiles para escribir sitios web porque imponen una estructura que otros desarrolladores en el framework entienden, y te dan una funcionalidad común para que no tengas que reinventar la rueda!

Donde empezar a aprender…

  • Tutorial de Django Girls – ¡Aprendí mi primer framework a través de su tutorial online!
  • Code Academy
  • TodoMVC
  • CodeNewbie Podcast

Y si necesitas una idea para una aplicación…

  • Ideas para aplicaciones
  • 15+ IDEAS DE APLICACIONES PARA CONSTRUIR PARA SUBIR DE NIVEL SUS HABILIDADES DE CODIFICACIÓN

¡Sé el primero en enterarse de mis posts!