Tweet
Migrating front end AMD (Require.js) modules to ECMAScript6 (ES6) classes
This tutorial will use the "checklist" field view script and it's parent/protoype field "array" to illustrate how an existing AMD module was converted to an ES6 class, which is the modern syntax used to write Javascript code.
As full disclosure the new ES6 class syntax is ONLY "syntactic sugar", meaning that it really does not improve anything in the actual Javascript language, and it doesn't provide any improvement in performance over AMD modules.
However, ES6 provides Javascript with a syntax that is more like Java or Python or C# syntax, so it is much more attractive for coders who are not familiar with AMD (or don't like it's syntax), and for organizations looking to attract those candidates.
yuri has said that AMD will stay operational in EspoCRM "possibly forever", so there is not a pressing need to change all your custom view classes (AMD modules) but it would be good practice to start using ES6 classes since that is the direction in which Espo is going.
Key Differences:
1.- Declaration
client/src/views/fields/checklist.js (ES6)
client/src/views/fields/checklist.js (AMD)
client/src/views/fields/array.js (ES6)
client/src/views/fields/array.js (AMD)
2.- Spread (...) Operator and key word "super"
client/src/views/fields/checklist.js (ES6)
client/src/views/fields/checklist.js (AMD)
client/src/views/fields/array.js (ES6)
client/src/views/fields/array.js (AMD)
The article below, provides general information about the modules approach in Javascript and its different implementations such as AMD an ES6.
Additionally, it provides a simple example of the use of "module bundlers" which yuri has said will be implemented in the near future and will be a must if you are modifying original front end code.
As full disclosure the new ES6 class syntax is ONLY "syntactic sugar", meaning that it really does not improve anything in the actual Javascript language, and it doesn't provide any improvement in performance over AMD modules.
However, ES6 provides Javascript with a syntax that is more like Java or Python or C# syntax, so it is much more attractive for coders who are not familiar with AMD (or don't like it's syntax), and for organizations looking to attract those candidates.
yuri has said that AMD will stay operational in EspoCRM "possibly forever", so there is not a pressing need to change all your custom view classes (AMD modules) but it would be good practice to start using ES6 classes since that is the direction in which Espo is going.
Key Differences:
1.- Declaration
client/src/views/fields/checklist.js (ES6)
Code:
import Dep from 'views/fields/array';
export default Dep.extend({
CLASS/MODULE CODE
});
Code:
define('views/fields/checklist', ['views/fields/array'], function (Dep) {
return Dep.extend({
CLASS/MODULE CODE
});
});
Code:
import BaseFieldView from 'views/fields/base';
import RegExpPattern from 'helpers/reg-exp-pattern';
import MultiSelect from 'ui/multi-select';
class ArrayFieldView extends BaseFieldView {
CLASS/MODULE CODE
}
export default ArrayFieldView;
Code:
define('views/fields/array', ['views/fields/base', 'helpers/reg-exp-pattern', 'ui/multi-select'], function (Dep, RegExpPattern, MultiSelect) {
return Dep.extend({
CLASS/MODULE CODE
});
});
2.- Spread (...) Operator and key word "super"
client/src/views/fields/checklist.js (ES6)
Code:
data: function () {
return {
optionDataList: this.getOptionDataList(),
...Dep.prototype.data.call(this),
};
},
Code:
data: function () {
return _.extend({
optionDataList: this.getOptionDataList(),
}, Dep.prototype.data.call(this));
},
Code:
setup() {
super.setup();
FUNCTION CODE
}
data() {
let itemHtmlList = [];
(this.selected || []).forEach(value => {
itemHtmlList.push(this.getItemHtml(value));
});
return {
...super.data(),
selected: this.selected,
translatedOptions: this.translatedOptions,
hasOptions: !!this.params.options,
itemHtmlList: itemHtmlList,
isEmpty: (this.selected || []).length === 0,
valueIsSet: this.model.has(this.name),
maxItemLength: this.maxItemLength || this.MAX_ITEM_LENGTH,
allowCustomOptions: this.allowCustomOptions,
};
}
Code:
setup: function () {
Dep.prototype.setup.call(this);
FUNCTION CODE
}
data: function () {
let itemHtmlList = [];
(this.selected || []).forEach(value => {
itemHtmlList.push(this.getItemHtml(value));
});
return _.extend({
selected: this.selected,
translatedOptions: this.translatedOptions,
hasOptions: this.params.options ? true : false,
itemHtmlList: itemHtmlList,
isEmpty: (this.selected || []).length === 0,
valueIsSet: this.model.has(this.name),
maxItemLength: this.maxItemLength || this.MAX_ITEM_LENGTH,
allowCustomOptions: this.allowCustomOptions,
}, Dep.prototype.data.call(this));
},
Additionally, it provides a simple example of the use of "module bundlers" which yuri has said will be implemented in the near future and will be a must if you are modifying original front end code.
Comment