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

#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

#Podcast – I only want a banana (FrontEnd Developers talk in Spanish)

banana.gif

Hello!

In this episode I have the luck talk awhile with Quique Fdez Guerra (@ckgrafico) about the current state of FrontEnd development. And when the introduction get up to 25 minutes, is because the topic is more than interesting. From the 25 min, I recommend to have the Slides opened as additional material since it is an interesting complement to see Quique’s vision.

And on the topic we talked, thus naming languages like SASS, BEM or TypeScript, libraries how angle, JQuery or Lodash and Gulp, WebPack, NPM, Bower, and more. That Yes, starting with the history of JavaScript since 1995 and commenting on how they have changed things until the day’s date, where… well the conclusion which we reach final podcast l worth.

I hope you like the podcast!

Ir a descargar

Greetings @ Toronto

El Bruno

References

#Podcast – Yo solo quería un plátano (hablando con FrontEnd developers)

banana.gif

Hola !

En este episodio tengo la suerte de hablar un rato con Quique Fdez Guerra (@ckgrafico) sobre el estado actual de la programación de frontend. Y cuando en un podcast, la introducción se estira hasta los 25 minutos, es porque el tema es más que interesante. A partir del minuto 25, os recomiendo tener abiertas las Slides como material adicional ya que es un complemento interesante para ver la visión de Quique.

Y sobre los temas tocados, pues nombrar Lenguajes como SASS, BEM o TypeScript, Librerias cómo Angular, JQuery o Lodash y Gulp, WebPack, NPM, Bower, y mas. Eso sí, partiendo con la historia de JavaScript desde el año 1995 y comentando como han cambiado las cosas hasta el día de la fecha, donde … pues la conclusión a la que llegamos a l final del podcast vale la pena.

Espero que lo disfruten.

Ir a descargar

Saludos @ Toronto

El Bruno

References