Roadmap para convertirse en desarrollador Front End en el 2022

En nuestro blog hemos hablado del desarrollador front end, en general, en los siguientes artículos: Programador frontend vs backend y de que se ocupa el desarrollador front-end.

El desarrollo Front End

Llamado también desarrollo lado client, contiene muchos principios y conceptos. Muchos piensan que el desarrollador Front End se ocupa exclusivamente de la creación de interfaces para las aplicaciones web pero esta es solo una de las habilidades que un buen desarrollador tendría que tener.

En este artículo citaré con detalle una serie de conceptos que como desarrollador Front End han sido esenciales, para dar un impulso decisivo a tus habilidades profesionales para este nuevo año que está llegando.

Las habilidades del desarrollador Front End

Como desarrollador Front End las habilidades generales en las que tendrás que poner más empeño son las siguientes: 

• Diseñar y saber crear excelentes interfaces visuales.
• Conocer y saber utilizar, de la mejor manera posible, las reglas CSS
• Ser capaz de trabajar y gestionar datos asincrónicos 
• Usar un State Management 

Ahora procedamos paso a paso y veámoslos individualmente.

1.  Conocer HTML

Html o HyperText Markup Language es la habilidad base para cada desarrollador Front End. No te preocupes, no es necesario conocer todos los elementos de memoria, es necesario centrarse en su correcto uso según el tipo de datos a paginar.

Aquí entra en juego el concepto de HTML semántico, un conjunto de reglas y buenas prácticas en la elección del correcto tag HTML que mejorarán también la SEO.

Por ejemplo, algunos puntos clave sobre los que se tendría que focalizar son:

• Los principios base de la construcción de una página en HTML, conocer las diferencias entre head y body, el uso correcto de las metatag etc..
• Añadir y formatear los textos correctamente 
• Crear lista y formularios aprovechando los elementos “parlantes”
• Insertar correctamente imágenes y vídeos en la página

Una de las fuentes que aconsejo para profundizar en este argumento es este sitio: html.com

1.  Aprender CSS

El paso siguiente, después del aprendizaje de HTML, es conseguir darle una forma, un estilo. Aquí entra en juego CSS o Cascading Style Sheets, con una serie de conceptos muy importantes como por ejemplo:

• Selectores CSS (esenciales si quieres dominar también en JavaScript)
• El posicionamiento CSS (static, absolute, relative, fixed, sticky)
• El sistema de medida y sus diferencias (pixel, porcentajes, em, rem, vh, vw)
• Los elementos del BOX MODEL
• Los principios CSS FLEXBOX
• Los principios del CSS GRID

En el desarrollo web moderno, es difícil empezar de 0 al crear un proyecto y su tema CSS. Hay una multitud de framework CSS que puedes usar para acelerar la creación de un estilo y usar código bien establecido y probado, aprovechando componentes y clases sin tener que reinventar la rueda.

Algunos de los framework más populares son:

• Tailwind CSS
• Bootstrap
• Materialize
• Bulma

1. Aprender JavaScript

Ahora que has aprendido a crear interfaces y dar un estilo con HTML y CSS, necesitas convertirlo en inteligentes. Es decir, aplicar la lógica funcional a nuestro objetivo. Por ejemplo administrar de manera dinámica un formulario, enviando algunos datos solo después de eventos específicos. Después de todo, fue precisamente desde la lógica de validación de los formularios que nació JavaScript en los años 90. 

JavaScript (no debe confundirse con Java en absoluto), es un lenguaje de scripting lado Client, creado para hacer dinámicas las páginas web y manipular los elementos HTML. Además en los últimos años, gracias a la creación de Node.js, JavaScript se utiliza también en el lado Backend. Básicamente conociendo este lenguaje es posible ser full-stack en una aplicación completa. Por esta razón ha ganado tanta popularidad ultimamente.

El conocimiento de JavaScript se puede dividir en conceptos Básicos y Avanzados.

Conceptos Básicos:

• Conocer el objeto en JavaScript y a que se refiere el “THIS”
• Variables, Loop y las funciones
• Que es el DOM (document object model)
• Métodos para ciclar en matrices: Foreach, map, filter, reduce etc…

Después de aprender los conceptos básicos, es necesario dar el salto de nivel, continuando con conceptos avanzados cuyo conocimiento puede ayudarte durante las entrevistas de trabajo como Front end Developer.

Conceptos Avanzados:

• Profundizar sobre el estándar ES6 y sus funcionalidades más importantes como la arrow function y las diferencias entre var let y const. 
• Que son las Callback y las Promises
• Programación Asincrónica con async e await

En nuestro blog puedes leer artículos que profundizan en conceptos básicos y avanzados del mundo JavaScript, entrando en muchos detalles interesantes.

Los artículos están disponibles en los siguientes enlaces:

• Diferencias entre Var, Let y const
• Map, Filter y reduce para ciclar en Array

1. Aprender un Framework JavaScript

Conocer bien el lenguaje permite después saberlo usar a nivel profesional con pleno conocimiento de hechos. Por este motivo creo que el aprendizaje de un framework debe seguir necesariamente el estudio del lenguaje en el que se basa el mismo framework.

Los frameworks facilitan la vida de los desarrolladores, ofreciendo soluciones standard, probadas y estables. Por el momento los más populares son Vue.js, React y Angular. 

La forma correcta de seguir en el estudio de estas herramientas es enfocarse en una a la vez, empezando quizás por las más solicitadas en el mercado que actualmente son Vue.js y React, los cuales tienen una curva de aprendizaje similar.

Sobre este Topic podéis encontrar un artículo en nuestro blog en el siguiente enlace:

• 3 motivos por lo que amarás Vue.js

1. Aprender el uso de GIT

Git es ya el sistema de versionado más popular y utilizado en el mundo, conocerlo, y entonces saber versionar el propio código, es la llave para poder trabajar en cualquier equipo de forma cohesionada y sin problema.

Podrías practicar trabajando en cualquier proyecto open source disponible en github,en el cual cualquier desarrollador es libre de archivar el propio proyecto y consentir a cualquiera de contribuir. 

Después de estos 5 primeros pasos estás listo para postularte profesionalmente para cualquier trabajo Frontend

Si quieres profundizar más, de tal manera que puedas crearte un perfil que resalte aún más tus habilidades y reclutadores, podrías echar un vistazo a algunos de estos conceptos:

1. State Management

El State Management, o gestión del estado, abarca todas aquellas prácticas destinadas a centralizar, compartir y gestionar los datos de una aplicación en una única fuente. Para leerlos y modificarlos en cualquier lugar de nuestra aplicación.

Para hacer esto, nos ayudarán algunas bibliotecas muy populares. Cada framework tiene sus propios puentes que se enumeran a continuación: 

• Vue.js   → Vuex
• React    → Redux, Context API, MobX
• Angular → NgRx, Shared Services

1. SSR o Server side rendering

SSR o server side rendering consiste en renderizar el lado Server de la aplicación JavaScript, en lugar de hacerlo exclusivamente en el Client del usuario. Mejorando la SEO y la indexación en los motores de búsqueda. Aquí también, debe hacerse una distinción entre los diferentes framework:

• Vue.js   → Nuxt.js
• React    → Next.js
• Angular → Angular Universal

1. Aprender Typescript

Typescript es un lenguaje de programación desarrollado por Microsoft y convertido en open source. En particular Typescript es un superconjunto de JavaScript, es decir añade algunas funcionalidades como clases, tipos, interfaces y módulos opcionales al JavaScript clásico. Haciendo que el desarrollo en JavaScript esté al alcance de aquellos con una formación de Backend clásica.

Cualquier aplicación JavaScript puede convertirse rápidamente en Typescript pero no al contrario.  

Si has llegado hasta aquí, ¡enhorabuena!

¡Ahora eres un desarrollador front-end!