Hoja de Ruta de un Front End 2021

Hoja de Ruta de un Front End 2021
Hoja de ruta, paso a paso, de las tecnologías que debes ir aprendiendo para ser un auténtico desarrollador web front-end de aplicaciones y páginas web

El desarrollo web es un campo en constante cambio: La forma en que creamos sitios web hoy en día es completamente diferente de cómo solíamos hacerlo hace un par de años.

Con la gran cantidad de herramientas disponibles y las nuevas herramientas que aparecen cada día, la mayoría de las veces los desarrolladores se sienten confundidos sobre qué camino elegir.

Hoja de ruta, paso a paso, de las tecnologías que debes ir aprendiendo para ser un auténtico desarrollador web front-end de aplicaciones y páginas web

A continuación, vas a encontrar una hoja de ruta o guía de aprendizaje completa para poder convertirte en un auténtico desarrollador web frontend.

↪ Infografía Camino a Ser un Desarrollador Back End 2021

En esta publicación, vamos a recapitular, unas posible pautas a seguir con las que poder convertirte en un desarrollador frontend de cara a 2021.

Antes de nada, si decides seguir la siguiente hoja de ruta, debes de tener en cuenta algunos puntos:

  1. El propósito de esta hoja de ruta es ofrecer una idea sobre el paisaje general y guiarte si estás confundido acerca de qué ir aprendiendo más lejos de la última tecnología de moda.
  2. Debes comprender por qué, cada herramienta, es más adecuada para ser usada en uno u otro caso y recordar que no siempre, lo más moderno, es la opción más adecuada para encontrar un trabajo.
  3. Investiga tu futuro mercado laboral, no ignores el hecho de que los lenguajes y las herramientas pueden depender mucho del mercado; así que, investiga un poco sobre al mercado al que consideras dirigirte.
  4. No necesitas saber todo lo que se enumera a continuación para lograr tu primer trabajo. Las hojas de ruta pueden ser infinitas, de hecho en el mundo de la tecnología, lo son. Pero no debes dejar que eso te asuste, si recién estás comenzando a entrar en el mundo del desarrollo web.

A lo largo de la siguiente hoja de ruta, se trata de cubrir todo lo que eventualmente aprenderás o usarás; eso no quiere decir, que no puedas aprender un mínimo y seguir aprendiendo todo lo demás, mientras comienzas a construir tus aplicaciones, webs o servicios.

Fase 1: Listo para el trabajo

Si eres un principiante y acabas de comenzar en el desarrollo web, aquí tienes la hoja de ruta definitiva. Echa un vistazo a la hoja de ruta que vas a encontrar a continuación y deja de leer en otros lugares.

Completa los elementos enumerados en esta hoja de ruta y vuelve una vez que hayas realizado algunos proyectos aplicando todo lo que vayas aprendiendo.

Aprendiendo a utilizar con la suficiente soltura, todos los elementos enumerados a continuación, deberías poder llamarte desarrollador web y estar preparado para encontrar un trabajo en el mercado laboral.

La mayoría de gente que se ha centrado en estos aspectos, ha ganado un dinero decente con un trabajo independiente / freelance o bien, encontrado un puesto en alguna gran empresa.

Dedica algo de tiempo a todos los elementos enumerados en este lugar, centrate en controlar al máximo todos los diferentes puntos y procura practicar mucho en su uso y aplicación. Haz muchos pequeños proyectos, en los que apliques todo lo aprendido.

¿Qué debo aprender en la Fase 1?

  • HTML, CSS, Javascript, el manejo del DOM, el uso de Git; y el funcionamiento básico de Internet, la red y la WWW.
  • Aprende y busca las mejores fórmulas para sacarle todo el partido a tu editor de texto o IDE favorito.
  • Comienza a conocer Markdown, lo que te va a facilitar el uso de Github o la redacción de documentación, de aquí en adelante.

Aquí tienes una lista de algunas posibles ideas de proyectos que puedes realizar.

Posibles Proyectos

Una vez que hayas terminado con esto, es importante que aprendas sobre los sistemas de control de versiones, aprender el uso básico de Git, sus conceptos más básicos y crea tu perfil en GitHub.

Fase 2: Explota al máximo CSS

Una vez que haya cubierto los conceptos básicos, continua con el siguiente paso y aprende a escribir CSS avanzado y a usar algunos frameworks CSS, como Bootstrap.

En este punto, es interesante ampliar los conocimientos sobre el funcionamiento y la seguridad de la web, aprender a implementar el HTTPS e investigar un poco sobre la ideología de OWASP.

Una vez que haya terminado con este paso, continua y realiza las siguientes tareas en los proyectos que realizaste anteriormente en la fase 1.

Tareas

  • Agrega Bootstrap a los proyectos anteriores usando npm o yarn.
  • Convierta los proyectos que realizaste en la Fase 1 aplicando la metodología BEM
  • Escribe el CSS en SASS u otro pre procesador de CSS: por ejemplo, Stylus o Less.
  • Automatiza la conversión de SASS a CSS usando scripts de NPM u otro tipo de contenedores.
  • Implementa HTTPS / certificados SSL, como por ejemplo Let´s Encrypt.

👷‍♂️ El contenido a continuación, se encuentra publicado exclusivamente como borrador 👷‍♂️

Fase 3 – Acelerando

La fase 3, te tomará algún tiempo y el paso más importante hacia el desarrollo front end moderno. Es el momento, de introducirte en el amplio mundo de JavaScript. Aprenda qué es Webpack, comprenda los diferentes conceptos y por qué alguna vez fue necesario. Comprenda qué es babel, por qué lo usamos y aprenda cómo integrarlo con webpack y, por último, aprenda cómo lint su código usando ESLint. Todos los elementos enumerados en esta fase giran en torno al paquete web.

Comenzará a probar el desarrollo de frontend moderno a fines de esta semana. Una vez que haya terminado con esta fase, siga adelante y siga los pasos a continuación para tener un buen control de las herramientas de construcción.

Tareas

  • Cree un paquete npm que tome un nombre de usuario y devuelva la lista de enlaces que se encuentran en las redes sociales (si existen). Debe ser utilizable en el navegador, empaquetarlo con webpack, usar babel para transpilarlo y usar ESLint para linting.
  • Cree una aplicación simple de lista de tareas pendientes, use SASS para CSS, agregue bootstrap para estilos, use BEM, transpile JavaScript usando babel, empaquételo con webpack, cree una compilación de producción optimizada e impleméntelo en las páginas de Github.

Fase 4: aplicaciones frontend modernas

El siguiente paso es aprender sobre algún marco de interfaz. Hay varias opciones, pero las que se utilizan con más frecuencia en estos días son React, Angular y Vue. Te recomendaría que vayas con React.

En primer lugar, aprenda React, luego eche un vistazo a redux y luego aprenda sobre CSS en JS; que no es obligatorio, pero eche un vistazo a los componentes con estilo y los módulos CSS si lo desea.

Una vez que haya aprendido a reaccionar, continúe y lea sobre las aplicaciones web progresivas. Ahora que conoce los frameworks frontend, no debería ser tan difícil para usted. Eche un vistazo a la lista de verificación de PWA , lea acerca de los trabajadores del servicio, la medición del rendimiento, el uso de Lighthouse y observe las diferentes API de navegador que puede usar para su ventaja, por ejemplo, almacenamiento, ubicación, notificaciones, orientación del dispositivo y pagos. Lea también sobre el modelo RAIL y el patrón PRPL.

Una vez que haya terminado con esto, debería poder llamarse un desarrollador frontend moderno. Asegúrese de practicar lo que aprenda. Aquí está la lista de tareas que puede elegir si está buscando ideas.

Tareas

  • Cree una aplicación simple que le permita elegir algunos hashtags y use la API de búsqueda de Twitter para buscar y mostrarle los tweets más recientes para esos hashtags en una cuadrícula de diseño similar a trello. Intente fijar los hashtags para que cuando el usuario actualice la página, recuerde los hashtags que eligió. Utilice react-router y agregue acerca de las páginas.
  • Crea una aplicación Pomodoro similar a esta que permite a los usuarios configurar la duración del trabajo y los descansos, muestra notificaciones y reproduce un sonido cada vez que el trabajo o el descanso ha terminado / comenzado.
  • Vuelva a crear la página de tendencias de GitHub usando React y permita el filtrado usando el idioma y las fechas como GitHub. Puede agregar bibliotecas para las fechas.

Fase 5: pruebas automatizadas

Aprender a escribir pruebas automatizadas para sus aplicaciones le ahorrará muchos dolores de cabeza en el futuro y lo colocará en una mejor posición a la hora de buscar trabajo. Primero que nada, sigue adelante y aprende cuáles son los diferentes tipos de pruebas, diferentes conceptos como burlarse, talones, etc. Después de eso, sigue adelante y aprende Jest, Enzyme y Cypress de una manera respectiva. Además, aprenda a calcular la cobertura de la prueba.

Tareas

Para las tareas, siga adelante y escriba pruebas de unidad, integración y funcionalidad para las aplicaciones que creó en la Fase 4 anterior.

Fase 6 – Comprobadores de tipo estático

Los verificadores de tipo le permiten hacer que su código sea más fácil de mantener a medida que crece, aumenta su agilidad al hacer la refactorización, brindan un mejor soporte en los IDE y son la mejor forma de documentación que puede tener. Hay principalmente Flow y TypeScript en este dominio. Sin embargo, hay más impulso hacia TypeScript y te recomendaría que lo hagas.

Una vez que haya terminado de aprender TypeScript, continúe y convierta cualquiera de sus aplicaciones JavaScript existentes para usar TypeScript.

Fase 7: representación del lado del servidor

Las aplicaciones renderizadas por el servidor permiten lograr un mejor rendimiento y un SEO mejorado en comparación con las aplicaciones renderizadas por el cliente. Aunque no es un requisito, definitivamente lo ayudaría a crear mejores aplicaciones frontend. Hay diferentes opciones disponibles, basadas en el marco de interfaz de su elección; pero si eligió React.js, entonces debería ir con Next.js, lo que hace que SSR sea muy sencillo.

Para las tareas, convierta las aplicaciones que creó anteriormente para que se procesen en el lado del servidor usando Next.js

Fase 8 – Ve más allá

Todo lo que se muestra en esta fase es opcional y no es realmente necesario para usted, pero si desea probarlos, siga adelante y eche un vistazo.

Tenga en cuenta que en aras de la brevedad, no he entrado en el meollo de la cuestión y he tratado de darle una imagen más amplia; ve y averigua mientras aprendes.

Conclusión

Es posible que aún falten cosas en la hoja de ruta, pero esto es todo lo que necesita para cualquier puesto de “Ingeniería Frontend”. Y recuerde que la clave es practicar tanto como pueda. Puede parecer más aterrador al principio y sentirá que no está comprendiendo mucho, pero eso es normal y, con el tiempo, sentirá que está mejorando cada vez más. Y no olvides pedir ayuda si estás estancado, te sorprenderá la cantidad de personas dispuestas a ayudar.

Infografía Hoja de Ruta Front End