blog de betotto

Ya ni he escrito nada de React, me ha gustado bastante los hooks y muchos desarrolladores Web piensan que efectivamente React es la cima del desarrollo web, que para mejorar habría incluso que optimizar los navegadores en si mismo, sin embargo, no dejemos de pensar y preguntarnos Virtual DOM es lo mejor, realmente el DOM es tan lento como nos lo venden, a final de cuentas React, VUE y Angular corren sobre el navegador.

Hooks mejora la forma en que distribuimos estado y nos mantiene seguros de la POO, pero le carga bastante fuerte la mano al Garbage Collector, crear y recrear funciones no es de a gratis. Yo en lo personal he estado buscando librerias que no sean tan "gordas" como React, VUE o Angular un hello world en react pesa 70Kb.

Cuando nos llega un requerimiento de aplicaciones en tiempo real y este requerimiento viene despues de Junio del 2018, la primera solucion que te vendra a la mente, sera usar websockets (creo) porque es una de las formas en las que podemos obtener actualizaciones de informacion desde el servidor, sin embargo, muchas empresas sobre todo las mas actualizadas (bancos, aseguradoras e instituciones financieras), debido a sus restricciones de red no siempre permiten usar protocolos tales como websockets y muchos desarrolladores piensan que la unica alternativa a websockets es polling o long-polling (hacer requests cada 5 o 3 segundos, o extender el request lo mas posible hasta recibir una respuesta) y usar una libreria como cometd para ayudar con eso (adivinas, tampoco me gusta cometd, de hecho soy uno de esos desarrolladores que no le gustan muchas cosas :P).

Si creaste el contador con Hooks que revisamos con anterioridad, te habras dado cuenta que el contador se incrementa cada segundo, pero no usamos un interval estamos usando setTimeout; esto sucede porque estamos inicializando el setTimeout cada vez que renderizamos el componente y en React esto sucede cada vez que actualizas el estado de un componente, pero si tienes mas de 100000 componentes hijos (tal vez con un poco menos), notaras que empiezas a tener performance issues, antes de hooks la unica forma de solucionarlo es usar uno de las funciones del ciclo de vida de React shouldComponentUpdate pero eso nos obliga a que ese componente sea una Clase (y no queremos clases con Hooks, de hecho no queremos clases del todo :P, OOP is evil).

Para solucionar este posible problema, desde la version 16.6 de React tenemos React.memo que nos ayuda a mostar una version memoizada del componente que queremos, reduciendo drasticamente el numero de repintados en los hijos.

Codigo

Ahora veremos un ejemplo de contador usando React.memo

Cuando queremos manejar estado mas complejo que una sola variable, o que depende muchas condiciones antes de entregar el valor final. Es mejor usar useReducer, este hook es sumamente similar a Redux y como tal es un observer de estado al que podemos subscribir nuestro componente.

Redux no es igual a Hooks o al revés useReducer no es Redux, hay importantes consideraciones de diseño al momento de querer reemplazar redux con hooks, eso lo veremos después cuando presentemos algo mas complejo que un simple contador, de momento vamos a expandir nuestro contador.

El nuevo contador

El nuevo contador nos permitirá incrementar o reducir su valor a voluntad. Solo tiene dos botones a continuación presento el código

Uno de los mas importantes patterns de diseno es Observer, este patron lo podemos ver en librerias como Reactive Extensions, React, Redux, Angular y varias librerias relacionadas con streaming, pero a veces no queremos toda una libreria porque nuestro requerimiento no es tan complejo, y escribir un simple Observer no es tan complicado, al menos no en Kotlin.

El modo de funcionar es bastante simple, tenemos un distribuidor de eventos y varios listeners cada vez que hay un evento, el distribuidor se encarga de enviar el evento a todos los que esten suscritos, es como crear un mini service bus.

https://en.wikipedia.org/wiki/Observer_pattern aqui hay una explicacion mucho mas detallada

Basicamente necesitamos 3 cosas, los suscriptores, una lista de suscritos y una forma de recibir y propagar eventos, vamos a implementar esto en kotlin;

El codigo

En la comunidad de typescript una de las razones por las que comentan que se debe usar es por que usa types y que eso reduce la introducción de errores en el codigo, y para ciertos errores muy muy simples puede que sea verdad. Pero si he notado que la mayoría de los errores vienen cuando modificamos algo y ese algo se usa en otro lado que no sabemos; e introducimos bugs al código, esto ni con lenguajes typados lo solventas. Pero si hay una herramienta que puede al menos decirte que estas provocando side effects en partes del código que ni esperabas. Y esas son las pruebas unitarias.

Todos deberíamos saber los beneficios que estas conllevan y aunque muchos los sabemos la verdad como desarrolladores no nos gusta escribirlas (al menos a mi no) las vemos como tiempo extra, ademas casi siempre los project managers tambien y piden las pruebas unitarias aunque no den tiempo para poder escribirlas.

Pero esa es otra historia y no importa si sigues una metodología BDD o TDD o simplemente escribes pruebas cuando se te antoja, es importante crearlas.

A continuation veremos un ejemplo de como crear pruebas unitarias para Kotlin:

El codigo a probar

Estado en React

React es por asi decirlo, una maquina de estados, reacciona a cambios de estado y define todo un ciclo de eventos que suceden cada vez que cambia el estado, el proceso simple es que vuelve a renderizar el componente, es decir, crea el DOM virtual del componente hace la comparacion de diferencias y actualiza el DOM, esto lo hace a una velocidad mas que decente.

Hooks

Hablar de React despues del 06 Febrero del 2019 es hablar de Hooks, no podemos ser mas afortunados de por fin librarnos de ese mal concepto de Clases en javascript, que ni son clases reales porque son instancias y confunden mucho tanto a desarrolladores js como a los que no lo son.
Vamos a realizar un pequeno contador que muestre cuantos segundos han pasado desde que cargamos una pagina. Hooks nos ayudara a escribir el codigo en React.

Dependencias

- La unica dependencia es haber realizado el ejercicio del post anterior.

Actualizando el componente

Solo vamos a actualizar el archivo index.tsx, debera quedar asi:

Introduccion

Ya pregunte si se puede escribir sobre React, asi que vamos a empezar con ello, el primer ejemplo sera el clasico hello world pero con Typescript. Tampoco me agrada demasiado la idea de usar Typescript, de hecho sigo pensando que es mejor usar javascript normal, pero tampoco quiero caer en una postura de no usar typescript solo por puro gusto de javascript. Entonces haremos una serie de pequenas no tan pequenas aplicaciones en React con Typescript o al reves en Typescript con React.

Tambien incluiremos servicios Rest basicos sin seguridad ni monitoreo hechos en Kotlin, por ultimo, si nos da tiempo metemos algo de Kafka.

Ambiente de desarrollo

Para poder realizar los ejemplos vamos a necesitar Nodejs instalado, de preferencia una version lts mayor o igual a 6.

Dependencias

• Parcel: Esta herramienta es un bundler que nos permite transpilar jsx, es6, ts y otros lenguajes a ES5, es un competidor de Webpack, lo usaremos porque no vamos a realizar configuraciones muy complicadas, nos queremos enfocar al desarrollo

Hace poco estuve en un curso relativo a Kafka, la verdad la capacidad que tiene esa herramienta es muy fuerte, sobre todo cuando aplicamos programación funcional en medio. Aunque este post no es relativo a Kafka, si lo es relativo a la programación funcional y será bastante sencillo.

Haremos un ejemplo de curry f(x)(y) = f(x, y) en tres lenguajes Kotlin, Typescript y Javascript.

Kotlin

Typescript

Javascript

Conclusiones