I started my career as an Angular Developer and moved on to use React JS. I'm just curious as to how is the state of the application maintained efficiently using jQuery or similar libraries. I've had to code a certain dashboard component in jQuery in one of the legacy code bases, and it was hard to maintain the state, and it felt so wrong.
Here's the situation. I've to call an API which gets 2 date arrays, I've to populate two dropdowns using that date and after I've to make an AJAX call on the click of a button. Meanwhile I also have to check both the dates are selected in the onClick event listener.
I just want to know the best practices of state (object and scope) management in jQuery for a mildly complicated scenario.
Well, I'm not a js expert but first of all i think separate concepts with ES6 it's interesting, you can make different classes that hold different behaviors and make communication between them more easily.
Many codebases are hard to maintain after a while if there were no architect or any engineer keeping architecture up-to-date and maintainable.
Another problem was because many old apps were simple, nobody used any architecture patterns with jQuery and real software engineers weren't using JavaScript. JS was written by people without experience in software engineering and architecture, thus all the problems. Later when JS side became much complicated many engineers came into JS and that's why we started seeing all those frameworks. With jQuery there was just a single large file with single DOM ready, however, with the right mind and the help of right libraries and jQuery plugins there was a maintainable MVC and component-based architecture already.
What is popular to call a "state" today is just a same data layer and each component should be independent. Nothing changed since times much older then jQuery. There were just many bad code examples with large functions and global variables.
What you can and should do today even with legacy code - is to use Vanilla JS and same component-based architecture. Business logic defines your components and they might be just functions or plain objects.
Create a single object and write as many small simple methods as you need:
Since It is very hard to understand what exactly you were trying to build, I will provide very simple code example:
// data layer should be always separated from the business layer // ideally it should be a Model which is based on the core Api/Ajax/HTTP object const Api = { getDates() { // ajax to return Promise } }; // at the beginning it might be 1 object, // later if there will be more logic - it can be divided into: , // events, presentation/UI, core business/controller logic, localization, configuration, etc const Component = { init(element) { element._state = {}; // here you can store you data/state related only to this element this.addEvents(element); // ... }, addEvents(element) { // all element.addEventListener() you need on component init }, populateDropdowns(dropdowns, data) { // ... }, // ... }; document.addEventListener('DOMContentLoaded', () => { [].forEach.call(document.getElementsByTagName('mycomponent'), component => { Component.init(component); }); });Best practices are: