SlideShare a Scribd company logo
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
•
•
•
•

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

•
•
•

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

• Итоги
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");
Содержание
• Зачем
• Как
•
•

•
•
•

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

• Итоги
Билд-система
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
автоматизированные тесты
удобная документация
песочница

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

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

• Reference Guide
•

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

•
•
•

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

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

• возможность сохранения
• удобство использования
Технологии песочницы
• Источник вдохновения: 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 с подсказками из документации

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

• форматирование
Построение собственного JS SDK — зачем и как?
Содержание
• Зачем
• Как
• Итоги
Итоги
• Модульный SDK:
•
•
•

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

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

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

• Тесты
•

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

• Песочница
•

LiveEdit с продвинутым code-completion
Построение собственного JS SDK — зачем и как?
Спасибо!

More Related Content

What's hot

Инструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важныИнструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важны
Roman Dvornov
 
Рендеринг может больше: vue.js vs React, Андрей Солодовников
Рендеринг может больше: vue.js vs React, Андрей СолодовниковРендеринг может больше: vue.js vs React, Андрей Солодовников
Рендеринг может больше: vue.js vs React, Андрей Солодовников
DevDay
 
Изоморфный JavaScript — будущее уже здесь
Изоморфный JavaScript — будущее уже здесьИзоморфный JavaScript — будущее уже здесь
Изоморфный JavaScript — будущее уже здесь
CodeFest
 
Жизнь в изоляции
Жизнь в изоляцииЖизнь в изоляции
Жизнь в изоляции
Roman Dvornov
 
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)
Ontico
 
knockout.js
knockout.jsknockout.js
knockout.js
Anton Patrushev
 
Protrarctor and Angular
Protrarctor and AngularProtrarctor and Angular
Protrarctor and Angular
SQALab
 
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
Ontico
 
Automation Functional Testing in Agile Projects
Automation Functional Testing in Agile ProjectsAutomation Functional Testing in Agile Projects
Automation Functional Testing in Agile Projects
Andrey Rebrov
 
Инструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важныИнструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важны
CodeFest
 
Excelsior JET в действии
Excelsior JET в действииExcelsior JET в действии
Excelsior JET в действии
Nikita Lipsky
 
Баба Яга против!
Баба Яга против!Баба Яга против!
Баба Яга против!
Roman Dvornov
 
презентация вводного доклада Angular на fronttalks.ru
презентация вводного доклада Angular на fronttalks.ruпрезентация вводного доклада Angular на fronttalks.ru
презентация вводного доклада Angular на fronttalks.ru
Ivan Gromov
 
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только одинSECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON
 
CodeFest dirty facts about AngularJS
CodeFest dirty facts about AngularJSCodeFest dirty facts about AngularJS
CodeFest dirty facts about AngularJS
Антон Плешивцев
 
AngularJS basics & theory
AngularJS basics & theoryAngularJS basics & theory
AngularJS basics & theory
DevOWL Meetup
 
AngularJS. Введение и простые примеры для понимания
AngularJS. Введение и простые примеры для пониманияAngularJS. Введение и простые примеры для понимания
AngularJS. Введение и простые примеры для понимания
Igor Sazonov
 
Silverlight 4, есть ли жизнь на десктопе
Silverlight 4, есть ли жизнь на десктопеSilverlight 4, есть ли жизнь на десктопе
Silverlight 4, есть ли жизнь на десктопе
Alex Tumanoff
 
Sql server clr integration
Sql server clr integration Sql server clr integration
Sql server clr integration
Alex Tumanoff
 
Rich-client, или Как я перестал боятся и полюбил велосипеды / Владимир Дупелев
Rich-client, или Как я перестал боятся и полюбил велосипеды / Владимир ДупелевRich-client, или Как я перестал боятся и полюбил велосипеды / Владимир Дупелев
Rich-client, или Как я перестал боятся и полюбил велосипеды / Владимир Дупелев
Ontico
 

What's hot (20)

Инструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важныИнструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важны
 
Рендеринг может больше: vue.js vs React, Андрей Солодовников
Рендеринг может больше: vue.js vs React, Андрей СолодовниковРендеринг может больше: vue.js vs React, Андрей Солодовников
Рендеринг может больше: vue.js vs React, Андрей Солодовников
 
Изоморфный JavaScript — будущее уже здесь
Изоморфный JavaScript — будущее уже здесьИзоморфный JavaScript — будущее уже здесь
Изоморфный JavaScript — будущее уже здесь
 
Жизнь в изоляции
Жизнь в изоляцииЖизнь в изоляции
Жизнь в изоляции
 
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)
 
knockout.js
knockout.jsknockout.js
knockout.js
 
Protrarctor and Angular
Protrarctor and AngularProtrarctor and Angular
Protrarctor and Angular
 
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
 
Automation Functional Testing in Agile Projects
Automation Functional Testing in Agile ProjectsAutomation Functional Testing in Agile Projects
Automation Functional Testing in Agile Projects
 
Инструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важныИнструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важны
 
Excelsior JET в действии
Excelsior JET в действииExcelsior JET в действии
Excelsior JET в действии
 
Баба Яга против!
Баба Яга против!Баба Яга против!
Баба Яга против!
 
презентация вводного доклада Angular на fronttalks.ru
презентация вводного доклада Angular на fronttalks.ruпрезентация вводного доклада Angular на fronttalks.ru
презентация вводного доклада Angular на fronttalks.ru
 
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только одинSECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
 
CodeFest dirty facts about AngularJS
CodeFest dirty facts about AngularJSCodeFest dirty facts about AngularJS
CodeFest dirty facts about AngularJS
 
AngularJS basics & theory
AngularJS basics & theoryAngularJS basics & theory
AngularJS basics & theory
 
AngularJS. Введение и простые примеры для понимания
AngularJS. Введение и простые примеры для пониманияAngularJS. Введение и простые примеры для понимания
AngularJS. Введение и простые примеры для понимания
 
Silverlight 4, есть ли жизнь на десктопе
Silverlight 4, есть ли жизнь на десктопеSilverlight 4, есть ли жизнь на десктопе
Silverlight 4, есть ли жизнь на десктопе
 
Sql server clr integration
Sql server clr integration Sql server clr integration
Sql server clr integration
 
Rich-client, или Как я перестал боятся и полюбил велосипеды / Владимир Дупелев
Rich-client, или Как я перестал боятся и полюбил велосипеды / Владимир ДупелевRich-client, или Как я перестал боятся и полюбил велосипеды / Владимир Дупелев
Rich-client, или Как я перестал боятся и полюбил велосипеды / Владимир Дупелев
 

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

Open source technologies in Microsoft cloud - MS SWIT 2014
Open source technologies in Microsoft cloud - MS SWIT 2014Open source technologies in Microsoft cloud - MS SWIT 2014
Open source technologies in Microsoft cloud - MS SWIT 2014
Alexey Bokov
 
What's new in Visual Studio 2012
What's new in Visual Studio 2012What's new in Visual Studio 2012
What's new in Visual Studio 2012
InTRUEdeR
 
опыт Clickberry.com стартап на drupal в облаке павел загор
опыт Clickberry.com   стартап на drupal в облаке павел загоропыт Clickberry.com   стартап на drupal в облаке павел загор
опыт Clickberry.com стартап на drupal в облаке павел загор
drupalconf
 
UWDC 2013, Как мы используем Yii
UWDC 2013, Как мы используем YiiUWDC 2013, Как мы используем Yii
UWDC 2013, Как мы используем Yii
Alexander Makarov
 
Модульная структура. Цветцих Денис D2D Just.NET
Модульная структура. Цветцих Денис D2D Just.NETМодульная структура. Цветцих Денис D2D Just.NET
Модульная структура. Цветцих Денис D2D Just.NET
Dev2Dev
 
Модульная структура
Модульная структураМодульная структура
Модульная структура
Denis Tsvettsih
 
Александр Сычев "Статика и динамика. Как фреймворки помогут прокачать ваше пр...
Александр Сычев "Статика и динамика. Как фреймворки помогут прокачать ваше пр...Александр Сычев "Статика и динамика. Как фреймворки помогут прокачать ваше пр...
Александр Сычев "Статика и динамика. Как фреймворки помогут прокачать ваше пр...
IT Event
 
webpack: 7 бед - один ответ
webpack: 7 бед - один ответwebpack: 7 бед - один ответ
webpack: 7 бед - один ответ
Denis Izmaylov
 
ASP.NET, MVC, ASP.NET MVC
ASP.NET, MVC, ASP.NET MVCASP.NET, MVC, ASP.NET MVC
ASP.NET, MVC, ASP.NET MVC
GetDev.NET
 
DevOps в Agile среде. Как, почему и когда инструменты помогают.
DevOps в Agile среде. Как, почему и когда инструменты помогают.DevOps в Agile среде. Как, почему и когда инструменты помогают.
DevOps в Agile среде. Как, почему и когда инструменты помогают.
Alexander Titov
 
Крыша 2.0
Крыша 2.0Крыша 2.0
Jelastic для разработчиков ПО
Jelastic для разработчиков ПОJelastic для разработчиков ПО
Jelastic для разработчиков ПО
Dmitry Lazarenko
 
JavaScript-модули "из прошлого в будущее"
JavaScript-модули "из прошлого в будущее"JavaScript-модули "из прошлого в будущее"
JavaScript-модули "из прошлого в будущее"
oelifantiev
 
Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...
Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...
Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...
Ontico
 
WebAssembly
WebAssemblyWebAssembly
WebAssembly
Sergey Rubanov
 
Node.js введение в технологию, КПИ #ITmeetingKPI
Node.js введение в технологию, КПИ  #ITmeetingKPINode.js введение в технологию, КПИ  #ITmeetingKPI
Node.js введение в технологию, КПИ #ITmeetingKPI
Timur Shemsedinov
 
Как развивать библиотеку компонентов, не ломая ее / Артур Удалов (Mail.Ru Group)
Как развивать библиотеку компонентов, не ломая ее / Артур Удалов (Mail.Ru Group)Как развивать библиотеку компонентов, не ломая ее / Артур Удалов (Mail.Ru Group)
Как развивать библиотеку компонентов, не ломая ее / Артур Удалов (Mail.Ru Group)
Ontico
 
MockServer-driven development
MockServer-driven developmentMockServer-driven development
MockServer-driven development
Testableapple
 
Владимир Никонов "Вызовы при разработке enterprise продукта"
Владимир Никонов "Вызовы при разработке enterprise продукта"Владимир Никонов "Вызовы при разработке enterprise продукта"
Владимир Никонов "Вызовы при разработке enterprise продукта"
Fwdays
 
Java/Scala Lab: Владимир Илюшенко - Jelastic PaaS v2.5 Capabilities and Benef...
Java/Scala Lab: Владимир Илюшенко - Jelastic PaaS v2.5 Capabilities and Benef...Java/Scala Lab: Владимир Илюшенко - Jelastic PaaS v2.5 Capabilities and Benef...
Java/Scala Lab: Владимир Илюшенко - Jelastic PaaS v2.5 Capabilities and Benef...
GeeksLab Odessa
 

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

Open source technologies in Microsoft cloud - MS SWIT 2014
Open source technologies in Microsoft cloud - MS SWIT 2014Open source technologies in Microsoft cloud - MS SWIT 2014
Open source technologies in Microsoft cloud - MS SWIT 2014
 
What's new in Visual Studio 2012
What's new in Visual Studio 2012What's new in Visual Studio 2012
What's new in Visual Studio 2012
 
опыт Clickberry.com стартап на drupal в облаке павел загор
опыт Clickberry.com   стартап на drupal в облаке павел загоропыт Clickberry.com   стартап на drupal в облаке павел загор
опыт Clickberry.com стартап на drupal в облаке павел загор
 
UWDC 2013, Как мы используем Yii
UWDC 2013, Как мы используем YiiUWDC 2013, Как мы используем Yii
UWDC 2013, Как мы используем Yii
 
Модульная структура. Цветцих Денис D2D Just.NET
Модульная структура. Цветцих Денис D2D Just.NETМодульная структура. Цветцих Денис D2D Just.NET
Модульная структура. Цветцих Денис D2D Just.NET
 
Модульная структура
Модульная структураМодульная структура
Модульная структура
 
Александр Сычев "Статика и динамика. Как фреймворки помогут прокачать ваше пр...
Александр Сычев "Статика и динамика. Как фреймворки помогут прокачать ваше пр...Александр Сычев "Статика и динамика. Как фреймворки помогут прокачать ваше пр...
Александр Сычев "Статика и динамика. Как фреймворки помогут прокачать ваше пр...
 
webpack: 7 бед - один ответ
webpack: 7 бед - один ответwebpack: 7 бед - один ответ
webpack: 7 бед - один ответ
 
ASP.NET, MVC, ASP.NET MVC
ASP.NET, MVC, ASP.NET MVCASP.NET, MVC, ASP.NET MVC
ASP.NET, MVC, ASP.NET MVC
 
DevOps в Agile среде. Как, почему и когда инструменты помогают.
DevOps в Agile среде. Как, почему и когда инструменты помогают.DevOps в Agile среде. Как, почему и когда инструменты помогают.
DevOps в Agile среде. Как, почему и когда инструменты помогают.
 
Крыша 2.0
Крыша 2.0Крыша 2.0
Крыша 2.0
 
Jelastic для разработчиков ПО
Jelastic для разработчиков ПОJelastic для разработчиков ПО
Jelastic для разработчиков ПО
 
JavaScript-модули "из прошлого в будущее"
JavaScript-модули "из прошлого в будущее"JavaScript-модули "из прошлого в будущее"
JavaScript-модули "из прошлого в будущее"
 
Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...
Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...
Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...
 
WebAssembly
WebAssemblyWebAssembly
WebAssembly
 
Node.js введение в технологию, КПИ #ITmeetingKPI
Node.js введение в технологию, КПИ  #ITmeetingKPINode.js введение в технологию, КПИ  #ITmeetingKPI
Node.js введение в технологию, КПИ #ITmeetingKPI
 
Как развивать библиотеку компонентов, не ломая ее / Артур Удалов (Mail.Ru Group)
Как развивать библиотеку компонентов, не ломая ее / Артур Удалов (Mail.Ru Group)Как развивать библиотеку компонентов, не ломая ее / Артур Удалов (Mail.Ru Group)
Как развивать библиотеку компонентов, не ломая ее / Артур Удалов (Mail.Ru Group)
 
MockServer-driven development
MockServer-driven developmentMockServer-driven development
MockServer-driven development
 
Владимир Никонов "Вызовы при разработке enterprise продукта"
Владимир Никонов "Вызовы при разработке enterprise продукта"Владимир Никонов "Вызовы при разработке enterprise продукта"
Владимир Никонов "Вызовы при разработке enterprise продукта"
 
Java/Scala Lab: Владимир Илюшенко - Jelastic PaaS v2.5 Capabilities and Benef...
Java/Scala Lab: Владимир Илюшенко - Jelastic PaaS v2.5 Capabilities and Benef...Java/Scala Lab: Владимир Илюшенко - Jelastic PaaS v2.5 Capabilities and Benef...
Java/Scala Lab: Владимир Илюшенко - Jelastic PaaS v2.5 Capabilities and Benef...
 

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

  • 1. APS JS SDK Tim Nizametdinov Eugeny Uspenskiy Last Update: 25 November 2013
  • 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. Содержание • Зачем • Как • • • • • использование существующих фреймворков продуманный API автоматизированные тесты удобная документация песочница • Итоги
  • 24. APS JS SDK • модульная структура на базе AMD • модули, имеющие визуальное представление - виджеты • модули для работы с данными: Model и Store
  • 25. Модульная структура AMD • Позволяет подключать любые сторонние библиотеки запакованные в формате AMD: • • • • JQuery AngularJS KnockoutJS и многие другие
  • 26. Widgets • верстка виджета задается его HTML-шаблоном • виджеты могут включать друг друга • виджеты могут динамически изменяться • существует три способа объявления виджетов
  • 27. Включение виджетов друг в друга • на уровне шаблона • в отношениях родитель-ребенок
  • 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. Программное объявление виджетов 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. Объявление виджетов с помощью загрузчика 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. Связывание данных: 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. Связывание данных: 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. Продуманный API • В основе - API устоявшегося и популярного фреймворка. • Единые для всех модулей правила именования свойств и методов. • Единые для всех модулей способы взаимодействия между собой и внешним миром.
  • 34. Единые способы взаимодействия между собой • Связывание данных и виджетов через модули Model и Store • Слежения за состоянием виджета с помощью метода watch.Нет генерации событий • Вся работа со свойствами выполняется только через методы get и set
  • 35. Единые правила именования • Имена приватных/защищенных свойств и методов начинаются с ‘_’. • Классы - CamelCase, методы, функции, свойства, модули - mixedCase
  • 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. Содержание • Зачем • Как • • • • • использование существующих фреймворков продуманный API автоматизированные тесты удобная документация песочница • Итоги
  • 38. Билд-система Jenkins (scheduler) Nexus (artifact manager) Build server Maven3 (infrastructure) DOJO Build (closure & layering) Node.js (tests runner) assembled .zip (+standalone .zip)
  • 39. Автоматизированные тесты (1/2) • Можно запустить без инфрастуктуры • Строго отдельный тест для каждого компонента • Тесты в директории самого фреймворка • • для ручного и автоматизированного тестирования являются одновременно примерами • Строгие соглашения об именовании • • директория начинается с test - юнит тест все остальное - ручное тестирование
  • 40. Автоматизированные тесты (2/2) • Юнит тесты запускаются ВСЕГДА при сборке • Сборка отменяется если хотя бы один тест хотя бы на одном браузере не проходит
  • 41. Автоматизированные тесты - выбор • QUnit • PhantomJS + IE в виртуалках • Почему не • • • • • TestSwarm Buster.js Dojoh Robot External Farms (browsershots, browserling,etc) Selenium
  • 43. Почему не • TestSwarm • • сильная завязка на инфрастуктуру o нам было необходимо встроить ее в наш билдпроцесс и в нашу экосистему o билд помечается ПОСЛЕ сборки, а не во время слабая возможность кастомизации o пришлось бы копировать код o кастомизация репортинга
  • 44. Почему не • Buster.js • • ориентирован на node.js standalone модули, не на тест виджетов инициировать тесты из браузера надо вручную o нам нужен автоматический запуск/закрытие браузера
  • 45. Почему не • dojoh robot • • куча ненужных фреймов инициировать тесты из браузера надо вручную o нам нужен автоматический запуск/закрытие браузера
  • 46. Почему не • External Farms (browsershots, browserling,etc) • • • дорого проблемы безопасности (VPN access в интранет) риск завязки сборки на внешние системы
  • 47. Почему не • Selenium • • громоздок невозможность запуска тестов без инфрастуктуры
  • 48. В итоге • Гибрид Selenium Server, WebDriver, node.js runner • Создана тестовая страница, запускающая ВСЕ юнит тесты • Сборщик через node.js selenium wd client запускает браузеры и тестовую страницу в разных браузерах • Страница создает json-результаты, которые доставляются сборщику
  • 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. Содержание • Зачем • Как • • • • • использование существующих фреймворков продуманный API автоматизированные тесты удобная документация песочница • Итоги
  • 51. Удобная документация • API Documentation • содержит краткое описание всех доступных модулей и их интерфейсов. • Reference Guide • содержит расширенное, по сравнению с API, описание модулей APS SDK и их основных свойств и методов.
  • 52. Большое количество примеров • Каждая статья содержит примеры. • Примеры использования и создания модуля даны для всех трех способов объявления. • Страница каждого виджета содержит ссылку на страницу с автотестами.
  • 53. Содержание • Зачем • Как • • • • • использование существующих фреймворков продуманный API автоматизированные тесты удобная документация песочница • Итоги
  • 54. Песочница • возможность легко попробовать самому • быстрое открытие примеров • возможность сохранения • удобство использования
  • 55. Технологии песочницы • Источник вдохновения: jsfiddle.net • Базис: Code Mirror + addons • Autocomplete: Tern
  • 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. Удобная песочница • подсветка синтаксиса • умный autocomplete с подсказками из документации • автодополнение закрывающих тегов и скобок • проверка кода на лету • форматирование
  • 60. Итоги • Модульный SDK: • • • имеющие состояние «толстые» виджеты датабиндинг шаблонизация • Документация • мануал и автоматически созданная по коду • Тесты • для автоматического тестирования и как примеры • Песочница • LiveEdit с продвинутым code-completion