Aplicación de TakeUntil en PlatziBoard.

Contenido del curso

Fundamentos de programación reactiva

Introducción a la librería RxJS

Generación de Observables

Transformación con Operadores

Manejo de errores

29
Manejo de errores en RxJS
07:44 min

Peticiones HTTP con RxJS

Recomendaciones y conclusión

Bonus

35
Implementación de PlatziBoard en React
02:03 min

Despedida

36
Próximos pasos con RxJS
01:07 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:002:54

Aplicación de TakeUntil en PlatziBoard.

Curso de Programación Reactiva con RxJS

Clase 24 de 36

Clase 24 / 36

import { fromEvent, map, mergeAll, Observable, takeUntil, throttleTime } from "rxjs";

const canvas = document.querySelector("#canvas") as HTMLCanvasElement;

interface Coodinates {
	x: number,
	y: number
}

const getCanvasPosition = (positionEvent: MouseEvent): Coodinates => {

	return {
		x: positionEvent.clientX - canvas.offsetLeft,
		y: positionEvent.clientY - canvas.offsetTop,
	}
}

class Paint {

	constructor(
		public context: CanvasRenderingContext2D,
		public prevX?: number,
		public prevY?: number,
	){
		this.customizeBrush();
	}

	public updatePosition = (positionEvent: MouseEvent): void => {
		const positions = getCanvasPosition(positionEvent);

		this.prevX, this.prevY = positions.x, positions.y;
	}

	public beginDraw = (positionEvent: MouseEvent): void => {
		this.context.beginPath();
		this.updatePosition(positionEvent);
	}

	public draw = (x: number, y: number): void => {
		if (this.prevX && this.prevY) {
			this.context.moveTo(this.prevX, this.prevY);
		}

		this.context.lineTo(x, y);
		this.context.stroke();
	}

	public customizeBrush = (): void => {
		canvasContext.lineWidth = 5;
		canvasContext.strokeStyle = "white";
		canvasContext.lineJoin = "round";
		canvasContext.lineCap = "round";
	}
}

const canvasContext = canvas.getContext("2d") as CanvasRenderingContext2D;

let paint: Paint = new Paint(canvasContext);

const onMouseDown$ = fromEvent<MouseEvent>(canvas, "mousedown");
const onMouseUp$ = fromEvent<MouseEvent>(canvas, "mouseup");
const onMouseMove$ = fromEvent<MouseEvent>(canvas, "mousemove");

const startPaint$: Observable<MouseEvent> = onMouseDown$.pipe(
	map((event) => {
		paint.beginDraw(event);

		return onMouseMove$.pipe(
			throttleTime(40),
			takeUntil(onMouseUp$),
		);
	}
	),
	mergeAll(),
);

startPaint$.subscribe({
	next: event => {
		const positions = getCanvasPosition(event);

		paint.draw(positions.x, positions.y);
	}
});

import { fromEvent, map, mergeAll, Observable, takeUntil, throttleTime } from "rxjs";

const canvas = document.querySelector("#canvas") as HTMLCanvasElement;

interface Coodinates {
	x: number,
	y: number
}

const getCanvasPosition = (positionEvent: MouseEvent): Coodinates => {

	return {
		x: positionEvent.clientX - canvas.offsetLeft,
		y: positionEvent.clientY - canvas.offsetTop,
	}
}

class Paint {

	constructor(
		public context: CanvasRenderingContext2D,
		public prevX?: number,
		public prevY?: number,
	){
		this.customizeBrush();
	}

	public updatePosition = (positionEvent: MouseEvent): void => {
		const positions = getCanvasPosition(positionEvent);

		this.prevX, this.prevY = positions.x, positions.y;
	}

	public beginDraw = (positionEvent: MouseEvent): void => {
		this.context.beginPath();
		this.updatePosition(positionEvent);
	}

	public draw = (x: number, y: number): void => {
		if (this.prevX && this.prevY) {
			this.context.moveTo(this.prevX, this.prevY);
		}

		this.context.lineTo(x, y);
		this.context.stroke();
	}

	public customizeBrush = (): void => {
		canvasContext.lineWidth = 5;
		canvasContext.strokeStyle = "white";
		canvasContext.lineJoin = "round";
		canvasContext.lineCap = "round";
	}
}

const canvasContext = canvas.getContext("2d") as CanvasRenderingContext2D;

let paint: Paint = new Paint(canvasContext);

const onMouseDown$ = fromEvent<MouseEvent>(canvas, "mousedown");
const onMouseUp$ = fromEvent<MouseEvent>(canvas, "mouseup");
const onMouseMove$ = fromEvent<MouseEvent>(canvas, "mousemove");

const startPaint$: Observable<MouseEvent> = onMouseDown$.pipe(
	map((event) => {
		paint.beginDraw(event);

		return onMouseMove$.pipe(
			throttleTime(40),
			takeUntil(onMouseUp$),
		);
	}
	),
	mergeAll(),
);

startPaint$.subscribe({
	next: event => {
		const positions = getCanvasPosition(event);

		paint.draw(positions.x, positions.y);
	}
});

Fundamentos de programación reactiva

¿Por qué deberías aprender programación reactiva con RxJS?

La teoría de la programación reactiva

Introducción a la librería RxJS

Extensiones Reactivas

La idea de la reactividad

Diagrama de canicas

Generación de Observables

Creación de un Observable

Introducción al Proyecto PlatziWordle

Observables: fromEvent

Aplicación de fromEvent en PlatziWordle

Observables: Subject

Aplicación de Subject en PlatziWordle

Observables: from y of

Observables: interval y time

Finalización del Proyecto PlatziWordle

Transformación con Operadores

Introducción al Proyecto PlatziBoard

La idea de un Operador

Operadores: map, reduce y filter

Aplicación de map en PlatziBoard

Operadores de distinción

Operadores de tiempo

Operadores: mergeAll, mergeMap

Aplicación de mergeAll en PlatziBoard

Operadores: takeUntil

Aplicación de TakeUntil en PlatziBoard.

Operadores: pluck

Operadores: startWith, endWith

Finalización del Proyecto PlatziBoard

PlatziWordle con opción de reinicio

Manejo de errores

Manejo de errores en RxJS

Peticiones HTTP con RxJS

ajax

fromFetch

Recomendaciones y conclusión

Documentación de RxJS

Programación Reactiva con RxJS: Fundamentos y Operadores

Recomendaciones y futuro de RxJS

Bonus

Implementación de PlatziBoard en React

Despedida

Próximos pasos con RxJS

Aplicación de TakeUntil en PlatziBoard.