Webpunk » Frontend creativo » Roadmap Básico para Aprender Frontend

Quizás puedas pensar que aprender frontend para iniciarte en el mundo de la programación es bastante complejo. En la mayoría de casos, sueles toparte con gran cantidad de información disponible en internet que al final del día no te permite decidir cuál es el mejor camino para aprender a programar correctamente.

Si estás pasando por esto ahora mismo, no te preocupes. En el siguiente artículo, te explicaremos de forma simple un Roadmap básico para aprender Frontend sin morir en el intento.

Para tener clara la ruta de aprendizaje correcta, es indispensable conocer algunos términos importantes que describimos a continuación.

¿Qué debes saber para aprender Frontend?

En esta oportunidad, traemos para ti un Roadmap básico para aprender Frontend o también conocido como un plan estratégico con el que tendrás un mejor modo de comprender conceptos necesarios para la programación.

Inicialmente, para dedicarte al desarrollo web y aprender Frontend debes tener en cuenta la estructura de cualquier tipo de aplicación web. En este caso, el desarrollo web se compone de una infraestructura, Backned y Frontend. Para seguir avanzando es necesario conocer qué significa cada término:

  • Se entiende como Frontend al área especializada en lo visible. En palabras más simples, es la zona con la que los usuarios van a tener la oportunidad de interactuar.
  • El Backend se encarga de todo lo que no es visible para el usuario. En esta sección no hay ningún tipo de interacción. Puede representarse, por ejemplo, con la lógica de negocio, el procesamiento o el almacenamiento de los datos.
aprender frontend
  • La infraestructura es todo lo físico, es decir, el soporte en el cual se desarrollan tanto el Frontend como el Backend.

Aprender frontend y su composición en la programación

Ahora que ya tienes claro cómo está conformada la programación web, vamos a adentrarnos un poco más en el punto más importante, el Frontend. En cuanto a su composición, está estructurado en dos grandes grupos que son: tecnología y procesos.

Tecnología del Frontend

Lenguajes de programación

Navegadores

En primer lugar, debes tener presente que cualquier software que utilices en el Frontend se ejecutará en un navegador que puede ser Chrome, Firefox o Internet Explorer.

Los navegadores solo tienen capacidad de comprender tres tipos de lenguaje los cuales son HTML, CSS y JavaScript. En tal sentido, si quieres convertirte en un programador web Frontend, necesitas centrarte en estos tres lenguajes de programación.

  • HTML: En este punto, es vital que puedas conocer las etiquetas más importantes. Tener claro de qué se trata un lenguaje de marcado o declarativo a fin de poder determinar el contenido y la estructura de cualquier página web.
  • CSS: Este lenguaje es el que se usa para estilizar o dar un aspecto visual específico al HTML. Al conocer CSS, puedes recurrir a otros lenguajes como SASS y LESS.
  • JavaScript: Esta última sección de lenguaje es la encargada de definir las interacciones, es decir, qué sucederá cuando un usuario ingrese a la página web. Con un buen manejo de JavaScript, tienes la oportunidad de usar otras variantes de interacciones como ECMAScript, JSX o Typescript.

Con el hecho de conocer estos tres lenguajes básicos de programación, puedes seguir abriéndote paso como programador Frontend.

Datos

Esto básicamente se refiere a los lenguajes que puedes usar con la finalidad de definir datos dentro de la página web. Hay cuatro formatos básicos que se usan en la actualidad y son: JSON, XML, CSV y Markdown.

Scripting

Este tipo de lenguaje se usa para el proceso de automatización de tareas diarias y simplificar procesos que resultan complejos en forma manual. En este caso, puedes crear un programa que se encargue de realizar el trabajo que necesitas. Los más comunes que puedes utilizar son Bash y Node.

Librerías

Se trata de una pieza de código que se puede reutilizar aportando funcionalidad en diversos aspectos. Dentro de esta sección es posible encontrar dos secciones claves que son las siguientes:

  • Modelos de componentes: En modelos de componentes están React, LitElement, Vue y Vanilla.
  • Gestión de estado: Es posible gestionar todos los datos que se encuentran en la aplicación web. Algunas opciones para cumplir esta función son Redux (Vuex, ngrx), Hooks o Contextos

Frameworks

El framework se trata de un grupo de herramientas y procesos que establecen un modo específico para poder trabajar dentro de la programación. En otras palabras, quiere decir que los frameworks son capaces de decidir ciertos procesos de forma autónoma. Hay tres tipos de frameworks básicos:

  • Estáticos: Generan una página web que solo posee ficheros HTML, CSS y JavaScript. Esto quiere decir que ningún código se ejecuta en el servidor, sino en los navegadores. Algunos de los más importantes son Angular, Vue y Svelte.
  • SSR: Parte de sus códigos se ejecutan en el servidor. Este tipo de tecnología es bastante usual en Amazon, por ejemplo. Con este tipo de framework no es indispensable que el equipo de ejecución sea potente. Algunos de los más conocidos son Next, Angular Universal y Nuxt.
  • Generadores de sitios estáticos: Como su nombre lo indica, permite crear sitios web estáticos partiendo de dinamismos.  Algunos son Jekyll, Hugo, Elevent y Next.

Herramientas para aprender frontend

Todas las herramientas son útiles cuando se trata de convertirse en desarrollador web Frontend.

Entorno de desarrollo IDE

En primer lugar, necesitas de un entorno de desarrollo IDE. El más popular que se usa en la actualidad es el Visual Studio Code. La mayoría de programadores recurren a este entorno debido a su gran funcionalidad. Sin embargo, hay otras opciones como Atoms, WebStorm, SublimeText y Notepad.

Transpiladores

Se encarga de traducir cualquier tipo de lenguaje de programación. Es decir, puede cambiar de un lenguaje a otro sin ningún problema. El transpilador más común es Babel.

Gestores de paquetes

Al crear cualquier aplicación web, usarás códigos que ya han sido creados por otras personas. Los gestores de paquetes te ayudan a determinar qué dependencia tiene el código que estás usando. Los más comunes son npm y yam.

Bundlers

Este tipo de programas se aplican con la finalidad de agrupar y optimizar los códigos que forman parte de la página web estática. Hay una gran variedad, pero los más usados son Webpack, Rollup, Parcel y Snowpack.

Control de versiones

Anteriormente, se solía usar SVN. No obstante, en la actualidad, es más popular GIT. Son comandos que pueden usarse para almacenar versiones de códigos para poder usarlos en el futuro de forma segura.

Procesos del Frontend

Esta sección se basa simplemente en información que necesitas para ser un buen programador Frontend, pero que no se vinculan propiamente con aspectos tecnológicos.

Comunicación con diseño

Esta es quizás una de las partes fundamentales de la programación Frontend. Todo el proceso de experiencia de la página web con respecto al usuario, debe ser trabajado por el desarrollador. Para poder lograr esto, hay varias herramientas a tener en cuenta como:

  • Prototipos: Aquí es posible definir principalmente los Wireframes o también conocidos como bocetos que permiten organizar el contenido de una página con otra. La herramienta más común en este caso es Balsamiq.
  • Por otra parte, se encuentran las maquetas que no son otra cosa que la reproducción más real de la visualización final de la página web lista. Las herramientas que se usan en este caso son: Figma, Sketch, Photoshop, Zepplin y Adobe XD.
  • Sistemas de componentes: Se trata de un grupo de elementos gráficos propios de una marca y que se reutilizan en todos los sitios web o aplicaciones. Los más usados en la actualidad son Atomic design, Material design y Storybook.

Comunicación con Backend

Toda la información que se muestra en un Frontend se obtiene de un servidor o Backend, por ende, siempre hay comunicación entre ambas áreas. Los medios usados para este tipo de interacción son APis REST, GraphQL y Sockets.

Análisis de software

Esto es fundamental en casos en los que, por ejemplo, hay que utilizar ciertas funciones. Lo más importante es tener la capacidad de comprender cómo funciona la aplicación entendiendo los requisitos para la posterior creación de casos de usos.

Diseño de software

Se trata de saber solucionar inconvenientes que pueden ocurrir en las funcionalidades de la aplicación web. Es necesario conocer patrones de diseño y código limpio.

¿Te ha gustado? Vota 5 estrellas
[Total: 2 Media: 5]

Artículos relacionados

Un comentario en «Roadmap Básico para Aprender Frontend»

Deja una respuesta

Tu dirección de correo electrónico no será publicada.