<small>Previous articles:

- ➡️ [Section 20. JSON Data](/docs/20-orm-json)
- ➡️ [Section 21. Controller Types](/docs/21-controllers)
- ➡️ [Section 22. Frontend Structure](/docs/22-layouts)
</small>

# SLOT-H: JS Library Choice

In the current implementation, the frontend is built on a custom wrapper over an older version of jQuery. This is a deliberate decision driven by the architectural features of the ecosystem.

**Important:** This choice has evolved over the years. As an artist - this is how I see it. The code becomes almost obfuscated and extremely minimalistic. Once you get used to it, you can read and write it quickly. However, this will not be accessible from scratch without trying to understand the ideology behind this solution.

Therefore, **the choice is yours**: try to learn it, or use what you're already accustomed to.

---

## Why jQuery

The entire ecosystem in the frontend/backend pairing is built on the implicit transfer of the signature (sign) and its renewal during AJAX requests. jQuery provides a stable foundation for implementing this mechanism.

Switching to another JS framework or native JS is possible but will require implementing the signature mechanism on the new stack independently. This is not implemented in the current version.

In the future, a separate JS code will be released containing the necessary functions to support alternative JS frameworks.

---

## Frontend Conventions

When using the current frontend implementation, the following conventions must be followed:

### 1. Forms

The form submit button must be replaced with an element that is inactive from the `<form>`'s perspective. For example, a `<div>` styled as a button.

A regular `<button type="submit">` is not used.

### 2. Form Submission

Form submission must occur through a click handler on the substitute element, calling:

```javascript
$.submit($(this));
````
This method automatically:

Adds the current signature (sign) to the form

Initiates data submission

If this is not done, when IGNORE_SIGN = false in config.php, the form data will not be accepted by the backend.

### 3. AJAX Requests
AJAX requests must be sent via the following functions:

api(...) - for regular requests

apiFile(...) - for file uploads

These functions automatically add the current signature to the request.

###4. Response Handling
The api and apiFile functions support asynchronous operation. When using a callback function to process the response, you must update the signature after parsing the response:

```javascript
var i = JSON.parse(e);
alfaFooter = i.sign;
```
This ensures that the next signature will be up-to-date.

##Summary
The current frontend implementation is based on jQuery and requires adherence to the described conventions. This ensures consistent operation of the signature mechanism between frontend and backend.

If you wish to switch to another JS framework, you will need to implement a similar signature mechanism on the new stack.

##What's next?
➡️ Section 24. Dynamic Signature

➡️ Section 25. Access Protection

➡️ Section 26. Localization Principles
- ➡️ [Section 24. Dynamic Signature](/docs/24-security-sign)
- ➡️ [Section 25. Access Protection](/docs/25-security-access)
- ➡️ [Section 26. Localization Principles](/docs/26-localization-principle)