In Ember Octane ist eine große Anzahl neuer Funktionen erschienen, aber keine davon ist für mich aufregender als die automatische Verfolgung (Autotracking). Auto Tracking ist das neue Reaktivitätssystem von Ember, mit dem Ember herausfinden kann, wann sich die Statuswerte (z. B. markierte Eigenschaften @tracked) geändert haben. Dies war ein umfangreiches Update unter der Haube, einschließlich einer vollständigen Neufassung einiger der ältesten Ember-Abstraktionen über dem neuen Kernel.

Von einem Übersetzer: Chris Garrett - arbeitet für LinkedIn und ist einer der Hauptverantwortlichen für das Ember js-Framework. Er war aktiv an der Erstellung der neuen Ausgabe des Frameworks beteiligt - Ember Octane. Trotz der Tatsache, dass seine Serie für Ember-Entwickler geschrieben wurde, berührt sie Konzepte, die für alle Webprogrammierer nützlich sind.

Die automatische Verfolgung ist auf den ersten Blick einem Reaktivitätsmodell sehr ähnlich Ember Classic(basierend auf berechneten Eigenschaften, Beobachtern und Ember.set()). Wenn Sie sie zwei nebeneinander vergleichen, besteht der Hauptunterschied darin, wo die Anmerkungen platziert werden. In Octane kommentieren Sie die Eigenschaften, von denen Sie abhängig sind, während Sie in Classic Getter und Setter mit Anmerkungen versehen.

class OctaneGreeter {
  @tracked name = 'Liz';

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

class ClassicGreeter {
  name = 'Liz';

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

Wenn Sie jedoch tiefer graben, werden Sie feststellen, dass die automatische Verfolgung viel flexibler und leistungsfähiger ist. Beispielsweise können Sie die Ergebnisse von Funktionen automatisch verfolgen , was in Ember Classic nicht möglich war. Nehmen Sie zum Beispiel ein Modell für ein einfaches 2D-Videospiel:

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 , — , . , , .

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

: , . , , )