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
• обеспечение брендинга в усло...
Что такое OSS
• OSS - системы эксплуатационной поддержки управление сетевой инфрастуктурой, учет, выделение
ресурсов
• пре...
Что такое APS
• Стандарт, позволяющий относительно быстро
проинтегрировать приложения и сервисы в экосистему
на базе Paral...
APS 1.x
• Декларативное описание как модели, так и UI
• Весь UI основан на декларируемых свойствах бизнесмодели
• Бизнес-м...
APS 2.x
•
•
•
•
•

Модель объявляется отдельно, доступна по REST
UI абсолютно независим
Декларативная навигация
Screen - о...
Ограничения
• Панели брендируются - унаследованный лэйаут,
который может меняться
• Девелоперы скринов - от бэкендеров до ...
Собственный JS SDK
• Использование html маркапа минимально и отражает
семантику
• Возможность использования унаследованног...
Как
Содержание
• Зачем
• Как
•
•

•
•
•

использование существующих фреймворков
продуманный API
автоматизированные тесты
удобн...
Использование существующих
фреймворков
• Полностью свой фреймворк - слишком дорого
• Требования к фреймворку:
•
•
•
•
•
•
...
Использование существующих
фреймворков - выбор
• ExtJS (Sencha JS)
• JQueryUI

• loader (RequireJS/CommonJS/...) + MV* Fra...
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 ...
Dojo Toolkit
•
•
•
•

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

•
•
•

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

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

•

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

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

• в отношениях родитель-ребенок
Декларативное объявление виджетов
require(["dojo/parser", "aps/ready!"],
function(parser){ parser.parse(); });
<fieldset d...
Программное объявление виджетов
require(["aps/FieldSet",
"aps/CheckBox",
"aps/ready!"
], function (FieldSet, CheckBox) {
v...
Объявление виджетов с помощью
загрузчика
require(["aps/load",
"aps/ready!"
], function (load) {
load(["aps/FieldSet", {
ti...
Связывание данных: Store
• Store служит для связи с локальным (aps/Memory) или
удаленным (aps/Store) хранилищем данных.
re...
Связывание данных: Model
• Model - служит для связи виджетов с данными.
require(["aps/TextBox", "dojox/mvc/getStateful", "...
Продуманный API
• В основе - API устоявшегося и популярного фреймворка.
• Единые для всех модулей правила именования свойс...
Единые способы взаимодействия
между собой
• Связывание данных и виджетов через модули Model и
Store
• Слежения за состояни...
Единые правила именования
• Имена приватных/защищенных свойств и методов
начинаются с ‘_’.
• Классы - CamelCase, методы, ф...
Пример
var grid = new Grid({ //Грид с возможностью выбора строк
columns : layoutSimpleGrid,
selectionMode : "single",
stor...
Содержание
• Зачем
• Как
•
•

•
•
•

использование существующих фреймворков
продуманный API
автоматизированные тесты
удобн...
Билд-система
Jenkins
(scheduler)

Nexus
(artifact manager)

Build server
Maven3 (infrastructure)
DOJO Build (closure & lay...
Автоматизированные тесты (1/2)
• Можно запустить без инфрастуктуры
• Строго отдельный тест для каждого компонента
• Тесты ...
Автоматизированные тесты (2/2)
• Юнит тесты запускаются ВСЕГДА при сборке
• Сборка отменяется если хотя бы один тест хотя ...
Автоматизированные тесты - выбор
• QUnit
• PhantomJS + IE в виртуалках
• Почему не
•
•
•
•
•

TestSwarm
Buster.js
Dojoh Ro...
QUnit
• распространенный
• удобный
• простой
Почему не
• TestSwarm
•

•

сильная завязка на инфрастуктуру
o нам было необходимо встроить ее в наш билдпроцесс и в нашу
...
Почему не
• Buster.js
•
•

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

куча ненужных фреймов
инициировать тесты из браузера надо вручную
o нам нужен автоматический ...
Почему не
• External Farms (browsershots, browserling,etc)
•
•
•

дорого
проблемы безопасности (VPN access в интранет)
рис...
Почему не
• Selenium
•
•

громоздок
невозможность запуска тестов без инфрастуктуры
В итоге
• Гибрид Selenium Server, WebDriver, node.js runner
• Создана тестовая страница, запускающая ВСЕ юнит
тесты
• Сбор...
Компоненты тестовой инфрастуктуры
WinXP (IE8)

S
WD

Win7 (IE9)

S

Win8 (IE10)

Build server
phantomjs

S
S

Mac 10.8
(Sa...
Содержание
• Зачем
• Как
•
•

•
•
•

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

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

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

•
•
•

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

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

• Autocomplete: Tern
Словарь автокомплита
"MessageList":{
"!type":"fn(options: object)->!custom:MessageList_ctor",
"prototype":{
"cols":{
"!typ...
Удобная песочница
• подсветка синтаксиса
• умный autocomplete с подсказками из документации

• автодополнение закрывающих ...
Содержание
• Зачем
• Как
• Итоги
Итоги
• Модульный SDK:
•
•
•

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

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

мануал и авт...
Спасибо!
Построение собственного JS SDK — зачем и как?
Построение собственного JS SDK — зачем и как?
Upcoming SlideShare
Loading in …5
×

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

1,849 views

Published on

Многие разработчики любят делать свои велосипеды, но не все задумываются зачем. Мы расскажем о том, зачем вам может понадобится собственный JavaScript SDK и полезно ли кататься на велосипедах.

Мы делали собственный JS SDK для того, чтобы дать возможность создания плагинов в рамках большой enterprise системы - <b>Parallels Automation</b> и <b>Plesk Panel</b>. Сам SDK является частью общего стандарта <b>APS</b>, который является шиной, объединяющей все наши продукты по автоматизации. Обе панели брендируются и мы должны были сохранить брендинг при уже существующей кодовой базе верстки и существующих правилах оформления. И главное - надо было дать возможность создания UI сторонним девелоперам, которые могут иметь абсолютно разный уровень - от пришедших бекэндеров до профессиональных js-разработчиков.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,849
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. APS JS SDK Tim Nizametdinov Eugeny Uspenskiy Last Update: 25 November 2013
  2. 2. Зачем
  3. 3. Содержание • Зачем • • • • • • что такое OSS что такое APS APS 1.x APS 2.0 ограничения собственный JS SDK • Как • Итоги
  4. 4. Зачем • Создание плагинов для большой enterprise системы Parallels Automation (OSS) и Plesk • обеспечение брендинга в условиях существующего codebase верстки и общего style guide • возможность унифицированного создания UI сторонними разработчиками
  5. 5. Что такое OSS • OSS - системы эксплуатационной поддержки управление сетевой инфрастуктурой, учет, выделение ресурсов • предоставление сервисов в рамках этой инфрастуктуры
  6. 6. Что такое APS • Стандарт, позволяющий относительно быстро проинтегрировать приложения и сервисы в экосистему на базе Parallels Automation (создать плагины)
  7. 7. APS 1.x • Декларативное описание как модели, так и UI • Весь UI основан на декларируемых свойствах бизнесмодели • Бизнес-модель -> UI, а не наоборот • -> Крайне убогий UI, нечитаемое декларативное метаописание
  8. 8. APS 2.x • • • • • Модель объявляется отдельно, доступна по REST UI абсолютно независим Декларативная навигация Screen - обычный html -> UI -> бизнес-модель
  9. 9. Ограничения • Панели брендируются - унаследованный лэйаут, который может меняться • Девелоперы скринов - от бэкендеров до js-профи • Не опенсорс продукт - лицензионные ограничения
  10. 10. Собственный JS SDK • Использование html маркапа минимально и отражает семантику • Возможность использования унаследованного маркапа • Hаличие документации
  11. 11. Как
  12. 12. Содержание • Зачем • Как • • • • • использование существующих фреймворков продуманный API автоматизированные тесты удобная документация песочница • Итоги
  13. 13. Использование существующих фреймворков • Полностью свой фреймворк - слишком дорого • Требования к фреймворку: • • • • • • поддержка шаблонов высокая гибкость распространенность кастомизируемость оформления целостность красивые и динамические элементы
  14. 14. Использование существующих фреймворков - выбор • ExtJS (Sencha JS) • JQueryUI • loader (RequireJS/CommonJS/...) + MV* Framework (KnockoutJS/AngularJS/…) • Dojo Toolkit
  15. 15. ExtJS (Sencha JS) + • богатые виджеты (Grids, Charts etc.) • удобная модель связывания данных • система сборки • активное развитие • распространенность • поддержка шаблонов
  16. 16. ExtJS (Sencha JS) • сложная кастомизация виджетов • большие лицензионные отчисления
  17. 17. JQuery UI + • готовые популярные виджеты • очень большая распространенность • низкий порог вхождения • легкость кастомизации оформления • отсутствие лицензионных отчислений
  18. 18. JQuery UI • • • • отсутствие поддержки шаблонов в виджетах отсутствие связывания данных отсутствие четкой абстракции слоев на момент исследования не стабилен
  19. 19. Loader + MV* Framework + • свобода выбора • теоретический легкий переход на ES6 Modules
  20. 20. Loader + MV* Framework • отсутствие целостности • необходимость писать модули с нуля • отсутствие поддержки шаблонов внутри виджетов
  21. 21. Dojo Toolkit + • модульная структура на базе AMD • богатые легко кастомизируемые виджеты • многолетняя поддержка Deferred и Promise • отсутствие лицензионных отчислений • поддержка связывания данных • поддержка шаблонов виджета • система сборки
  22. 22. Dojo Toolkit • • • • слабая распространенность высокий порог вхождения навязывание своей философии зачаточная поддержка мобильных девайсов
  23. 23. Содержание • Зачем • Как • • • • • использование существующих фреймворков продуманный API автоматизированные тесты удобная документация песочница • Итоги
  24. 24. APS JS SDK • модульная структура на базе AMD • модули, имеющие визуальное представление - виджеты • модули для работы с данными: Model и Store
  25. 25. Модульная структура AMD • Позволяет подключать любые сторонние библиотеки запакованные в формате AMD: • • • • JQuery AngularJS KnockoutJS и многие другие
  26. 26. Widgets • верстка виджета задается его HTML-шаблоном • виджеты могут включать друг друга • виджеты могут динамически изменяться • существует три способа объявления виджетов
  27. 27. Включение виджетов друг в друга • на уровне шаблона • в отношениях родитель-ребенок
  28. 28. Декларативное объявление виджетов 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>
  29. 29. Программное объявление виджетов 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(); });
  30. 30. Объявление виджетов с помощью загрузчика require(["aps/load", "aps/ready!" ], function (load) { load(["aps/FieldSet", { title : "I am aps / FieldSet" }, [["aps / CheckBox", { label : "CheckBox", description : "I am aps / CheckBox" } ]] ]); });
  31. 31. Связывание данных: 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"); });
  32. 32. Связывание данных: 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); });
  33. 33. Продуманный API • В основе - API устоявшегося и популярного фреймворка. • Единые для всех модулей правила именования свойств и методов. • Единые для всех модулей способы взаимодействия между собой и внешним миром.
  34. 34. Единые способы взаимодействия между собой • Связывание данных и виджетов через модули Model и Store • Слежения за состоянием виджета с помощью метода watch.Нет генерации событий • Вся работа со свойствами выполняется только через методы get и set
  35. 35. Единые правила именования • Имена приватных/защищенных свойств и методов начинаются с ‘_’. • Классы - CamelCase, методы, функции, свойства, модули - mixedCase
  36. 36. Пример 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");
  37. 37. Содержание • Зачем • Как • • • • • использование существующих фреймворков продуманный API автоматизированные тесты удобная документация песочница • Итоги
  38. 38. Билд-система Jenkins (scheduler) Nexus (artifact manager) Build server Maven3 (infrastructure) DOJO Build (closure & layering) Node.js (tests runner) assembled .zip (+standalone .zip)
  39. 39. Автоматизированные тесты (1/2) • Можно запустить без инфрастуктуры • Строго отдельный тест для каждого компонента • Тесты в директории самого фреймворка • • для ручного и автоматизированного тестирования являются одновременно примерами • Строгие соглашения об именовании • • директория начинается с test - юнит тест все остальное - ручное тестирование
  40. 40. Автоматизированные тесты (2/2) • Юнит тесты запускаются ВСЕГДА при сборке • Сборка отменяется если хотя бы один тест хотя бы на одном браузере не проходит
  41. 41. Автоматизированные тесты - выбор • QUnit • PhantomJS + IE в виртуалках • Почему не • • • • • TestSwarm Buster.js Dojoh Robot External Farms (browsershots, browserling,etc) Selenium
  42. 42. QUnit • распространенный • удобный • простой
  43. 43. Почему не • TestSwarm • • сильная завязка на инфрастуктуру o нам было необходимо встроить ее в наш билдпроцесс и в нашу экосистему o билд помечается ПОСЛЕ сборки, а не во время слабая возможность кастомизации o пришлось бы копировать код o кастомизация репортинга
  44. 44. Почему не • Buster.js • • ориентирован на node.js standalone модули, не на тест виджетов инициировать тесты из браузера надо вручную o нам нужен автоматический запуск/закрытие браузера
  45. 45. Почему не • dojoh robot • • куча ненужных фреймов инициировать тесты из браузера надо вручную o нам нужен автоматический запуск/закрытие браузера
  46. 46. Почему не • External Farms (browsershots, browserling,etc) • • • дорого проблемы безопасности (VPN access в интранет) риск завязки сборки на внешние системы
  47. 47. Почему не • Selenium • • громоздок невозможность запуска тестов без инфрастуктуры
  48. 48. В итоге • Гибрид Selenium Server, WebDriver, node.js runner • Создана тестовая страница, запускающая ВСЕ юнит тесты • Сборщик через node.js selenium wd client запускает браузеры и тестовую страницу в разных браузерах • Страница создает json-результаты, которые доставляются сборщику
  49. 49. Компоненты тестовой инфрастуктуры 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
  50. 50. Содержание • Зачем • Как • • • • • использование существующих фреймворков продуманный API автоматизированные тесты удобная документация песочница • Итоги
  51. 51. Удобная документация • API Documentation • содержит краткое описание всех доступных модулей и их интерфейсов. • Reference Guide • содержит расширенное, по сравнению с API, описание модулей APS SDK и их основных свойств и методов.
  52. 52. Большое количество примеров • Каждая статья содержит примеры. • Примеры использования и создания модуля даны для всех трех способов объявления. • Страница каждого виджета содержит ссылку на страницу с автотестами.
  53. 53. Содержание • Зачем • Как • • • • • использование существующих фреймворков продуманный API автоматизированные тесты удобная документация песочница • Итоги
  54. 54. Песочница • возможность легко попробовать самому • быстрое открытие примеров • возможность сохранения • удобство использования
  55. 55. Технологии песочницы • Источник вдохновения: jsfiddle.net • Базис: Code Mirror + addons • Autocomplete: Tern
  56. 56. Словарь автокомплита "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" }, ...
  57. 57. Удобная песочница • подсветка синтаксиса • умный autocomplete с подсказками из документации • автодополнение закрывающих тегов и скобок • проверка кода на лету • форматирование
  58. 58. Содержание • Зачем • Как • Итоги
  59. 59. Итоги • Модульный SDK: • • • имеющие состояние «толстые» виджеты датабиндинг шаблонизация • Документация • мануал и автоматически созданная по коду • Тесты • для автоматического тестирования и как примеры • Песочница • LiveEdit с продвинутым code-completion
  60. 60. Спасибо!

×