Вопрос

Использование ES6 в JavaScript модулях и клиентских схемах?

Использование ES6 в JavaScript модулях и клиентских схемах?
Собственно пробовал ли кто ? или может у оф.представителей есть рекомендации/предостережения на этот счет.
Уж больно много возможностей предоставляет новый стандарт, и фактически полностью поддерживается мажорными версиями всех популярных браузеров - ну как минимум в части:
promise, yield, именованных аргументов функций и значений по умолчанию, деструктуризация массивов и объектов и т.д.

Нравится

9 комментариев

Здравствуйте, в системных требованиях все еще значится IE11:
https://academy.terrasoft.ua/documents/marketing/7-8/sistemnye-trebovan…
А следовательно в рамках ядра и схем системы не может быть ни промисов, ни большинства других фишек ES6.
Вы конечно можете начать использовать в своих доработках любые вещи из ES6, но тем самым ограничите доступ к системе соответствующими браузерами.
Таблица поддержки ES6 браузерами:
https://kangax.github.io/compat-table/es6/

IE11... будь он неладен :)
Ну гипотетически с версии 7.10 - появляется полноценная выгрузка модулей в ФС и их комбэк (еще не пробовали но в release notes - есть)
Это позволяет подключить к делу Babel, не известно как он дружит с AMD-нотацией конечно, надо попробовать "бабельнуть"
Вот собственно пример:
Исходный код схемы использующей ES6

define("KmProjects1Page", ["TestMixin"], function(TestMixin) {
	return {
		entitySchemaName: "KmProjects",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/,
		attributes: {
			"TestAttrDefinition": {
				"dataValueType": Terrasoft.DataValueType.BOOLEAN,
				"value": false,
				"dependencies": [
					{
						"columns": ["Test"],
						"methodName": "TestMethod"
					}
				]
			}
		},
		methods: {
			"testES6Usage": function() {
			  // Expression bodies
        var odds = evens.map(v => v + 1);
        var nums = evens.map((v, i) => v + i);
        var pairs = evens.map(v => ({even: v, odd: v + 1}));
 
        // Statement bodies
        nums.forEach(v => {
          if (v % 5 === 0)
            fives.push(v);
        });
 
        // Lexical this
        var bob = {
          _name: "Bob",
          _friends: [],
          printFriends() {
            this._friends.forEach(f =>
              console.log(this._name + " knows " + f));
          }
        }
 
        //classes
        class SkinnedMesh extends THREE.Mesh {
          constructor(geometry, materials) {
            super(geometry, materials);
 
            this.idMatrix = SkinnedMesh.defaultMatrix();
            this.bones = [];
            this.boneMatrices = [];
            //...
          }
          update(camera) {
            //...
            super.update();
          }
          get boneCount() {
            return this.bones.length;
          }
          set matrixType(matrixType) {
            this.idMatrix = SkinnedMesh[matrixType]();
          }
          static defaultMatrix() {
            return new THREE.Matrix4();
          }
        }
 
        //promise
        let promise = new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve("result");
          }, 1000);
        });
        promise.then(
            result => {
              alert("Fulfilled: " + result);
            },
            error => {
              alert("Rejected: " + error);
            }
          )
			}
		},
		mixins: {
			TestMixin: "Terrasoft.TestMixin"
		},
		rules: {}
	};
});

После обработки Babel

"use strict";
 
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
define("KmProjects1Page", ["TestMixin"], function (TestMixin) {
  return {
    entitySchemaName: "KmProjects",
    details: /**SCHEMA_DETAILS*/{} /**SCHEMA_DETAILS*/
    , diff: /**SCHEMA_DIFF*/[] /**SCHEMA_DIFF*/
    , attributes: {
      "TestAttrDefinition": {
        "dataValueType": Terrasoft.DataValueType.BOOLEAN,
        "value": false,
        "dependencies": [{
          "columns": ["Test"],
          "methodName": "TestMethod"
        }]
      }
    },
    methods: {
      "testES6Usage": function testES6Usage() {
        // Expression bodies
        var odds = evens.map(function (v) {
          return v + 1;
        });
        var nums = evens.map(function (v, i) {
          return v + i;
        });
        var pairs = evens.map(function (v) {
          return { even: v, odd: v + 1 };
        });
 
        // Statement bodies
        nums.forEach(function (v) {
          if (v % 5 === 0) fives.push(v);
        });
 
        // Lexical this
        var bob = {
          _name: "Bob",
          _friends: [],
          printFriends: function printFriends() {
            var _this = this;
 
            this._friends.forEach(function (f) {
              return console.log(_this._name + " knows " + f);
            });
          }
        };
 
        //classes
 
        var SkinnedMesh = function (_THREE$Mesh) {
          _inherits(SkinnedMesh, _THREE$Mesh);
 
          function SkinnedMesh(geometry, materials) {
            _classCallCheck(this, SkinnedMesh);
 
            var _this2 = _possibleConstructorReturn(this, _THREE$Mesh.call(this, geometry, materials));
 
            _this2.idMatrix = SkinnedMesh.defaultMatrix();
            _this2.bones = [];
            _this2.boneMatrices = [];
            //...
            return _this2;
          }
 
          SkinnedMesh.prototype.update = function update(camera) {
            //...
            _THREE$Mesh.prototype.update.call(this);
          };
 
          SkinnedMesh.defaultMatrix = function defaultMatrix() {
            return new THREE.Matrix4();
          };
 
          _createClass(SkinnedMesh, [{
            key: "boneCount",
            get: function get() {
              return this.bones.length;
            }
          }, {
            key: "matrixType",
            set: function set(matrixType) {
              this.idMatrix = SkinnedMesh[matrixType]();
            }
          }]);
 
          return SkinnedMesh;
        }(THREE.Mesh);
 
        //promise
 
 
        var promise = new Promise(function (resolve, reject) {
          setTimeout(function () {
            resolve("result");
          }, 1000);
        });
        promise.then(function (result) {
          alert("Fulfilled: " + result);
        }, function (error) {
          alert("Rejected: " + error);
        });
      }
    },
    mixins: {
      TestMixin: "Terrasoft.TestMixin"
    },
    rules: {}
  };
});

Вполне себе "съедобный код, если только внутрях какой-либо сборщик не обрезает содержимое за рамками define конструкции, но вроде - нет такого.

PS: Единственное, что для полного счастья надо бы подключить полифил от Babel, и вот кстати вопрос - как в рамках идеологии системы корректно подключать JS-либы ?

"Севостьянов Илья Сергеевич" написал:выгрузка модулей в ФС

Это было и раньше, но для on-site.
"Севостьянов Илья Сергеевич" написал:корректно подключать JS-либы

Через define, к примеру схема: jQuery, там в теле дефайна просто функция которая сама себя и вызывает, обогащая глобальный контекст либой JQuery, в глобальную переменную $
Так что полифилы можно подключить примерно таким же способом, т.к. они обогащают глобальный контекст.
В схеме где нужна будет данная логика, схему либы необходимо будет подключать в блок зависимостей:
define("ContactPageV2", ["JQuery"], function() { ... Либо в ините, через реквайр:
require(["jQuery"], function() {});
Так же через define можно делать либы что возвращают объект, но с этим думаю понятно.
define("ContactPageV2", ["MyLib"], function(myLib) { ...
require(["MyLib"], function(myLib) {});

"Максим Шевченко" написал:Это было и раньше, но для on-site.

В каком формате ?

Мы изначально сильно болели этой темой начиная работать еще с 7.8
Задавали вопрос в саппорт, вот нам как раз про "весенний релиз" - обещали, ну вот в 7.10 появилось в релиз-нотах.

Если это можно сделать для 7.8, 7.9 - прошу поделиться HowTo ? (Т.к. проекты есть и вряд ли они прям быстро сейчас все пообновляются)

PS: Можно было чекаутить/чекинить из SVN в ФС - но это то еще удовольствие особенно в части работы со схемами объектов и Бизнес процессами, да и метаданных тьма, абсолютно не ясно что там от чего зависит, т.к. судя по истории комитов в SVN из приложения просто работа с кодом схем иногда приводит к изменению каких-то метаданных и т.д.

"Севостьянов Илья Сергеевич" написал: каком формате ?

Я имел в виду useFileContent, для он-сайт, выгружает схемы в ФС, и позволяет разрабатывать прямо там, вот инструкция: https://academy.terrasoft.ru/documents/technic-sdk/7-9/rabota-s-klients…

ну это только схемы, причем "скопом" без иерархического какого либо деления, что не есть удобно - это раз, во-вторых это никоим образом не позволяет в виде файлов опять же деплоить на прод... вообщем годится только для выгрузки сорцов по сути.

"Севостьянов Илья Сергеевич" написал:ну это только схемы, причем "скопом" без иерархического какого либо деления, что не есть удобно - это раз, во-вторых это никоим образом не позволяет в виде файлов опять же деплоить на прод... вообщем годится только для выгрузки сорцов по сути.

Скоро будет документация по ФС в 7.10:
http://www.community.terrasoft.ru/forum/topic/25319

Будет с иерархией, но тоже только для on-site.

Ну я так понимаю будет возможность пакеты заворачивать в zip/gz и сетапить.
На демочке уже засекли занятные новые опции:

Я так понимаю речь как раз идет про пакеты выгружаемые в ФС.
Но засетапить их можно будет я так понимаю и в cloud версии ?

Здравствуйте, Илья.

Да, для сайтов on-demand также доступна данная функция. В версии 7.10 пользователи могут самостоятельно устанавливать пакеты.

Показать все комментарии