#LemonCode 🍋 – Microfrontends I: Introducción

Buy Me A Coffee

Motivación

Si echamos la vista atrás en el desarrollo de aplicaciones web, front y back suelen evolucionar en paralelo hacia soluciones y arquitecturas más efectivas:

  • En su origen, una web app no era más que un gran monolito con toda la lógica de front y back empaquetada junta.
  • A medida que las aplicaciones se hacían más complejas, se pone de manifiesto la necesidad de separar front y back. Nacen las SPA (Single Page Aplications) que se comunican a través de APIs.
  • Back inicia su andadura hacia los microservicios: una arquitectura distribuida, modular y escalable que trae numerosas ventajas.
  • En front también cala esta filosofía del ‘divide y vencerás’. La componentización aparece de forma natural con todos los nuevos frameworks de desarrollo de aplicaciones. Gracias a los componentes, rompemos nuestra UI en pequeños trocitos que permiten el reuso de elementos, reducir la complejidad, aplicar el principio de responsabilidad única, favorecer el testeo, etc.

Sin embargo, los componentes en front no son del todo equiparables a los microservicios en back. A pesar de modularizar nuestra UI, los componentes no solemos concebirlos como entidades 100% independientes, sino como partes de un todo. Tanto es así que en el último paso previo al despliegue … ¿qué hacemos? … ejecutamos un bundler que agrega toda la aplicación en ¡un gran monolito!**

Si bien en tiempo de desarrollo hemos aplicado principios modulares, en tiempo de ejecución nos quedaría una foto como la siguiente (Figura 1):

Figura 1.  Front  (monolito) vs  back  (arquitectura distribuida)
Figura 1. Front (monolito) vs back (arquitectura distribuida)

¿Por qué no dar un paso más y emular la arquitectura distribuida que ya se practica en back-end?

Read the complete article here

Happy coding!

Greetings

El Bruno

¿Con ganas de ponerte al día?

En Lemoncode te ofrecemos formación online impartida por profesionales que se baten el cobre en consultoría:

#Podcast – NTN 77 – Consejos para mejorar tu carrera profesional ðŸ±â€ðŸ‰ðŸ±â€ðŸ‰ðŸ±â€ðŸ‰

Buy Me A Coffee

Buenas!

El mundo es un lugar pequeño o eso parece. Si alguien me decía que años después tendría la suerte de encontrarme virtualmente con Erika Vilches, seguro que me hubiese puesto contento. Y si a además la excusa era para hablar de experiencias profesionales, pues mucho mejor!

Yo a Erika la conozco desde su época como MVP Lead para Latam, y esta vez con Juan nos dimos el gusto de compartir aquellas experiencias (buenas y malas) que nos han ayudado en nuestra carrera profesional. Hemos pasado un rato genial y por eso no tengo muchas notas, así que mejor escuchar el programa.

Happy Coding !

Speakers

  • Erika Vilches es Senior Data & Applied Scientist at Microsoft (LinkedIn)
  • Juan Carlos Quijano Abad es Microsoft Certified Trainer, Arquitecto de Soluciones en Azure, Consultor independiente en implantación de DevOps (LinkedIn)
  • Bruno Capuano es Canada Innovation Lead at Avanade and Microsoft AI MVP (LinkedIn)

Ir a descargar

Happy coding!

Greetings

El Bruno

¿Con ganas de ponerte al día?

En Lemoncode te ofrecemos formación online impartida por profesionales que se baten el cobre en consultoría:

#LemonCode 🍋- Pasarelas de pago I – Conceptos

Buy Me A Coffee

Introducción

Si queremos montar un sitio de comercio electrónico, una de las áreas críticas a cubrir es la de gestionar pagos online, no te puedes arriesgar a que:

  • Tus clientes no confíen en tu sitio.
  • Un hacker te robe números de tarjetas de crédito.
  • Un hacker realice compras con tarjetas fraudulentas.


Vamos a ver una solución con un coste de implementación y mantenimiento razonables para negocios pequeños y medianos: las pasarelas de pago.


En este primer post cubriremos conceptos básicos, tomando como referencia la solución de pago Stripe y su pasarela, en siguientes artículos montaremos ejemplos de integración reales.

TL;DR;

Manejar tarjetas de crédito por nuestra cuenta es algo muy delicado, cómo poco tienes que cumplir con el estándar PCI DSS, lo más cómodo para arrancarnos es utilizar una solución de pago que nos ofrezca una pasarela que se encargue de todo y el número de tarjeta no pase en ningún momento por nuestra aplicación.

Cómo suelen funcionar:

  • El usuario navega a mi página y le da al botón de pagar.
  • Esto hace un post a nuestro servidor, generamos la información del pedido, añadiendo información que garantiza que lo hemos generado nosotros.
  • En nuestro BackEnd nos comunicamos con el BackEnd de la solución de pago, le enviamos la información necesaria, y este nos da un identificador de sesión.
  • Volvemos a cliente, pasándole el id de sesión, y aquí redirigimos al usuario a la de pasarela de la solución de pago pasándole el session id (el usuario ve cómo en su navegador va a otro dominio: paypal, stripe, braintree, servired…)
  • Una vez procesado el pago, la pasarela vuelve a redirigir a una página de nuestro sitio: dependiendo de si la operación ha tenido éxito redirige a una de OK (success) o a una de KO (error).
  • ¿Cómo sé si en mí BackEnd si la operación ha ido bien? La misma pasarela conecta con un web hook de nuestra aplicación web (un endpoint de mi api) y nos envía la información cuando la operación ha finalizado.

¿Cómo me puedo asegurar que las peticiones vienen de la solución de pago que tengo contratada? Para ello comparto un secreto con la misma y puedo validar que las peticiones vienen de mi solución de pago y no de un impostor.

¿Quieres saber más en detalle cómo funciona? Sigue leyendo… 🙂

Happy coding!

Greetings

El Bruno

¿Con ganas de ponerte al día?

En Lemoncode te ofrecemos formación online impartida por profesionales que se baten el cobre en consultoría:

Publicando una Vue.js app en Azure Static Web Apps

Buy Me A Coffee

Azure ofrece (En modo preview en este momento) un servicio orientado a exponer sitios web (SPA) de una manera fácil y rápida. Este servicio es completamente gratuito en este momento y esto te va permitir sacarle jugo este servicio.

En este momento Azure Static Web Apps ofrece también integración continua con Github Actions lo que permite el despliegue continuo de nuestros sitios con una configuración bastante sencilla.

Dentro del portal de Azure vamos a encontrar el servicio de Static Web Apps (Preview) o en español

Ingresamos y creamos una nueva Static Web App.

Vamos a llenar la información general, la suscripción y grupo de recursos que queremos para este servicio

Luego vamos autorizar a Github para acceder a nuestros repos y escoger el que queramos para exponer en este servicio.

Lee el post completo aquí

Happy coding!

Greetings

El Bruno

¿Con ganas de ponerte al día?

En Lemoncode te ofrecemos formación online impartida por profesionales que se baten el cobre en consultoría:

#Podcast – NTN 76 – Feliz Año Nuevo 🎉 con todas las novedades de #Net5 !

Buy Me A Coffee

Buenas!

Feliz Año Nuevo 🎉🎉🎉, empezamos el año dando un repaso a todas las novedades de Net 5 con el gran amigo Miguel Teheran. Comentamos un poco la historia de Net y como Net 5 es el primer paso para la unificación de todos los .Net Frameworks que conocemos.

También hablamos un poco de los lenguajes, de las novedades de C#9, del estado de F# y del pobre VB.Net, donde todos coincidimos que está un poco abandonado.

Gracias y felices fiestas !

Speakers

  • Miguel Teheran es Developer and Software Consultant (LinkedIn)
  • Juan Carlos Quijano Abad es Microsoft Certified Trainer, Arquitecto de Soluciones en Azure, Consultor independiente en implantación de DevOps (LinkedIn)
  • Bruno Capuano es Canada Innovation Lead at Avanade and Microsoft AI MVP (LinkedIn)

Ir a descargar

Resources

Happy coding!

Greetings

El Bruno

¿Con ganas de ponerte al día?

En Lemoncode te ofrecemos formación online impartida por profesionales que se baten el cobre en consultoría:

#LemonCode – nodejs + TypeScript

Buy Me A Coffee

Introducción

Cuando desarrollamos en el lado de Front End, esta muy estandarizada la integración de TypeScript en nuestros proyectos, sea utilizando Babel + Webpack, o tirando de cli y plantillas.

Pero… ¿Y en una aplicación nodejs? ¿Cómo podemos añadir soporte a TypeScript? Aquí no solemos tirar de Webpack, ni generamos bundles, en este post veremos que pasos tenemos que dar.

TL;DR;

Para integrar nodejs con TypeScript una buena combinación es:

  • Tirar de tsc (TypeScript) para ejecutar la validación de tipos (ver que no hay errores).
  • Usar _Babel_ para transpilar los ficheros ts a js.

De Babel usaremos:

  • @babel/node: para ir trabajando en local, es un sustituto del cli de nodejs (haciendo una analogía con webpack, es como si fuera nuestro webpack-dev-server).
  • babel: para cuando queramos hacer un build tener el código transpilado.

Si quieres utilizar alias puedes usar babel-plugin-module-resolver

Si quieres poder debuggear tus ficheros TypeScript puedes usar Visual Studio Code.


Si te planteas minificar ficheros puedes usar: babel-preset-minify


Puedes encontrar un ejemplo en este enlace: https://github.com/Lemoncode/node-typescript-babel-example

Si tienes ganas de ver cómo funciona en detalle sigue leyendo 👇👇👇

Post completo

Happy coding!

Greetings

El Bruno

¿Con ganas de ponerte al día?

En Lemoncode te ofrecemos formación online impartida por profesionales que se baten el cobre en consultoría:

#Podcast – NTN 75 – Crossover con Interfaz Podcast 🎙. Felices Fiestas 🎄🎅🎄 en el mes de Marzo más largo de la historia !

Buy Me A Coffee

Buenas!

Rodrigo Díaz Concha nos ha invitado a colaborar con Interfaz Podcast. Un podcast semanal de arquitectura de software, desarrollo de software, nuevas tecnologías y soft skills. Por cierto, este tipo de crossover nos pone el listón alto con hitos como tener un nombre o un logo.

Y claro, nos dimos el gusto de pasar un buen rato hablando de la experiencia de llevar un podcast técnico en español. Temas como la constancia, invitados, formato del podcast, plataformas, y mucho más.

Gracias Rodrigo y Juan y felices fiestas !

Speakers

  • Rodrigo Díaz Concha es Chief Software Architect at Lumedhealth. 12 times awarded as Microsoft MVP. Recognized as Microsoft Regional Director (LinkedIn)
  • Juan Carlos Quijano Abad es Microsoft Certified Trainer, Arquitecto de Soluciones en Azure, Consultor independiente en implantación de DevOps (LinkedIn)
  • Bruno Capuano es Canada Innovation Lead at Avanade and Microsoft AI MVP (LinkedIn)

Ir a descargar

Happy coding!

Greetings

El Bruno

¿Con ganas de ponerte al día?

En Lemoncode te ofrecemos formación online impartida por profesionales que se baten el cobre en consultoría:

#LemonCode – React Router y rutas autorizadas (I)

Buy Me A Coffee

Introducción

Cuando trabajamos creando aplicaciones SPA con React, el router por excelencia es React-Router-DOM, es fácil de usar, potente y versátil.


Uno de los escenarios que nos podemos encontrar en nuestra aplicación es el de manejar rutas de dos tipos:

  • Rutas públicas: es decir páginas en las que el usuario no tiene porque haber introducido su usuario y clave (por ejemplo la propia página de login).
  • Rutas privadas: para poder acceder a estas rutas el usuario ha tenido que hacer login con éxito previamente.


En esta serie de posts vamos a ver cómo manejar esto aplicando una solución simple que nos evite estar copiando y pegando código en cada página.

Nota: los ejemplos en este post están desarrollados usando TypeScript, en la sección de recursos encontrarás la versión ES6 del mismo.

TL;DR;

En este post resolvemos dos problemas:

  • Donde guardar la información de sesión usuario, para ello utilizaremos el contexto de React.
  • Cómo redirigir a la ventana de login si el usuario intenta acceder a una página que necesita previa autenticación, para ello crearemos un wrapper para nuestras rutas.

Aquí tienes un ejemplo que implementa la solución que vamos a detallar en este post:

Read the complete article here

¿Con ganas de ponerte al día?

En Lemoncode te ofrecemos formación online impartida por profesionales que se baten el cobre en consultoría:

#Podcast – NTN 74 – #Xamarin, #Apple M1, Lidar en iPhone 12, Cloud y mucho más !

Buy Me A Coffee

Buenas!

Contar con Javier y Yeray siempre es un placer, y también una caja de sorpresas. El tema principal era Xamarin, y en el camino empezamos con:

  • El Lidar del nuevo Iphone 12
  • Entornos de desarrollo para MacOS
  • El nuevo Apple M1, redimiento y benchmarks; desde el punto de vista de un programador
  • Y la noticia bomba de Amazon Cloud y Apple

Mas de  una hora con grandes amigos!

Speakers

  • Javier Suárez Ruiz es Senior Software Engineer at Microsoft (LinkedIn)
  • Josué Yeray Julián Ferreiro es CTO & DevsDNA Co-Founder (LinkedIn)
  • Juan Carlos Quijano Abad es Microsoft Certified Trainer, Arquitecto de Soluciones en Azure, Consultor independiente en implantación de DevOps (LinkedIn)
  • Bruno Capuano es Canada Innovation Lead at Avanade and Microsoft AI MVP (LinkedIn)

Ir a descargar

Happy coding!

Greetings

El Bruno

#Podcast – NTN 73 – #LicorcaConf, eventos Gallegos de tecnología para todo el mundo !

Buy Me A Coffee

Buenas!

Todo empezó cuando al terminar de correr veo que #LicorcaConf era trending topic en España. Doy un par de likes en Twitter y 10 minutos después estoy en una sala virtual pasando un rato genial con los asistentes del evento. Obviamente, esto dio pie para que un par de días después nos juntáramos nuevamente para hablar de su experiencia.

1 hora después repasamos el escenario del 2020 al momento de adaptarse a la organización de eventos, lo grandes que son los patrocinadores, el compromiso de los ponentes, la agenda y mucho más!

Otro gran episodio con nuevos amigos!

Speakers

  • Cristina Sánchez Barreiro es Android Developer @ Plexus || GDG Lead || Women Techmakers Ambassador (LinkedIn)
  • Cristina Rivas Pampín es Developer at dooingIT || GDG Santiago || WTM Ambassador (LinkedIn)
  • Daniel Rey Rey es Analista Progamador en Coremain (LinkedIn)
  • David Gonzalo es Software Developer | Team Lead & Cloud Developer Consultant en Tokiota (LinkedIn)
  • Juan Carlos Quijano Abad es Microsoft Certified Trainer, Arquitecto de Soluciones en Azure, Consultor independiente en implantación de DevOps (LinkedIn)
  • Bruno Capuano es Canada Innovation Lead at Avanade and Microsoft AI MVP (LinkedIn)

Ir a descargar

Happy coding!

Greetings

El Bruno