Lite om grunderna till reaktiv programmering

Reaktiv programmering, heter det ens det på svenska? Jag menar alltså det som på engelska heter Reactive programming som är någon motsats till Passive programming. Nu undrar ni säkert vad f*n jag snackar om. Jag ska försöka förklara det jag lärt mig hittills, jag har bara börja skrapa på ytan av detta ämne.

Det finns många olika dåliga beskrivningar till reaktiv programmering som jag läst och helt ärligt inte förstod mycket av, men det var en beskrivning som fastnade och jag tyckte var mycket pedagogisk. Beskrivningen är säkert mycket förenklad och missar säkert några av koncepten som reaktiv programmering innebär, men vi kör med den ändå. Vi måste ju börja någonstans.


Vi börjar med att skapa ett exempel som vi kan förklara utifrån. Vi kör därför med en klassisk e-handel och det enda vi behöver bry oss om nu är vår kundkorg och kassan där vi ska betala för varorna. Jag visar först hur det kan se ut när man lägger till en produkt i sin kundkorg och vår totalsumma att betala ska uppdateras i kassan.

addProduct(product){
this.products.push(product);
Register.updateInvoice(this.products);
}

Okej. Inte ett så avancerat exempel, från kundkorgen. Vi klickar på knappen för att lägga till en produkt i korgen, koden körs. Det första som händer är att produkten läggs in i en array tillsammans med alla andra produkter i korgen och sedan anropar vi kassan för att uppdatera vår totalsumma. Om vi nu gör samma sak fast på ett reaktivt sätt.

I vår kundkorg:

addProduct(product){
this.products.push(product);
observable.next(this.products);
}

I kassan:

updateInvoice(products){
//Gör grejer.
}
observable.subscribe((products) => this.updateInvoice(products));

I det här fallet så har vi skapat en observable (vi behöver inte gå in på vad det är) i kundkorgen som sedan kassan lyssnar på. Nyckeln här är att vi endast lyssnar på ett event från kundkorgen om den ändras, och om den gör det så uppdaterar vi kassan.

Fördelen med denna approach är att vi i koden för kassan har full koll på vad som påverkar den istället för i det första exemplet där kassans uppdateringsfunktion anropas utifrån. Det kanske kan uppfattas som trivialt i det här enkla exemplet, men tänk er en mycket mer komplex applikation där kassans saldo kan påverkas av många olika fler faktorer än bara om man lägger till produkter. Kanske påverkar val av valuta, kanske skriver man in en rabattkod någonstans. I det fallet skulle kassans funktion updateInvoice anropas från många fler ställen som egentligen inte har med kassan att göra och det blir svårt att underhålla. Till slut vet man inte vad som påverkar vad. Det till skillnad från att man med ett reaktivt sätt samlar all kod som påverkar kassan på samma ställe och där ser vilka event som påverkar innehållet.

Man skulle kunna beskriva skillnaden mellan dessa två förhållningssätt med vad man väljer att ha publikt. I det passiva förhållningssättet måste funktionen för updateInvoice vara publik då den anropas utifrån. I det reaktiva förhållningssättet kan updateInvoice hållas privat, men alla event som påverkar kassan måste exponeras så att de entiteter som påverkas kan prenumerera på dem.


Det var lite om grunderna till reaktiv programmering. Lite teori, som säkert visar sig vara helt feltolkat från min sida när vi fördjupar oss i ämnet. Men som sagt, vi måste börja någonstans. Framöver så kommer vi förutom att grotta ned oss ännu mer, även kika lite mer praktiskt på ämnet. Exempelvis vilka bibliotek som finns att använda för oss Javascript-utvecklare. Spännande va?!