Portada » Desarrollador front-end en 2021

Desarrollador front-end en 2021

by Donal Sandro Noblejas Huaman


Donal-Sandro
noviembre 2, 2021
9:50 am

La profesión de “desarrollador front-end” será sin duda una de las más demandadas en 2021.
Anteriormente, para quienes trabajaban en esta área, era suficiente conocer HTML, CSS y, posiblemente, jQuery para crear sitios interactivos. Pero hoy en día, un desarrollador front-end se ve obligado a existir en un ecosistema vasto y en constante cambio, que consta de herramientas, bibliotecas y marcos. El desarrollador tiene habilidades vitales para dominar una variedad de herramientas, constantemente tiene que invertir tiempo y esfuerzo en el autoaprendizaje.

En los últimos años, el mundo ha visto nuevas y emocionantes bibliotecas y marcos basados ​​en JavaScript que son la base de casi cualquier proyecto web actual. Estos son, por ejemplo, React, Vue, Svelte.

En este artículo, quiero darles a todos los que quieran consejos sobre lo que deben prestar atención a dominar hoy . Este artículo está dirigido a una amplia gama de desarrolladores web, desde aquellos que recién están comenzando su camino profesional hasta aquellos que ya saben algo.

  1. Marcos
    En 2021, podemos presenciar un duelo entre la biblioteca React, que está detrás de Facebook, y el marco Vue, que cuenta con el apoyo de la comunidad de desarrolladores. El repositorio de React en GitHub ahora tiene alrededor de 159,000 estrellas, y el repositorio de Vue tiene incluso más, alrededor de 175,000, pero Angular, por ejemplo, tiene solo alrededor de 67,500 estrellas. Si hablamos de las estadísticas sobre consultas de búsqueda para 2019, cuyo gráfico se presenta a continuación, puede encontrar una coincidencia con los datos anteriores. La biblioteca React está representada aquí por una línea azul, el marco Vue está representado por una línea roja y Angular por una línea amarilla. También hay algunos datos sobre Svelte, que se muestran en línea verde, pero es incomparable con los indicadores de otros marcos. Como puede ver, Vue está ligeramente por delante de React y Angular está detrás de ellos.

Como resultado, podemos decir que en 2021 los desarrolladores front-end que usan o planean usar JavaScript frameworks, debes prestar especial atención a React y Vue. Angular es adecuado para quienes trabajan en grandes proyectos.

Puede obtener más información sobre React y Vue en los sitios web oficiales de los proyectos.

  1. Generadores de sitios estáticos
    Los generadores de sitios estáticos (SSG) combinan el poder de la representación del lado del servidor (que es importante para SEO y mejora el tiempo de carga de la página en el primer acceso) y las aplicaciones de una sola página. Los SSG se utilizan en muchos proyectos en estos días, incluso aquellos que no necesitan capacidades de renderización del servidor. Esto se debe a que soluciones como Next o Nuxt tienen muchas características útiles, como la compatibilidad con archivos Markdown y constructores de módulos, como la integración de ejecutores de prueba.

Si se toma en serio el desarrollo de front-end, debería examinar más de cerca los siguientes proyectos y ponerlos a prueba:

Next (basado en React).

Nuxt (basado en Vue).

Gatsby (basado en React).

Gridsome (basado en Vue).

Quizás, a finales de 2020, estas herramientas puedan llamarse las más interesantes, pero todavía hay muchos proyectos similares.siguiendi La lista encontrarás enlaces a sitios donde puede encontrar información sobre los SSG enumerados.

  1. JAMstack
    El término “JAMstack” incluye abreviaturas de las siguientes tecnologías:

JavaScript es código que se ejecuta en el cliente, representado por bibliotecas (como React), frameworks (como Vue) o programas escritos en JavaScript puro.

API: lo que sucede en el servidor se abstrae, se accede a él desde el código JavaScript a través de HTTPS.

markup : markup representado por plantillas que se utilizan para crear páginas durante la preparación del proyecto.

JAMstack es un enfoque para el desarrollo de sitios web y aplicaciones web enfocado en alto rendimiento, fácil escalabilidad, buena seguridad y experiencia de programador.

Si bien las tecnologías mencionadas en la palabra “JAMstack” no son nada nuevo, se unen para brindarnos una nueva calidad que todas tienen. Es decir, independencia de los servidores web. Por lo tanto, por ejemplo, una aplicación monolítica basada en Ruby o Node.js, o un sitio construido sobre un CMS del lado del servidor como Drupal o WordPress, estos no son proyectos que correspondan a la ideología JAMstack.

A continuación, se muestran algunas pautas a tener en cuenta al decidir utilizar JAMstack.

▍Colocación del proyecto en CDN

Dado que los proyectos JAMstack no necesitan un servidor para ejecutarse, todo el proyecto se puede alojar en recursos CDN. Esto permite una velocidad y un rendimiento que de otro modo no están disponibles.

▍Guardar el código del proyecto en un repositorio de Git

Aquellos que trabajan con el proyecto deberían poder clonarlo por completo desde el repositorio de Git, sin tener que trabajar con la base de datos y realizar configuraciones complejas del entorno de trabajo.

▍Automatizar ensamblajes de proyectos

El uso de JAMstack le permite automatizar perfectamente el proceso de construcción del proyecto. El hecho es que todo el markup de marcado está listo para funcionar, por ejemplo, los webhooks y los mecanismos para trabajar con servicios en la nube están integrados en él.

▍Uso de la implementación atómica de proyectos

Para evitar los problemas asociados con el hecho de que al implementar un proyecto que consta de cientos o miles de archivos, algunos clientes usan simultáneamente archivos de diferentes versiones del proyecto, se utiliza el esquema de implementación de proyecto atómico. Se basa en el hecho de que antes de transferir las actualizaciones a un estado de trabajo, están esperando la preparación completa de todos los materiales.

▍Uso de invalidación instantánea de caché

El recurso CDN utilizado para implementar el proyecto debe admitir la invalidación instantánea de la caché. Esto es necesario para que la nueva versión del sitio, después de su publicación, esté disponible para los clientes.

Hosters conocidos como Netlify o Zeit admiten aplicaciones JAMstack. Las grandes empresas utilizan este tipo de aplicaciones para que los usuarios puedan trabajar con sus proyectos con mayor comodidad.

El JAMstack es definitivamente algo que cualquiera que planee hacer un desarrollo de front-end en 2021 debería conocer. Aquí , aquí y allá : algunos recursos útiles de JAMstack.

  1. Aplicaciones web progresivas
    Las aplicaciones web progresivas (PWA) sin duda desempeñarán un papel destacado en 2021. Cada vez más empresas, al desarrollar proyectos móviles, eligen exactamente PWA, y no aplicaciones nativas. Los usuarios que trabajan con estas aplicaciones pueden utilizar todas las capacidades avanzadas de la tecnología moderna.

Entre las fortalezas de PWA se encuentran las siguientes:

Fiabilidad: carga rápida, la capacidad de trabajar sin conexión a Internet.

Velocidad: animaciones fluidas, respuesta rápida a la entrada del usuario.

Atractivo: brindan a los usuarios la misma sensación que las aplicaciones nativas, brindan una excelente experiencia de usuario.

Para que sea posible trabajar sin conexión a Internet, PWA utiliza trabajadores web. La configuración de la aplicación, incluidas las que garantizan su funcionamiento en modo de pantalla completa, se realiza mediante un archivo de manifiesto.

Estas son algunas de las razones para elegir PWA como base para el desarrollo móvil:

Las PWA se pueden agregar a la pantalla de inicio desde una página web vista en un navegador.

Estas aplicaciones pueden funcionar incluso sin conexión a Internet.

Admiten notificaciones push, lo que mejora su experiencia de usuario.

Al desarrollar dichas aplicaciones, se pueden optimizar en función de los informes de Google Lighthouse.

  1. GraphQL
    GraphQL es actualmente uno de los temas más candentes. Y definitivamente vale la pena dominar esta tecnología para cualquiera que vaya a hacer desarrollo web en 2021. Y quienes ya la conocen deberían conocerla aún mejor.

REST se ha considerado durante mucho tiempo el estándar de facto para diseñar API web. Nos ofrece las posibilidades de realizar grandes conceptos. Estos son, por ejemplo, servidores que no almacenan el estado del cliente. Pero las API RESTful parecen cada vez más ser insuficientemente flexibles a los ojos de los especialistas modernos, que no se mantienen al día con el desarrollo de las tecnologías de los clientes.

La tecnología GraphQL fue desarrollada por Facebook. Su objetivo es resolver los problemas que enfrentan los programadores que trabajan con API RESTful.

Entonces, utilizando la API RESTful, el desarrollador se ve obligado a recopilar los datos que necesita, cargándolos desde varios puntos finales, cada uno de los cuales fue creado para resolver un problema específico. Por ejemplo, estos son puntos finales como /users/_idy /tours/_id/location.

El trabajo se realiza de manera diferente cuando se usa GraphQL. El desarrollador envía una solicitud al servidor GraphQL, describiendo los datos que necesita. Luego, el servidor devuelve un objeto JSON que contiene todo lo que se le solicitó.

Otra ventaja de GraphQL es que utiliza un sistema de tipos sólido. Todo con lo que trabaja un servidor GraphQL se describe usando un esquema GraphQL, que se crea usando un lenguaje especial. Una vez creado el esquema, los desarrolladores front-end y sus colegas back-end pueden trabajar casi independientemente unos de otros, ya que utilizan las mismas estructuras de datos predefinidas.

Aquí , aquí y allá : recursos útiles para cualquiera que desee aprender GraphQL en profundidad.

  1. Editores de código e IDE
    En 2021, al igual que en 2020, el primer lugar entre los editores de código utilizados en el desarrollo front-end lo ocupará Microsoft VS Code.

Este editor proporciona al programador capacidades comparables a las de los IDE completos. Estos son, por ejemplo, el autocompletado y el resaltado de sintaxis. Las habilidades de este editor se pueden mejorar casi sin límites utilizando una gran cantidad de extensiones creadas para él.

Estas extensiones se publican en un recurso especial . La existencia de este sitio es uno de los factores importantes en el atractivo de VS Code. Estas son algunas buenas extensiones para desarrolladores de aplicaciones para el usuario:

Fragmentos de código de JavaScript (ES6)

npm

CSS Peek

Vetur

ESLint

Compilador de Sass en vivo

Depurador para Chrome

Servidor en vivo

Estos son excelentes ejemplos de lo que son las extensiones útiles para VS Code, pero en realidad existen muchas más extensiones de calidad. Recomiendo a todos los que usan VS Code que hurguen en el directorio de extensiones y elijan la que simplificará y acelerará su trabajo.

  1. Herramientas para probar proyectos
    El código no cubierto por las pruebas no debe tener espacio en producción.

Cualquiera que esté involucrado en su propio proyecto puede decidir que es más conveniente trabajar en él sin pruebas y se apegará a esta idea. Pero en el desarrollo de grandes proyectos, comerciales o creados a la escala de una determinada organización, no se puede prescindir de las pruebas. Por lo tanto, puedo aconsejar a todos los desarrolladores que incluyan pruebas en sus proyectos, haciéndolo siempre que sea posible.

Existen diferentes tipos de pruebas. Por ejemplo, se aplica la siguiente clasificación:

Las pruebas unitarias son pruebas de un solo componente o función de forma aislada.

Las pruebas de integración son una prueba de la interacción de componentes.

Las pruebas de extremo a extremo están probando el proyecto como un todo, en particular, utilizando herramientas de automatización del navegador para probar la interacción del usuario del proyecto.

También existen otros enfoques para realizar pruebas. Por ejemplo, se trata de pruebas manuales y de instantáneas. Si está considerando obtener un puesto de desarrollador senior o si busca trabajar para una gran empresa que tenga ciertos estándares de desarrollo, debe desarrollar sus habilidades de prueba web.

  1. Código limpio
    La capacidad de escribir código limpio es una habilidad muy útil que muchas organizaciones demandan. Si desea ascender en la carrera profesional, solo necesita dominar los conceptos de escritura de código limpio.

El código limpio es un código ordenado que es fácil y agradable de leer. Dicho código tiene como objetivo resolver problemas bien definidos. El código limpio se mantiene en buenas condiciones, está bien cubierto de pruebas. No tiene secciones duplicadas, es minimalista en términos de uso de clases, métodos y funciones.

Aquí hay algunas pautas para cualquiera que busque escribir código limpio:

Cree nombres significativos para variables, clases, métodos y funciones.

Las funciones deben ser pequeñas, solo deben tener el mínimo requerido de argumentos.

Debe esforzarse por asegurarse de que el código se explique por sí mismo sin necesidad de comentarios.

Si desea desarrollarse en la dirección de escribir código limpio, lea libros y artículos de Robert Martin (en inglés).

  1. Git
    Git es el estándar moderno para el control de versiones de código en el desarrollo web. Todo ingeniero de front-end simplemente necesita conocer al menos los conceptos básicos de Git, sus conceptos básicos y enfoques de trabajo utilizados en él. Esto es necesario para organizar un trabajo eficaz en un equipo de cualquier tamaño.

Aquí hay algunos comandos de Git para conocer y usar:

git config

git init

git add

git commit

git push

git pull

Si bien estos comandos le permitirán usar Git, vale la pena explorar las ideas fundamentales en las que se basa para trabajar completamente con este sistema. Aquí , aquí y hay algunos recursos que vale la pena consultar para cualquiera que busque mejorar en Git.

  1. Cualidades personales
    El desarrollo de las cualidades personales a menudo se pasa por alto, pero son muy, muy importantes.

Aunque, por supuesto, un desarrollador front-end no puede ir muy lejos sin comprender los problemas técnicos, sus cualidades personales son muy importantes en el trabajo en equipo. Cualquiera que se tome en serio la construcción de una carrera en el campo de la tecnología informática, que aspire a convertirse en un “senior”, debe prestar atención al desarrollo de las siguientes cualidades:

La capacidad de ocupar el puesto de otra persona.

Habilidades de comunicación.

Habilidades de trabajo en equipo.

Voluntad de establecer contacto y disposición de ayudar a los demás.

Paciencia.

La amplitud de vistas.

Capacidad para resolver problemas.

Una responsabilidad.

Creatividad.

Capacidad para gestionar el tiempo.

Y, si hablamos de altos cargos de programador, entonces siempre vale la pena recordar que el mejor indicador del trabajo de un “senior” es cuántos “senior” “crió”.

Resultados

En esta publicación, le di 10 instrucciones para alguien que quiera ser un desarrollador front-end efectivo en 2021. Sin embargo, mi lista no pretende estar completa. El mundo de la interfaz es enorme. Pero espero poder mostrarte algo que te inspire, algo que te permita crecer por encima de ti mismo en 2021.

¿ planeas dominar el front-end en 2021?

Atentamente verlista.com

Autor Donal Sandro Noblejas Huaman

Lima Perú 🇵🇪

Leave a Comment

Are you sure want to unlock this post?
Unlock left : 0
Are you sure want to cancel subscription?
-
00:00
00:00
Update Required Flash plugin
-
00:00
00:00