Låt oss zooma ut lite och gå tillbaka till början av projektet.
I research-stadiet var inte att rendera React-komponenter i
Angular-appen det enda alternativet som övervägdes. Att börja
från scratch med en helt ny React-app och helt enkelt bygga
systemen parallellt uteslöts tidigt eftersom CleverApps är ett
omfattande system med många vyer. Det skulle ta lång tid och
innebära dubbelt underhåll - med andra ord, stor risk att
misslyckas. Vi behövde börja smått och bygga på mer
inkrementellt. Ett annat sätt skulle kunna vara att bygga en
helt ny React-app och helt enkelt låta den rendera delar av en
sida. Komplexiteten i den varianten ligger i dubbel hosting,
latensproblem, state management och mer därtill.
Av en slump fick vi kontakt med gamla kollegor som gjort en
liknande resa med sitt legacy-system och fick en introduktion i
hur dom hade löst det genom att bygga en slags bro mellan
Angular och React. Den översätter React-koden till ett format
som kan renderas i Angular. Kommunikationen mellan Angular och
React sker via events. Vi använder npm-paketet
ste-simple-events och på så sätt kan Angular-appen subscribea på events som
React-appen publishar och vice versa.
Grunden är satt och det är fritt fram för CleverApps att bygga
nya features och börja beta av och ersätta dom gamla vyerna med
nya fräscha React-komponenter. Nu är det viktigt att ändra
arbetssätt och att låta samtliga utvecklare på företaget doppa
fötterna och bli bekväma med det här nya sättet att arbeta med
frontend. Och så småningom kommer förhoppningsvis dagen då
AngularJS kan ersättas helt med en React.