Плагіни для

JavaScript ігор

Павло Пономаренко

aka Shock

slides.com/theshock/javascript-plugins

Навіщо воно треба?

• Можливість покрити непріоритетні напрямки
• Поліпшення враження для харкорщиків
• Джерело чудових ідей
• Джерело хороших розробників
• Додаткове рев’ю на предмет безпеки
• Додаткова причина тримати код в тонусі

Як писати плагін?

• Використання обмеженого API
  • Зміна картинок чи звуків
  • Зміщення об’єктів
• Підписка на події
  • Натискання кнопки клавіатури
  • Повідомлення з серверу
  • Відкриття нового екрану
• Агресивне втручання в код
  • Повна свобода дій в клієнті
  • Логін і донат — окремі мікросервіси
  • Тонкий клієнт, логіка на сервері

Як це реалізувати?

Plugins.refactor = function (Class, methods) {
  var proto = Class.prototype;

  for (var name in methods) {
    methods[name].previous = proto[name];
    proto[name] = methods[name];
  }
};

function GameObject (name) {
 this.name = name;
}

GameObject.prototype.getName = function () {
 return 'Getter:' + this.name;
};

Plugins.refactor( GameObject, {

  // Зверніть увагу - функція іменована
  getName: function method () {
    return 'Changed:' +
      method.previous.call(this);
  }

});

console.log(
    new GameObject('FooBar')
        .getName()
);

// Changed:Getter:FooBar

Код бібліотеки

Об’єкт гри

Код плагіна

Результат

Наш шлях

• Магазини браузерів
  • Копіпаст при розробці
  • unsafeWindow
• GitHub
  • Один репозиторій
  • Довге оновлення Github Pages
  • Неможливість контролю

Що нам дав GitLab

• Повний адміністративний контроль
• Автоматичне оновлення плагіну
• Прості зміни через web-інтерфейс GitLab
• Локальна розробка (git clone + nginx)
• Можливість працювати по GitFlow
• Історія змін коду плагіна
• GitLab API для пошуку та валідації

Інтерфейс GitLab

Файл плагіну Owner:Title:Branch має адресу

gitlab/{author}/{title}/raw/{branch}/{title}.js

Що дозволяє наш код

• Плагін має версію гри
• Користувацькі налаштування кожного плагіну
• Підключення додаткового файлу стилів
• Можливість підтягнути залежності (require)
• Можливість імпортити файти (include)

  new Plugin({
    version: '0.6.0',
    require: [ 'Another:Plugin' ],
    include: [ 'AnotherClass' ],
  },
  function (plugin, events, required) {

    // Посилання на плагін-залежність
    console.log( required['Another:Plugin'] );
    // Посилання на клас з іншого файлу
    console.log( plugin.included['AnotherClass'] ); 

  });

Колбеки в методи

declare( 'Handler', {
  run: function () {
    this.button.addEvent( 'click', this.onClick.bind(this) );
  },

  onClick: function () {
      // do stuff
  }
});

Було

declare( 'Handler', {
  run: function () {
    this.button.addEvent( 'click', function () {
      // do stuff
    });
  }
});

Стало

Відмова від колбеків

declare( 'UnitHandler', {
  run: function () {
    this.unit.addEvents({
        onDeploy : this.onDeploy.bind(this),
        onMove   : this.onMove  .bind(this),
        onAttack : this.onAttack.bind(this)
    });
  },

  onDeploy : function () { /* do stuff */ },
  onMove   : function () { /* do stuff */ },
  onAttack : function () { /* do stuff */ }
});

Було

Стало

declare( 'UnitHandler', {
  run: function () {
    this.unit.addListener( this );
  },

  onDeploy : function () { /* do stuff */ },
  onMove   : function () { /* do stuff */ },
  onAttack : function () { /* do stuff */ }
});

Підсумок

• Підходи до написання додатків
  • Обмежений API
  • Підписка на події
  • Агресивне втручання в код
• Поступове покращення коду​
  • JSDoc, опис типів
  • Подрібнення методів
  • Заміна колбеків методами
• Використання GitLab як хостингу додатків