DEV Community: Vanessa Aristizabal

Mejora tu productividad de código con GitHub Copilot

Vanessa Aristizabal — Wed, 14 Aug 2024 22:12:32 +0000

Estamos en una era donde la inteligencia artificial es un tema en tendencia del que se habla constantemente en todos los ámbitos. En el mundo acelerado del desarrollo, ser eficiente lo es todo, y hacer uso de la inteligencia artificial en nuestro día a día de desarrollo, puede ayudarnos para mejorar nuestra productividad. Es así como asistentes de código nos pueden dar la mano, convirtiéndose en una herramienta invaluable para los desarrolladores.

¿Qué es GitHub Copilot?

GitHub Copilot es una herramienta de desarrollo de inteligencia artificial, como lo menciona en su documentación oficial. Utiliza el modelo de lenguaje GPT de OpenAI para sugerir líneas de código completas, funciones e incluso comentarios a medida que escribes. Aprende de nuestro estilo de codificación y del contexto del proyecto para proporcionar sugerencias cada vez más relevantes y precisas.

Características

Sugerencias de Código: analiza el código que has escrito y el contexto actual para ofrecerte sugerencias relevantes y precisas.
Soporte a múltiples lenguajes: funciona con una amplia variedad de lenguajes de programación y frameworks, permitiendo además generar el resultado del prompt en varios idiomas, de acuerdo a lo que se solicite.
Completar código: puede completar automáticamente líneas de código, funciones e incluso bloques enteros de código, ahorrándote tiempo y esfuerzo.
Generación de código a partir de comentarios: puede generar código a partir de comentarios en lenguaje natural, permitiendo describir la lógica que estás creando y dejar que Copilot escriba por ti.
Refactorización de código: puede sugerir mejoras para tu código existente, ayudándote a hacerlo más limpio, eficiente y legible.
Traducción de código entre lenguajes: puede ayudarte a traducir código de un lenguaje de programación a otro, facilitando la migración de proyectos o la colaboración de equipos con diferentes tecnologías.
Soporte para múltiples editores: está disponible como una extensión para varios editores de código populares, incluyendo Visual Studio Code, Visual Studio, Neovim y JetBrains IDEs.
Aprendizaje continuo: aprende de tus patrones de codificación y se adapta a tu estilo, proporcionando sugerencias cada vez más personalizadas a medida que lo utilizas.

Ventajas de usar Github Copilot

Aumento de la velocidad en codigo: ayuda a escribir código más rápido al completar automáticamente fragmentos y sugerir soluciones a problemas comunes.
Reducción de errores: puede ayudarte a solucionar errores, y sugerir correcciones, lo que te ayuda a evitar algún dolor de cabeza cuando estés ejecutando tu código.
Aprendizaje Continuo: aprende de tu estilo de codificación y se adapta a tus preferencias, proporcionando sugerencias cada vez más personalizadas.
Fomento de la creatividad: puede sugerir soluciones alternativas y enfoques creativos, lo que te ayuda a pensar fuera de la caja y a encontrar nuevas formas de resolver problemas.

Claves para Impulsar la Productividad

Usa las sugerencias inteligentes.

GitHub Copilot no es solo un autocompletado de código, es un compañero de programación que aprende de tu forma de hacer código. Ayuda a tu compañero de código dándole contexto de lo que deseas realizar, confía en sus sugerencias y él te ayudara completando líneas de código, funciones e incluso agrega comentarios en el código para ayudarte a documentar. Con este compañero de código, tu velocidad de codificación aumenta.

Comunícate con claridad.

GitHub Copilot está creado para interpretar tus intenciones, entre más precisión con nuestro prompt, mejor será su sugerencia. Aplica las buenas prácticas de nombramiento de variables descriptivas, nombres de funciones, y estructura tus proyectos de manera organizada. Esta comunicación permitirá a Copilot ofrecerte soluciones más relevantes y personalizadas.

Aprende y adapta.

GitHub Copilot está en constante aprendizaje, por lo que es importante mantenerlo actualizado. Explora sus capacidades más allá de la simple generación de código, como la refactorización inteligente y la traducción entre lenguajes.

Aprovecha el generar código a partir de los comentarios.

GitHub Copilot puede generar código a partir de los comentarios en el código. Esto permite describir lo que quieres lograr en tus propios términos y dejar que GitHub Copilot escriba el código correspondiente.

Colabora con confianza.

GitHub Copilot no busca reemplazar a los desarrolladores, sino trabajar en conjunto para potenciar nuestra creatividad y eficiencia. Has de él tu mejor compañero de código, para liberar tu mente de tareas repetitivas y concentrarte en la resolución de problemas más complejos y en la innovación.

Conclusión

GitHub Copilot está revolucionando el desarrollo, brindando a los programadores una ayuda invaluable para escribir código de manera más rápida, precisa y creativa. Al adoptar estas estrategias y explorar todo su potencial, estarás en el camino correcto para aumentar tu productividad y llevar tus proyectos al siguiente nivel.

Recursos

Copilot

https://learn.microsoft.com/es-es/training/modules/introduction-to-github-copilot/

Aprendizaje de IA con GitHub Copilot

Arquitectura de Componentes

Vanessa Aristizabal — Fri, 01 Mar 2024 05:00:56 +0000

La arquitectura de componentes es un enfoque para diseñar y construir sistemas de software que se centra en la creación de componentes reutilizables e independientes.

Estos componentes representan unidades lógicas y funcionales del sistema, cada uno con su propia responsabilidad y funcionalidad específica.

Cada componente encapsula una funcionalidad específica y puede ser diseñado, implementado, probado y mantenido de forma independiente.

El objetivo principal de la arquitectura basada en componentes es garantizar la reutilización de los componentes. Un componente encapsula la funcionalidad y el comportamiento de un elemento de software en una unidad binaria reutilizable y autoimplementable.

En la arquitectura de componentes, los sistemas se construyen a partir de un conjunto de componentes interconectados que se comunican entre sí a través de interfaces bien definidas. Esto permite una mayor modularidad, flexibilidad y reutilización de código, ya que los componentes pueden ser utilizados en diferentes contextos y combinados para formar sistemas más grandes y complejos.

Entre las características podemos encontrar que la arquitectura de componentes puede ser extensible, reemplazable, independiente, encapsulada, reutilizable, no específica del contexto

Aplicabilidad

La arquitectura de componentes es aplicable en una amplia variedad de contextos de desarrollo de software debido a sus ventajas en términos de modularidad, reutilización y mantenibilidad.

Algunas áreas donde se aplica la arquitectura de componentes, son:

Desarrollo Web y Aplicaciones de Cliente-Servidor: permite la construcción de interfaces de usuario modulares y reutilizables que pueden ser integradas fácilmente.
Desarrollo de Aplicaciones Móviles: facilita la construcción de interfaces de usuario consistentes y escalables que pueden ser utilizadas en diferentes dispositivos y plataformas.
Desarrollo de Aplicaciones Empresariales: permite la construcción de sistemas modulares y escalables que pueden ser adaptados a las necesidades específicas de la empresa y reutilizados en diferentes proyectos.
Desarrollo de Sistemas Integrados: facilita la integración de diferentes componentes de hardware y software en un sistema cohesivo y funcional.
Desarrollo de Sistemas Distribuidos: permite la construcción de sistemas modulares y escalables que pueden ser distribuidos en diferentes nodos de la red y comunicarse entre sí a través de interfaces bien definidas.
Desarrollo de Aplicaciones Basadas en la Nube: permite la construcción de sistemas escalables y elásticos que pueden adaptarse dinámicamente a las demandas cambiantes del usuario.

Ventajas

Desarrollo más rápido. La arquitectura de componentes permite un desarrollo más rápido al ofrecer la posibilidad de reutilizar componentes ya existentes en lugar de construir todo desde cero. Los equipos pueden centrarse en el desarrollo de componentes específicos en paralelo, lo que acelera el tiempo de entrega del proyecto.
Mantenimiento más fácil. Los cambios y actualizaciones pueden ser realizados en componentes individuales sin afectar al resto del sistema. Esto reduce el riesgo de errores y simplifica las tareas de corrección y mejora.
Equipos independientes. Cada equipo puede tener su propio conjunto de responsabilidades y trabajar de manera autónoma, lo que mejora la eficiencia y la agilidad del desarrollo.
Mejor reutilización. Los componentes desarrollados para un proyecto pueden ser fácilmente utilizados en otros proyectos, lo que ahorra tiempo y esfuerzo en el desarrollo futuro.
UX mejorada. Al utilizar componentes de interfaz de usuario consistentes en todo el sistema, la arquitectura de componentes garantiza una experiencia de usuario coherente y familiar. Esto mejora la usabilidad del sistema y la satisfacción del usuario.
Escalabilidad mejorada. Permite que los componentes individuales sean escalados y distribuidos independientemente según sea necesario. Esto garantiza que el sistema pueda manejar cargas de trabajo crecientes sin sacrificar el rendimiento.
Permite la complejidad. Permite manejar la complejidad del sistema al descomponerlo en componentes más pequeños y manejables. Cada componente se puede desarrollar, probar y mantener de forma independiente, lo que facilita la gestión de sistemas complejos.
Aumenta la velocidad. Al utilizar componentes predefinidos y reutilizables, los desarrolladores pueden construir nuevas características o aplicaciones más rápidamente. Esto conduce a una mayor velocidad de desarrollo y una entrega más rápida de productos al mercado.
Habilidades especializadas. La arquitectura de componentes permite a los equipos especializarse en el desarrollo y mantenimiento de componentes específicos. Esto facilita la adquisición y aplicación de habilidades especializadas en diferentes áreas del sistema, lo que puede mejorar la calidad y la eficiencia del desarrollo.

Desventajas

Rotura de componentes. Para organizar la arquitectura basada en componentes, se deben probar todos los componentes de forma independiente y colectiva. Que deriva en un proceso de tiempo, esfuerzo y costo. Si un componente es modificado de manera incorrecta o no se tienen en cuenta sus efectos en otros componentes, puede provocar fallos en el sistema o comportamientos inesperados.
Personalización limitada. La reutilización de los componentes puede limitar la personalización, debido a que cada componente se usa en diferentes aplicaciones. Limitando la flexibilidad y la adaptabilidad del sistema a cambios en los requisitos o tecnologías.
Alta mantenibilidad. La actualización y el mantenimiento de las dependencias puede resultar complicado. Es posible que se necesiten pruebas exhaustivas y actualizaciones para garantizar la estabilidad del sistema.
Degradación de la legibilidad. A medida que aumenta el número de componentes en un sistema basado en arquitectura de componentes, puede resultar difícil para los desarrolladores comprender cómo interactúan entre sí y cómo contribuyen al funcionamiento general del sistema. Esto puede llevar a una degradación de la legibilidad del código y hacer que sea más difícil para los equipos mantener y mejorar el sistema con el tiempo.

¿Como puede ser considerada evolutiva?

La arquitectura de componentes puede considerarse como evolutiva en el sentido de que facilita la evolución y el crecimiento del sistema de software a lo largo del tiempo. Al facilitar la modularidad, la reutilización, la flexibilidad y la escalabilidad, la arquitectura de componentes permite que el sistema se adapte y se expanda para satisfacer las necesidades cambiantes del negocio y del usuario.

La arquitectura de componentes es aplicable en una amplia gama de contextos de desarrollo de software, facilitando la adaptación y el crecimiento continuo del sistema a lo largo del tiempo.

A medida que cambian los requisitos del negocio, las tecnologías y las prácticas de desarrollo de software, la arquitectura de componentes puede evolucionar para ser más modular y promover una mayor reutilización de componentes en diferentes partes del sistema o en diferentes proyectos. Esto puede lograrse mediante la identificación y diseño de componentes más granulares y autónomos que puedan ser fácilmente combinados y reutilizados en diferentes contextos, con la inclusión de estándares y patrones de diseño arquitectónico para garantizar la coherencia y la calidad del diseño.

Conclusión

La arquitectura de componentes es un enfoque poderoso y flexible para el diseño y desarrollo de software, que permite la construcción de sistemas robustos, modulares y reutilizables mediante la combinación y reutilización de componentes independientes y autónomos.

Permite dividir el sistema en componentes independientes y cohesivos, lo que facilita la comprensión, el desarrollo y el mantenimiento del software.

Fomenta la reutilización de componentes en diferentes partes de la aplicación o en diferentes proyectos, lo que acelera el desarrollo y mejora la consistencia.

Facilita el mantenimiento del software al permitir cambios y actualizaciones en componentes individuales sin afectar al resto del sistema.

Proporciona flexibilidad para adaptarse a cambios en los requisitos del negocio, las tecnologías y el entorno operativo.

Permite escalar el sistema de manera eficiente agregando nuevos componentes según sea necesario para manejar cargas de trabajo crecientes.

Referencias

Tutorials Point India Private Limited. Component-Based Architecture. https://www.tutorialspoint.com/software_architecture_design/component_based_architecture.htm. 2024

Mallik, Sneha. Component Architecture. https://www.codingninjas.com/studio/library/component-architecture. Diciembre 25, 2023.

Clements, P., Bachmann, F., Bass, L., Garlan, D., Ivers, J., Little, R., … & Stafford, J. (2010). Documenting software architectures: views and beyond. Pearson Education.

Nandaniya, Hamir. A Guide to Component-Based Architecture: Features, Benefits and more. https://marutitech.com/guide-to-component-based-architecture. November 20, 2023.

Angular vs. React, dos herramientas poderosas en la Web

Vanessa Aristizabal — Thu, 15 Jun 2023 19:27:13 +0000

Para crear aplicaciones Web tenemos a nuestra disposición innumerables frameworks y librerías; entre las herramientas de tendencia en la actualidad tenemos una librería como React y un framework como Angular, que son populares entre los desarrolladores y siempre hay muchos temas para hablar de ellos. Ambas, comparten similitudes, como su arquitectura basada en componentes: son código abierto, y tienen un buen rendimiento.

Existen muchos interrogantes entre Angular y React, por ejemplo: ¿En qué se diferencian?, ¿Qué retos tienen? ¿Cómo puedo abordar cada uno de los conceptos y compararlos entre herramientas?, ¿Qué tipo de aplicaciones puedo realizar con respecto a la otra? En este artículo pretendo ayudar a responder algunas de esas preguntas.

Arquitectura, enfoque y filosofia

Angular y React permiten una arquitectura basada en componentes. La principal diferencia entre ambos radica en que el primero es un framework de diseño de aplicaciones completo, además de ser una plataforma de desarrollo, y el segundo es una librería para crear interfaces de usuario. En otras palabras, Angular por defecto es una herramienta potente y completa para la creación de aplicaciones, y React nos permite desempeñarnos muy bien la capa de presentación.

Angular, tiene más funcionalidades, con una curva de aprendizaje mayor respecto a React. Al ser robusto, generamos aplicaciones escalables y mantenibles a gran escala.

React permite una flexibilidad en el desarrollo, y libertad a la hora de escoger estructura de carpetas, creación de componentes, e integración con otras librerías, lo que la hace una herramienta fácil de usar y elegir a la hora de generar aplicaciones en JavaScript o TypeScript.

En Angular el flujo de datos es two-way data binding o bi-direccional, (aunque tambien se puede one-way) los cambios en el modelo se reflejan en la interfaz y viceversa de manera automática. El desarrollo puede ser más práctico y rápido, pero en aplicaciones más grandes a la larga puede ocasionar considerar medidas para el rendimiento y manejo de la complejidad.

En React el flujo de datos es one-way-data-binding o una-dirección, de padre a hijo. Aunque de necesitar el flujo de datos two-way binding, React provee de un sugar syntactic o “azúcar sintáctico” que era usado hasta la version 15 y, apartir de la 16 algunos hooks ayudan en este flujo, para permitir integrar ese patrón sin problema.

En cuanto a la actualización y mantenibilidad de ambos, Angular contiene una CLI (interfaz de línea de comandos) que permite por medio de un comando realizar la actualización Angular. Dependiendo de la versión a la que se desee migrar se puede hacer de manera gradual, para evitar algún tipo de inconveniente en la última versión. React podría tomar más tiempo, debido a que al crear una aplicación comúnmente se hace uso de varias librerías, las cuales antes de actualizar debe revisarse su compatibilidad en relación con la versión que deseamos usar.

Angular utiliza TypeScript, como su lenguaje, el cual implementa clases, decoradores, interfaces estáticas, observables, entre otros, permitiendo que el código sea más robusto, identificando errores comunes y permitiendo su eliminación, pero requiere cierto conocimiento para poder identificar correctamente esos elementos para su utilización. En cuanto a React emplea por defecto JavaScript, (aunque también permite utilizar TypeScript), es de más accesibilidad para los desarrolladores web, en su aprendizaje.

En el ciclo de vida, Angular posee unos métodos para su manejo y React los Hooks que son funciones con las que podemos controlar el estado de los componentes.

React, a partir de la versión 16 adoptó los hooks, permitiendo así la necesidad de no utilizar Clases en los componentes para el control del estado y usar funciones. Los hooks permiten que el código sea más fácil de leer, y aunque el nombre de algunos de ellos, como useEffect, no explique su uso o el proceso de ciclo de vida que interviene, es necesario el conocimiento de manera individual de los hooks, para comprender correctamente su implementación.

Angular utiliza clases en sus componentes (pero se espera poder usar funciones en versiones posteriores) y su ciclo de vida usa varios métodos, que puede resultar en un proceso más estructurado, que va a cambiar en versiones posteriores, minimizando la cantidad de métodos y creando más legibilidad en el código. En este momento, a opinión de algunos desarrolladores, es necesario el uso de varios métodos para el control de cada fase del ciclo de vida en Angular, incluso para trabajar en el rendimiento de un proceso en específico.

En React, algunos hooks realizan varias acciones en el ciclo de vida, por lo que puede ser criticado por algunos desarrolladores que no cumple el principio de separation of concerns o de “separaciones de intereses”, al estar todo en una misma función. Y así como las críticas, hay comentarios positivos en que es amigable, al haber hecho posible el empleo de solo funciones para componentes que manejen el estado. Y aunque se puedan usar funciones, React sigue permitiendo la utilización de Clases, en el escenario de requerirse funcionalidades mucho más complejas.

Como puede un desarrollador de Angular migrar a React y viceversa

Hablando desde mi experiencia como dev Angular, cuando pasé a React, inicié con la asociación de conceptos. Ambas comparten similitudes en conceptos de componentes, como por ejemplo: identificar un componente Smart y Dumb de Angular, que en React podría tener otro nombre como Statefull y Stateless, y diferencias en el template, generación de componentes, sintaxis, manejo del ciclo de vida, flujo de datos, la comunicación entre padre e hijo, que algunos de ellos en Angular requieren de más boilerplate y en React dependiendo de las prácticas puede ser desarrollado desde una forma sencilla hasta compleja.

Conocer conceptos prácticos de JavaScript y TypeScript, ayudan a que el proceso de aprendizaje no sea tan complejo. Además de patrones de diseño del software y principios. Aunque adicional, es importante conocer los conceptos básicos de cada herramienta, ya que por defecto cada una maneja bases que consideraron en su construcción y conocerlas te ayudan mucho en el desarrollo, como fue en mi caso.

En React se puede integrar diferentes librerías, por lo que a la hora de no conocer alguna de ellas, lo recomendable es hacer un POC (proof of concept) prueba de concepto, para probar la herramienta y verificar su mantenibilidad, a la hora de incluirla en el proyecto, para evitar luego dolores de cabeza manteniendo una librería que podría morir con el tiempo y tenga que ser soportada por el equipo de desarrollo, además de la aplicación que se está construyendo.

Retos y desafíos en el aprendizaje

Pueden haber muchos, desde aprender los conceptos, y aplicarlos de acuerdo con las necesidades. Tal vez, pasar de un framework a una librería y viceversa, pueda tomarte algo de tiempo al inicio. Mi recomendación es no forzar el aprendizaje, conocer tus límites y siempre mantener la motivación en el proceso. Porque podría convertirse en un desafío más grande lidiar con la frustración del cambio que aceptarla y eso permitirte moverte como pez en el agua con las dos herramientas.

Recomendaciones para aprender alguna de las dos herramientas

En el caso de no conocer alguno de los lenguajes que usan por defecto, lo principal es aprenderlo, leer la documentación oficial, artículos, observar videos, y sobre todo, explorarlo, ya que la práctica constante es la que nos ayuda a convertirnos en expertos en alguna práctica, o arte.

Aprender las bases de la herramienta es fundamental, mientras que hacer pequeños proyectos, puede ayudarte a ampliar la visión de uso, cuando tengas que enfrentarte a proyectos reales: grandes o pequeños.

No sobra recomendar aprender los patrones de diseños y principios, el solo aprendizaje de ellos no basta, es importante aplicarlos en los proyectos que estás construyendo, para que puedas identificar posibles errores que estabas siguiendo en tus prácticas, o mejorarlas si es posible.

En mi caso yo aprendo practicando, lo más difícil es encontrar para mí el proyecto práctico que deseo implementar y de identificar el proyecto, descubro cuáles conceptos necesito aprender o reforzar y esto me lleva a la investigación y más práctica individual de esos conceptos, para luego integrarlos en lo que voy construyendo. Además, me resulta muy útil leer artículos, observar videos, escribir las notas de lo que se está aprendiendo y compartir ese conocimiento, es lo que me ha ayudado a mí para reforzar una herramienta o aprender una nueva.

Conclusion

Siempre que comparemos dos herramientas nos encontraremos con varias dudas y más si nuestro interés es probar o migrar de una a la otra. Angular y React, son herramientas muy útiles para crear muy buenas aplicaciones Web, el uso que desees darle para el proyecto que necesites, dependerá de las necesidades, tanto en infraestructura como en decisiones del equipo respecto al conocimiento que ya se posee; en el caso de no tenerlo, es muy importante estimar cuanto tiempo tomaría adquirirlo para la implementación de la aplicación deseada.

Gracias por leer mi artículo, si te gusta puedes compartirlo y seguirme. Sígueme en redes, me encuentras como vanessamarely.

Google I/O (Connect) — Recap de la categoría Web

Vanessa Aristizabal — Wed, 31 May 2023 17:31:48 +0000

Son muchas las novedades que se mencionaron en el Google I/O, el 10 de mayo y en el evento de Connect I/O el 24 de mayo.

El Google I/O, es un evento donde se lanzan las novedades de los productos de Google y el Connect, es un nuevo evento, con un enfoque más técnico, orientado a los desarrolladores.

El Connect, podemos decir que es un evento para aprender sobre desarrollo de algunas tecnologías, nos permite hacer networking, nos da la posibilidad de interactuar con algún Googler, nos permite conectar con líderes de comunidades y expertos de alguna categoría de Google y sobre todo divertirnos.

El evento del Connect, separo su contenido en 4 categorías, en las que se hicieron énfasis en diferentes tecnologías.

Las categorías fueron Inteligencia Artificial, Cloud, Móvil y Web.

Como lo mencionaron en el Connect, estamos en la edad dorada de la Interfaz de usuario de la Web, nuevos cambios y nuevas herramientas se avecinan, y es super importante estar a la vanguardia con ellos y abordarlos, para que no nos agarren desprevenidos.

Google creo un playlist de las charlas del Google I/O de la Web, que puedes revisar cada una de las novedades: PlayList.

De los temas mas destacados podemos mencionar:

Video - I/O 2023 Recap

Lo nuevo en la Web: Baseline, es la nueva herramienta que nos permitira ver la compatibilidad entre navegadores de alguna API, propiedad, característica o funcionalidad.

Core Web Vitals + Interaction to Next Paint (INP), Core Web Vitals, se conoce por ser una iniciativa de Google, que nos brinda una guía de indicadores de calidad, para mejorar la experiencia de usuario en la web. El INP mide la capacidad de respuesta a lo largo de todas las interacciones de una página, y reemplazará al FID en marzo del 2024.

Video - Top CWV opportunities

INP - Interaction to Next paint

Respond to input in 200ms

WebGPU — Unlocking modern GPU access in the browser. Mejora el rendimiento y el renderizado de los gráficos.

Introducing Web GPU

WebAssembly: A new development paradigm for the web. Wasm se conoce por ser un formato binario que se compila a través de otros lenguajes para un mayor rendimiento, usado para funcionalidades donde JavaScript requiere de mucho mayor rendimiento. Muchas aplicaciones apostaron en la Web por la adopción de Wasm, pero algunas otras empezaron a implementarla.

webassembly

Photoshop journey on the web

Video - Web Assembly 2023

Otros temas importantes mencionados en el I/O:

Mejorar el debuging en Chrome Dev tools:

Video - Reduce debugging friction

Passkeys, como alternativa para los passwords

Learn Passkeys

Create a Passkey for passwordless logins

Privacy Sandbox: FedCM, abstracción al caso de uso de flujos de identidad federada:

Video - Getting started with Attribution Reporting

Lo nuevo en las animaciones Web

Video - New in Chrome extensions

Angular

Angular se encuentra en su como decimos algunos, la tercera era. En la version 16, fueron lanzadas muchas novedades de las que podemos destacar

Angular v16 is here

Signals, que nos permite definir los valores reactivos y mencionar la dependencia que hay entre ellos.

Getting started with Angular signals

Sub-RFC2

Server-side rendering y hydration. Angular le apuesta al Server side con Angular universal, y en la versión 16, mejoraron el rendimiento, evitaron que la aplicación se re-renderice, entre otros beneficios como mejorar el Core Web Vitals en algunos escenarios.

Whats next for server side rendering in angular

Vite + esbuild. Una buena noticia para los desarrolladores es que ahora podemos crear una aplicación con Vite y podemos usar el esbuild en modo vista previa, para probar el rendimiento del build de nuestras aplicaciones.

De Angular estas son solo unas pocas de la gran lista de novedades que se lanzaron en la versión 16, algunas de ellas están en modo vista previa, para que podamos probarlas y empezar la integración de ellas, adelantándonos al lanzamiento de la versión 17.

Conclusion

El Google i/o y el Connect son grandes eventos para compartirnos los avances en los productos y tecnologías. Especialmente el Connect, es un evento de que aporta mucho a los desarrolladores, permitiendo poder interactuar con los involucrados en los desarrollos de las tecnologías.

De estos nuevos lanzamientos podemos decir que serán de mucha utilidad, algunos harán cambios de paradigmas y nos aportaran demasiado en los diferentes desarrollos de nuestras aplicaciones, en especial que es el tema de este artículo en la Web.

¿Qué ventajas tengo al usar Typescript en React?

Vanessa Aristizabal — Sat, 19 Mar 2022 21:22:54 +0000

Este artículo lo cree en base a una charla que dí hace poco, llamada como el título lo menciona. Y con el pretendo hablarte un poco de la adopción de Typescript en tus aplicaciones en React, para aprovechar sus innumerables ventajas a la hora de crear aplicaciones escalables y robustas.

¿Quién/Qué es React?

Librería o biblioteca de JavaScript que nos permite crear interfaces de usuario, con el objetivo de facilitar el desarrollo de aplicaciones en una sola página (SPA -> Single page applications).

Entonces sí React es una librería de JS, te preguntarás: ¿por qué usar TS?

Y la respuesta a esa gran pregunta sería porque Typescript es:

(Es un Superset como lo conocíamos antes en su documentación oficial) JavaScript con sintaxis para tipos.
Fuertemente tipado.
El código de TS se convierte a JS y se ejecuta en cualquier lugar donde se ejecute JS. Sea en un navegador, en Node.js, Deno y en nuestras aplicaciones.
Ha ido ganando popularidad entre los desarrolladores.
TS mejora la mantenibilidad.
La consistencia de código.
Compatibilidad con los navegadores.

Ventajas

Typescript incluye muchas ventajas a nuestros proyectos creados con javascript, y, a continuación veremos algunas de ellas:

Componentes fáciles de leer y comprender

Con TS se puede definir fácilmente los Prop Types, permitiendo que el código sea mucho más fácil de leer, añadiendo legibilidad cuando se desea verificar la definición de un componente.

Mejor soporte para JSX

TypeScript + React proporciona un mejor intelliSense, autocompletado para JSX (extensión de la sintaxis de JavaScript).

Compatibilidad por defecto con TypeScript para librerías comunes

Con la popularidad de TS es posible hacer uso de otras librerías que incluyen el soporte de TS. Hace algunos años encontrar la librería en TS no era posible, e incluso los tipos de datos, pero ahora las más comunes son compatibles con la definición de tipos.

Además, la librería de React es compatible con la definición de tipos, por lo que ya no es una preocupación para nosotros, en el caso de que una librería no tenga un tipo, podemos crear la definición fácilmente.

Si buscamos alguna librerías como por ejemplo:
Redux, React Router, React Bootstrap, Material UI, Enzyme, Styled components, React Query. Todas las anteriores tienen soporte para typescript.

Es posible adoptarlo gradualmente en los proyectos

Dependiendo de la condición actual de nuestro proyecto, es posible optar por la implementación de Typescript de forma gradual.

Si vamos a iniciar el proyecto es el mejor punto para decidir implementarlo, es solo instalarlo e ir creando los tipos de datos para la correcta definición de nuestros componentes.
En el caso de que nuestro proyecto ya tenga un gran avance, nunca es tarde, y, podemos instalar typescript e ir poco a poco haciendo la definición de tipos.

Además, se pueden configurar las opciones del compilador de TypeScript para su transición gradual.

https://www.typescriptlang.org/docs/handbook/compiler-options.html

Verificación de tipos de datos estáticos e IntelliSense en general

La verificación de tipos de datos estáticos ayudan a identificar errores tempranos. Si le asignamos a una variable un tipo de dato diferente al de su definición el intellisense nos mostrará un error.

En el ejercicio vemos como declaramos una constante que tiene una definición que nos corresponde a un number, y si asignamos un number, se nos mostrará un error.

Mejor refactorización

La refactorización es mucho más fácil ya que conocemos los tipos exactos y dónde cambiarlos. Y se puede detectar que puede salir mal en la definición de tipos, evitándose que la aplicación se rompa.

Menor cantidad de errores indefinidos

Con TypeScript se disminuye el riesgo de encontrar errores Undefined en tiempo de ejecución, ya que el compilador de TS puede detectarlos en tiempo de transpilación.

Mejor legibilidad y mantenibilidad

Con las definiciones el código es fácil de leer. Se puede seguir fácilmente los principios de la POO y usar interfaces y types para estructurar nuestro código con el menos acoplamiento posible.

Desafíos a los que nos podemos enfrentar al adoptar TS

Como dicen no todos es color de rosa y adoptar otra tecnología puede llevarnos a tener en cuenta algunos aspectos que pueden afectarnos o no a la hora de la implementación.

Curva de aprendizaje

La curva podría ser una de las dificultades al iniciar con Typescript en especial si todo el equipo viene de Javascript y no conoce sobre POO. En este escenario, lo mejor es ir implementando poco a poco TS, pero si algún integrante o todo el equipo está familiarizado con algún lenguaje del paradigma de POO, la implementación no será un proceso traumático para el equipo.

Third party Library (librerías de terceros)podrían no tener definiciones de tipos

Typescript ha ganado popularidad y hay muchas librerías que tienen la definición de tipos, pero en el caso de encontrarse con alguna librería que no se tenga, TS tiene en su documentación oficial una muy buena guía para poder crear fácilmente la definición.

Tiempo de compilación

Como la construcción de código fuente, tiene que pasar por otra capa de transpilación, esto incluye un tiempo adicional que es posible que no se perciba, y teniendo en cuenta todo lo que nos brinda TS es una desventaja que se puede superar.

¿Cómo incluimos TS en nuestros proyectos de React?

Instalando create-react-app: Se instala create react app incluyendo ts

Con proyectos existentes, se instala TS

¿Por qué no adoptan en React Typescript por defecto, como algunos frameworks?

Porque React opta por una postura neutral, permitiendo a los desarrolladores la libertad de trabajar con JS o TS.

Es tu decisión, y la de tu equipo adoptarlo o no para crear tus proyectos.

Recursos

https://react-typescript-cheatsheet.netlify.app/docs/basic/setup

https://www.typescriptlang.org/docs/handbook/intro.html

Conclusión

Con este artículo no te estoy diciendo que en tus proyectos de React debas de usar Typescript y dejar de usar JavaScript, por el contrario solo te estoy dando una herramienta más para que pienses en la escalabilidad de tus proyectos. Como mencioné anteriormente, hay varias ventajas, a las que podemos sacarle partido al adoptar este lenguaje en nuestros proyectos.

Como por ejemplo, en lugar de usar librerías para los propTypes (que ahora necesitamos la librería prop-types) como se suele usar en javascript; con typescript te vas a hacer un pequeño ahorro al usar una herramienta adicional (otra librería), para hacer el tipado de datos, y si te gusta trabajar en programación funcional aun lo puedes seguir haciendo con Typescript, no es necesario que uses clases (esto sería opcional).

Te invito a seguirme en twitter: @vanessamarely

Arquitectura de Componentes en Angular

Vanessa Aristizabal — Tue, 08 Jun 2021 00:58:57 +0000

Nuestras aplicaciones estan llenas de componentes y pensar en cómo queremos estructurarlos, nos ayuda en su arquitectura.

La mayoría de aplicaciones que construimos no son páginas estáticas, hay un estado y hay diferentes tipos de componentes donde el estado podría vivir.‌

Tipos de Componentes

Presentational componentes o Componentes de presentación

Muy conocidos como Dumb o componentes tontos. Usan Inputs/Outputs para su comunicación.

Enviamos un valor al container, renderizamos los valores del container; emite un evento cuando está listo y algún otro componente administra el estado y hace las actualizaciones respectivas del estado.

Con estos componentes nos probamos a nosotros mismos en cuanto a la separación de la complejidad en la lógica que podemos llegar hacer, en estos componentes no hay necesidad de crear servicios mockeados, o hacer alguna petición solo pasamos los inputs, se verifica alguna información de ser necesaria y se emite un output.

Container components o Componentes contenedores

Estos componentes son los Smart o inteligentes. Se encargan de conectar los "Dumb" al estado de la aplicación. Maneja los eventos emitidos, el de presentación emite un evento, y este responde a ese evento y se hace los llamados al servidor y actualiza lo necesario para ver los cambios necesarios en la UI o interfaz de usuario. El contenedor es el que controla otros componentes, es como un administrador, se encarga interactuar con los servicios o el state Management.

Layout components o componentes de diseño

Para estos no se maneja data, por lo que no es necesario una actualización cuando hay un cambio. Lo podemos ver como una página que tiene una estructura definida, o una plantilla que nos servirá para luego organizar otros componentes.

P‌age components o componentes de página

Los componentes de página funcionan como componentes contenedores, estos son los componentes que serán usados en el enrutamiento de nuestra aplicación.

Flujo de Datos

Cuando estamos creando nuestra aplicación podemos usar los tipos de componentes de la siguiente forma:‌

Entre el contenedor y el componente de presentación, una forma de compartir la data es mediante Input y Output.

Un contenedor puede ser un componente padre, pero también un componente presentacional podría serlo, sin modificar el estado y solo compartiendo la información con sus hijos que viene desde un padre contenedor.

El Input nos permite pasar una data como entrada a nuestro componente, comúnmente la usamos para pasar data entre padres a hijos, si necesitáramos pasar desde el hijo al padre, usamos el Output.

Otros Flujos de Datos

Adicional al flujo de datos que es comúnmente usado, se tienen otros métodos que nos ayudan con el paso de la data entre padres e hijos. Del curso de Arquitectura de Dan Wahlin , tome las siguientes notas que te pueden ser muy útiles en la estructuración de tus componentes:

La data viene de una petición como por el HttpClient, una Store (NgRx), o una ruta y todo va al contenedor, esas diferentes fuentes van al contenedor y este hace lo que requiere el estado y lo pasa al componente presentacional, para renderizar lo que se necesita.

Son dos componentes importantes: uno muestra el contenido y el otro maneja la data.

Estrategias de Change Detection

OnPush causa que el "Change Detection" se ejecute cuando:‌

Una propiedad de Input cambia de referencia.
Una propiedad de Output/EventEmitter o DOM dispara un evento.
Async Pipes reciben un evento.
Change Detection es manualmente invocado por el ChangeDetectorRef.

Beneficios del OnPush

Optimización (los componentes no están verificados hasta que se cumpla una condición del OnPush)
Prevenir que los componentes de presentación actualicen el estado que deberían obtener del contenedor/padre

Otra forma de comunicar componentes

Con el Input y Output tenemos una buena comunicación entre los componentes, pero cuando incrementa la complejidad de nuestra aplicación y se necesita una mayor jerarquía, se puede volver algo complejo usar esta forma conocida y es necesario usar otras técnicas de comunicación.

Event Bus

Es un patrón mediador, el servicio actúa como un intermediario entre los componentes. Los componentes no saben de donde viene la data y es débilmente acoplado. Se basa en Subject/Observable.

Observable service

Proviene del patrón Observer. El servicio expone un observable directamente a los componentes. Los componentes saben de donde proviene la data, no es débilmente acoplado como el Event bus. Se basa en Subjects/Observable.

RxJS

Es una librería de programación reactiva, basada en eventos a través de secuencias de observables.

RxJS Subjects

Subject. Los subject proporcionan una manera de enviar uno a más datos a los oyentes. Estos oyentes están suscritos y obtienen la información. En el caso de haber nuevos suscriptores estos no obtendrán la data que se pasó antes a los oyentes, sólo los nuevos obtienen la data que se está transmitiendo desde el momento de la suscripción.

BehaviorSubject. Es muy similar a los subject, con la diferencia que los nuevos suscriptores pueden obtener la última información que se haya pasado previamente a su suscripción.

ReplaySubject. Este es una especia de BehaviorSubject, este puede repetir el último valor que haya sido pasado al momento de la suscripción e incluso se puede configurar si se desea pasar los valores anteriores.

AsyncSubject. Este es diferente a los demás, con él se pasa el valor más actualizado.

¿Por qué necesitamos un estado?

Se tiene un servidor que tiene un valor, se puede tener las rutas que trae data que se comparte entre ellas, y se muestra esa data en la página. Necesitamos la data proveniente de algún lugar para mostrarla en otro; y el estado es quién se encarga de ayudarnos en la comunicación de esas dos necesidades, se puede decir que es la interfaz entre los datos y los componentes. Además nos ayuda a tener los datos consistentes entre componentes y a mantener la comunicación entre ellos.‌

Tipos de Estados

Estado del servidor

El estado del servidor es la data en el Backend. Hacemos peticiones de la data al servidor, mediante puede ser un HttpClient o una url y hacemos la petición de la data.

Estado de la aplicación

El estado de la aplicación es lo que nos ayuda a persistir la data a través de toda la aplicación.

Estado de la página

El estado de la página es lo que solo es necesario en la página.‌

En este punto llega un gran interrogante, ¿cómo saber cuál debemos usar o cómo debemos poner la data?‌

Y debemos hacer una análisis del diseño de nuestra aplicación en este punto nos preguntamos, ¿debo compartir la data en toda la aplicación?, ¿la necesito en ciertas páginas?, ¿cuánto debe durar la persistencia de la data? ¿la comparto en una sesión o debe ser en múltiples?‌

Tenemos varias opciones para responder a nuestras preguntas anteriores:‌

Servicios. usando el patrón singleton, podemos crear un subject, exponemos un observable, donde se pueden suscribir a él, puedo obtener lo que necesito y si necesito hacer un update, llamo a un set para que se encargue de la actualización. Todos los que se hayan suscrito obtendrán el estado correspondiente, este método ayuda a mantener una consistencia.
Librerías para manejar el estado (NGRX, NGXS).
Router o Enrutamiento. Almacena la persistencia de la data, permitiendo que exista en una sesión y también permite compartir páginas o rutas. En el enrutamiento podemos compartir parámetros que usaremos a través de la aplicación.
Estado del componente. Smart component se encarga de manejar todo el estado.

State Management

Dependiendo del desarrollo de nuestra aplicación, podemos optar por esta opción de necesitar un State Management. Los objetivos de este son:‌

Una sola fuente de verdad.
Predecible.
Inmutable.
Seguimiento a los cambios‌.

Para manejar el estado existen varios opciones:

Servicios

Es un buen punto de entrada para manejar el estado de la aplicación. Desde la documentación oficial un servicio es un singleton, con una única responsabilidad, bien definida. Puede ayudarnos para la comunicación del flujo de datos de una forma sencilla.

Los podemos incluir mediante la inyección de dependencias en donde los necesitemos y podemos proveer notificaciones usando los Subjects, es fácil de mantener y realizar una simple petición al servidor.

Pero cuando la aplicación empieza a crecer y ser un poco más robusta, podemos continuar usando los servicios, pero es necesario centralizar la información en un Store. Los servicios se comunican con la Store y de esta forma se garantiza la comunicación con el estado.

NgRx Store

Provee un manejo del estado reactivo para las aplicaciones de Angular, inspirado por Redux. Unifica los eventos en la aplicación y dirige el estado usando RxJS.

Redux + RxJS = NgRx

Provee una sola fuente de verdad para el estado.‌
Provee datos inmutables, los datos no van a mutar o cambiar en múltiples lugares a través de la aplicación.‌
Provee una consistencia a través del equipo de desarrolladores y podemos tener una buena experiencia en el debugging de la app.‌

En NgRX tendremos una Store, que será responsable por el almacenamiento del estado de la aplicación, puede ser cualquier tipo de estado (Estado de la aplicación, estado de la sesión, o estado de la entidad).‌

Para interactuar con el Store y el estado se tienen Acciones, las acciones se pasan a los Reducers, que son básicamente traductores que toman las acciones, actúan sobre ellos y luego interactúan con el store del estado. Para obtener esa data en nuestro componente, tenemos los Selectores (Selectors$).‌

Para obtener la data del servidor, el componente llama a una acción, que dispara un Effect, que luego se integra al servidor y obtiene la data de él. Cuando el Effect, obtiene la data de regreso, envía la acción correspondiente (Action), va al Reducer, el cual actualiza la data del Store, y luego el selector obtiene esa data de regreso al Componente.

Usar NgRx es muy útil en nuestras aplicaciones, añade un poco más de complejidad y más código, pero sí se define bien el patrón es bueno para el equipo y para el proyecto a futuro.

Tiene una pequeña curva de aprendizaje.

ngrx-data

Es una extension de la funcionalidad de NgRX. Ofrece una buena introducción al uso de ngrx/redux sin el boilerplate.

Podemos decir que simplifica el NgRx.

Observable Store

Provee una forma de administrar el estado de nuestra aplicación, mientras se logran muchos de los objetivos que ofrecen otros state management complejos.

Entre los objetivos de este Observable Store, está el ser una sola fuente de verdad, el estado es solo de lectura e inmutable, provee notificaciones del cambio de estado a los suscriptores; también tiene la posibilidad de hacer un seguimiento al historial del cambio de estado y por último una mínima cantidad de código es requerida.

Trabaja con cualquier librería.

Otras Herramientas para manejar el estado:

Akita.
Ngxs.
Mobx

Entre otras.

Referencia

Angular Architecture and Best Practices Dan Wahlin

Conclusiones

Pensar en la mejor forma de organizar nuestros componentes es una tarea muy importante, hay situaciones o requerimientos que nos llevan a realizar una análisis mas exhaustivo sobre la necesidad de manejar el estado o flujo de datos de nuestras aplicaciones.

En Angular tenemos un gran abanico de opciones y es bueno analizar las ventajas de cada uno de ellos antes de proceder con su implementación. Espero en este articulo en el cual se menciona de forma breve algunas formas que tenemos a nuestra disposición para el flujo de datos y manejo de estados encuentres una ayuda para implementarlos en tus proyectos.

Te invito a seguirme en twitter: @vanessamarely

Despliegue de tu aplicación de React usando Github Actions

Vanessa Aristizabal — Sun, 30 May 2021 04:57:37 +0000

Cuando creamos nuestras aplicaciones, usando una librería o framework, llega el momento donde deseamos verla desplegada en algún entorno o algún hosting gratuito o de pago.

Para ello lo que normalmente hacemos es generar el build de la aplicación ejecutando el siguiente comando:

Luego subimos los archivos al hosting o entorno usando FTP, hablando de lo comúnmente conocido para desarrolladores que hace tiempo publican sus cambios o la aplicación a producción. Aunque ahora existen nuevas formas automatizadas para facilitarnos la vida.

Hablando del proceso anterior (por FTP), este es muy manual, porque cada vez que deseamos subir nuestros nuevos cambios, debemos generar el build y actualizar los archivos.

Existen herramientas como Github Actions que nos ahorran ese trabajo, permitiéndonos desplegar nuestra aplicación a un hosting gratuito como Github Pages, de forma automatizada, cada vez que ejecutamos algún evento desde nuestra terminal de comandos como el push de nuestro repositorio.

Puedes ampliar la información sobre el despliegue con Github Actions en mi otro artículo, donde te explico ademas un poco sobre CI/CD.

¿Cómo despliego mi aplicación?

Una vez tenemos nuestra aplicación creada y queremos realizar el proceso de despliegue a algún entorno, debemos hacer una configuración manual para luego, con Github Actions, todo se realice de forma automatizada.

Para facilitarnos la configuración usaremos el paquete de gh-package, y para esto ejecutaremos:

Configuramos nuestro package.json

Nota: Debemos asegurarnos que colocamos en el ‘homepage’ el nombre del repositorio correctamente. En este caso estoy usando este: deploy-react-example.

Hacemos deploy de nuestra aplicación:

Subimos los cambios a nuestro repositorio:

En la pestaña settings del repositorio en Github puedes en pages revisar cuál será la url que Github creó de tu repositorio:

Y ejecutando el comando para despliegue, ver tus cambios en Github pages, aunque este aún es un proceso manual.‌

En la pestaña de GitHub Actions en nuestro repositorio de GitHub, podemos ver varias plantillas para hacer el despliegue. Es bueno usar alguna de las opciones sugeridas, dependiendo de que herramienta vayas a emplear para hacer el despliegue.

Para este caso vamos a crear nuestra plantilla manual o nuestro flujo de trabajo.

Primero vamos a crear en nuestro proyecto, en la raíz una carpeta llamada: “.github”.
Dentro de la carpeta “.github” crearemos otra carpeta llamada: “workflows”
Dentro de la carpeta crearemos un archivo llamada deploy.yml

En el archivo deploy.yml, es donde realizaremos la configuración.

En este archivo en el on: en branches debemos colocar el nombre de nuestra rama por defecto: main

Guardamos nuestro archivo, hacemos un commit y un push

Si revisamos en la pestaña “Actions”, empezará nuestro despliegue.

Cuando el despliegue ha sido exitoso, vamos a ver que todos los checks de los jobs funcionan correctamente.

Una vez terminen los jobs podemos revisar nuestra página, haciendo uso del link que Github Pages género para nosotros, por ejemplo: https://vanessamarely.github.io/deploy-react-example/.

Cada vez que realicemos un cambio en nuestro repositorio y hagamos push de ellos, Github Actions entrará en acción, ejecutando los jobs, mostrando los checks de los pasos exitosos.

En el caso de que alguno falle, podremos ir a revisar en el log y solucionar el problema en nuestro repositorio y volver a subir los cambios (push), para que puedan ejecutarse los jobs nuevamente.

Podemos verificar que los cambios ya fueron realizados en el entorno de Github Pages, revisando su estado, para ello en la pagina de nuestro repositorio, damos clic en Environments.

Se nos abre la página de deployments y podemos verificar el estado del logo de cada despliegue.

Haciendo clic en alguno de los enlaces de ‘View Deployment’, podemos verificar en ese punto cúal fue el resultado del despliegue.

El repositorio usado para este ejemplo solo contiene la instalación del create-react-app y un cambio de mensaje en el componente App.

https://github.com/vanessamarely/deploy-react-example

Conclusión

Github Actions nos facilitó el despliegue en nuestras aplicaciones de una forma amena y sencilla. Con Github pages no solo podemos tener un hosting gratuito de nuestro proyectos, que sumado a la integración de Github Action podemos realizar el proceso de CI/CD automatizado.

Espero este artículo sea de ayuda, para que con él puedan hacer el despliegue de tu aplicación de React fácilmente.

Te invito a seguirme en twitter con el handle: @vanessamarely

Despliegue de tus aplicaciones usando Github Actions

Vanessa Aristizabal — Thu, 27 May 2021 21:31:57 +0000

El despliegue de una aplicación web, es lanzar (hacer “push”) la aplicación, los cambios, o actualizaciones de un entorno a otro, para que esté disponible para el público o para un equipo de trabajo específico para su uso o pruebas.

Al configurarse un sitio web, este tendrá el sitio en vivo, entorno en vivo o entorno de producción.

¿Cómo era el despliegue antes?

La forma tradicional de un sitio web era crear las diferentes páginas html en el entorno de desarrollo, con la respectiva funcionalidad, que se ejecutaba en el cliente. En el entorno de producción (servidor web, el despliegue se realizaba usando un cliente ftp, para subir los ficheros al servidor).

Entornos de trabajo utilizados

Se pueden tener varios entornos como el local, o el de desarrollo, para que en este último se publiquen ahí los cambios, para realizar las respectivas pruebas antes de moverse a producción.

Los entornos adicionales pueden ser un entorno de preparación (también conocido como sitio de preparación o staging). La cantidad de entornos necesarios depende del equipo de trabajo y de la complejidad del proyecto en el que se esté trabajando.

Pasos en el flujo de despliegue

Se pueden destacar 5 pasos en el proceso de despliegue de nuestras aplicaciones:

Planeación. El plan debe incluir reglas sobre cuándo implementar desde los diferentes entornos, al entorno en vivo o producción. Tener un plan, reduce el riesgo de conflictos entre los diferentes cambios y se asegura de que el proceso de implementación sea lo más fluido y sencillo posible.
Desarrollo. Una vez se determina el plan se procede a desarrollar las diferentes tareas de la aplicación, en el entorno local o de desarrollo. Finalizado el proceso de desarrollo, se realizan las pruebas de código.
Pruebas. Probar los cambios es crucial para asegurarse de que ningún error llegue al entorno de producción final. Una vez probados los cambios en el entorno local o de desarrollo, se pueden implementar los cambios en el siguiente entorno (como el de ensayo o staging), donde se deben realizar las pruebas de control de calidad finales. Una vez probado todo se implementa en vivo.
Despliegue en el entorno en vivo. Terminadas las pruebas y solucionados los errores, se procede a implementar los cambios en el entorno en vivo.
Monitoreo de los cambios. Estando los cambios en el entorno de producción, es muy importante monitorear constantemente la aplicación para evitar que los usuarios tengan una mala experiencia con ella. Es recomendable al momento de realizar el despliegue a producción realizarse en una hora que no perturbe a muchos usuarios, para realizar las respectivas pruebas en el entorno y que de esta manera se pueda solucionar rápidamente el problema o se puedan revertir los cambios a tiempo.

¿Cuáles son las ventajas del despliegue en múltiples entornos?

Se reduce el riesgo en el que la aplicación se rompa. Esta es una principales razones para usar múltiples entornos, de esta manera se reduce el riesgo de que los cambios tengan un impacto negativo.
Ahorro de tiempo. Sin la preocupación de que se rompa algo, se puede optimizar el flujo de trabajo para realizar los cambios. Si está trabajando en el entorno local, los cambios se procesan más rápido y a la hora de la implementación, se ahorra tiempo.
El contenido prioritario es fácil de administrar. Hay contenido que puede tener mucha mayor prioridad y ser sensible para algunos usuarios, el poder realizar el despliegue en diferentes entornos para realizar las pruebas pertinentes, ayuda que se pueda cumplir en plan de despliegue al entorno de producción, de forma efectiva.

Github Actions

Nos permite realizar el despliegue de nuestros proyectos de forma automatizada, desde nuestro repositorio en Github.

Pero no solo permite ayudarnos con nuestro despliegue, Github Actions es una herramienta gratuita, para automatizar flujos de CI/CD de nuestros repositorios.

¿Qué es CI/CD?

Es una práctica recomendada de las metodologías ágiles, que implementan los equipos de desarrollo junto con la infraestructura, para con ella cumplir los requerimientos, hacer código de calidad y pensar en que la aplicación sea segura de usar.

CI/CD incorpora una automatización continua y un control permanente en el ciclo de vida de la aplicación.

CI — Continuous Integration o Integración Contínua. Se integran los cambios en el código a la rama principal de un repositorio común. Para evitar que cada desarrollador, cree código de manera aislado y que se una todo en el despliegue a producción, se trabaja realizando un flujo de trabajo donde cada desarrollador contribuye a una parte del repositorio, dependiendo de las tareas que deba realizar. Con el CI, las integraciones de código son más rápidas y con mayor frecuencia.
CD —Continuous Delivery/Deployment o Entrega Contínua. Inicia donde termina la CI, el CD automatiza la entrega de aplicaciones a determinados entornos, para permitir implementaciones fáciles y confiables en el entorno de producción. En la Entrega Continua, los despliegues ocurren frecuentemente, al ser automatizados los procesos no se requiere de procesos manuales. Los despliegues a producción no requieren una validación manual, si se identifica una falla en el proceso o se identifica un error este proceso se detiene.

¿Cómo es el CI/CD con Github Actions?

Github Actions, tiene un concepto de workflow (flujo de trabajo), el cual es el encargado de todo nuestro proceso (o Pipeline). Que puede ser configurable, y en donde se puede especificar que se analicen diferentes aspectos del proyecto, para evitar algún error en el proceso.

Workflow: es un procedimiento automatizado el cual se añade a un repositorio. En él se hace el build, test, package, release/deploy de un proyecto.
Job: es un conjunto de steps que se ejecutan en runner de nuestro proceso.
Step: es una tarea individual que puede ejecutar comandos dentro de un job. Un job está formado por uno o más steps y éstos están ejecutados sobre el mismo runner a la hora de ejecutarse el workflow.
Action: son los comandos de ejecución del proceso, ejecutados en un step para crear un job. Se pueden utilizar los actions creados o crear personalizados. Para usar un action en un workflow, se debe incluir en un step.

¿Cómo se crea el workflow?

Para crear nuestro workflow podemos realizar los siguientes pasos:

Primero vamos a crear en nuestro proyecto, en la raíz una carpeta llamada: “.github”.
Dentro de la carpeta “.github”, vamos a crear otra carpeta llamada: “workflows”.
Dentro de la carpeta “workflows”, crearemos un archivo con la extensión, como por ejemplo: build-deploy.yml. Este archivo tiene sintaxis YAML.

El YAML, es un archivo que en su estructura, se basa en espacios y/o tabulaciones, donde se define el flujo de CI/CD. Este archivo puede tener cualquier nombre acompañado de la extensión .yml.

En el archivo se añade la configuración, los pasos que se deben seguir para hacer el despliegue de nuestra aplicación.

Desde la página de Github, es posible crear el archivo con la extensión .yml. En la pestaña de GitHub Actions en nuestro repositorio de GitHub, podemos ver varias plantillas para hacer el despliegue. Para crear una se da clic en el link: “set up a workflow yourself ”.

Se creará un archivo en el cual se puede añadir la configuración y luego se realiza el commit.

¿Qué encontramos en el archivo .yml?

“name: Example”: Es el nombre opcional que se le asigna al workflow.

name: [workflow name]

“on”: Especifica el evento que ejecuta el fichero del workflow. Cómo el push de git sobre nuestro repositorio. Para especificar la rama o ramas, sobre las que nos gustaría que se inicie, sería la siguiente:

on: [push]
Branches: [master o main]

«jobs»: Se especifica uno o más jobs.
«build»: Es el nombre que le hemos dado a nuestro primer y único job. En este caso el nombre sí es obligatorio.
«runs on: ubuntu-latest»: Configura el workflow para que se ejecute en una instancia de la última versión de ubuntu. Se puede cambiar por otro sistema operativo: windows-latest, macos-11.0, etc.
«steps»: Sección donde se especifican uno o más steps de un único job.
«uses: actions/checkout@v2»: uses le dice al job de obtener v2 (versión 2, antiguamente se usaba la v1) de la acción de la comunidad de Github llamada actions/checkout. Éste es un action que comprueba nuestro repositorio y lo descarga en nuestro runner o instancia, permitiendo que sobre el código podamos ejecutar el resto de acciones. Es obligatorio añadir este action de checkout las veces que nuestro workflow ejecute sobre nuestro código o se haga uso de un action que hemos definido en otro fichero del repositorio.
«name: Checkout»: Un nombre opcional que se le ha dado al action.
«uses: actions/setup-node@v1»: Este action se encarga de descargar e instalar una versión específica, en este caso de node.
«run: npm install»: La palabra run le dice al job de ejecutar un comando en el runner. En este caso estamos utilizando npm.

¿Cómo se ejecuta el Workflow?

Para ejecutar el workflow y ver los resultados, es necesario hacer push del proyecto a la rama que especificamos en el archivo de workflow.

En pestaña “Actions”, de Github empezará el despliegue.

Cuando todo el despliegue no ha presentado ningún problema, vamos a ver que todos los checks de los jobs son exitosos.

Conclusiones

Realizar el despliegue de nuestra aplicación es una acción necesaria, además de otros pasos que nos ayudan con la confiabilidad y calidad de nuestro código, y la de nuestro proyecto, a través de las prácticas de CI/CD.

Github nos brinda una herramienta gratuita, para la integración y entrega continua de nuestros proyectos en nuestros repositorios, de manera automatizada, como son los Github actions, que nos brinda un workflow que podemos configurar para que el flujo se ejecute exitosamente en nuestros proyectos.

Github actions, no es la única herramienta que nos permite realizar la práctica de CI/CD, pero es una herramienta fácil de usar para los desarrolladores que tenemos muchos de nuestros proyectos personales en Github, y nos da una gran visibilidad del flujo de trabajo que se realiza en estas prácticas.

Espero este artículo sea de ayuda a los lectores, para que con él comprendan cómo funciona el flujo de trabajo de Github Actions y puedan aplicar estas prácticas en sus proyectos.

Te invito a seguirme en twitter con el handle: @vanessamarely

Recurso para ampliar la información

github actions

workflow syntax for github actions

events that trigger workflows

context and expression syntax for github actions

Tips para obtener un buen empleo en desarrollo Web

Vanessa Aristizabal — Thu, 13 May 2021 04:09:04 +0000

Cuando aplicamos a un empleo en desarrollo de software nos invaden diferentes sentimientos, pueden ser: ansiedad, temor, inseguridad, depresión, entusiasmo, alegría, motivación, entre otros.

Aplicar a un empleo o querer cambiarlo, inicia con la motivación por mejorar nuestra calidad de vida, nadie aplica a un empleo si no está motivado por algo, y el hecho de tomar la decisión de realizar un cambio parte de salir de nuestra zona de confort.

Hay una buena frase que puede aplicar a este caso:

“Una buena parte de las cosas que quieres en la vida está fuera de la zona de confort” — Idowu Koyenikan

La zona de confort es ese lugar donde a pesar de sentirnos cómodos, nos surgen muchas ideas y sueños, que nos hacen entrar en conflicto.

A pesar de estar en un empleo en el que aspectos como el salario nos permiten estar a gusto, es normal experimentar sentimientos de inconformidad, que nos lleva a pensar en la posibilidad de aspirar a otro trabajo, pero ¿Soy lo suficientemente capaz para cambiar de empleo?

En el caso de no tener suficiente experiencia laboral, nos invaden ideas como: ¿seré contratado?, ¿me rechazarán? ¿descubrirán que no tengo la suficiente experiencia? ¿estaré al nivel de la oferta?

A veces nos dejamos invadir de ideas o pensamientos negativos y decidimos no aplicar a un empleo, y otras veces nos decimos que debemos salir de la zona de confort. Deseamos mejorar nuestra calidad de vida, hacer un cambio en ella y en la de nuestros seres queridos. A la hora de buscar un nuevo empleo, todo parte de la actitud y en este artículo espero darte algunos tips que te puedan ayudar a obtener un buen empleo, y tengas una actitud más optimista para salir de la zona de confort.

Iniciando este camino

Iniciar este camino nos lleva a una serie de pasos, seguirlos nos puede ayudar a sentirnos confiados a aplicar a un empleo, iniciar este nuevo camino requiere de preparación mental y técnica, para afrontar los diferentes retos que se nos irán presentando. La idea es hablarte más detalladamente de cada uno de ellos y puedas tomarlos como una base, puedes ir añadiendo más pasos de considerar necesitarlos para lograr tu objetivo.

Preparación.

Defino mi enfoque, es importante saber a que deseo aplicar.

Búsqueda.

La búsqueda es el paso donde se decide salir de la zona de confort y se buscan ofertas, se identifica la situación actual del mercado.

Aplicar a la oferta.

En este paso surgen muchas dudas, ¿Si aplico a varias ofertas me ira mejor?¿Será que me presento a pocas?, hay unos tips generales que podemos seguir en esta fase que nos puede ser de gran ayuda.

Proceso — Inician pruebas.

Es hora de demostrar nuestro conocimiento adquirido, y ponernos manos a la obra en los diferentes procesos que debemos presentar en las empresas a las que aplicamos. Cada empresa tiene su proceso definido y no es él mismo para todas. Cuando aplicamos a la oferta conocemos cómo será el proceso de entrevistas y en este paso podemos tener una pequeña oportunidad para prepararnos mental y técnicamente antes de cada una de las pruebas.

Meta cumplida.

Nos damos un pequeño reconocimiento por todo el proceso que realizamos, y lo más importante es que cumplimos la meta esperada. En esa fase tenemos la oportunidad de conocer y analizar todo lo que realizamos, todo lo que aprendimos e incluso descubrir aquellos puntos en los que fallamos que nos pueden impulsar a mejorar cada día.

Preparación

Es importante definir qué es lo queremos, a la hora de iniciar la búsqueda de encontrar una nueva oferta laboral.

Para esto debemos definir lo siguiente:

Modalidad

Es bueno saber que modalidad es la que más me interesa, si deseo trabajar de forma virtual, presencial, semi presencial y virtual.

Una jornada de 4 o 5 días a la semana, presencial en la oficina.

Horario flexible, el tener la opción de iniciar a una hora de trabajo que desee y trabajar hasta cumplir una tarea asignada o trabajar en un horario establecido de 8:00 am a 6:00pm o de 9:00am 5:00pm.

Salario

Recibir una compensación por nuestro trabajo realizado, es uno de los beneficios por los que aplicamos a una oferta laboral. Algunas veces no sabemos cual es el rango salarial al que debemos aspirar, una buena base para eso, es revisar diferentes ofertas para darnos una breve idea de que solicitan en ellas y cuanta es la compensación por ellas, además es importante tener en cuenta alguna inversión que hayamos realizado en algún curso que nos permitiera obtener los conocimientos necesarios para la aplicación, podríamos añadir un porcentaje de esa inversión, en ese salario al que aspiramos.

Si el salario que nos ofrecen es en dólares, se debe tener muy presente el tipo de contrato y si este incluye algún tipo de prestaciones sociales (como son salud, pensión, entre otros), de no ser incluidas las prestaciones, se debe considerar que del salario que se vaya a recibir se va a sacar un porcentaje para cubrir esas prestaciones.

Cuando es nuestro primer empleo hay muchas dudas respecto al salario, en cada país hay una base mínima salarial, como desarrolladores sabemos que aspiramos a un salario superior a esa base y algunos portales de empleo nos ayudan a conocerlo, que puede estar esa base entre los 3 o 4 salarios mínimos vigentes.

Tecnologías

En este aspecto se tiene en cuenta los lenguajes de programación que conozco, sea Javascript, Typescript, Java, etc, los que estoy aprendiendo y en los que estoy en completa disposición para ejercer de obtener el empleo.

De los conocimientos que he adquirido, el perfil podría ser Frontend, Backend o desarrollador Full-stack, incluso desarrollador Móvil, Android, IOS u otro. El perfil nos ayuda mucho a buscar la oferta indicada, para no aplicar a todo y encaminarnos a lo que queremos.

Además considerar que tipo de sistema operativo manejo para ellos, cuando esté en el proceso de la entrevista podría preguntar qué equipo otorgan en cuanto a de escritorio o un portátil y el sistema operativo de ellos, dado el caso que sea muy importante este aspecto o no.

Beneficios

Hay beneficios que las empresas nos pueden brindar y algunos que sean muy importantes para nosotros como la salud, tipo de contrato, snacks durante el mes, actividades de esparcimiento, el plan de carrera para saber cómo será mi crecimiento interno, alguna plataforma de aprendizaje que aporte a realizar mucho mejor mi trabajo, bonos de referidos, certificados, dias de vacaciones (15 o 20), entre otros que podamos incluir en nuestras expectativas.

Una vez se tenga bien definido los aspectos que buscaré en las ofertas, es bueno empezar a prepararse técnicamente para las entrevistas, empezar a repasar y practicar las bases técnicas para el perfil, sea en Web o Móvil, bases en desarrollo de software, prácticas, metodologías, entre otros.

Búsqueda

En este paso salimos de la zona de confort y buscamos nuevos horizontes.

Nos puede pasar que podríamos no saber dónde buscar las ofertas, si apenas estás iniciando en este campo, los que ya tienen una mínima experiencia usan las mismas fuentes sea algún amigo o algún portal.

Las fuentes más comunes de búsqueda, pueden ser algunos portales de empleo locales de cada país, como bolsas de empleo, o para trabajos remotos en Glassdoor, Indeed, AngelList, Stack Overflow, etc.

En las redes sociales como Linkedin, donde tenemos la oportunidad de compartir los datos de nuestro perfil, podemos ser contactados por algunos reclutadores y aplicar a algunas convocatorias que otros usuarios o empresas comparten. Un tip a tener en cuenta en nuestras redes, es mantener el perfil actualizado esto ayuda a tener mayor visibilidad para los reclutadores.

Amigos o conexiones, que tenemos en las redes sociales o incluso algunos contactos que trabajan en la empresa en la que deseamos, puede sernos de gran ayuda, pueden darnos algunas recomendaciones y hablarnos del proceso para obtener el empleo soñado.

Otra fuente pueden ser eventos realizados por las comunidades, algunos eventos son patrocinados por empresas de desarrollo de software o empresas de outsourcing, y son mencionadas durante el evento, y algunas de ellas tienen vacantes abiertas en las que puedes aplicar o incluso iniciar el primer contacto con ellas.

La mayoría de las empresas tienen una sección para contactarlas o incluso una de vacantes abiertas, que podemos revisar constantemente para aplicar e iniciar el proceso, aunque un tip que es más efectivo cuando se conoce por la pagina que tienen una oferta disponible, es hablar con algún contacto que labore en la empresa para que te refiera de esa manera el proceso de aplicar será mucho más rápido, que tú realizando solo la aplicación directo por la página de la empresa.

Aplicar a la oferta

Aplicar a la oferta es el paso donde después de la búsqueda, encontramos unas opciones que nos llamaron la atención, en cuanto a lenguajes, reconocimiento de la empresa, descripción de la vacante y es tiempo de empezar nuestra aplicación a ellas.

En este paso pueden surgir varias dudas e incluso el síndrome del impostor, nos puede hacer dudar en postularnos. Es normal que haya dudas frente a nuevos desafíos, y esto es debido a que estamos saliendo de la zona de confort, es bueno cuestionarnos, pero no dejarnos llevar por algunas ideas, frente a algún aspecto negativo que identifiques es bueno crear un plan de acción sobre él, como por ejemplo: Mi inglés no es lo suficientemente bueno, no estoy con la suficiente confianza de postularme a la vacante, ¿será que si lo hago? El plan de acción sería: ¡voy a practicar y voy a realizar el proceso!, en la empresa tendré muchas oportunidades de mejorarlo y seguiré por mi cuenta estudiando y practicando, pero voy a aplicar, arriesgarme y aprender de esta experiencia.

Existen unos tips generales que es bueno tenerlo en cuenta a la hora de aplicar a la oferta para tener muchas más oportunidades de ser tenido en cuenta nuestro perfil, como son:

Curriculum — CV

EL curriculum es nuestro historial laboral y la información de nuestro perfil, es importante mencionar la experiencia que se tenga solo enfocada a lo que nos estamos postulando, si tienes experiencia en ventas es bueno mencionarlas si tu perfil, va a ser orientado a un mismo cargo.

En el caso de no tener experiencia laboral, es bueno mencionar algunos proyectos académicos que hayas realizado, las tecnologías en las que trabajaste y las funciones que realizaste en la ejecución de este.

El currículum aunque muchas personas no lo crean, es importante darle un buen orden, mencionar esos aspectos que sean relevantes, para que puedan verte como el candidato perfecto y también es bueno hacer que luzca bien, ya que es tu carta de presentación. Tener mucho texto, a veces podría resultar aburrido y monótono, es importante ser conciso con la información y que luzca bien.

Hay plantillas gratuitas en internet que te puedan ayudar a realizar un buen currículum o de tener habilidades gráficas, puedes ponerlas en práctica para organizar la composición de tu perfil profesional.

Formación

En ese punto es bueno repasar los conceptos técnicos pertinentes a la oferta en la que vas a presentarte, ayuda realizar algún curso, seguir alguna guía para realizar ejercicios prácticos, la teoría es importante, pero la aplicación de los conceptos ayuda mucho en este campo.

El practicar y estudiar ayuda a darnos más confianza a la hora de presentar las pruebas de las ofertas.

Prepararnos en un segundo idioma puede abrir las puertas a más ofertas, realizar un curso, o estudiar por tu cuenta con recursos gratuitos, puede ayudarte a ser la persona que se lleve el puesto.

Prepárate para la entrevista

Este punto va unido al anterior, en el anterior nos ayudamos a prepararnos en conceptos que consideramos importantes, es bueno hacernos preguntas técnicas de los conceptos que repasamos o estudiamos, para fortalecer ese conocimiento y como práctica para la entrevista.

En las entrevistas, no solo te van a preguntar aspectos técnicos, si te postulas a una oferta donde es requerido un segundo idioma, es bueno hacerse preguntas personales en el segundo idioma, cuya respuesta sea en el mismo. Practicar algunas preguntas técnicas en el segundo idioma, ayuda a fortalecer la confianza y el poder argumentar y explicar en un idioma diferente al nativo.

Confía en ti mismo

La confianza ayuda para todo, el haber tomado la decisión de buscar nuevos horizontes o empezar nuestra historia laboral, nos puede llenar de miedos y falta de confianza, es importante que a pesar de los miedos, debemos hacer lo posible por convertirlos en oportunidades, planes de acción que nos impulsen a lograr nuestro tan anhelado objetivo.

Adicional a los tips anteriores hay unas recomendaciones que es bueno tener en cuenta para que al momento de estar en la entrevista, no caigamos en estos errores, que podría llevarnos a no cumplir nuestros propósitos.

Hay cosas que no es bueno decirlas en las entrevistas y prepararse para que los nervios no te jueguen una mala pasada es muy útil. Entre ellas están las siguientes:

No digas comentarios negativos sobre otras personas o empresas. Es importante no caer en el error de mencionar experiencias negativas con otras empresas o compañeros, ya que se puede percibir de forma negativa, mostrando que no eres bueno para afrontar algunas situaciones, huyes de ellas, o la falta de inteligencia emocional haya ocasionado tu frustración con anteriores compañeros o empresas. Es importante recordar las verdaderas razones por las que realizamos un cambio de empresa, en el caso de aplicarte y esto es mejorar nuestra calidad de vida, y mejores oportunidades laborales, seguir aprendiendo y mejorando en tu carrera.
No seas desleal, no critiques a otros compañeros. Esta va un poco unida con la anterior en cuanto a que no es bueno mencionar aspectos negativos de otros, es importante mencionar los aspectos positivos del trabajo en equipo y cómo podemos demostrar el buen trabajo en equipo que podemos realizar.
No digas mentiras. Sé sincero, es apreciado en el proceso. En algunas ocasiones tal vez tendremos la presión de tratar de argumentar sobre un concepto o sobre alguna experiencia en particular, habla siempre de tus aprendizajes, en el caso de no tenerlos o no haber pasado por alguna experiencia en particular, se sincero y menciona al respecto, lo importante es siempre estar abierto al aprendizaje.
Evita mostrarte arrogante. Con la experiencia es posible que puedas ser un poco exigente en los procesos o consideres que si un reclutador te contacta, es porque eres la persona idónea que la empresa necesita y si no te esfuerzas en el proceso, igual te van a dar el empleo, si deseas postularte a lo que te menciona el reclutador, demuestra que eres bueno, esfuérzate si de verdad te interesa, de no ser así se sincero y menciona que en el momento no deseas aplicar, pero más adelante podrías realizar el proceso, de esta forma no cierras la puerta de aplicar a ella más adelante.
“No tengo preguntas”. Decir que no tienes preguntas demuestra desinterés. El entrevistador espera que preguntes sobre la empresa, metodologías y valores de la empresa, entre otros. Ayuda a demostrar el verdadero interés que tienes en trabajar en la empresa, puedes preguntar sobre el origen de la empresa, proyectos internos que trabajan. Antes de presentar la entrevista revisa la página de la empresa, información relevante y apuntar algunos detalles de los cuales deseas conocer más para que puedas preguntarlas en la entrevista.
No preguntes sobre cuándo te aumentan u otras preguntas que puedan demostrar un interés no real por la empresa. La remuneración es importante, pero se puede preguntar por el crecimiento y el plan de carrera, y cómo realiza la empresa este proceso y como es el estímulo al respecto, para evitar demostrar solo un interés monetario.

Proceso — Inician pruebas

Es tiempo de presentar nuestro currículum a las ofertas que más nos interesan y empezar el proceso que cada una tiene.

En este proceso es hora de demostrar nuestro conocimiento, y presentar cada una de las diferentes pruebas que podrían ser de diferente tipo, como por ejemplo:

Test de personalidad

El objetivo de esta prueba es conocernos un poco, analizar nuestro comportamiento frente a alguna situación, evaluar el grado de motivación que tenemos frente a la posición y otros aspectos como el autocontrol, autonomía, dinamismo, capacidad, liderazgo, sociabilidad, y habilidades comunicativas. Esta prueba puede ser presentada por escrito a modo de test, o puede ser una conversación con un reclutador o psicólogo.

Pruebas de conocimiento

Test de idiomas. En esta prueba se pueden realizar test de idiomas, si el cargo al que te presentaste lo requieren, de esta forma se puede conocer el nivel en el que te encuentras y una vez ingreses a la empresa, te puedan dar recomendaciones o de acuerdo a los beneficios, presentarte una opción para mejorarlo. En este frecuentemente se evalúan habilidades de escritura, escucha, y comunicación.
Test técnico. Estas pruebas se realizan de diferentes formas, puede ser un cuestionario escrito o verbal, con diferentes preguntas técnicas, haciendo énfasis en las bases técnicas que se requieren para el cargo en el que se está presentando, además de tener en cuenta aspectos de arquitectura, buenas prácticas, metodologías, algunas librerías o frameworks. También es posible que pregunten cómo te puedes desempeñar frente a algún problema de código y cómo lo solucionas.

Prueba técnica práctica

Esta prueba puede ser realizada evaluando el razonamiento lógico con algún algoritmo, o la aplicación de nuestro conocimiento en algún ejercicio práctico.

Algoritmos. como mencione se evalúa el razonamiento lógico y la resolución de problemas. El ejercicio a resolver puede ser compartiendo pantalla, o te comparten un ejercicio (puede ser un ejercicio de Hackerrank) para resolverlo en x tiempo.

Prueba para hacer en casa. Esta prueba se realiza enviando un link con un ejercicio práctico, o una mini aplicación que cumpla algunos criterios específicos, para ser realizado en x tiempo, sea algunas horas o días. En esta se evalúa principalmente:

Buenas prácticas
Código limpio
Codigo de calidad
Documentación
Pruebas unitarias/e2e
Manejo de repositorio
Abstracción de código

Otras pruebas.

Estas pueden ser pruebas psicotécnicas, situacionales entre otras.

Adicional y como último paso se puede realizar una entrevista con el equipo de trabajo, líder inmediato o gerente de la empresa. Lo importante de este último paso es evaluar habilidades de trabajo en equipo y liderazgo.

Tips generales para presentar una prueba efectiva

Práctica diferentes ejercicios sin presión. Recuerda que la práctica hace al maestro.
Algunos entrevistadores te preguntarán conceptos de cátedra, como tomados de un libro. No es bueno memorizar conceptos, aprenderlos es lo importante, conocer qué son y cómo funcionan. Con tu seguridad puedes hablar de ellos.
Hazte preguntas sobre conceptos o pídele a alguien que te las haga (tu idioma nativo / inglés / idioma solicitado).

Recursos

Algoritmos

HackerRank

Interviewing.io

Pramsp

Aplicaciones para practicar

Learn Javascript through a Game

30 Day Vanilla JS Coding Challenge

20+ projects you can do with javascript

100+ JavaScript Projects for Beginners!

15 Vanilla JavaScript PROJECT IDEAS

26 Impressive web projects built with CSS only

Top 10 Projects for Beginners to Practice HTML and CSS skills

15 HTML and CSS projects to sharpen your Skills

11 Experimental CSS projects that’ll blow tour MIND

Recursos para aprender

Freecodecamp

MDN

NODEJS

Meta cumplida

En este último logramos obtener nuestro trabajo soñado. Es muy importante felicitarnos a nosotros mismos, por todo el esfuerzo y tiempo invertido en el proceso, antes de celebrarlo con nuestros seres queridos, debemos hacerlo con nosotros y reconocernos ese logro y luego compartimos esa felicidad con otros.

Es posible que en algunas ocasiones no logremos obtener ese empleo, pero no debemos rendirnos, debemos seguir perseverando, y continuar esforzándonos hasta cumplir ese gran objetivo.

Conclusión

A la hora de postularse a un nuevo empleo o al primer empleo, debemos confiar en nosotros mismos, no debemos permitir que el síndrome del impostor nos gane. La actitud que se debe tener es el ser positivos, toda experiencia es un aprendizaje y se debe perseverar, para saber si somos buenos en algo, debemos intentarlo las veces que sean necesarias hasta lograr nuestra meta.

Lo más importante es prepararnos para sentir una plena confianza en la entrevista y lograr que los nervios no nos jueguen una mala pasada.

Te invito a seguirme en twitter con el handle: @vanessamarely

Arquitectura en Angular

Vanessa Aristizabal — Sun, 25 Apr 2021 01:36:18 +0000

Crear una aplicación va mas allá de escoger nuestro Framework o librería favorita, sea por preferencia personal o por ser la herramienta más usada en el mercado, para empezar a estructurar nuestra aplicación.

Una frase cuyo autor es anónimo, dice:

"Cuando quieras construir algo que perdure, procura que los cimientos sean sólidos"

Esa frase, se puede aplicar en la construcción de nuestras aplicaciones, y es bueno conocer bien los cimientos, las bases o como algunos dirían las piedras angulares, que nos permiten no solo crear una arquitectura sólida, también algo que puede perdurar y cumpla con el objetivo para el cual la creamos.

Angular es un Framework que en sus inicios desde la versión AngularJS, nos llevo a aprender no solo las bases del desarrollo Web, también nos impulsó a conocer sobre el MVC — Modelo-Vista-Controlador.

En su versión 2, pasada la primera a un segundo plano, teniéndose en cuenta que Typescript es el lenguaje predominante para esta versión, nos dimos la tarea de aprender a tipar nuestros datos de una forma más estricta, y aprender sobre el MVVM — Modelo-Vista-Vista-Modelo, donde sobresale el concepto del 2-way binding, y la idea perdurable allí era el desacoplamiento de la interfaz y la lógica de negocio.

Aplicación de Angular

Una aplicación de Angular es un conjunto de legos unidos, que tiene diferentes técnicas que nos permiten usar la arquitectura. Esos legos son los bloques de construcción de la aplicación.

Según la documentación oficial de Angular, la arquitectura de una aplicación, se basa en ciertos conceptos fundamentales. Los bloques de construcción básicos del marco angular son componentes angulares que están organizados en NgModules.‌

NgModules recopila código relacionado en conjuntos funcionales; una aplicación de Angular está definida por un conjunto de NgModules.

Una aplicación siempre tiene al menos un módulo raíz que permite el arranque y, por lo general, tiene muchos más módulos de funciones.‌

Siguiendo este marco de Angular hay unos conceptos básicos que es fundamental aprender para crear nuestras aplicaciones como son: Módulos, Componentes, Servicios; que en conjunto con otros conceptos como Routing, Schematics, Directivas, Formularios y algunos patrones (DI), entre otros, que nos ayudan a crear nuestras aplicaciones en Angular.‌

Basado en ese marco inicial, en la página oficial podemos encontrar un diagrama, que enseña cómo se relacionan estas piezas básicas y de esta forma vamos armando nuestro rompecabezas o nuestra aplicación de legos.

Los conceptos claves de la arquitectura en Angular son:‌

La estructura de Módulos. *bOrganización de los Componentes.
Librerías personalizadas (Rehusar algún componente o servicio a través de toda la aplicación o entre aplicaciones).
Técnicas de comunicación entre componentes.
RxJS (Observables).
State Management o Administración del estado.
Decoradores personalizados, Pipes, entre otros.‌

Podemos usar esos conceptos o alguno de ellos, para crear una aplicación con una buena arquitectura.‌

No hay una única forma de crear la arquitectura de nuestra Aplicación, pero lo más importante es KISS- y no me refiero a una banda de rock-.‌

“Keep It Simple, Stupid” ó “Mantenerlo Simple” (La última palabra sobra en su traducción)‌.

La idea de este principio es crear soluciones que nosotros y otros puedan entender.‌

Hay una frase muy útil de recordar de Martín Fowler:

“Cualquiera puede escribir código que una máquina pueda entender. Pero solamente un buen programador es capaz de escribir código que otras personas también entiendan”.

Tips alusivos de este principio son:‌

Mantener los métodos y Clases pequeñas (pocas líneas de código). Una vez un desarrollador me dijo que una buena forma es por archivo intentar crear hasta 100 líneas, si me pasaba de esa meta es posible que mi código necesitaba ser refactorizado o había alguna funcionalidad en ella que estaría mejor ubicada en otro lugar.
Nombres Claros para nuestras variables, métodos o funciones y clases. Es bueno usar nombres que sean lo suficientemente claros para no necesitar comentarios que expliquen qué se pretende hacer.
No reutilizar variables o dar dos significados a una variable. Es bueno evitar shadowing o sombreado, en nuestras variables o darle demasiadas funciones a una, para evitar confusiones.
Dividir el problema en partes más pequeñas. Encontrar la solución a problemas es nuestro objetivo, a veces tomamos el todo, en lugar de dar soluciones a partes especificas. Es bueno dividirlo para prestar atención al detalle y poder analizar diferentes aspectos.
No abusar de los comentarios. Si requieres documentar mucho de tu código, quiere decir que tal vez no es lo suficientemente entendible para otros desarrolladores. Es bueno hacer pequeños comentarios, solo si es necesario, lo ideal es que tus funciones y variables sean claros, como se mencionó antes.
Evitar la duplicidad. Es recomendable que cuando veas código duplicado crees una solución reusable de ello, es bueno evitar copiar y pegar el código en diferentes lugares para ahorrar tiempo.
Aplicar más principios. Como el principio SOLID.

S — Single Responsibility Principle (SRP) o Principio de responsabilidad única.
O — Open/Closed Principle (OCP) o Principio de abierto/cerrado.
L — Liskov Substitution Principle (LSP) o Principio de sustitución de Liskov.
I — Interface Segregation Principle (ISP) o Principio de segregación de la interfaz.
D — Dependency Inversion Principle (DIP) o Principio de inversión de dependencia.

Aspectos a considerar en la Arquitectura

Antes de construir una aplicación debemos pensar en ciertos aspectos importantes que son necesarios, e incluso hablando desde un rol diferente a desarrolladores, como arquitectos de un edificio, debemos seguir los planos; pero en una aplicación no tenemos un único plano para construirla.‌

Pero es importante tener en cuenta lo siguiente:‌

Visión general de nuestra aplicación. Conocer los objetivos, para qué se va a usar la aplicación, como la van a usar, entre otros aspectos que nos sirvan para darnos una gran idea de lo que vamos a construir. Analizar todos los requerimientos.
Características de la aplicación. Es muy importante listar todas las características. Usuarios, Login, Empresa, entre otros.
Seguridad. Habla de la seguridad, reglas en el servidor, como será la comunicación de nuestra API en la aplicación, se va a usar un Token (HttpInterceptor), o que otro método.
Autenticación. Se va a manejar una API para la autenticación o vamos a integrar nuestra aplicación con alguna librería, third-party option o servicio en la nube?
Comunicación con los servicios. Como nuestra aplicación se va a comunicar con el servidor? HTTP? Web Sockets? Restful services.
Modelos de Datos. ¿Qué va a pasar en los componentes? estamos obteniendo lo que necesitamos en la API? ¿Cómo podemos obtener una pequeña parte de todo lo que obtenemos en la API?
Features Components o Características de Componentes. Como vamos a organizar nuestros componentes, vamos a usar el patrón presentacional. ¿Cómo vamos a manejar la comunicación entre ellos?
Shared Functionality o funcionalidad compartida. Tenemos que definir varios aspectos sobre la aplicación, si vamos a compartir diferentes funcionalidades a lo largo de nuestra App. Componentes como un menú, un modal o 3rd party libraries: Material, NGPrime, otra.

Adicional a las anteriores, es bueno también considerar lo siguiente en tu aplicación:‌

Accesibilidad. Es importante hacer accesible nuestra aplicación a todos y esto nos ayuda a considerar más aspectos.‌
i18n. La internacionalización es un aspecto que puede afectar enormemente tu aplicación, es bueno considerar si se desea que esté en varios lenguajes y esto implica analizar qué herramientas vamos a usar y cómo estructurar el proyecto.‌
Unit testing o pruebas unitarias. Qué herramientas vamos a usar, vamos a usar karma.‌
End-to-End testing. Se va a usar Cypress. Esto podría afectar un poco el código en cuanto a que se deben tomar algunas decisiones como si se van a usar Ids o las etiquetas, para hacer las pruebas.‌

Se pueden considerar más aspectos, de acuerdo a las necesidades que vayan surgiendo o las que se creen en el equipo de trabajo. Las anteriores podrían ser nuestra base, y una ayuda para la forma en cómo crearemos el mapa de la arquitectura de nuestra aplicación.

Una buena práctica es crear una plantilla, de los puntos claves a definir en cada proyecto, nos ayuda a ahorrar tiempo para no tener que volver a pensar en cuáles son los principales aspectos que debemos considerar a la hora de iniciar.

Como por ejemplo la siguiente:

Puedes crear una tabla como la anterior, analizar tu aplicación e ir describiendo que vas a usar, o cómo vas a estructurar cada uno de ellos después de análisis exhaustivo y el levantamiento de requisitos pertinentes que se realizó.

En la arquitectura de nuestras aplicaciones se suele hablar de algunas metodologías, estructuración de componentes, la modularidad, principios, patrones de diseño, entre otros, es importante tenerlos en cuenta a la hora de iniciar nuestros proyectos, y sobre todo la documentación oficial, en ella podemos encontrar la guía de estilos que nos ayuda a implementar buenas prácticas, además de la guía para usar los legos o elementos de Angular, que vamos a ir implementando en nuestra aplicación.

Guía de estilos

Teniendo en cuenta los conceptos básicos, la guía de estilos de Angular nos da una pauta para convenciones, nombramientos, buenas prácticas y patrones que es importante conocer y seguir las recomendaciones que la guía nos enseña, para crear buenas aplicaciones.‌

Podemos encontrar la guía en la siguiente URL: https://angular.io/guide/styleguide

Podemos destacar algunas de ellas como:‌

Convenciones en el código, como prácticas, organización de los archivos, indentación, comentarios, declaraciones.
Reglas en los nombres, usar mayúsculas para iniciar los nombres, minúsculas, Camelcase, separar los nombres por guiones, nombrar los archivos seguidos del tipo de archivo, entre otras.
Estructura de la aplicación, manejar un directorio raíz para toda la aplicación, crear carpetas por cada característica de la aplicación, o tener carpetas para manejar los assets. Principio LIFT, para estructurar la aplicación de tal manera que se pueda Localizar (Locate) el código rápidamente, Identificar (Identify) el código rápidamente, mantener la estructura plana (Flattest), y Tratar (Try) de mantenerte DRY (Don't Repeat Yourself) o T-DRY (Try to DRY).
Organizando los módulos, en este definimos si deseamos crear un módulo por cada característica de nuestra aplicación, crear el módulo App, módulos reusables.
Creando y usando los componentes. Cómo extraer los templates o hojas de estilos de los componentes, usar los decoradores Input/Output, añadir la lógica presentacional en los componentes.
Creando y usando los servicios. Usar los servicios como “Singletons”, con el mismo injector. Usar los servicios para compartir datos y funcionalidades.
Lifecycle hooks. usar el ciclo de vida para usar los eventos importantes de Angular.

¿Cómo definimos la arquitectura de nuestra aplicación?

Analiza los requerimientos. Necesitamos hacer un análisis de lo que se desea hacer, es posible que nuestra aplicación crezca y se deba reestructurar, pero de los requerimientos actuales se debe pensar en crear código que no posea mucha complejidad, que se pueda escalar y que los nuevos integrantes del equipo puedan entender, para que sean partícipes activos de la aplicación.
Fácil de mantener. Es este punto ayuda mucho el anterior, es bueno pensar en componentes aislados en su lógica, pero a veces de la prisa lo olvidamos, es bueno siempre recordar que la aplicación va a crecer y se debe hacer un alto a tiempo en el código, pensar en una solución que sea entendible y fácil de mantener para todos.
Desarrollar funciones o características que nos ayuden a estructurar la aplicación, donde algunas ayudan al mantenimiento del estado de la aplicación.
Se debe definir el alcance del estado, no todos los estados deben ser visibles en toda la aplicación, es bueno aprender a ubicar de acuerdo al tipo de estado su lugar correcto.
Separar el contenedor de la presentación, se debe definir que componente es solo para mostrar información que no tendrá lógica compleja y cual se encargará de manejar la lógica a mostrar en el presentacional.

Referencia

Angular Architecture and Best Practices Dan Wahlin

Conclusión

Cuando creamos nuestras aplicaciones en Angular, nos surgen algunas dudas para crear la estructura de carpetas, que metodologías usar o cual es la tecnología idónea para hacerla.

Aprender bien los fundamentos de Angular, seguir su guía de estilos, la documentación y las buenas practicas, nos permite crear aplicaciones que puedan ser escalables y perdurables.

Te recomiendo los tips que se mencionan en este artículo, para poder darnos una buena idea de como crear la estructura de nuestro proyecto, además de no dejar de lado los patrones de diseño y metodologías de desarrollo de Software, que nos ayuda en la tarea de crear una buena arquitectura.

Te invito a seguirme en twitter con el handle: @vanessamarely

Despliegue de tu aplicación en Angular usando Github Actions

Vanessa Aristizabal — Sat, 24 Apr 2021 23:07:53 +0000

Cuando estamos creando nuestras aplicaciones sean de nivel personal o corporativo, llega un punto de nuestro desarrollo en el que se debe pensar donde alojar nuestra aplicación. En esta decisión entran varios factores a evaluar, sean monetarios o de otra índole que influyen, de acuerdo a las necesidades de nuestro proyecto, en cuanto a servidor, dominio, u otras operaciones que requieran el despliegue en algún ambiente en particular.

En proyectos personales algunas veces no contamos con algunos recursos para adquirir un dominio, un hosting (o alojamiento), un servidor, entre otros, y ahora tenemos a nuestra disposición una serie de herramientas gratuitas que nos pueden ayudar a tener un espacio de alojamiento gratuito, o un servicio que nos permite hacer el despliegue de nuestro proyecto.

Github, nos permite alojar, tener un dominio y desplegar nuestra aplicación, haciendo uso de Github pages y Github Actions.

Cuando deseemos publicar en producción, en un servidor, o subir a un hosting nuestro proyecto, debemos generar unos archivos que serán minificados, transpilados y comprimidos. Estos archivos en Angular los generamos ejecutando el siguiente comando:

En algunas ocasiones podemos obtener algún error generando nuestra carpeta dist, que es la que contendrá todo nuestro proyecto, usando el siguiente comando podemos solucionarlo o solo instalando de nuevo los paquetes(npm, nvm o yarn).

Al generar nuestra carpeta dist, el contenido que se genera es el que podemos publicar en nuestro GitHub pages.

Para hacerlo de una forma automatizada, que podamos compilar y desplegar nuestra aplicación al trabajar en nuestro repositorio y publicar los cambios, podemos hacer uso de Github Actions.

GitHub Actions o Acciones de GitHub

Nos permite automatizar, personalizar y ejecutar el flujo de trabajo de nuestro proyecto para subirlo en un repositorio con GitHub Actions.

¿Cómo despliego mi aplicación?

Teniendo nuestra aplicación creada, y en nuestro repositorio de Github, vamos a crear una rama con el nombre: gh-pages.
Esta rama es la que configuramos para subir nuestros archivos de HTML, CSS y Javascript, que es la aplicación que quedará publicada.

Podemos crear nuestra rama directamente desde la página de GitHub o podemos desde nuestra terminal crear nuestra rama. La idea de esta rama es que este vacía, entonces es necesario limpiarla, para eso podemos hacer lo siguiente, por líneas de comandos:

Lo anterior nos ayuda a borrar todos los archivos, una vez realicemos esto podemos guardar estos cambios:

¡Tenemos nuestra rama lista!

Incluiremos un script en nuestro archivo: package.json en nuestra rama “main”

Nos moveremos a nuestra rama main, con el siguiente comando:

En la sección de scripts de nuestro archivo package.json, vamos a incluir lo siguiente:

La dirección base tendrá el nombre de nuestro repositorio--base-href=//" .

Guardaremos nuestro cambios, hacemos un commit y un push a nuestro repositorio main.

Estamos a pocos pasos de nuestro despliegue.

Si vamos a la pestaña de GitHub Actions en nuestro repositorio de GitHub, podemos ver varias plantillas para hacer el despliegue. Es bueno usar las opciones, pero vamos a crear nuestra plantilla manual.

Primero vamos a crear en nuestro proyecto, en la raíz una carpeta llamada: “.github”.
Dentro de la carpeta “.github”, vamos a crear otra carpeta llamada: “workflows”.
Dentro de la carpeta crearemos un archivo llamado build-deploy.yml.
En el archivo es donde hacemos la configuración, le decimos a GitHub que pasos debe seguir para hacer el despliegue de nuestra aplicación.

En el archivo build-deploy.yml, en branches debemos colocar el nombre de nuestra rama por defecto: main.
En los jobs, en la parte del name para el branch debe ir gh-pages y en el folder se coloca el nombre de la carpeta que se genera dentro de la carpeta dist, en este caso será: workshop.

Guardamos nuestro archivo, hacemos un commit y un push:

Si revisamos en la pestaña “Actions”, empezará el despliegue.

Cuando todo el despliegue funcione bien, vamos a ver que todos los checks de los jobs funcionen perfectamente.

Una vez terminen los jobs podemos revisar nuestra página.

La URL sigue la siguiente estructura: https://.github.io/.

Este es un ejemplo de un repositorio al que le realicé el despliegue con Github Actions:

https://vanessamarely.github.io/angular-kanban-workshop/

El repositorio es: https://github.com/vanessamarely/angular-kanban-workshop

Conclusión

En la actualidad podemos hacer uso de diferentes herramientas para hacer el despliegue de nuestras aplicaciones, y Github Actions nos permite hacerlo de una forma sencilla, desde el repositorio de nuestra aplicación en Github.

Espero este artículo sea de ayuda a los lectores, para que con él puedan hacer uso de esta gran herramienta de Github y puedan hacer muchos despliegues de sus proyectos.

Te invito a seguirme en twitter con el handle: @vanessamarely

Intro a TypeScript

Vanessa Aristizabal — Fri, 21 Aug 2020 02:39:44 +0000

TypeScript es un lenguaje de programación, es un super JavaScript con super poderes, tipado. Creado para hacer código JavaScript mucho más escalable.

Se dice que TypeScript es un superset, porque es un lenguaje escrito encima de otro lenguaje, que compila a otro lenguaje. En el caso de TypeScript es un lenguaje que compila a JavaScript, pero que incluye muchas facilidades y ventajas.

Microsoft es el creador de TypeScript. y es un lenguaje que se mantiene a la vanguardia con las mejoras de JavaScript.

TypeScript utiliza el paradigma de programación Orientado a Objetos, donde podemos incluir clases como otros lenguajes como Java, C#, entre otros. A partir de la versión ES6 JavaScript implementa clases y es muy similar su uso al de TypeScript.

Con TypeScript no solo se desarrollan aplicacion en Angular, también se pueden realizar en otros frameworks como Vue,js o librerías como React.

Tipado Estático

Un lenguaje tiene tipado estático cuando tiene las siguientes características:

Las variables tienen un tipo de dato.
Los valores que se le asignan a las variables, corresponden a su tipo de dato.

Hay otras características como:

Interfaces
Conversión de tipos (casting)
Argumentos con tipos de datos
Tipos de datos en los retornos de una función
Genéricos

Tipos de Datos

En typescript se puede hacer uso de los tipos de datos de JavaScript, pero tambien tiene sus tipos de datos. Los básicos son:

Booleans: tipo de dato lógico
Number: tipo de dato númerico.
String: tipo de dato de cadena de caracteres.
Any: se usa cuando no queremos declarar un tipo de dato, quiere decir que su contenido puede ser algun tipo de dato. Se puede usar cuando tenemos arrays que tienen varios tipos de datos.
Void: se usa para declarar funciones que no retornan nada.

Interfaces

Las interfaces nos ayudan a definir las variables o métodos que vamos a usar. Se dice que define el contrato, la sintaxis que la clase debe seguir en su estructura. La interfaz se usa para la verificación de los tipos de datos que se usarán en la clase, a esta verificación se le conoce como “tipificación de pato” (“duck typing”) o “subtipificación estructural” (“structural subtyping”). Se define usando la palabra reservada interface, seguida del nombre de la interface con la primera letra en mayuscula. Y colocamos dentro entra las llaves las propiedades y métodos con el tipo de dato.

Podemos extender otras propiedades de otras interfaces. Podemos usar la palabra reservada extends, para que una interface herede las propiedades de otra.

Type

Un type nos permite definir el tipo de dato que vamos a usar en nuestras propiedades y métodos; pero a diferencia de las interfaces no podemos extender un type, ni ampliar sus capacidades. Pero si podemos declarar tipos personalizados y puede tener varios tipos de datos.

Se declara usando la palabra reservada type, seguido del nombre del type iniciando con mayuscula inicial la primera letra, y entre llaves colocaremos las propiedades y métodos, con su respectivo tipo.

Clase o Class

TypeScript es básado en el paradigma de programación orientada a Objetos. Una clase tiene atributos y métodos. Los atributos son variables internas de la clase, aveces a estos se les llama estado de la clase. Los métodos, son las acciones a realizar dentro de la clase.

Para crear una clase usamos la palabra reservada class seguido del nombre.

Los objetos que se crean a partir de la clase se llaman instancia de la clase.

Para crear un objeto usando la clase, lo hacemos así:

Se usa el “this” para acceder a los atributos y métodos de la clase. “this” hace referencia al objeto de la clase.

La funcion ‘constructor’ es un método propio de la clase y nos permite construir el objeto.