एम्बर ऑक्टेन में बड़ी संख्या में नई विशेषताएं दिखाई दी हैं, लेकिन उनमें से कोई भी मेरे लिए स्वचालित ट्रैकिंग (ऑटोट्रैकिंग) की तुलना में अधिक रोमांचक नहीं है । ऑटो ट्रैकिंग एम्बर की नई प्रतिक्रिया प्रणाली है, जो एम्बर को यह पता लगाने की अनुमति देती है कि राज्य के मान (उदाहरण के लिए, चिह्नित गुण @tracked) बदल गए हैं। यह हुड के नीचे एक बड़ा अद्यतन था, जिसमें नए कर्नेल के शीर्ष पर कुछ सबसे पुराने एम्बर अमूर्त का पूरा पुनर्लेखन शामिल था।

एक अनुवादक से: क्रिस गैरेट - लिंक्डइन के लिए काम करता है और एम्बर जेएस ढांचे में मुख्य योगदानकर्ताओं में से एक है। उन्होंने फ्रेमवर्क के नए संस्करण - एम्बर ऑक्टेन को बनाने में सक्रिय भाग लिया। इस तथ्य के बावजूद कि उनकी श्रृंखला एम्बर डेवलपर्स के लिए लिखी गई थी, यह उन अवधारणाओं पर छूती है जो सभी वेब प्रोग्रामर के लिए उपयोगी हैं।

पहली नज़र में ऑटो ट्रैकिंग, एक प्रतिक्रिया मॉडल Ember Classic(गणना की गई संपत्तियों, पर्यवेक्षकों और Ember.set()) के आधार पर बहुत समान है । यदि आप उन्हें दो तरफ से तुलना करते हैं, तो मुख्य अंतर वह है जहां एनोटेशन रखा जाता है। ऑक्टेन में, आप उन गुणों को एनोटेट करते हैं, जिन पर आप निर्भर हैं, जबकि क्लासिक में, आप गेटर्स और सेटर्स को एनोटेट करते हैं।

class OctaneGreeter {
  @tracked name = 'Liz';

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

class ClassicGreeter {
  name = 'Liz';

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

लेकिन अगर आप गहराई से खुदाई करते हैं, तो आप पाएंगे कि स्वचालित ट्रैकिंग अधिक लचीली और शक्तिशाली है। उदाहरण के लिए, आप स्वचालित रूप से फ़ंक्शन के परिणामों को ट्रैक कर सकते हैं , जो एम्बर क्लासिक में संभव नहीं था। उदाहरण के लिए, एक साधारण 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 , — , . , , .

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

: , . , , )