Renée
I joined the Renée team in March of 2021 after connecting with a now great friend of mine about a Kingdom vision he and a small team were building. I've had the pleasure of working alongside enterprise level engineers to build software that we believe is leveraging technology for the Kingdom. My first task was to introduce a reactive javascript layer to the UI that would play nice with the Go templates that powered all of the views. There are quite a few layers to Renée beweteen microservices and a admin console that user's interact with. The majority of my time is spent optimizing and enahcing the admin for users. Let's dive into how Vue is playing nice with Go...
Type
Volunteer
All the Tech I've Worked With
Vue
Gulp
Docker
Go
CoreUi
ES6+
Webpack
Marketing Landing Page
Link
Details
The admin console was (and still partially is) powered by Go for the backend and Go tempaltes for the frontend. Using Go templates for the UI layer can be quite constly from an intial load standpoint when there are defined variables that contain large datasets. These varaibles are used to generate server side HTML and serve that to the user. On top of the performance issue, this type of UI always requires native JavaScript as the solution for any user event interaction, not taking advantage of the wonderful world of reactive JavaScript frameworks like React or Vue (yes, I'm very passionate and opinionated to the two). So, how do you introduce a reactive Javascript framework to a Go template? Great question. Since this start up isn't funded yet, the engineering team volunteers. This limits the amount of time each engineer can work on the platform. With this in mind, I couldn't rearchitect the UI layer so I wrote a reusable class that would instantiate and attach a Vue instance to a given elment id. For example, on the dashboard template, I added an id labeled 'dashboard' to the outer most div element and I would invoke the reusable Vue class on page load via a native .js file. This would give me access to the Vue options API within the HTML tree nested within the div that contained the 'dashboard' id. I've slowly rewritten a majority of the application to use this architecture but unfortunately some of the views still utilize Go varaibles within the templates.
My Notable Contributions
In addition to the reusable Vue architecture, I've lead a huge effort to re-write the forms used across the console to be significantly more user friendly as well as a more simple yet elegant design. There is a laundry technical complexities with interesting solutions that I've worked on but given the NDA I agreed to, I can't share much more at the moment.
Problems and Lessons Learned
JQuery and Vue don't work well together. After introducing Vue to the frontend, there were a handful of areas that were no longer functional because of a conflict between JQuery's $(document).ready() function and Vue's created lifecycle hook. These conflicts were resolved fairly quickly after realzing I could instantiate any JQuery code within Vue's $nextTick() helper inside Vue's 'mounted' lifecycle hook