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

Tim NizametdinovEugeny Uspenskiy

Last Update: April 8, 2023

APS JS SDK

Зачем

3

Содержание

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

• Как• Итоги

4

Зачем

• Создание плагинов для большой enterprise системы - Parallels Automation (OSS) и Plesk

• обеспечение брендинга в условиях существующего codebase верстки и общего style guide

• возможность унифицированного создания UI сторонними разработчиками

5

Что такое OSS

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

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

6

Что такое APS

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

\

7

APS 1.x

• Декларативное описание как модели, так и UI• Весь UI основан на декларируемых свойствах бизнес-

модели• Бизнес-модель -> UI, а не наоборот• -> Крайне убогий UI, нечитаемое декларативное мета-

описание

8

APS 2.x

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

9

Ограничения

• Панели брендируются - унаследованный лэйаут, который может меняться

• Девелоперы скринов - от бэкендеров до js-профи• Не опенсорс продукт - лицензионные ограничения

10

Собственный JS SDK

• Использование html маркапа минимально и отражает семантику

• Возможность использования унаследованного маркапа• Hаличие документации

Как

12


• Зачем• Как

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

• Итоги

13

Использование существующих фреймворков

• Полностью свой фреймворк - слишком дорого

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

14

Использование существующих фреймворков - выбор

• ExtJS (Sencha JS)

• JQueryUI

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

• Dojo Toolkit

15

ExtJS (Sencha JS)

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

16

ExtJS (Sencha JS)

-• сложная кастомизация виджетов• большие лицензионные отчисления

17

JQuery UI

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

18

JQuery UI

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

19

Loader + MV* Framework

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

20

Loader + MV* Framework

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

21

Dojo Toolkit

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

22

Dojo Toolkit

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

23




• Итоги

24

APS JS SDK

• модульная структура на базе AMD

• модули, имеющие визуальное представление - виджеты

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

25

Модульная структура AMD

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

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

26

Widgets

• верстка виджета задается его HTML-шаблоном

• виджеты могут включать друг друга

• виджеты могут динамически изменяться

• существует три способа объявления виджетов

30

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

• на уровне шаблона

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

31

Декларативное объявление виджетов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>

32

Программное объявление виджетов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(); });

33

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

34

Связывание данных: 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");});

35

Связывание данных: 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);});

36

Продуманный API

• В основе - API устоявшегося и популярного фреймворка.

• Единые для всех модулей правила именования свойств и методов.

• Единые для всех модулей способы взаимодействия между собой и внешним миром.

37

Единые способы взаимодействия между собой

• Связывание данных и виджетов через модули Model и Store

• Слежения за состоянием виджета с помощью метода watch.Нет генерации событий

• Вся работа со свойствами выполняется только через методы get и set

38

Единые правила именования

• Имена приватных/защищенных свойств и методов начинаются с ‘_’.

• Классы - CamelCase, методы, функции, свойства, модули - mixedCase

39

Пример

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");

40




• Итоги

41

Билд-система

Build server

Maven3 (infrastructure)

DOJO Build (closure & layering)

Node.js (tests runner)

assembled .zip(+standalone .zip)

Jenkins (scheduler)

Nexus(artifact manager)

42

Автоматизированные тесты (1/2)

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

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

• Строгие соглашения об именовании• директория начинается с test - юнит тест• все остальное - ручное тестирование

43

Автоматизированные тесты (2/2)

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

одном браузере не проходит

44

Автоматизированные тесты - выбор

• QUnit• PhantomJS + IE в виртуалках

• Почему не • TestSwarm• Buster.js• Dojoh Robot• External Farms (browsershots, browserling,etc)• Selenium

45

QUnit

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

46

Почему не

• TestSwarm• сильная завязка на инфрастуктуру

o нам было необходимо встроить ее в наш билдпроцесс и в нашу экосистему

o билд помечается ПОСЛЕ сборки, а не во время• слабая возможность кастомизации

o пришлось бы копировать кодo кастомизация репортинга

47

Почему не

• Buster.js• ориентирован на node.js standalone модули, не на тест виджетов• инициировать тесты из браузера надо вручную

o нам нужен автоматический запуск/закрытие браузера

48

Почему не

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

o нам нужен автоматический запуск/закрытие браузера

49

Почему не

• External Farms (browsershots, browserling,etc)• дорого• проблемы безопасности (VPN access в интранет)• риск завязки сборки на внешние системы

50

Почему не

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

51

В итоге

• Гибрид Selenium Server, WebDriver, node.js runner• Создана тестовая страница, запускающая ВСЕ юнит

тесты• Сборщик через node.js selenium wd client запускает

браузеры и тестовую страницу в разных браузерах• Страница создает json-результаты, которые

доставляются сборщику

52

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

WinXP (IE8)

Win7 (IE9)

Build server

phantomjsS

S

Win8 (IE10) S

WD

Mac 10.8 (Safari)

S

Sselenium server

node.js wd selenium client

WD

53




• Итоги

54

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

• API Documentation• содержит краткое описание всех доступных модулей и их

интерфейсов.

• Reference Guide• содержит расширенное, по сравнению с API, описание модулей

APS SDK и их основных свойств и методов.

55

Большое количество примеров

• Каждая статья содержит примеры.

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

• Страница каждого виджета содержит ссылку на страницу с автотестами.

56




• Итоги

57

Песочница

• возможность легко попробовать самому

• быстрое открытие примеров

• возможность сохранения

• удобство использования

58

Технологии песочницы

• Источник вдохновения: jsfiddle.net

• Базис: Code Mirror + addons

• Autocomplete: Tern

59

Словарь автокомплита

"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" }, ...

60

Удобная песочница

• подсветка синтаксиса

• умный autocomplete с подсказками из документации

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

• проверка кода на лету

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

61

62


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

63

Итоги

• Модульный SDK:• имеющие состояние «толстые» виджеты • датабиндинг• шаблонизация

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

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

• Песочница• LiveEdit с продвинутым code-completion

64

Спасибо!

Technology

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