003-ADR-Handling-DOM-Manipulation-in-Bigfoot

[shouhardik]

Handling DOM Manipulation in Bigfoot

Context and Problem Statement

In the previous prototype, we developed on Bigfoot, we were using Vanilla JS for DOM Manipulation. Bigfoot uses jQuery for DOM manipulation, so we must transition our approach to align with this framework. Our goal is to improve performance, particularly on content-heavy pages that generate and manipulate footnotes dynamically.

Decision Drivers

• Improve page load times: Focus on enhancing performance, particularly on pages with many footnotes.
• Minimize performance overhead: Ensure that the dynamic generation of footnotes doesn't negatively impact the user experience.
• Maintain compatibility: Continue working with Bigfoot’s existing footnote generation system without major disruptions.
• Keep the solution simple: Avoid introducing unnecessary complexity, ensuring the system remains maintainable.

Considered Options

• Performance Concerns: jQuery introduces some overhead compared to vanilla JavaScript. However, this is minimal for the scope of Bigfoot.js, where simplicity, rapid development, and cross-browser compatibility are higher priorities.We will need to monitor the impact of jQuery’s use on the application’s performance and consider optimizations where necessary (e.g., minimizing DOM reflows and repaint cycles).

• Library Size: jQuery adds a non-trivial amount of JavaScript to the project (~90KB minified, ~30KB gzipped). To mitigate this, we will include it via a CDN or load it conditionally for application parts requiring heavy DOM manipulation.

• Maintainability: To avoid common pitfalls of jQuery, such as code lacking structure, we will implement best practices for modularization. We will encapsulate jQuery logic within reusable functions and avoid scattering DOM manipulation code across various parts of the application.

Pros and Cons of Other Options

1. Vanilla Java Script:

   • Pros: No external dependency, better performance.
   • Cons: Requires more code, manual handing of cross-browser issues, more effort needed for handling and animations For Bigfoot.j's purposes, it is more crucial for simplicity over the benefits of Vanilla JavaScript.

2. Modern Front-End Frameworks (React, Vue):

   • Pros: Virtual DOM for more efficient building and scalability
   • Cons: It might be an overkill for just the purposes of Bigfoot.js. It also requires a lot of

Consequences

• Positive:
  • Simplified and more maintainable DOM manipulation, particularly for dynamically updating elements.
  • Improved user experience with real-time interactivity and reduced need for page reloads.
  • Easier cross-browser compatibility and faster development with fewer compatibility issues.
• Negative:
  • Slight performance and load time overhead due to the inclusion of the jQuery library.
  • Potential maintainability challenges if jQuery usage isn’t modularized or structured well, leading to tightly coupled code.

Decision Outcome

Chosen option: We will incorporate jQuery for DOM manipulation into Bigfoot.js to improve the ease of manipulating the DOM, handling events, and handling cross-browser. The use of jQuery will support the project's goal for being simple, maintainable, and scalable

Confirmed By:

[rashi-bhansali]

I'm confused - are we planning to cache the footnotes for performance concerns or are generating them dynamically through DOM manipulation or both? The title says the latter but the considered option describes the former. Maybe we can discuss this in today's call.

[philemonputra]

Sorry we are still writing the ADR

[philemonputra]

Should be up to date now

[jet0612]

Since littlefoot does not require jQuery, could we already obviously observe the effect of its not using jQuery and how littlefoot handle it?

[philemonputra]

One concern discussed is that implementing ADR 2 with ES6 JS could conflict with jQuery as mentioned in this ADR

[Shyam-Sundar-Bharathi]

This ADR was rejected due to conflicts with ADR02 - which was eventually extended into ADR05 and implemented.