JavaScript ??????? ?? ??? ??? ?? ?? ??????. ??????? ????? ?? ???? ???? ?? ?? ???? ???? ??? ?????. ? ????? ?? ?? ??, ?? ? ? ??? ?? ?? ????? JavaScript ?? ??? ??? ??, ?? ?? ? ??? ?????.

1. ??: ?? ?? ? DOM ??

???? ?? ??? ????????. ???? ?? ??? ???? DOM ??? ???? ?????? ??? ???? ????????. ?? ??? ?????? ??? ???? ?? ???? ?? ????? ???????. ??? ??:

• ?? ???: ?? ?? ???? ??? ???? ???? ?? ???????.
• ??? ??: ?? DOM ??? ??? UI ??? ?? ????.

?:

// Global state
let counter = 0;

// Update DOM
function updateCounter() {
  document.getElementById('counter').innerText = counter;
}
document.getElementById('increment').addEventListener('click', () => {
  counter++;
  updateCounter();
});

? ?? ??? ?????? ???? ?? ???? ??????.

2. ??? ??? ??? ??

AngularJS? ?? ?????? ??? ??? ???? ??????. ?, UI? ???? ???? ??? ?????? ? ??? ??? ???????. ?? ?? ???? ?????? ??? ?? ???? ? ??? ???? ?? ??? ??????.

??:

• ???? UI ????.
• ??? ?? ????? ?? ??? ??? ?????.

??:

• ??? ????? ?? ???? ??? ??.
• ??? ?? ?? ??.

?:

<div ng-app="">
  <input type="text" ng-model="name">
  <p>Hello, {{name}}</p>
</div>

3. ??? ??? ??? ??

React? ??? ??? ??? Redux? ?? ?? ??? ?? ?? ??? ??? ??????. ??? ?? ??? ????? ?? ???? ?? ??????.

?? ??:

• ???: ?? ??? ?? ????.
• ??: ?? ??? ?????.
• ???: ??? ??? ???? ??? ?????.

Redux? ?:

const initialState = { counter: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, counter: state.counter + 1 };
    default:
      return state;
  }
}

Redux? ???? ??? ???? ?? ??? ??? ?? ???? ?????.

4. ?? ?? ?? ? ??? ?????

RxJS? JavaScript? ??? ?????? ???????. Observable? ???? ??? ??? ???? ???? ???? ? ????.

?? ??:

• ??? ??? ??(?: WebSocket)
• ??, ??, ?? ?? ???? ??? ??? ??? ??

?:

import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');
const positions = clicks.pipe(map(event => event.clientX));
positions.subscribe(x => console.log(x));

??? ??? ????? ?? ??? ?????.

5. ??: ?? ??? ???

Solid.js ? Angular? ?? ?? ???????? ??? ???? ?? ??? ???? ???? ?? ???? ??? ?????.

??? ??????
??? ?? ?? ???? ?? ?????.
??? ?? DOM? ?? ??? ?????? ???? ???? ?????.

Solid.js? ?:

// Global state
let counter = 0;

// Update DOM
function updateCounter() {
  document.getElementById('counter').innerText = counter;
}
document.getElementById('increment').addEventListener('click', () => {
  counter++;
  updateCounter();
});

??? ??? ??:

• ??: ???? ????? ????.
• ???: ????? ?? ??? ?? ? ?????.

6. ?? ?? ?? ?? ??

7. ???? ?? ??? ?? ?? ??

1. ??? ?? ??: ???? ??????? ????. ?? ??? Redux? ???? ????.
2. ?? ??: ???? ????? ?? ??? ???? ?????.
3. ??? ??: ???? ????? ??? ??? Signals? ?? ??? ?????.
4. ???: Redux DevTools ?? RxJS Marble Diagrams? ?? ?? ??? ??? ?????.

8. ??? ??? ??? ????

?? ??? ??? ?? ??? ?????. ? ??????? ?? ????? ??? ?? ??? ??? ? ????.

• AI ?? ?? ??: ??? ???? ?? ????? ??????.
• WebAssembly ??: ? ?? ??? ?? ??? ?? ??? ???????.
• ??? ?? ??: ? ?? ??? ???? ???? ?? ?? ? ????.

?? ??

• React? ?? ??
• RxJS ??
• Solid.js? ??
• Redux ??

? ????: https://shafayet.zya.me

??? ??? ??? ?? ??? ? ???????

? ??? JavaScript ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!