Vandaag begon een beetje al een luie, grijze vrijdag. Ik had nog wat kleine issues in te halen en het werd tijd dat ik mijn werkcomputer eens opkuiste. De voorbije maanden heb ik zo goed als iedere package van de GitHub repo binnengehaald inclusief nog enkele kopieen voor tests. Tijd om wat orde op zaken te zetten.
Tijdens de middag eten we hier meestal allemaal samen. Vaak zorgt dat ook wel voor de nodige creatieve input. Je hoort waar andere mensen mee bezig zijn, krijgt wat feedback op je eigen projecten/opdracten en het belangrijkste van al: het is een beetje een break van 8 uur per dag programmeren. Deze middag werd er gepraat over het geheime project. Aangezien Electron eigenlijk niet veel meer is dan een minimale browser is het belangrijk om die "browser feeling" zoveel mogelijk weg te werken. Zo werken we met Vue om alles realtime en snappy te maken en een globale store via Vuex om de verschillende onderdelen in sync te houden met elkaar. Bijvoorbeeld wanneer iets aan het laden is in een onderdeel moet het mogelijk zijn om tussen onderdelen te wisselen en dat terug te keren naar het laadscherm op het eerste onderdeel zonder dat de staat (in dit geval de status) verloren gaat. Thank God voor Vuex dus.
Dit werkte allemaal goed en wel binnen 1 scherm maar wanneer er meerdere open vensters waren viel het al snel op dat ze niet in sync waren. Zo kon je bijvoorbeeld een server toevoegen in het ene scherm, maar die verscheen niet op het andere scherm. Aangezien dit de illusie van een volledige native desktop app een beetje brak zochten we een oplossing. Na wat discussie en een broodje ging ik aan de slag.
Mijn origineel plan was om de volledige datastore (Vuex) uit de verschillende browser windows te halen en één globale store te houden als single source of truth. Spijtig genoeg was dit niet echt haalbaar zonder een onzichtbaar browser window te openen met een nieuwe Vue instance. Plan B dan maar. Electron heeft een heel rudimentair IPC systeem (inter process communication). Spijtig genoeg werkt deze event bus enkel tussen browser window en electron process. Binnen Electron moeten alle open windows dus eerst worden bijgehouden, wanneer dan een IPC event binnenkomt wordt het doorgestuurd naar alle open vensters, behalve het venster dat het event origineel heeft gestuurd. That's it voor de event bus. Het klinkt gemakkelijk maar dat was het niet.
Nu we kunnen communiceren tussen de verschillende venster moeten we enkel nog een manier vinden om de "state" of datestore van de vensters met elkaar te synchroniseren. De hele state iedere keer als event doorsturen zou nogal veel onnodige overhead zijn, daarom schrijf ik een Vuex plugin die enkel de nieuwste mutation doorstuurt. Een mutation is een beschrijving van enkele aanpassingen aan de store, een beetje te vergelijken met event sourcing. Het laatste probleem dat ik tegenkwam was dat vensters die een mutation event ontvingen er zelf ook 1 uitstuurden met dezelfde mutation. Dit zorgde voor een exponentieel ping-pong effect maar was makkelijk op te lossen met een shouldBroadcast flag op de mutation op false te zetten.
Ondertussen is het 16u en kan ik beginnen af te ronden, altijd leuk als je op een middag iets nieuws kan leren en er onmiddelijk iets cools mee kan maken.