Um grande número de novos recursos apareceu no Ember Octane, mas nenhum deles é mais interessante do que o rastreamento automático ( rastreamento automático ). O rastreamento automático é o novo sistema de reatividade da Ember, que permite que a Ember descubra quando os valores do estado (por exemplo, propriedades marcadas @tracked) foram alterados. Esta foi uma atualização massiva, incluindo uma reescrita completa de algumas das abstrações mais antigas do Ember sobre o novo kernel.

De um tradutor: Chris Garrett - trabalha para o LinkedIn e é um dos principais colaboradores da estrutura do Ember js. Ele participou ativamente da criação da nova edição do framework - Ember Octane. Apesar de sua série ter sido escrita para desenvolvedores de Ember, ela aborda conceitos úteis para todos os programadores da Web.

O rastreamento automático, à primeira vista, é muito semelhante a um modelo de reatividade Ember Classic(com base em propriedades calculadas, observadores e Ember.set()). Se você compará-los lado a lado, a principal diferença é onde as anotações são colocadas. No Octane, você anota as propriedades das quais depende, enquanto no Classic, anota getters e setters.

class OctaneGreeter {
  @tracked name = 'Liz';

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

class ClassicGreeter {
  name = 'Liz';

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

Mas se você se aprofundar, descobrirá que o rastreamento automático é muito mais flexível e poderoso. Por exemplo, você pode rastrear automaticamente os resultados das funções , o que não era possível no Ember Classic. Tomemos, por exemplo, um modelo para um videogame 2D simples:

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

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

: , . , , )