Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iAPI Docs: The first three Core Concepts guides #63759

Merged
merged 17 commits into from
Aug 19, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Remove last "we's"
  • Loading branch information
luisherranz committed Aug 12, 2024
commit 2d3360668b95ef459f0ae59a566e4742c19f360b
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ Take, for example, this interactive block with two buttons and a paragraph:
</script>
```

As you can see, for each condition, we have to use JavaScript to modify everything in the DOM that has changed, taking into account the previous state.
As you can see, for each condition, you have to use JavaScript to modify everything in the DOM that has changed, taking into account the previous state.

### The declarative approach

Expand Down Expand Up @@ -130,7 +130,7 @@ const { state } = store( 'myPlugin', {
} );
```

In this declarative example, the UI automatically updates based on the current state. All we have to do as developers is to declare the necessary state, any derived state, the actions that modify the state, and which parts of the DOM depend on which parts of the state. The framework takes care of making all the necessary updates to the DOM so that it is always in sync with the current state. The logic remains simple and maintainable regardless of the number of elements controlled by the framework.
In this declarative example, the UI automatically updates based on the current state. All you have to do as developers is to declare the necessary state, any derived state, the actions that modify the state, and which parts of the DOM depend on which parts of the state. The framework takes care of making all the necessary updates to the DOM so that it is always in sync with the current state. The logic remains simple and maintainable regardless of the number of elements controlled by the framework.

### Can you spot the bug?

Expand All @@ -139,11 +139,11 @@ In the imperative example, a bug has been intentionally introduced for didactica
<details>
<summary>Show me the answer!</summary>

In the case that the Show button is pressed first, then the Activate button, and finally the Hide button, we forgot to add the `inactive` class using `statusParagraph.classList.add('inactive');`. Therefore, the next time the user presses Show, the paragraph will not appear in red.
In the case that the Show button is pressed first, then the Activate button, and finally the Hide button, it doesn't add the `inactive` class using `statusParagraph.classList.add('inactive');`. Therefore, the next time the user presses Show, the paragraph will not appear in red.

</details>

These types of bugs are very common in imperative code because we have to manually control all the conditions. On the other hand, they do not exist in declarative code because the framework takes care of updating the DOM and never forgets about anything.
These types of bugs are very common in imperative code because you have to manually control all the conditions. On the other hand, they do not exist in declarative code because the framework takes care of updating the DOM and never forgets about anything.

### Benefits of the declarative approach

Expand Down
Loading