Плагіни для

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 як хостингу додатків
Made with Slides.com