# Any documentation about Stimulus implementation

**URL:** <https://discuss.hotwired.dev/t/any-documentation-about-stimulus-implementation/4327>\
**Category:** General\
**Created:** [July 20, 2022, 7:09am UTC](https://discuss.hotwired.dev/t/any-documentation-about-stimulus-implementation/4327 "2022-07-20T07:09:10Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![abdellani](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/abdellani/32/2797_2.png) [@abdellani](https://discuss.hotwired.dev/u/abdellani)\
**Post date:** [July 20, 2022, 7:09am UTC](https://discuss.hotwired.dev/t/any-documentation-about-stimulus-implementation/4327/1 "2022-07-20T07:09:10Z")

</div>

Hello

Here are some keynotes that I made during my exploration of the framework.

Are there any useful resources that can help understand why things are implemented that way? For example, the purpose of having nested observers, each of them map the **scopes** to a different data structure?

* * *

```auto
import { Application } from "@hotwired/stimulus"
 
const application = Application.start()

```

The start method will create an instance of the Application class which has two components Router and Dispatcher.

## Router

The Router has three main components:

1. Scope Observer: This class monitors the DOM and is responsible for creating the **Scopes** instances.

2. ScopeByIdentifier: maps the identifiers of controllers to the **scopes**.

3. ModuleByIdentifier: maps the identifiers of the controllers to the Module structure

**Identifier** is the first argument of the function “Application.register”

### Scope Observer:

It has 4 nested Observers:

1. Value List Observer (first level).
2. Token List Observer.
3. Attribute Observer.
4. Element Observer (last level).

The two first levels handle one-level or two-level hashes that map some keys to the Scopes instances created by the Scope Observer.

**Element Observer** interacts directly with the DOM using the built-in function **mutationObserver**.

### Scope By Identifier

A map that associates every identifier to an instance of the **Scope** class.

### Module By Identifier

A map that associates every identifier to an instance of the **Module** class.

### Scope

The scope has a reference to the HTML element and a set of methods that refers to the relevant elements on it like **targets** and **classes**.

### Module

handle mapping between **contexts** and **scopes** , and maintain a list of connected contexts.

### Context

it has a reference to the **Controller** instance and the **binding Observer**.  
the **binding Observer** creates **bindings** which connects **Action** to **Context**. **Action** refers to the method from the controller that will be called when an event is detected.

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/stimulusjs/original/2X/1/11231977e4c389093af5e34e6928a99da143ac15.png)

---

<div class="post-metadata">

**Author:** ![OutlawAndy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/outlawandy/32/2876_2.png) [@OutlawAndy](https://discuss.hotwired.dev/u/OutlawAndy)\
**Post date:** [July 20, 2022, 10:44pm UTC](https://discuss.hotwired.dev/t/any-documentation-about-stimulus-implementation/4327/2 "2022-07-20T22:44:39Z")

</div>

I don’t know of any resources like that, but bravo on the excellent architectural summary you’ve laid out here! I’ve bookmarked it myself and will surely use it for future reference. Thanks! 👏