Ruta 2023: 7 cosas que debes saber para ser desarrollador frontend

Un desarrollador frontend es el encargado de llevar el diseño de una aplicación a código que pueda ser usado mediante una interfaz por los usuarios.

Este es una de las áreas que puedes elegir para comenzar a ser desarrollador de software, la cual, según la encuesta de Stack Overflow del 2022, alrededor del mundo la mediana de los sueldos de un desarrollador frontend son de 60, 000 dólares anuales, esto incluye países como la India, en Estados Unidos este número sube a 133.000 dólares.

Y es por eso que hoy te contamos los 7 conocimientos técnicos que debes saber para comenzar tu carrera como desarrollador frontend.

---

Hoy hablaremos sobre la ruta inicial para ser desarrollador o desarrolladora frontend, puedes leer este post ó ver y escuchar esta información en formato de video en nuestro canal de youtube, te dejamos el link por si prefieres este formato. 😃 👍

---

Hola mundo y bienvenidos a este post, antes de comenzar, las siguientes son solo las habilidades técnicas, hay una serie de habilidades blandas que también debes de trabajar para llegar a ser un buen desarrollador, solo que en este video acotaremos solo aquellas habilidades técnicas que te servirán para ingresar como desarrollar frontend a la industria y comenzaremos con las bases HTML y CSS:

1.- HTML y CSS

Estos son los lenguajes base de que debes saber, hay que tener en cuenta que ninguno de estos son lenguajes son de programación, mientras que HTML es un lenguaje de marcado, CSS es un lenguaje de estilos, pero dominar ambos son totalmente necesarios para la construcción de tus aplicaciones Web.

Un sitio construido con solo HTML se vería así:

Un ejemplo es de una plataforma que usa CSS es el canal de “hola mundo” en youtube y aprovechando que estamos aquí, puedes suscribirte si es que no lo has hecho aun:

Otro aspecto que debes de considerar cuando aplicas CSS es generar páginas que puedan ser responsivas, esto es, que sin importar de qué tamaño sea la pantalla de tus usuarios, todos puedan utilizar tu aplicación sin ningún problema, en el siguiente ejemplo veremos la tienda de hola mundo a la cual puedes acceder haciendo click aquí.

Con estas dos tecnologías serás capaz de construir sitios estáticos, como lo puede ser un blog o páginas cuya información no va a cambiar y en las que el usuario no puede interactuar del todo, es decir una página de solo lectura.

Si quieres comenzar a aprender HTML y CSS, en la Academia de Hola Mundo puedes encontrar los cursos para comenzar a aprender a usar estas tecnologías, los links te los dejamos a continuación:

• HTML5: sin fronteras,
• CSS3: sin fronteras,

Pero para agregar toda la interactividad y construir aplicaciones web como lo son Youtube, Spotify o Netflix, usaremos JavaScript:

2.- JavaScript

Entre las cosas que debes de aprender de JS es cómo este interactúa con el navegador, obtener datos de una API (es decir, de un backend) y cómo hacer la manipulación del DOM para mostrar estos datos obtenidos.

El DOM es la representación de todos nuestros elementos que se ven en nuestra pantalla y aprender a manipular estos elementos nos permitirá crear cambios ante la interacción de nuestros usuarios, como un ejemplo golpear al botón de me gusta de este post.

Igualmente, tendremos que aprender sobre cómo funciona el asincronismo y sobre el estándar ECMAScript 6, este estándar se refiere a las actualizaciones que se han hecho a JavaScript anualmente desde el año 2015 y que con cada una nos agregan nuevas funcionalidades al lenguaje.

De JavaScript tambien contamos con un curso de JavaScript, da click aquí para ver el contenido del curso: Aprende Javascript, HTML5, CSS3 y NodeJS desde cero, en nuestra academia.

Si quieres saber más de este lenguaje, te dejamos nuestro post: 7 razones para aprender JavaScript

Aprender sobre cómo funciona el lenguaje te ayudará a crear aplicaciones y a entender mucho mejor cómo funcionan las librerías y frameworks… y este, es el siguiente punto:

3.- Librerías o Framework

Una vez que dominas los lenguajes HTML, CSS y JS, es hora de llevar tu desarrollo a otro nivel.

Aunque puedes construir todas tus aplicaciones con estos 3 lenguajes, puedes agilizar tu desarrollo utilizando una librería o framework, estos ya han abstraído bloques de código que tendrías que hacer manualmente, es decir, que ciertas funcionalidades ya han sido resueltas por el framework o librería.

Estos resuelven problemas que son repetitivos y comunes usando JavaScript vanilla para construir tus sitios, te permiten construir de una forma mucho más sencilla mejorando tu experiencia de desarrollo.

Entre los más usados en la industria, están React, Angular, Vue y Svelte.

Y sobre estos tambien tenemos un curso para aprender la libreria React, da click aquí para ver el contenido del curso: React – Guía definitiva: hooks, router, redux, next + Proyectos, en nuestra academia

Si quieres saber más de esta librería, te dejamos nuestro post: 7 razones para programar en react

Y entre estas herramientas que tienes que aprender para que tu experiencia y velocidad de desarrollo sea mucho mejor están los preprocesadores CSS:

4.- Preprocesadores

Ya sea que desarrolles con frameworks, librerías o con las tecnologías vanilla; un preprocesador es una de las tecnologías que puede que te sea requerida en una oferta en el campo laboral, te ayudará a extender las funciones de CSS y que hará que tu desarrollo de estilos sea mucho más fácil.

Si ya dominas CSS y JS, verás que muchas de las nuevas funciones que te entrega un preprocesador serán muy parecidas a usar JS dentro de CSS.

En algunos casos manejan su propia forma de escribir el código, pero no te preocupes, esto se usa para hacerlo más sencillo y aún así sigue siendo muy parecido con CSS; mientras que otros se escriben como se escriben tal cual como se hace en CSS, pero estos te permiten la reutilización de código y ayudan a la escritura de los estilos de tus aplicaciones.

Entre los más populares en el mercado encontrarás a SASS, LESS y Stylus, y al ser tan parecidos si ya aprendiste uno, no te será problema cambiar entre uno y otro cuando lo necesites.

Debes tener en cuenta que para usar estos preprocesadores, un framework o librería, deberías aprender otra tecnología adicional, los empaquetadores y transpiladores:

5 .-Empaquetadores y Transpiladores

Tu navegador web, nativamente solo puede leer los lenguajes HTML, CSS y JS, y aunque puedes usar preprocesadores, un framework o una librería, estos se encontrarán escritos en una sintaxis que tu navegador no puede entender, por lo que tendrás que hacer uso de un empaquetador como los son Webpack, Vite, RollUp, Parcel entre otros; los cuales consisten en configuraciones que haces para que tu código sea empaquetado y se encuentre listo para poder ser leído en el navegador.

En ocasiones, tu framework o librería pueden encargarse de todas estas configuraciones, pero la ventaja de usar un empaquetador es que tú tienes control sobre lo que se instala y sobre la configuración del resultado del empaquetamiento.

Ahora que hemos aprendido a configurar nuestros proyectos, podemos seguir con otras herramientas que agilizaran nuestro desarrollo, los cuales son Frameworks y librerías de CSS:

6.- Frameworks y Librerías de CSS

Agregamos un framework o librería de CSS a nuestros proyectos cuando queremos hacer uso de estilos a través de clases reutilizables. Estas tienen una documentación propia en la que podremos encontrar una variedad de estilos para usar en nuestros elementos o componentes y así ahorrarnos tiempo en agregar estos manualmente a cada elemento.

Entre algunos que puedes aprender, se encuentran: tailwind CSS, Bulma, o Prime flex.

Ahora, un framework o librería de UI, son aquellas que ya tienen listos elementos o componentes reutilizables, es decir con estilos y con lógica que nos permiten hacer un desarrollo mucho más rápido, reusando y customizando según nuestras necesidades. Entre algunos, puedes aprender material UI, tailwind UI, bootstrap, Prime React, Elemental UI.

Si ya has dominado un desarrollo más ágil usando todas estas herramientas, pasamos a nuestro último punto hoy que es testing.

7.- Testing

Cuando ya has dominado estas herramientas, es hora de hacer pruebas, además de ser una de las habilidades requeridas en las ofertas laborales es la que te permitirá observar si tu código se encuentra funcionando como esperas.

Estas pruebas tratan de simular el comportamiento de un usuario usando la aplicación para encontrar posibles fallas. Y existen de varios tipos, entre los más comunes encontrarás los Unit Test y los End to End.

Esto te servirá para agregarle confiabilidad a tu código para llegar a producción y a los usuarios finales, y si en un futuro tu código será refactorizado se podrán ocupar esas pruebas para probar la fiabilidad de dicho proceso y que todo siga funcionando correctamente.

---

Y esto ha sido todo, cuéntanos en la caja de comentarios que otras herramientas técnicas debe dominar un desarrollador frontend que no hayamos incluido en este top, ¿qué te ha parecido?, o si tienes algún punto adicional que no hayamos comentado.

¿Cómo ser un desarrollador frontend?

Para aprender las diversas habilidades para ser desarrollador Frontend, te hemos dejado en el post diversos cursos de la Academia de Hola Mundo, además de los mencionamos te invitamos a ver todos nuestros cursos, con los cuales podrás formarte como un excelente desarrollador o desarrolladora con diferentes tecnologías, has click aquí donde podrás ver todos los cursos.

Si te ha encantado, ¡golpea al botón de me gusta!, síguenosen todas las redes como Youtube, Twitter e Instagram, y por último, te invitamos a escuchar nuestra música «Hola Beats» diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, estamos en Spotify y en Apple Music.

Y si igualmente quieres aprender lo que necesitas para ser desarrollador backend te dejamos nuestro post: Ruta 2023: 7 cosas que debes saber para ser desarrollador backend.

¡Hasta la próxima!, y chao mundo