Member-only story
Reactive JQuery using Vuex design pattern
I recently came across a project where I had to work with limited / legacy tools and frameworks. In particular, I had to build a dynamic web app frontend using only JQuery and Bootstrap.
Modern frameworks like React or Vue take care of state management (Model layer of UI), as well as passing data to our components and handling UI events while applying business logic — the Presenter layer. Non of these are included in JQuery, so it’s relatively easy to end up with a huge mess. JQuery simply manipulates the DOM, no more no less. I ended up solving this problem by applying a design pattern similar to Vuex.
Here is what this demo looks like:
Here is the code for those who want to jump right in:
State
This is where we save the state of our page. It’s worth noting that all data which can be computed from the state is excluded.