Ways to Write JQuery Reactively
Even it’s 2021 now, the three pillars of frontend framework has almost dominate the frontend development tool chain. But there are still some companies or people still stick with JQuery for some reasons.
If you ever use JQuery to build your frontend, you might had ran into this issue before.
In the above gist shows an example when using JQuery to hide some HTML element and the same logic is duplicate in the same file. This will make the code become header to maintain as the codebase grows bigger. You’ll need to search all of the code to modify this piece of logic.
Can we make this better?
The answer is YES.
We can extract this logic to a function and reuse it like the code below.
In this version we improve the make our code more maintainable by putting the show HTML element logic together. But how we still need to call our toggleShowSomeElement function when to show/hide the element.
Can we make this even better?
The answer is YES.
The UI = fn(state)
The modern frontend frameworks think the UI as a function of state. Which means UI should reflect the state, if the state changed then UI will change.
And some of these frameworks uses a reactive programing pattern to achieve this. When the state changes it will notify the UI to update itself.
To put this functionality into our JQuery code will do things below:
- Use JQuery built in functions to implement pub-sub pattern. Enable our UI to update itself when state changes.
- Add some custom HTML attribute to bind state into HTML elements.
- Bind all the event listener to together.
- Initialize the UI with initial state.
This is how the code will work when we finish all the jobs. By doing this we can just change the state to update the UI by subscribing the state change.
Let’s implement this functionality step by step:
1. Use JQuery built in functions to implement pub-sub pattern. Enable our UI to update itself when state changes.
In this section, we’ll use leverage the .trigger() function in JQuery to publish a event when any state changes. We’ll make a function called updateState.
2. Add some custom HTML attribute to bind state into HTML elements.
In this html file, we add some custom HTML attribute:
- data-key: The key of state, we’ll bind the state with element using this.
- data-text: The HMTL element with this attribute will update the value/text when the state changes.
- data-class + data-toggle: The data-class attribute will let our code know we want to toggle class on it, and the data-toggle will define the classes you want to toggle when the state is true/false;
- data-attr+ data-toggle: Just like the above one, The data-attr attribute will let our code know we want to toggle attribute on it, and the data-toggle will define the attribute/attributes you want to toggle when the state is true/false;
We finish the Html part, and let’s add some logic to update the UI with these HTML attributes !
In this section, we’ll receive key and value of the state we’ve updated and then we update the state on to the corresponding HTML element we marked with custom attribute.
3. Bind all the event listener to together.
In this section, we will bind button events and add subscribe to the state change using $(state).on() and attach the callback function updateElement() to it to make sure the UI will update after state changes.
4. Initialize the UI with initial state.
In this section, we wrap up all the things we done in previous step by calling the init() and bindEvents() when the dom is ready(Just to make sure the element is rendered).
That’s all for writing the JQuery leveraging the concept of modern frontend framework, thanks for reading!