Построение собственного JS SDK — зачем и как?

APS JS SDK

Tim Nizametdinov
Eugeny Uspenskiy
Last Update: 25 November 2013

Содержание
• Зачем
•
•
•

•
•
•

что такое OSS
что такое APS
APS 1.x
APS 2.0
ограничения
собственный JS SDK

• Как
• Итоги

Зачем
• Создание плагинов для большой enterprise системы Parallels Automation (OSS) и Plesk
• обеспечение брендинга в условиях существующего
codebase верстки и общего style guide
• возможность унифицированного создания UI
сторонними разработчиками

Что такое OSS
• OSS - системы эксплуатационной поддержки управление сетевой инфрастуктурой, учет, выделение
ресурсов
• предоставление сервисов в рамках этой инфрастуктуры

Что такое APS
• Стандарт, позволяющий относительно быстро
проинтегрировать приложения и сервисы в экосистему
на базе Parallels Automation (создать плагины)

APS 1.x
• Декларативное описание как модели, так и UI
• Весь UI основан на декларируемых свойствах бизнесмодели
• Бизнес-модель -> UI, а не наоборот
• -> Крайне убогий UI, нечитаемое декларативное метаописание

APS 2.x
•
•
•
•
•

Модель объявляется отдельно, доступна по REST
UI абсолютно независим
Декларативная навигация
Screen - обычный html
-> UI -> бизнес-модель

Ограничения
• Панели брендируются - унаследованный лэйаут,
который может меняться
• Девелоперы скринов - от бэкендеров до js-профи
• Не опенсорс продукт - лицензионные ограничения

Собственный JS SDK
• Использование html маркапа минимально и отражает
семантику
• Возможность использования унаследованного маркапа
• Hаличие документации

• Зачем
• Как
•
•

•
•
•

использование существующих фреймворков
продуманный API
автоматизированные тесты
удобная документация
песочница

• Итоги

Использование существующих
фреймворков
• Полностью свой фреймворк - слишком дорого
• Требования к фреймворку:
•
•
•
•
•
•

поддержка шаблонов
высокая гибкость
распространенность
кастомизируемость оформления
целостность
красивые и динамические элементы

Использование существующих
фреймворков - выбор
• ExtJS (Sencha JS)
• JQueryUI

• loader (RequireJS/CommonJS/...) + MV* Framework
(KnockoutJS/AngularJS/…)
• Dojo Toolkit

ExtJS (Sencha JS)
+
• богатые виджеты (Grids, Charts etc.)
• удобная модель связывания данных
• система сборки
• активное развитие
• распространенность
• поддержка шаблонов

ExtJS (Sencha JS)
• сложная кастомизация виджетов
• большие лицензионные отчисления

JQuery UI
+
• готовые популярные виджеты
• очень большая распространенность
• низкий порог вхождения
• легкость кастомизации оформления
• отсутствие лицензионных отчислений

JQuery UI
•
•
•
•

отсутствие поддержки шаблонов в виджетах
отсутствие связывания данных
отсутствие четкой абстракции слоев
на момент исследования не стабилен

Loader + MV* Framework
+
• свобода выбора
• теоретический легкий переход на ES6 Modules

Loader + MV* Framework
• отсутствие целостности
• необходимость писать модули с нуля
• отсутствие поддержки шаблонов внутри виджетов

Dojo Toolkit
+
• модульная структура на базе AMD
• богатые легко кастомизируемые виджеты
• многолетняя поддержка Deferred и Promise
• отсутствие лицензионных отчислений
• поддержка связывания данных
• поддержка шаблонов виджета
• система сборки

Dojo Toolkit
•
•
•
•

слабая распространенность
высокий порог вхождения
навязывание своей философии
зачаточная поддержка мобильных девайсов

APS JS SDK
• модульная структура на базе AMD
• модули, имеющие визуальное представление - виджеты

• модули для работы с данными: Model и Store

Модульная структура AMD
• Позволяет подключать любые сторонние библиотеки
запакованные в формате AMD:
•
•
•

•

JQuery
AngularJS
KnockoutJS
и многие другие

Widgets
• верстка виджета задается его HTML-шаблоном
• виджеты могут включать друг друга

• виджеты могут динамически изменяться
• существует три способа объявления виджетов

Включение виджетов друг в друга
• на уровне шаблона

• в отношениях родитель-ребенок

Декларативное объявление виджетов
require(["dojo/parser", "aps/ready!"],
function(parser){ parser.parse(); });
<fieldset data-dojo-type=”aps/FieldSet”
title=“I am aps/FieldSet”>
<input type=”checkbox”
data-dojo-type="aps/CheckBox"
data-dojo-props="
label: 'CheckBox',
description: 'I am aps/CheckBox'" >
</fieldset>

Программное объявление виджетов
require(["aps/FieldSet",
"aps/CheckBox",
"aps/ready!"
], function (FieldSet, CheckBox) {
var fs = new FieldSet({
title : “I am aps / FieldSet”
}, "idDiv");
fs.addChild(new CheckBox({
label : “CheckBox”,
description : “I am aps / CheckBox”
});
fs.startup();
});

Объявление виджетов с помощью
загрузчика
require(["aps/load",
"aps/ready!"
], function (load) {
load(["aps/FieldSet", {
title : "I am aps / FieldSet"
},
[["aps / CheckBox", {
label : "CheckBox",
description : "I am aps / CheckBox"
}
]]
]);
});

Связывание данных: Store
• Store служит для связи с локальным (aps/Memory) или
удаленным (aps/Store) хранилищем данных.
require(["aps/Store", "aps/Grid", "aps/ready!"
], function (load) {
var store = new Store({
target : "http://localhost/resources"
});
var grid = new Grid({
columns : layoutSimpleGrid,
store : store
}, "gridDiv");
});

Связывание данных: Model
• Model - служит для связи виджетов с данными.
require(["aps/TextBox", "dojox/mvc/getStateful", "dojox/mvc/at",
"aps/ready!"
], function (TextBox, getStateful, at) {
model = getStateful({val : "Hello, world!"});
new TextBox({value : at("model", "val")}, divTB").startup();
setTimeout(function () {
model.set("val", "?!!");
model.watch("val", function (prop, oldVal, newVal) {
alert(newVal);
});
}, 1000);
});

Продуманный API
• В основе - API устоявшегося и популярного фреймворка.
• Единые для всех модулей правила именования свойств
и методов.
• Единые для всех модулей способы взаимодействия
между собой и внешним миром.

Единые способы взаимодействия
между собой
• Связывание данных и виджетов через модули Model и
Store
• Слежения за состоянием виджета с помощью метода
watch.Нет генерации событий
• Вся работа со свойствами выполняется только через
методы get и set

Единые правила именования
• Имена приватных/защищенных свойств и методов
начинаются с ‘_’.
• Классы - CamelCase, методы, функции, свойства,
модули - mixedCase

Пример
var grid = new Grid({ //Грид с возможностью выбора строк
columns : layoutSimpleGrid,
selectionMode : "single",
store : store
});
grid.get("selectionArray") //Отследим события выбора строк
.watchElements(function (index, removals, adds) {
alert(adds);
});
//выделим строку программно
grid.get("selectionArray").push("ea7865aa");

Билд-система
Jenkins
(scheduler)

Nexus
(artifact manager)

Build server
Maven3 (infrastructure)
DOJO Build (closure & layering)

Node.js (tests runner)

assembled .zip
(+standalone .zip)

Автоматизированные тесты (1/2)
• Можно запустить без инфрастуктуры
• Строго отдельный тест для каждого компонента
• Тесты в директории самого фреймворка
•
•

для ручного и автоматизированного тестирования
являются одновременно примерами

• Строгие соглашения об именовании
•
•

директория начинается с test - юнит тест
все остальное - ручное тестирование

Автоматизированные тесты (2/2)
• Юнит тесты запускаются ВСЕГДА при сборке
• Сборка отменяется если хотя бы один тест хотя бы на
одном браузере не проходит

Автоматизированные тесты - выбор
• QUnit
• PhantomJS + IE в виртуалках
• Почему не
•
•
•
•
•

TestSwarm
Buster.js
Dojoh Robot
External Farms (browsershots, browserling,etc)
Selenium

QUnit
• распространенный
• удобный
• простой

Почему не
• TestSwarm
•

•

сильная завязка на инфрастуктуру
o нам было необходимо встроить ее в наш билдпроцесс и в нашу
экосистему
o билд помечается ПОСЛЕ сборки, а не во время
слабая возможность кастомизации
o пришлось бы копировать код
o кастомизация репортинга

Почему не
• Buster.js
•
•

ориентирован на node.js standalone модули, не на тест виджетов
инициировать тесты из браузера надо вручную
o нам нужен автоматический запуск/закрытие браузера

Почему не
• dojoh robot
•
•

куча ненужных фреймов
инициировать тесты из браузера надо вручную
o нам нужен автоматический запуск/закрытие браузера

Почему не
• External Farms (browsershots, browserling,etc)
•
•
•

дорого
проблемы безопасности (VPN access в интранет)
риск завязки сборки на внешние системы

Почему не
• Selenium
•
•

громоздок
невозможность запуска тестов без инфрастуктуры

В итоге
• Гибрид Selenium Server, WebDriver, node.js runner
• Создана тестовая страница, запускающая ВСЕ юнит
тесты
• Сборщик через node.js selenium wd client запускает
браузеры и тестовую страницу в разных браузерах
• Страница создает json-результаты, которые
доставляются сборщику

Компоненты тестовой инфрастуктуры
WinXP (IE8)

S
WD

Win7 (IE9)

S

Win8 (IE10)

Build server
phantomjs

S
S

Mac 10.8
(Safari)

S

selenium
server

node.js wd
WD selenium
client

Удобная документация
• API Documentation
•

содержит краткое описание всех доступных модулей и их
интерфейсов.

• Reference Guide
•

содержит расширенное, по сравнению с API, описание модулей
APS SDK и их основных свойств и методов.

Большое количество примеров
• Каждая статья содержит примеры.
• Примеры использования и создания модуля даны для
всех трех способов объявления.
• Страница каждого виджета содержит ссылку на
страницу с автотестами.

Песочница
• возможность легко попробовать самому
• быстрое открытие примеров

• возможность сохранения
• удобство использования

Технологии песочницы
• Источник вдохновения: jsfiddle.net
• Базис: Code Mirror + addons

• Autocomplete: Tern

Словарь автокомплита
"MessageList":{
"!type":"fn(options: object)->!custom:MessageList_ctor",
"prototype":{
"cols":{
"!type": "number",
"!doc": "<p>Number of columns in a container.
Supported values: 0 and 2. Default value is 0.</p>n"
},
"add":{
"!type":
"fn(description: string, error: string)",
"!doc":"added new message"
},
...

Удобная песочница
• подсветка синтаксиса
• умный autocomplete с подсказками из документации

• автодополнение закрывающих тегов и скобок
• проверка кода на лету

• форматирование

• Зачем
• Как
• Итоги

Итоги
• Модульный SDK:
•
•
•

имеющие состояние «толстые» виджеты
датабиндинг
шаблонизация

• Документация
•

мануал и автоматически созданная по коду

• Тесты
•

для автоматического тестирования и как примеры

• Песочница
•

LiveEdit с продвинутым code-completion

Построение собственного JS SDK — зачем и как?

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Построение собственного JS SDK — зачем и как?

Similaire à Построение собственного JS SDK — зачем и как? (20)

Построение собственного JS SDK — зачем и как?