Skip to content
Desde0

Desarrollo Frontend


Aprende a programar y abre las puertas a un mundo de nuevas oportunidades laborales. Empieza desde lo básico y construye una carrera con alta demanda. ¡Regístrate ahora!


Quiero mejorar mi futuro


El desarrollo Frontend es una parte esencial del desarrollo de aplicaciones modernas. Se centra en la creación de interfaces de usuario atractivas y funcionales que interactúan con el usuario final.

Gracias al DOM (Document Object Model), el navegador puede representar y interactuar con el contenido web. Sin embargo, el DOM no es parte de la especificación de JavaScript, sino más bien una API proporcionada por los navegadores web.

DOM sigue el paradigma de programación imperativa, lo que significa que se centra en describir los pasos que el navegador debe seguir para realizar una tarea específica. Esto hace que el DOM sea fácil de entender y depurar, pero puede volverse ineficiente para grandes aplicaciones web.

En lugar de eso, el desarrollo Frontend se ha vuelto más dinámico y modular, utilizando frameworks como React, Vue y Angular. Estos frameworks utilizan el paradigma de programación declarativa, lo que significa que se centra en describir lo que se quiere, en lugar de cómo hacerlo. Esto hace que los desarrolladores Frontend puedan crear interfaces de usuario más complejas y dinámicas con menos código.

Además, el desarrollo Frontend se ha vuelto más interactivo y en tiempo real, utilizando tecnologías como WebSockets y Server-Sent Events. Esto permite que las aplicaciones web sean más interactivas y en tiempo real, lo que es esencial para aplicaciones como juegos y chat en vivo.

En conclusión, el desarrollo Frontend es una parte esencial del desarrollo de aplicaciones modernas. Se centra en la creación de interfaces de usuario atractivas y funcionales que interactúan con el usuario final. Utilizando el DOM, frameworks como React, Vue y Angular, y tecnologías como WebSockets y Server-Sent Events, los desarrolladores Frontend pueden crear aplicaciones web más dinámicas, interactivas y en tiempo real.

Frontend Frameworks

Existen múltiples alternativas para el desarrollo de aplicaciones Frontend, cada una con sus propias características y ventajas. A continuación, se presentan algunas de las más populares:

React

React es una biblioteca de JavaScript para construir interfaces de usuario. Fue desarrollado por Facebook y es actualmente mantenido por Meta. React utiliza el paradigma de programación declarativa, lo que significa que se centra en describir lo que se quiere, en lugar de cómo hacerlo. Esto hace que los desarrolladores Frontend puedan crear interfaces de usuario más complejas y dinámicas con menos código.

React utiliza un sistema de componentes para organizar el código, lo que permite la reutilización de código y la creación de interfaces de usuario más fácilmente. Además, React utiliza un sistema de estado para mantener la sincronización entre el estado del componente y la interfaz de usuario.

Vue

Vue es un framework progresivo de JavaScript para construir interfaces de usuario. Fue desarrollado por Evan You y es actualmente mantenido por Meta. Vue utiliza el paradigma de programación declarativa, lo que significa que se centra en describir lo que se quiere, en lugar de cómo hacerlo. Esto hace que los desarrolladores Frontend puedan crear interfaces de usuario más complejas y dinámicas con menos código.

Vue utiliza un sistema de componentes para organizar el código, lo que permite la reutilización de código y la creación de interfaces de usuario más fácilmente. Además, Vue utiliza un sistema de estado para mantener la sincronización entre el estado del componente y la interfaz de usuario.

Angular

Angular es un framework de JavaScript para construir aplicaciones web. Fue desarrollado por Google y es actualmente mantenido por Meta. Angular utiliza el paradigma de programación declarativa, lo que significa que se centra en describir lo que se quiere, en lugar de cómo hacerlo. Esto hace que los desarrolladores Frontend puedan crear interfaces de usuario más complejas y dinámicas con menos código.

Angular utiliza un sistema de componentes para organizar el código, lo que permite la reutilización de código y la creación de interfaces de usuario más fácilmente. Además, Angular utiliza un sistema de estado para mantener la sincronización entre el estado del componente y la interfaz de usuario.

Otros

Tardaríamos mucho tiempo hablando de cada framework, pero aquí tienes una lista de otros frameworks que puedes explorar:

React para principiantes

En esta sección aprenderás a crear, adaptar y mostrar de forma condicional componentes de React.

Mi primer componente

Las aplicaciones de React se construyen a partir de piezas independientes de UI llamadas componentes. Un componente de React es una función de JavaScript a la que le puedes agregar un poco de marcado (Algo parecido a HTML pero con JSX). Los componentes pueden ser tan pequeños como un botón, o tan grandes como una página entera. En el siguiente ejemplo podemos ver un componente Gallery que renderiza tres componentes ProfileCard en una lista.

function Profile() {
  return (
    <img
      src="https://i.pravatar.cc/128"
      alt="Pravater"
    />
  );
}


export default function Gallery() {
  return (
    <section>
      <h1>Personas</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

gallery example

Veamos como podemos construir nuestro primer componente.

Commponentes: Elementos básicos para construir UIs

En la Web, HTML nos permite crear documentos estructurados con su conjunto integrado de etiquetas como <h1> o <div>:

<article>
  <h1>Un componente</h1>
  <ol>
    <li>Componentes: Bloques de construcción de la UI</li>
    <li>Definiendo un componente</li>
    <li>Usando un componente</li>
  </ol>
</article>

Este marcado representa un artículo <article>, su encabezado <h1>, y una lista <ol> con tres elementos <li>. Un marcado HTML como este, combinado con CSS para los estilos y JavaScript para la interactividad, están detrás de cada barra lateral, avatar, modal, menú desplegable y cualquier elemento de UI que existe en la web.

React permite combinar HTML, CSS y JavaScript en “componentes” personalizados, elementos reutilizables de UI para nuestras aplicaciones. El código de la lista de contenidos que vimos anteriormente pudo haberse transformado en un componente <TableOfContents>que podríamos renderizar en cada página. Por detrás, seguiría utilizando las mismas etiquetas HTML como <article>, <h1>, etc.

De la misma forma que con las etiquetas HTML, podemos componer, ordenar y anidar componentes para diseñar páginas completas.

En la medida en que nuestro proyecto crece, notaremos que muchos de nuestros diseños se pueden componer mediante la reutilización de componentes que ya escribiste, acelerando el desarrollo. ¡Nuestra lista de contenido de arriba podría añadirse a cualquier página con <TableOfContents />! Incluso podemos crear nuestros proyectos reutilizando componentes de la comunidad de código abierto como Chakra UI o Material UI.

Definir un componente

Tradicionalmente, cuando se creaban páginas web, los desarrolladores web usaban lenguaje de marcado para describir el contenido y luego añadían interacción agregando un poco de JavaScript. Esto funcionaba perfectamente cuando las interacciones eran algo deseable, pero no imprescindible en la web. Ahora es algo que se espera de muchos sitios y de todas las aplicaciones. React pone la interactividad primero usando aún la misma tecnología: un componente de React es una función de JavaScript a la que puedes agregar HTML:

Veamos paso a paso como construir un componente:

Paso 1: Exporta el componente

El prefijo export default es parte de la sintaxis estándar de JavaScript (no es específico de React). Te permite marcar la función principal en un archivo para que luego puedas importarlas en otros archivos. (Puedes leer más sobre importar y exportar componentes).

Paso 2: Define la función

Con function Profile() { }, estamos definiendo una función llamada Profile.

Paso 3: Agrega HTML

El componente devuelve una etiqueta <img /> con atributos srcy alt, <img />se escribe como en HTML, ¡pero en realidad es JavaScript por detrás! Esta sintaxis se llama JSX, y te permite incorporar marcado dentro de javascript.

Las sentencias return se pueden escribir todo en una línea:

return <img src="https://i.pravatar.cc/128" alt="Pravatar" />;

O en múltiples líneas utilizando paréntesis:

return (
  <img
    src="https://i.pravatar.cc/128"
    alt="Pravatar"
  />
);

Usar un componente

Ahora que hemos definido nuestro componente Profile, podemos anidarlo dentro de otros componentes. Por ejemplo, podemos exportar un componente Gallery que utilice múltiples componentes Profile:

Lo que el navegador ve

Nota la diferencia de mayúsculas y minúsculas:

  • <section> está en minúsculas, por lo que React sabe que nos referimos a una etiqueta HTML. – <Profile /> comienza con una P mayúscula, por lo que React sabe que queremos usar nuestro componente Profile.

Y Profile contiene aún más HTML: <img />. Al final lo que el navegador ve es esto:

<section>
  <h1>Personas increíbles</h1>
  <img src="https://i.pravatar.cc/128" alt="¨Pravatar">
  <img src="https://i.pravatar.cc/128" alt="¨Pravatar">
  <img src="https://i.pravatar.cc/128" alt="¨Pravatar">
</section>

Anidar y organizar componentes

Los componentes son funciones regulares de JavaScript, por lo que puedes tener múltiples componentes en el mismo archivo. Esto es conveniente cuando los componentes son relativamente pequeños o están estrechamente relacionados entre sí. Si el archivo comienza a tener demasiados componentes, siempre podemos moverlos a un archivo separado. Puedes leer más sobre importar y exportar componentes.

Dado que los componentes Profile se renderizan dentro de Gallery (¡Incluso varias veces!) podemos decir que Gallery es un componente padre, que renderiza cada Profile como un “hijo”. Esto es lo que hace que React sea tan interesante: puedes definir un componente una sola vez y reutilizarlo cuantas veces necesites, incluso en diferentes partes de tu aplicación.

Recapitulando

  • React nos permite crear componentes, elementos reutilizables de UI para nuestras aplicaciones.
  • En una aplicación de React, cada pieza de UI es un componente.
  • Los componentes de React son funciones regulares de JavaScript excepto que:
    1. Sus nombres siempre empiezan con mayúscula.
    2. Devuelven marcado JSX.

Proyecto

Como parte de este curso, vamos a construir una aplicación Fullstack desde cero.

Puedes encontrar ideas de proyectos en Ideas de Proyectos Midudev o Project Ideas and Resources ⚡💙⚡ .

El objetivo es agregar tu proyecto a tu portafolio y añadirlo a tu CV.

Vamos a desarrollar el proyecto a lo largo de cada clase. Para esta clase desarrollaremos la parte del frontend. Y dependiendo de la clase contruiremos lo siguiente:


Aprende a programar y abre las puertas a un mundo de nuevas oportunidades laborales. Empieza desde lo básico y construye una carrera con alta demanda. ¡Regístrate ahora!


Quiero mejorar mi futuro