Una gran cantidad de nuevas características han aparecido en Ember Octane, pero ninguna de ellas es más emocionante para mí que el seguimiento automático ( seguimiento automático ). El seguimiento automático es el nuevo sistema de reactividad de Ember, que le permite saber cuándo @trackedhan cambiado los valores de estado (por ejemplo, las propiedades marcadas ). Esta fue una actualización masiva bajo el capó, incluida una reescritura completa de algunas de las abstracciones Ember más antiguas en la parte superior del nuevo núcleo.

De un traductor: Chris Garrett: trabaja para LinkedIn y es uno de los principales contribuyentes al marco Ember js. Participó activamente en la creación de la nueva edición del marco: Ember Octane. A pesar de que su serie fue escrita para desarrolladores de Ember, toca conceptos que son útiles para todos los programadores web.

El seguimiento automático, a primera vista, es muy similar a un modelo de reactividad Ember Classic(basado en propiedades calculadas, observadores y Ember.set()). Si los compara dos lado a lado, la diferencia principal es dónde se colocan las anotaciones. En Octane, anota las propiedades de las que depende, mientras que en Classic, anota los captadores y establecedores.

class OctaneGreeter {
  @tracked name = 'Liz';

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

class ClassicGreeter {
  name = 'Liz';

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

Pero si profundiza, encontrará que el seguimiento automático es mucho más flexible y potente. Por ejemplo, puede realizar un seguimiento automático de los resultados de las funciones , lo que no era posible en Ember Classic. Tome, por ejemplo, un modelo para un videojuego 2D simple:

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

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

: , . , , )