Un grand nombre de nouvelles fonctionnalités sont apparues dans Ember Octane, mais aucune d'entre elles n'est plus excitante pour moi que le suivi automatique (autotracking). Le suivi automatique est le nouveau système de réactivité d'Ember, qui permet à Ember de savoir quand les valeurs d'état (par exemple, les propriétés marquées @tracked) ont changé. C'était une mise à jour massive sous le capot, y compris une réécriture complète de certaines des plus anciennes abstractions Ember au-dessus du nouveau noyau.

D'un traducteur: Chris Garrett - travaille pour LinkedIn et est l'un des principaux contributeurs au framework Ember js. Il a participé activement à la création de la nouvelle édition du framework - Ember Octane. Malgré le fait que sa série a été écrite pour les développeurs Ember, elle touche à des concepts utiles à tous les programmeurs Web.

Le suivi automatique, à première vue, est très similaire à un modèle de réactivité Ember Classic(basé sur les propriétés calculées, les observateurs et Ember.set()). Si vous les comparez côte à côte, la principale différence réside dans l'emplacement des annotations. Dans Octane, vous annotez les propriétés dont vous dépendez, tandis que dans Classic, vous annotez les getters et les setters.

class OctaneGreeter {
  @tracked name = 'Liz';

  get greeting() {
    return `Hi, ${this.name}!`;
  }
}

class ClassicGreeter {
  name = 'Liz';

  @computed('name')
  get greeting() {
    return `Hi, ${this.name}!`;
  }
}

Mais si vous creusez plus profondément, vous constaterez que le suivi automatique est beaucoup plus flexible et puissant. Par exemple, vous pouvez suivre automatiquement les résultats des fonctions , ce qui n'était pas possible dans Ember Classic. Prenons, par exemple, un modèle pour un simple jeu vidéo 2D:

class Tile {
  @tracked type;

  constructor(type) {
    this.type = type;
  }
}

class Character {
  @tracked x = 0;
  @tracked y = 0;
}

class WorldMap {
  @tracked character = new Character();

  tiles = [
    [new Tile('hills'), new Tile('beach'), new Tile('ocean')],
    [new Tile('hills'), new Tile('beach'), new Tile('ocean')]
    [new Tile('beach'), new Tile('ocean'), new Tile('reef')],
  ];

  getType(x, y) {
    return this.tiles[x][y].type;
  }

  get isSwimming() {
    let { x, y } = this.character;

    return this.getType(x, y) === 'ocean';
  }
}

, isSwimming , character ( x / y). , , getType, . CP (. .: Computed Properties — Ember Classics), - . .

, Ember Classic. ! , , Ember , Octane.

-, , . , . , . , , , , .

7 . , « », , :

1. ? ←
2. ?
4. — TrackedMap
5. — @localCopy
6. — RemoteData
7. — effect()

, , Octane. -, , , ! Discord.

: «»?

, « », , . . , .

: .

«» , « » « ». , « Ember» « Vue», , . , .

, ! .

( (streams))

, , , , : «» (declarative) «» (state). « » , «» «» ? "" (state)? , , .

(state)

«» «». , , ; , "". JavaScript :

• , let const
• , Map Set

, (root state), , . , , , . :

let a = 1;
let b = 2;

function aPlusB() {
  return a + b;
}

aPlusB() , a b. , . , , a b, aPlusB(). , a b , aPlusB() , .

, «», «» «», , , . , :

, , , .
, - .

«» , (). , — « »? , , , , , , , ( , ).

aPlusB. , , :

1. ( ).
2. a + b.

let a = 1;
let b = 2;

let aPlusB = a + b;

, , . , a b. aPlusB , :

let a = 1;
let b = 2;

let aPlusB = a + b;

//  `a`
a = 4;
aPlusB = a + b;

//  `b`
b = 7;
aPlusB = a + b;

, . , a, aPlusB. API , , :

export default class Counter extends Component {
 count = 0;

  @action
    incrementCount() {
    this.count++;
    this.rerender();
  }
}

, rerender() , , . , , - , , .

, «» . aPlusB().

let a = 1;
let b = 2;

function aPlusB() {
  return a + b;
}

, , , . , «» , . , aPlusB() , . , , , .

, , Ember, Vue Svelte, (, ) JSX , , JSX . HTML — , , , . HTML, , . «» , , , DOM, , DOM , .

FP (Functional Programming)?

. «» «» «». , . , HTML, , - , .

( FP), . «» — .

let a = 1;
let b = 2;

function plus(first, second) {
  return first + second;
}

//  a + b;
plus(a, b);

. , , .

, ( ). , FP , , , . , , , .

, . , , , .

, , . , «» FP, - (, , . « », !). , .

, :

1. «» « ». , , , .
2. «» , . ( , ):
   
   • , , , .
   • — , , , .
3. « » , , , . HTML , — , . , , .

. , , , - , - . , , «» .

: , . , , )