Lemoncode blog


Artículos, ideas, desarrollos, notas y mucho más

React y D3.js, trabajando juntos I - Introducción

Esta serie de dos posts viene inspirada por la charla que impartimos en el Open South Code 2018 sobre la integración entre React y D3.js, cuyo material puedes encontrar aqui: fjcalzado.surge.sh. En esta primera parte haremos un breve repaso de ambas librerías, centrándonos principalmente en la gestión del DOM. Veremos conceptos interesantes y concluiremos con la problemática a la hora de trabajar con ambos frameworks. En la segunda parte, explicaremos las distintas soluciones disponibles y las ilustraremos con código y ejemplos. ¡Vamos allá!

react_d3_love.png

Tanto React como D3.js son excelentes librerias, utilizadas extensamente en innumerables proyectos, que nos proporcionan flexibilidad y potencia para acometer desarrollos complejos en el mundo front-end. Es cierto que su propósito difiere en términos generales: mientras que React está enfocado a la creación de interfaces de usuario basados en componentes, D3.js se especializa en la visualización interactiva de datos. No obstante, ambos frameworks en esencia, nos ayudan en la engorrosa tarea de gestionar eficientemente el DOM, y se sirven de mecanismos parecidos para conseguirlo

React

La popularidad de React es bien merecida: nos permite construir interfaces de usuario muy eficientes y fácilmente depurables mediante la composición de componentes reusables. No vamos a entrar en las tripas de esta librería pero si que nos pararemos a entender una de las claves de su éxito: el DOM virtual.

Cada componente de React monitoriza su estado y propiedades para poder renderizarse a si mismo si fuese necesario. Además, lo hará de forma eficiente, contribuyendo al rendimiento de la aplicación. Un cambio en el estado o propiedades de un componente disparará una actualización del DOM. Sin embargo, ésta no se aplicará sobre el DOM real sino sobre una representación del mismo en memoria, denominada DOM virtual. Ten en cuenta que una actualización del DOM puede ser una operación costosa mientras que un cambio en memoria lo será mucho menos.

De este modo, los cambios de cada uno de los componentes van a parar a memoria, al DOM virtual. Puedes visualizar este DOM virtual como si de un buffer o borrador se tratara. Es una potente herramienta que actúa como capa intermedia recolectando cambios con un mínimo impacto en el rendimiento. Posteriormente, en un proceso llamado reconciliación, un algoritmo diff compara el estado del DOM virtual con una versión anterior del mismo para extraer de este modo la delta (o diferencia). Esta delta no es otra cosa que el conjunto de cambios realmente significativos que deberán ser finalmente aplicados sobre el DOM real. Este proceso mantiene sincronizados el DOM virtual con el real empleando para ello el mínimo número de operaciones posible y, por tanto, el rendimiento se optimiza en gran medida.

dom_virtual.png

En definitiva, React nos abstrae de realizar cambios manuales, manipulaciones o manejo de eventos del DOM real. Es el DOM virtual quien recibe todos estos cambios, pero actúa de parapeto o filtro, evitando que todos los cambios disparados por los componentes promocionen inmediatamente al DOM real. En lugar de eso los reconcilia, y una vez calculado el siguiente estado con los mínimos cambios necesarios, los propaga de manera efectiva y eficiente al DOM real en un proceso transparente a nosotros.

D3.js

D3.js es una librería para la creación y manipulación de interfaces que representan datos, o dicho de otro modo, para la visualización interactiva de datos. De hecho, su siglas lo ponen de manifiesto: Data-Driven Documents. Nos provee de las herramientas necesarias para crear visualizaciones o gráficos, basados principalmente en SVG y con énfasis en la representacion en tiempo real, transiciones, animaciones, etc.

La magia de D3.js, y parte del secreto de su éxito, recae en el concepto de las uniones o data joins. Con D3.js establecemos literalmente un vínculo entre los datos que queremos representar y los elementos que se usarán para representarlos. Para entender esto, hagamos un ejercicio. Imagina que tenemos un listado con datos sobre paises, como por ejemplo el número de habitantes y otros datos de interés:

countries_table.png

Hagamos una representación mental de estos datos. ¿Lo intentas? Imagina un lienzo en blanco, donde cada país se representa como un círculo. Además, el tamaño de dicho círculo será proporcional a la población: un país pequeño será representado como un círculo pequeño, un circulo grande indicará un país muy poblado. El color del círculo dependerá del continente al que pertenezca el país. Finalmente, la posición horizontal de cada círculo en el gráfico vendrá determinada por su poder adquisitivo (los países más ricos a la derecha, los más pobres a la izquierda) mientras que la posición vertical dependerá de su esperanza de vida (arriba los más longevos, abajo los menos afortunados). El resultado sería algo parecido a esto:

countries_graph.png

Si has seguido el ejercicio, habrás tenido que hacer una asociación mental gracias a la cual, cada fila de la tabla (cada país) era convertido en un círculo. Además, las propiedades de ese círculo quedaban vinculadas directamente a los datos de la tabla. Esto es exactamente lo que hace D3.js por ti. Establece un enlace entre cada fila de la tabla (denominada datum en la jerga D3) y el nodo SVG que lo representa (llamado elemento).

Selecciones

La selección es el mecanismo por el que se registran y establecen las uniones (o data joins) entre datos y elementos. Mediante una selección, indicamos a D3.js con que datos queremos vincular los elementos seleccionados. De este modo, D3.js siempre tiene acceso a los datos que generaron cada uno de los elementos que vemos en nuestro gráfico. Ante un hipotético cambio en estos datos (datos en tiempo real), D3.js comparará los nuevos datos con los ya vinculados y de este modo puede decidir cómo actuar según 3 posibles escenarios:

  • Datos para los que todavía no tenemos elemento asociado. Habrá que crear un elemento nuevo y vincularlo. A este grupo se le conoce como enter.
  • Datos que se actualizan y provocan que el elemento asociado también deba ser actualizado. A este grupo se le llama update.
  • Datos que desaparecen, no los recibimos más. Por tanto su elemento vinculado deberá ser eliminado (en la mayoría de los casos es lo deseable aunque no tiene por que ser asi siempre). Grupo llamado exit.

En nuestro ejemplo anterior, necesitamos asociar cada nueva fila de la tabla (que representa un país) a un círculo. Por tanto, aplicaremos una selección sobre el grupo enter para crear un círculo por cada datum de entrada y aplicarle un color, un tamaño y una posición.

const paises = [...];
const circulos = svg.selectAll("circle")
  .data(paises)
  .enter()
  .append("circle")
    .attr("cx", pais => xScale(pais.poderAdquisitivo))
    .attr("cy", pais => yScale(pais.esperanzaVida))
    .attr("r", pais => areaScale(pais.habitantes))
    .attr("fill", pais => color(pais.continente));

D3.js mantendrá viva esta correspondencia entre elementos y datos y si prevemos que los datos puedan cambiar, podemos hacer que los círculos asociados se actualicen (implementando el patrón update) o eliminar aquellos que queden huérfanos (mediante el patrón exit).

Es decir, podemos visualizar datos en tiempo real, haciendo que los elementos del gráfico reaccionen ante cualquier modificación en los datos. O dicho al revés, manteniendo el UI sincronizado con los datos. ¿Esto nos suena verdad? Por supuesto, ¡React hace lo mismo! Y es que, en la práctica, las uniones de datos en D3.js sirven como algoritmo diff entre los nuevos datos y los anteriores y permiten actuar sobre el DOM mutándolo con cierto grado de eficiencia de acuerdo a los patrones enterupdate y exit.

Pugna por el DOM

Como hemos visto en los apartados anteriores, tanto React como D3.js comparten una filosofía común: "si tu me proporcionas el estado, yo mantendré el DOM actualizado por ti". React lo hará mediante el DOM virtual y la reconciliación. D3.js gracias a los vínculos entre datos y elementos. Ambos, en el fondo, toman el control del DOM real con el propósito de ayudar al desarrollador restando complejidad.

Pero, ¿y si combinamos las dos librerias? ¿qué sucederá? Es evidente que entraremos en conflicto, habrá una pugna por el DOM. En el caso concreto de React, todos los cambios deben seguir su mecanismo habitual por el que se aplican al DOM virtual y posteriormente se reconcilian. De no ser así, suponiendo por ejemplo una mutación por parte de D3.js sobre un nodo controlado por React, acabaríamos corrompiendo la sincronización que React mantiene entre su DOM virtual y real. Los resultados son imprevisibles, pero muy probablemente no deseados. Como regla general, debemos evitar que React y D3.js compartan el control del DOM.

Continuará ...

Comment

Server Side Rendering I - Conceptos

El otro día en el Máster Front End Lemoncoders, Eirik Rasmussen nos dió una sesión muy interesante sobre server side rendering y como implementarlo usando React y Next. Eso nos ha animado a escribir una serie de posts en la que explicamos como funciona esto de manera detallada.

En este primer artículo de la serie vamos a centrarnos en  es explicar bien el problema que viene a resolver "Server side rendering" así como conceptos de base, en siguientes entrega nos meteremos de lleno en una implementación utilizando Next y React.

2 Comments

Webpack: poniendo a dieta tus bundles (II)

En la entrega anterior vimos como podíamos usar webpack-bundle-analyzer para ver que librerías de terceros hacían que nuestro "bundle" estuviera gordo.

En esta entrega vamos a ver como habilitar treeshaking en esas librerías y reducir su tamaño de forma considerable. Como ejemplo trabajaremos con una librería de componentes popular: material_ui, crearemos un aplicacíon simple y veremos como reducimos el espacio que ocupa esta librería en nuestra aplicación, pasaremos de un peso de 960 Kb a 56 Kb.

Comment

Webpack: poniendo a dieta tus bundles

Abrimos una serie de posts en lo que nos centramos en aligerar el peso de nuestros bundles, en este primer post os presentamos una herramienta que os ayudará a identificar que paquetes son culpables del "sobrepeso" de tu aplicación.

Comment

Curso NodeJS por Jaime Salas - 70% Descuento

Hace unos meses ofrecimos un descuentazo para el curso de .net core, ahora le toca al de nodejs, es hora de ponerte al día con la grabación del curso “Creación de API’s REST con nodejs, express, mongoose, mongo” de 21 horas de duración.

El temario del curso:

  1. Comenzar con node
  2. Modulos
  3. Modelo asíncrono
  4. Eventos.
  5. Streams.
  6. Sistema local.
  7. Aproximacion Web.
  8. Mongo.
  9. Mongoose.
  10. Rest Api con Express.

¿Qué tal está este curso?

Te pasamos la opinión de un alumno (Jorge Carballo):

"Esta formación me encanto. Había estado tocando algo de nodejs y con el curso he aprendido mucho y he descubierto que es una tecnología muy interesante. Me ha dado pie a investigar y practicar más sobre nodejs."

Hemos publicado una oferta especial limitada a los primeros 50 primeros que adquiráis este curso. El precio normal es de 150 €, presentando el cupón que te adjuntamos, esté te saldría por 45 €.

Instrucciones para canjear este cupón:

Pincha en comprar el curso de nodejs.

  • Regístrate como usuario (te puedes registrar también con linkedin).

  • En el proceso de compra antes de meter tu tarjeta de crédito, mira en la parte superior izquierda encontrarás un enlace para introducir un cupón de descuento.

cupon_nodejs.png
  • Mete este cupón:   
    nodejsnewsletter34hnc3
  • Con eso ya te sale el curso por sólo 45 € y ya puedes introducir tu tarjeta de crédito para realizar el pago.

Comment

Curso .net core por Eduard Tomás 70% de descuento

Hace unos días que publicamos una oferta para los subscriptores de nuestra newsletter, la grabación de un curso bien completo de .net core (21 horas de duración), impartido por nada más y nada menos que Eduard Tomás (MVP ASP .net), con un 70% de descuento (el curso tiene un coste de 150 €, con el cupón se te quedaría en 45 €).

Está oferta ha tenido una muy buena acogida, hemos decidido abrirla a la comunidad a los 50 primeros que adquieran el curso.

¿ Qué tal está el curso? Te pasamos la opinión de un alumno que lo cursó

"En este curso de .NET Core 2.0 de los chicos de Lemoncode, el maestro en la materia Eduard Tomás da un repaso magnifico de la tecnología y no contento con ello, nos aporta como añadido conocimientos de C#, inyección de dependencias, entity framework core, métodos de extensión, etc.

Sin conocer .NET Core me ha aportado muchísimo y he salido con ganas de más.

Eduard es un gran conocedor de la materia, muy didáctico y comunicador lo que hace una combinación perfecta para sumergirte en la materia.

Recomendado 100%."

Antonio Tobajas (Alumno curso .net core)

¿ Qué temario tiene? Lo puedes consultar en este enlace: https://lemoncode.net/creacion-de-rest-apis-con-net-core

¿ Tienes fecha límite para verlo? No, lo puedes ver cuando y cuantas veces quieras, es más te puedes bajar el contenido a tu disco duro.

Instrucciones para obtener el descuento:

cupon.png

 

  • Mete este cupón:

netcorenewsletter89hp765

  • Con este cupón te sale el curso por sólo 45 € y ya puedes introducir tu tarjeta de crédito para realizar el pago.

 

 

3 Comments

Javascript Asíncrono: La guía definitiva

La asincronía es uno de los pilares fundamentales de Javascript. ¿Nunca has llegado a entender en profundidad como funciona? ¿Crees que es magia lo que sucede al utilizar promesas? Entra en esta guía definitiva y aprende de una vez por todas como funciona la asincronía en Javascript. Su comprensión mejorará en gran medida tu código y te ayudará a escribir mejores aplicaciones. 

2 Comments

Máster Front End Lemoncode - Beca Yes We Tech

En colaboración con YesWeTech ofrecemos nuestra primera beca de estudios para ayudar aportar nuestro granito de arena a conseguir que haya más diversidad e igualdad de oportunidades en esta profesión. ¿En que consiste? En cubrir el 100% del coste del Máster Front End Online Lemoncode a un alumno  que pertenezca a una minoría con baja representación en el sector profesional. Ofrecemos una plaza, y para ello hemos resuelto unas bases para poder inscribiros y seleccionar el aspirante.

Comment

Git y Visual Studio Code

En este post vamos a aprender manejarnos con el cliente de Git de Visual Studio Code, para ello nos clonaremos un repo de Github que contiene una aplicación web del tipo "Hola Mundo", e iremos trabajando con ella. Cada paso irá acompañado de gifs animados que nos harán más facil aprender a como usar esta herramienta.

4 Comments

Bolsa de trabajo Máster Front End Online Lemoncode

El Máster Front End Lemoncode va ya por su cuarta edición, desde que arrancamos teníamos claro que debía tener un enfoque 100% orientado al mercado laboral, y que los alumnos crecieran profesionalmente: tanto en capacitación en sus puestos de trabajo, así como prepararlos para probar nuevas aventuras. Fruto de esta actitud, hemos mantenido siempre contactos con empresas del sector y puesto en contacto oferta con demanda.

Como novedad en esta cuarta edición formalizamos dicha cooperación, hemos abierto una bolsa de trabajo, con empresas interesadas en contratar a estudiantes del Máster Lemoncode.

Comment

Introducción a la programación funcional en JavaScript

Seguro que recientemente has oído y leído sobre este paradigma de programación que está atrayendo a muchos seguidores. En este post podrás aprender en qué consiste y ver algunos ejemplos que seguro te harán reflexionar sobre tu manera de programar y quizás te animen a aplicarlo en algún proyecto. 

Comment

Lodash/fp set - flow

En este post aprenderás las maravillas que nos trae lodash/fp (fp viene de functional programming, genial para asegurar inmutabilidad). Lo mostramos mediante ejemplos con una guía paso a paso y usando CodePen.

Comment

JavaScript ES6 no más bucles FOR

Cuando trabajamos con array es muy normal que llenemos nuestro código de bucles, que si...

“Mirar si este elemento está en el array...”

“Mirar si la suma de ventas es mayor de X para ofrecer gastos envío cero...”

“Sacar la media de ventas anuales...”

“Si uno de los indicadores está en rojo dispara la alarma...”

“Cerrar el pedido cuando todos los artículos hayan sido enviados...”

 

¿Qué solemos hacer JavaScript ES5? Tirar de bucle y ‘palante’, ¿Que desventajas tiene esto?

- El código es menos legible.

- Es más fácil que nos equivoquemos.

- Estamos repitiendo una y otra vez trozos de código parecidos.

Otra opción era utilizar una librería como lodash, pero... ¿no hay forma de hacer lo mismo sin tener que usar librerías de terceros? La respuesta es sí, con JavaScript ES6 tenemos un montón de métodos de ayuda que están muy bien, algunos son bien conocidos (map, reduce...) y otros no tanto, en este post damos un buen repaso a los más importantes para ayudarte a que tu código sea más fácil de leer y mantener.

7 Comments

¿Por qué Redux?

Cada X años un grupo de desarrolladores, cogen piezas y buenas prácticas de aquí y allá y montan un patrón que cambia las reglas del juego. En esta ocasión le toca a Redux revolucionar el mundo del desarrollo ¿Pero que tiene este patrón de especial que no tenga MVC, MVV, MV*^...? En este artículo vamos a ver sus puntos fuertes.

Comment

Novedades Máster Front End Lemoncode tercera edicion

En unos meses arranca la tercera edición del Máster Front-End Lemoncode, al igual que enla segunda edición, toca revisar temario y actualizarlo. En este post os presentamos las principales novedades.

En cuanto a materia:

  • Módulo Layout:
    • En la pasada edición, introdujimos CSS Grid. Este año ganará más peso en el temario.
    • UI Design: la sesión de introducción a UX fue un éxito, este año hemos decidido añadir una de UI design de la mano de Antonio Benitez.
  • Módulo Frameworks:
    • Angular Redux (ngrx / store): además de las bases y las pruebas unitarías, añadimos una sesión de integración de redux con Angular 4.
  • Módulo comunicación servidor:
    • WebSockets.

Y como gran novedad... algo que de entrada os va a chocar... backend, ¿¡¡¡ Comooor !!!? Desde que arrancamos este Máster, hemos recibido muchas peticiones para incorporar temas de backend en el mismo. Tras darle muchas vueltas, nos hemos dado cuenta de que tenéis toda la razón, si bien un desarrollador tiende a especializarse, es bueno que tenga la visión completa de un producto (sobre todo para no cometer barrabasadas por desconocimiento). La gran pregunta que nos hacíamos, ¿cómo podíamos incluir una introducción a backend sin tocar el temario y la cantidad de horas que asignamos a la parte de Front-End? ¡Invitándoos a sendos cursos adicionales al máster!

En concreto:

  • Introducción a desarrollo de API's REST con .NET Core (ASP .NET Core, Entity Framework) 21 horas de duración.
  • Introducción a desarroolo de API's REST con Nodejs (Express + Mongoose + Mongodb) 21 horas de duración.

En cuanto a profesores:

Antonio Benitez.png

Antonio Benitez

UI Design

Diseñador visual con más de 17 años de experiencia centrados en la creación de interfaces gráficas de usuario para videojuegos, Web y aplicaciones de escritorio y móvil. Reconocimiento internacional como colaborador en el proyecto open source eMule.

 

Eduard Tomàs

ASP.NET Core

MVP en IIS/ASP.NET por parte de Microsoft, apasionado del desarrollo, la tecnología, los videojuegos, la sci-fi y por supuesto la cerveza.

 

 

¿Te apuntas?

Estas son sólo las novedades de esta edición, si quieres saber más acerca de este máster, te recomendamos estos enlaces:

Máster Front-End Lemoncode

Opiniones antiguos alumnos

Novedades segunda edición

Comment

Máster Full Stack + Front End

Hasta hace no mucho en Lemoncode ofrecíamos un máster especializado en Front End, y recibimos varias propuestas de desarrolladores que estaban interesados en tener la foto completa de como desarrollar un proyecto web de cabo a rabo, así que nos liamos la manta a la cabeza y montamos el máster Full Stack con un buen temario y un estupendo plantel de profesores (8 docentes cada uno especialista en su área).

Comment

¡Ya está bien! ¡¡ Me hago Freelance!!

Seguro que más de una vez te ha dado el “calentón” y has dicho ¡Un día me tengo que montar por mi cuenta! Es más hasta habrás buscado información aquí y allá y habrás visto que esto de ser desarrollador nos hace ser” bichos raritos” ya que no encajamos en los estándares de lo que se considera montar un negocio.

4 Comments

Máster Full Stack ¿Esto de que va?

Hace unas semanas incorporamos a nuestra oferta formativa un Máster Full Stack. Al ver este término más de uno habréis pensado:

¡Anda, esto lo he visto en un montón de ofertas de trabajo!, pero ¿en qué consiste esto exactamente? ¿es un tipo de trabajo atractivo y en el que pueda tener proyección?

En este post vamos a intentar aclararte dudas y que veas si esto del "Full Stack" está hecho para ti.

Comment