El conocimiento es el nuevo dinero.
Aprender es la nueva manera en la que inviertes
Acceso Cursos

Porque Aprender Cloud como Frontend 🧐

· 10 min de lectura
Porque Aprender Cloud como Frontend 🧐

Si eres  Frontend enfocado en Angular, React o Vue y durante los últimos años, pusiste toda tu energía en mejorar habilidades como State Manager, Testing, Tailwind, pero sin ningún esfuerzo en aprender algo sobre Cloud, este artículo es para ti.

Quizás has tenido trabajos donde con solo saber Angular, Rxjs, Sass, NgRx, Testing y Git cumples con las tareas y si pones el extra dockerizar la aplicación eres  un jugador de primera división.

Decidiste aprender nada de cómo configurar un CD/CI, ya que trabajaste con un equipo de DevOps o usaste Github con Actions, que te deja todo a golpe de clic, entonces tengo informarte que el “Mercado Cambió”.

El Cambio del Mercado

Desde mediados del 2020/el 2021, los puestos frontend empezaron a requerir más que los conocimientos que los que tenias, las posiciones de frontend requieren conocimientos de CI/CD, AWS, Azure, Serverless, Cloud Functions, Jenkins, y Cloud Arquitecture ya son parte normal de cualquier puesto de frontend senior.

Aquí el ejemplo de algunos puestos que encontre en linkedin:

Ejemplo 1:

Senior Frontend Software Engineer
- Professional experience with Vuejs (Frontend framework).
- Good knowledge of vanilla JavaScript, TypeScript.
- Previous experience with Webpack, or other tools needed to build/bundle JavaScript applications.
- Deep focus on automated tests (unit, functional, integration).
- Familiarity with CI/CD development process.
- Familiarity working with AWS cloud solutions (S3, Cloudfront).
- Previous experience with Observability tools (Datadog, NewRelic, etc) is considered a plus.

Ejemplo 2:

Senior Frontend Developer - Remote
Minimum Qualifications:
- Experienced developer, ideally JavaScript, TypeScript
Algorithmic thinking
- Experience with web applications
- Strong written and oral communication skills in English
- Good understanding of IT security
Cross-platform, web application development (Windows, Mac, Linux)
- Familiarity with CI/CD concepts and experience working with a deployment pipeline such as Jenkins
- Experience with AWS and Terraform

Como ves, ya no solo con Vue, React, Testing, el Cloud esta en cada una de ellas,
ya esta claro que con escribir código con tests y subirlo a un GitHub ya no es suficiente.

¿Tengo que hacer más por lo mismo?

Si tienes varios años de experiencia, recuerdas que hace poco con saber un framework era suficiente, luego había personas solamente dedicadas al CSS (aún existen), pero empezo a surgir saber, testing, git, socket, sass/tailwind por ejemplo, ósea cada vez más hacer, y esas cosas nos hace mejores profesionales.

Nuestros productos viven o consumen servicios de cloud, por tanto saber trabajar con Cloud nos permite poder brindar mejores soluciones y también poder hacer en muchos casos, cosas mas faciles.

¿Puede sobrevivir un Frontend sin Cloud?

Por supuesto que conseguirás trabajo, pero si quieres grandes puestos de trabajo altamente valorados por tu empresa, añade habilidades Cloud y DevOps a tu CV.

Quiero hacerte preguntas similares, contratarías un frontend que solo sabe HTML, CSS y Javascript (las bases) pero desconoce de:

  • Testing
  • Git
  • ¿Algún React o Vue o Angular ?
  • Consumir API

Quizás, pero la mayoria de las ofertas piden esos requisitos. Esta claro que encontraras trabajo, pero tus opciones se maximizan si sabes los  puntos anteriores.

Si tu quieres saber más acerca de esté tipo de contenido, te invito a seguirme en mis redes sociales

Un Frontend, que Cloud, CI/CD, Cloud Functions, serverless se convierte en una pieza fundamental para una empresa y para ti da más opciones de mercado y mayor capacidad de negociar un aumento o mejor oferta económica.

También puedes leer más acerca en mi blog

¿Qué Aprender AWS, Azure, Google?

En el Cloud tenemos una situacion similar a la de los frameworks JavaScript (React, Angular y Vue) pero en Cloud.

Cada Cloud tiene un camino para aprender, pero la mayoría tienen servicios similares, elige cuál se adapta a ti, o puedes poner las habilidades a prueba o conseguir ofertas de trabajo.

Recuerda, que el Cloud es una caja de pandora, con muchos temas y especializaciones como Cloud Administración, Cloud Developer, o DevOps.

El Cloud ofrece muchas herramientas y servicios que pueden ayudarle a optimizar su flujo de trabajo y crear aplicaciones más escalables y eficaces.

No puedo aprenderlos todos, así mejor te doy una pequeña lista de escenarios como frontend, que puedes usar el cloud para poder resolverlo

Mi lista está orientada a Azure, pero tienes una solución similar tanto en AWS como en Google Cloud.

Estos son los servicios más relevantes que debes conocer como frontend, la mejor forma es plantearte un escenario y qué servicio puede usar para solucionarlo.

Azure App Service

Estamos creando una aplicación web que permite a los usuarios crear y gestionar sus blogs. Azure App Service podría alojar la aplicación y ocuparse de la infraestructura subyacente. Azure App Service se encargaría de tareas como escalar la aplicación para gestionar picos de tráfico y equilibrar la carga de solicitudes en varios servidores.

Como desarrollador frontend, podrías centrarte en crear la interfaz de usuario y las interacciones de la aplicación sin tener que preocuparte de la infraestructura subyacente. Podría utilizar Azure DevOps para configurar un proceso de integración y entrega continuas (CI/CD) para crear e implementar automáticamente la aplicación en Azure App Service cada vez que se realicen cambios en el código.

Azure App Service es una plataforma en Cloud para crear, implementar y escalar aplicaciones web y API. Ofrece muchas funciones que pueden ser útiles como son:

  • Hosting: Azure App Service proporciona una plataforma totalmente gestionada para alojar aplicaciones web, incluido el escalado automático y el control de carga para gestionar los picos de tráfico.
  • Deployment: Azure App Service admite opciones de despliegue, incluida la integración continua con Azure DevOps, Git y otros sistemas de control de origen.
  • Domain Management: Azure App Service te permite gestionar fácilmente dominios personalizados y certificados SSL para tus aplicaciones web.
  • Seguridad: Azure App Service proporciona funciones de seguridad integradas, como autenticación, autorización e integración con Azure Active Directory.
  • Monitoring: Azure App Service incluye herramientas para monitorizar el rendimiento y el uso de tus aplicaciones web, como Azure Monitor y Application Insights.

Por tanto, conociendo Azure App Service podemos crear y desplegar aplicaciones web y API en Cloud y proporcionar una plataforma totalmente gestionada para alojar aplicaciones web con gestión del para el despliegue, la seguridad y la supervisión.

Azure Functions

Estamos creando una aplicación web que permite a los usuarios enviarse mensajes entre sí. Desea enviar un correo electrónico al destinatario cada vez que se envía un nuevo mensaje.

Podrías utilizar una Azure Function activada por un mensaje añadido a una cola para enviar el correo electrónico. El código del frontend podría añadir un mensaje a la cola cada vez que un usuario envíe un nuevo mensaje, y la función de Azure se activaría para enviar el correo electrónico.

Este enfoque tiene varios beneficios: desacopla el código frontend de la lógica de envío de correo electrónico, lo que le permite cambiar el proceso de envío de correo electrónico sin modificar el código frontend, y le permitirá escalar el proceso de envío de correo electrónico independientemente del código frontend ajustando el número de instancias de Azure Function en ejecución.

Azure Functions es un servicio de computación serverless que permite ejecutar pequeños fragmentos de código, o "funciones", en Cloud, siendo plataforma totalmente gestionada, lo que significa que no tiene que preocuparse de aprovisionar o mantener la infraestructura.

Azure Functions puede ser útil de varias maneras:

  • Ejecución de tareas de backend: Azure Functions puede ejecutar tareas de backend, como enviar correos electrónicos o procesar datos activados por eventos o en una programación. Esto puede liberar el código del frontend para centrarse en la interfaz de usuario y permitirle desacoplar el frontend y el backend de su aplicación.
  • Integración con otros servicios Azure: Azure Functions se puede integrar fácilmente con otros servicios de Azure, como almacenamiento, bases de datos y colas de mensajería. Esto puede permitirte construir arquitecturas escalables y basadas en eventos que pueden utilizarse para potenciar tu aplicación web.
  • Serverless architecture: El uso de Azure Functions puede permitirle construir una arquitectura sin servidor que puede ser más rentable y más fácil de escalar que las arquitecturas tradicionales.
    Azure DevOps

Estamos trabajando en un equipo de desarrolladores frontend construyendo una aplicación web. Estás utilizando Azure DevOps para gestionar el proceso de desarrollo. Podrías utilizar Azure Repos para almacenar el código fuente de la aplicación y realizar un seguimiento de los cambios en el código a lo largo del tiempo.

Azure Boards para rastrear tareas y errores y asignarlos a los miembros del equipo. Puede utilizar Azure Pipelines para configurar un proceso de integración y entrega continuas (CI/CD) para compilar y desplegar automáticamente la aplicación cada vez que se introduzcan cambios en el código en el repositorio.

Azure DevOps es un conjunto de herramientas, servicios y funciones de desarrollo que permiten a los equipos planificar, desarrollar, entregar y mantener software de forma más eficiente. Incluye una serie de servicios, como Azure Boards, Azure Repos y Azure Pipelines ayudandonos en:

  • Colaboración: Azure DevOps proporciona herramientas para el control de versiones, la colaboración y la revisión de código, que pueden ayudar a los desarrolladores frontend a trabajar juntos de manera más eficaz.
  • CI/CD: Azure DevOps incluye Azure Pipelines, una plataforma de integración y entrega continua que se puede utilizar para construir, probar y desplegar código frontend. Esto puede ayudar a automatizar el proceso de despliegue y garantizar que el código se despliegue de forma coherente y fiable.
  • Gestión de proyectos: Azure DevOps incluye Azure Boards, una herramienta de gestión de proyectos que puede rastrear y priorizar el trabajo, asignar tareas y realizar un seguimiento del progreso.

El uso de Azure DevOps nos ayuda a mejorar sus procesos de colaboración, gestión de proyectos y despliegue de forma muy facil.

Azure Storage Services

Estamos construyendo una aplicación web que permite a los usuarios subir y compartir fotos. Se podría utilizar Azure Blob storage para almacenar las imágenes subidas por los usuarios. El código frontend podría utilizar la biblioteca de cliente Azure Storage JavaScript para enviar las fotos al almacenamiento Azure Blob y recuperarlas cuando sea necesario mostrarlas en la aplicación.

También podrías utilizar Azure Functions para redimensionar y optimizar automáticamente las fotos subidas, activando una función cada vez que se añade una nueva imagen al almacenamiento Azure Blob, mejorando el rendimiento de la aplicación y reduciendo la carga del servidor.

Los servicios de almacenamiento de Azure son un conjunto de servicios basados en Cloud proporcionados por Microsoft Azure para almacenar y gestionar datos.

Estos servicios nos ayuda en:

  • Almacenamiento de activos estáticos: Los servicios de almacenamiento de Azure, como Blob Storage y File storage, se pueden utilizar para almacenar y recuperar activos estáticos como imágenes, vídeos y otros tipos de medios que se utilizan en una aplicación web.
  • Almacenamiento de contenido generado por el usuario: Los servicios de almacenamiento de Azure pueden almacenar y recuperar contenido generado por el usuario, como documentos o imágenes, que los usuarios de una aplicación web cargan.
  • Integración con Azure Functions: Los servicios de almacenamiento de Azure se pueden integrar fácilmente con Azure Functions, lo que le permite construir arquitecturas escalables y basadas en eventos que se pueden utilizar para impulsar su aplicación web.

En general, los servicios de almacenamiento de Azure pueden ser una herramienta valiosa para almacenar y gestionar datos en Cloud, y pueden integrarse fácilmente con otros servicios de Azure para crear arquitecturas escalables basadas en eventos.

CDN Azure

Estamos construyendo una aplicación web que muestra muchas imágenes. Podrías utilizar Azure CDN para mejorar el rendimiento de la aplicación almacenando las imágenes en Azure CDN y enlazándolas desde tu código HTML y CSS.

Cuando un usuario accede a la aplicación, las imágenes se entregan desde el servidor más cercano al usuario, reduciendo la distancia que recorren y mejorando el tiempo de carga de la página.

Azure CDN (Content Delivery Network) es un servicio basado en Cloud que permite entregar activos estáticos, como imágenes, vídeos y otros tipos de medios, de forma más rápida y eficiente a los usuarios. Para ello, almacena en caché los activos en servidores situados en ubicaciones estratégicas de todo el mundo y los entrega desde el servidor más cercano al usuario.

Esto puede ayudar a mejorar el rendimiento de una aplicación web al reducir la distancia que los activos tienen que recorrer para llegar al usuario.  Nosotrs podemos utilizar Azure CDN para mejorar el rendimiento de su aplicación web almacenando activos estáticos en Azure CDN y enlazándolos desde su código HTML, CSS y JavaScript.

También puede utilizar Azure CDN para entregar contenido dinámico, como respuestas de API o HTML generado por el servidor, junto con Azure Functions u otros servicios backend.

En general, Azure CDN puede ser una herramienta importante cuando se busca mejorar el rendimiento de sus aplicaciones web mediante la entrega de activos estáticos y contenido dinámico de forma más rápida y eficiente a los usuarios.

Azure Monitoring

Estamos creando una aplicación web con un panel de control que muestra datos en tiempo real. Usted quiere asegurarse de la aplicacion funciona bien y que los datos se actualizan sin problemas.

Puedes utilizar Azure Monitor para realizar un seguimiento del rendimiento del panel de control, incluido el rendimiento del código frontend que renderiza los datos. Del mismo modo, puede configurar alertas para que le notifiquen si el rendimiento del cuadro de mandos cae por debajo de un determinado umbral o si hay errores en el código frontend.

También puede utilizar Azure Monitor para realizar un seguimiento del uso del panel de control, incluida la información sobre los dispositivos y navegadores utilizados por los usuarios. Esto puede ayudarle a comprender mejor a sus usuarios y optimizar la experiencia de usuario.

La monitorización de Azure es un conjunto de herramientas y servicios proporcionados por Microsoft Azure que se pueden utilizar para realizar un seguimiento del rendimiento y el uso de una aplicación web. Incluye herramientas como Azure Monitor y Application Insights, que pueden ser útiles para los desarrolladores frontend de varias maneras:

  • Tracking performance: Las herramientas de monitorización de Azure pueden ayudarte a realizar un seguimiento del rendimiento de tu aplicación web, incluido el rendimiento del código frontend. Puede utilizar estas herramientas para identificar cuellos de botella y optimizar el rendimiento de su aplicación.
  • Identificación de errores: Las herramientas de monitorización de Azure pueden ayudarte a identificar errores y problemas en tu aplicación, incluidos errores de frontend como excepciones de JavaScript. Puede utilizar estas herramientas para rastrear la causa raíz de los errores y solucionarlos.
  • Analyzing usage: Las herramientas de monitorización de Azure pueden proporcionar información sobre cómo se utiliza tu aplicación, incluyendo información sobre los dispositivos y navegadores utilizados por tus usuarios. Esto puede ayudarle a comprender mejor a sus usuarios y optimizar la experiencia de usuario de su aplicación.

En general, las herramientas de monitorización de Azure nos permite realizar un seguimiento del rendimiento y el uso de sus aplicaciones web e identificar y solucionar problemas.

Conclusión

Para finalizar, aprender cloud computing es esencial para nosotros como Frontend nos permite escalar y mejorar sus aplicaciones, integrar servicios y herramientas adicionales, garantizar una disponibilidad alta, trabajar con una tecnología altamente adoptada.

Podemos proporcionar varias herramientas para el control de versiones, revisión de código y gestión de proyectos que pueden ayudar a los desarrolladores de frontend a trabajar más eficazmente en equipo.

Seremos capaces de automatizar el proceso de despliegue, garantizar que el código se despliega de forma coherente y fiable, y mejorar el rendimiento de una aplicación web mediante la entrega de activos estáticos y contenido dinámico de forma más rápida y eficiente a los usuarios utilizando por ejemplo: Azure CDN y Azure storage.

Construir arquitecturas escalables y basadas en eventos que pueden manejar picos de tráfico y escalar hacia arriba o hacia abajo según sea necesario.

Por tanto, saber Cloud nos hace más relevantes en el mercado de TI y es cada vez más utilizado por las empresas, esto significa que hay muchas oportunidades de trabajo y crecimiento profesional.

Plataforma de cursos gratis sobre programación

Artículos Relacionados

Transiciones en el Router Angular 17
· 3 min de lectura
¿Por qué evitar usar 'any' en TypeScript?
· 5 min de lectura
Module Federation Dinámico con Angular
· 7 min de lectura