Archivos para las entradas con etiqueta: angular

Pues me encuentro en fase de pensar substituir unos websockets que tenemos por server-sent events (SSE). Lo utilizamos sólo para recibir eventos, con lo que para nuestro caso de uso nos podemos olvidar de la bidireccionalidad que ofrece el websocket.

Si alguien se encuentra en un caso similar, puede ver el código fuente en este enlace.

El ejemplo se compone de tres piezas:

API Node.js

Hacer estas cosas en Node.js me encanta por su sencillez, y no tener necesidad de importar ninguna dependencia externa ni nada. Si no fuera una PoC el código sería hasta más bonito. Esta api simplemente abre un stream de datos, donde se envía un número aleatorio cada segundo (uno distinto para cada request), siempre y cuando la petición esté abierta.

Cliente Angular

Una sencilla aplicación creada con el CLI de Angular.

Dispone cuatro componentes iguales que se suscriben a los eventos enviados por la API Node.js. El EventSource se crea en la primera suscripción, y se cierra cuando ya no hay más observers. Podemos ver cómo se ha impementado en este servicio.

API Gateway

Realizado con Spring Cloud Gateway, utiliza el RouteLocatorBuilder. para mapear las peticiones contra el servicio Node.js (ruta /sse) o contra el cliente web (ruta /*).

Y bueno, el ejemplo funcionando tiene esta pinta.

sse.gif

Recomiendo descargarlo y trastear con él. Incluye un docker-compose.yml para que sea más fácil montarlo.

¡Ah! Y para seguir cacharreando, node y java utilizan las imágenes distroless de Google.

Quiero hacer también otra versión en que los SSE se emitan desde un proyecto Spring Boot, pero es que es taaan fácil hacer esto con Node…

Cuando estén las dos, quiero hacer una versión para utilizarlo en conjunción con Protocol Buffers, que también venimos usándolo, aunque sólo con JavaScript. Así veremos su uso en varios lenguajes.

Anuncios

El otro día estuve haciendo un sencillo editor de markdown para una formación de Angular.

Aunque está disponible en Github Pages, también hay una imagen de Docker con una versión de la aplicación servida a través de un nginx.

Dado que no es una aplicación universal, una vez construida la aplicación realmente se trata de contenidos estáticos. Así que para servirlos no necesito node.js ni nada que se le parezca. Es por ello que la imagen de Docker se genera a través de un proceso de construcción multi-etapa.

En la primera de ellas, el CLI de Angular genera un entregable de producción.

En la segunda, utilizamos nginx para servir el contenido generado previamente.

Las construcciones multi-etapa son muy útiles, porque podemos necesitar unos recursos para construir, y otros para servir, como es el caso que se presenta aquí. Además, nos eliminamos muchas etapas intermedias (recordemos que cada RUN engorda nuestra imagen un poquito más), consiguiendo así que nuestras imágenes “pesen” menos.

I’m doing a personal project that uses ionic framework, firestore and part of the @ngrx platform. One of de decisions I’ve made is to use Effects to perform navigation.

On that use case, it’s useless for an effect to dispatch an action.
Leer el resto de esta entrada »

Recientemente leí este artículo de mi buen amigo Norman Coloma.

En él, introduce una mejora en el uso de validadores asíncronos con respecto a muchos de los ejemplos que verás por internet, llevándose su lógica a un servicio externo.

Aún así, y tras hablarlo con él, vimos que ese componente era demasiado listo:

  • ¿Por qué saber de servicios externos?
  • ¿Por qué saber de controles abstractos?
  • ¿Por qué hacer ese bind a la hora de validar?
  • ¿Por qué no introducir un validador asíncrono de una manera tan fácil como hacemos con los síncronos?

Leer el resto de esta entrada »

Estoy aprovechando un pequeño proyecto personal para profundizar un poco más en la gestión del estado de una aplicación con @ngrx/store. Uno de los casos de uso que incluye es el registro de un usuario, para el que he optado por hacer un wizard.
Leer el resto de esta entrada »

Que un componente acceda a su componente padre en Angular es más fácil de lo que parece.
Leer el resto de esta entrada »

Pues ya tenemos entre nosotros la nueva major version de Angular desde hace un par de semanas. Alguno se ha llevado las manos a la cabeza pensando que íbamos a tener que cambiar toda nuestra base de código a la nueva versión. A mi me ha pasado también con la librería asb-dnd, de la que ya se escribió con anterioridad, y del que ya se hizo un refactor para adaptar a Angular Universal.
Ahora, cerraremos la trilogía adaptando la librería a la última versión de Angular (4.0.1 en el momento de escribir estas líneas). Para ello, podemos hacer dos cosas. Veamos pues cuáles son.
Leer el resto de esta entrada »

El otro día me estaba preguntando cómo hacer para enviar cabeceras de autenticación con Angular en todas mis peticiones HTTP. En AngularJS lo resolvía fácilmente con un interceptor, pero aquí ya no tenemos de eso. Leer el resto de esta entrada »

La semana pasada creé un par de directivas para drag&drop en Angular por dos motivos:

  • Pienso que resuelve un caso de uso bastante útil, aunque muy general.
  • Quería ver cómo funciona la subida a npm.

Leer el resto de esta entrada »

Tras una jornada navideño-vacacional, la apertura de la tienda de pegatinas y el inicio del taller de Angular de la UA… ¡Volvemos a la carga! Hoy he realizado un par de pruebas sencillas para comprender las dos estrategias de detección de cambios ofrecidas por Angular. Leer el resto de esta entrada »

A %d blogueros les gusta esto: