#LemonCode 🍋 – Microfrontends II: Beneficios y Retos

Buy Me A Coffee

Beneficios

  • Construir en piezas pequeñas trae todas las ventajas de los componentes a nivel de aplicación: reducimos complejidad, funcionalidad y responsabilidad acotadas, tests sencillos, mejor mantenibilidad, menor acoplamiento, bases de código más ligeras, etc.
  • La funcionalidad se vuelve más escalable, es decir, levantar un nuevo microfrontend es más barato, o al revés, tirar un microfrontend a la basura es menos caro que cuando trabajamos con monolitos acoplados (Figura 2).
Figura 2. Funcionalidad escalable
Figura 2. Funcionalidad escalable
  • El punto anterior nos lleva de forma natural al siguiente: ahora las actualizaciones de código pueden ser incrementales, sin impactar al resto de microfrontends existentes. Por tanto reducimos el riesgo de deuda técnica (Figura 3).
Figura 3. Actualizaciones incrementales
Figura 3. Actualizaciones incrementales
  • Podremos tener repositorios, pipelines, despliegues, entornos y procesos independientes por cada microfrontend. Y ¿por qué no? equipos autónomos (Figura 4).
Figura 4. Equipos y procesos independientes
Figura 4. Equipos y procesos independientes

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:

#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:

#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:

#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:

#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:

#Training – 4ta edición del Master Front End de LemonCode

download

Buenas!

Empezamos el año compartiendo recursos de los buenos. En esta ocasión para compartir algunas de las experiencias que han tenido los participantes del Master Front End de LemonCode.

El mismo es Online y tiene una duración de 5 meses, o medido en horas son aproximadamente 240 horas; solo hay que ver los nombres de los docentes para darse cuenta que hay calidad detrás del mismo. Los temas y tecnologías que se abordan en el Master, son las que necesitas conocer en el 2018, así que si tienes oportunidad, no lo dejes pasar.

Eso si, hay que apurarse porque el Master comienza en poco menos de 2 meses y si quieres conocer las opiniones de algunos alumnos, pues lo mejor es leerlas aquí (link). Al estilo Yelp o Trip Advisor, conocer las opiniones de personas que han pasado por esta experiencia siempre es útil!

Saludos @ Burlington

El Bruno

#Training – Máster #FullStack #LemonCode

Clipboard01

Hola !

Si hay un grupo de palabras que he escuchado mucho en los últimos años es el siguiente

Desarrollador Full Stack o Full Stack Developer

He de reconocer que no me atrae mucho el término, sin embargo cuando uno comprende el significado, tiene bastante sentido en los tiempos actuales.

A ver si puedo explicaro: si bien todavía tenemos perfiles especializados en áreas específicas (designers, data scientists, user experience, 3D modelers, etc), la idea de un Full Stack Developer, es alguien que pueda llevar adelante un proyecto completo con los conocimientos suficientes para poder cubrir todos los perfiles.

Aunque hay que tener cuidado, usualmente se asocia a un Full Stack Developer a proyectos web, y tiene bastante sentido, ya que en esta área el avance y cambio de tecnología es constante, y es necesario tener un “chip especial” que ayude a estar aprendiendo nuevos conocimientos.

Es por esto que cuando los amigos de LemonCode me comentaron su idea de plantear un Master para Full Stack We Developers, me quedé intrigado sobre cómo lo montarían. El resultado no puede ser mejor:

  • Por un lado se cubren todos los contenidos que puedes necesitar hoy. Con un enfoque orientado al cambio y a la necesidad constante de adaptarse.
  • Por otro lado, hay un grupo de profesores que además de ser expertos en su materia, también trabajan sobre la misma.

Ambos puntos son importantes, aunque el 2do me toca especialmente. Muchas veces me he encontrado frente a personas que conocen una tecnología X o Y, que han leído un poco sobre la misma, pero que no tienen conocimiento real en la materia. En el caso de los profesores de LemonCode, son todos unos cracks!

No os voy a copiar todo el contenido del master, mejor un par de clicks y preguntas al equipo de LemonCode !

Saludos @ Toronto

El Bruno

Online Training – Application Lifecycle Management with Visual Studio in Septiembre (Spanish)

Hello!

Today is a small post, kids are going back to school here in Canada and is time to plan the the new fiscal year. And one of the best way to start it, is doing some self advertising of some of the new Lemon Code online training features.

And this one is special for me, I have to go back to my roots and deploy a whole arsenal of knowledge about ALM and Visual Studio. The truth is that, while initially 3 days seemed a big amount of time; when put started to put together the agenda and the course contents, we had to start cutting tons of topics, it was too much ! But hey, I start to share personal experiences and I forgot to mention better topics like course agenda, dates and more. You can review all of this in the official Lemon Code Training Site.

2016 09 02 LC ALM y Visual Studio

A couple of logistical details, the course fee is €29 and will be recorded during the days 27, 28 and 29 September 2016.

Greetings @ Toronto

El Bruno

Referencias:

Curso Online – Application Lifecycle Management con Visual Studio en Septiembre

Hola !

Post corto que es día de comienzo de clases en Canadá y además toca organizar el nuevo año fiscal. Y que mejor forma de empezarlo, que promocionando un poco el nuevo modelo de formación online de los amigos de Lemon Code.

En este caso me toca volver a mis raíces y desplegar todo el arsenal de conocimientos sobre ALM y Visual Studio. La verdad es que, si bien inicialmente 3 días me parecían mucho, al momento de armar la agenda y contenidos, tuvimos que comenzar a recortar porque no entraba todo lo que quería contar. Pero bueno, que me pongo a hablar y no comento nada, mejor ver temario, fechas y demás en el site oficial de Formación de LemonCode.

2016 09 02 LC ALM y Visual Studio

Un par de detalles logísticos, el precio del curso es de €29 y será grabado durante los días 27, 28 y 29 septiembre de 2016.

Saludos @ Toronto

El Bruno

Referencias: