Member-only story

Reactive JQuery using Vuex design pattern

Zoltan Varadi
2 min readMay 21, 2022

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.

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Zoltan Varadi
Zoltan Varadi

Written by Zoltan Varadi

Data Scientist / full stack system engineer

Responses (1)

Write a response

Do you have a github repo of the full codebase?

Recommended from Medium

Lists

See more recommendations