Автор фреймворка jWidget рассказывает о причинах его появления и внутренней организации.

1. Егор Непомнящих

2. Очередной MV* фреймворк?
Зачем?

3. TodoMVC.com

4. Так зачем?
● Когда я начал разработку своего
фреймворка, об остальных ничего не было
слышно

5. Так зачем?
● Когда я начал разработку своего
фреймворка, об остальных ничего не было
слышно
● А как оказалось в итоге, jWidget круче всех

6. Приложения на базе jWidget

7. Приложения на базе jWidget
www.digmydata.com

8. Приложения на базе jWidget
Мой entry для Ludum Dare

9. Приложения на базе jWidget

10. Отличительные черты jWidget
● ООП-подход

11. Отличительные черты jWidget
● ООП-подход
● Гранулярность

12. Отличительные черты jWidget
● ООП-подход
● Гранулярность
● Предсказуемость

13. Отличительные черты jWidget
● ООП-подход
● Гранулярность
● Предсказуемость
● Простота

14. Отличительные черты jWidget
● ООП-подход
● Гранулярность
● Предсказуемость
● Простота
● Скорость

15. Тест на скорость
http://plnkr.co/edit/VtZe40

16. Тест на скорость
Вот только часть решений не MV* (читеры)

17. Что такое MV*?

18. Что такое MV*?
Приложение

19. Приложение
Что такое MV*?
Сущность 1
Сущность 2
Сущность 3

20. LibreOffice Impress
Что такое MV*?
Презентация
Слайд
Элемент слайда

21. LibreOffice Impress
Что такое MV*?
Модель презентации
Модель слайда
Модель элемента слайда
Панель слайдов
Диалог свойств слайда
Данные Представление
Редактор слайда
Представление элемента
Просмотрщик слайдов

22. LibreOffice Impress
Что такое MV*?
Модель презентации
Модель слайда
Модель элемента слайда
Панель слайдов
Редактор слайда
Представление элемента
Просмотрщик слайдов
Диалог свойств слайда
Данные Представление

23. LibreOffice Impress
Что такое MV*?
Модель презентации
Модель слайда
Модель элемента слайда
Панель слайдов
Редактор слайда
Представление элемента
Просмотрщик слайдов
Диалог свойств слайда
Данные Представление
События
События
События

24. Когда стоит использовать
клиентские MV*-фреймворки?
● Крупное приложение с большим
количеством взаимосвязанных сущностей
● Есть сущности, имеющие большое
количество представлений одновременно
● В команде достаточно матерых JavaScript-
разработчиков

25. Когда не стоит использовать
клиентские MV*-фреймворки?
● В команде мало хороших JavaScript-
разработчиков
● Страница должна грамотно парситься
поисковыми роботами и аналитическими
системами
● Вам нужна хорошая скорость работы
сайта (jWidget – исключение!)

26. Документация
Найдите ссылку в проекте на GitHub
https://github.com/enepomnyaschih/jwidget

27. Структура фреймворка
6 слоев

28. Структура фреймворка
1. Классы и объекты (JW.Class)

29. Классы и объекты
На базе популярной библиотеки
John'а Resig'а “Simple JavaScript inheritance”.
http://ejohn.org/blog/simple-javascript-inheritance/

30. Классы и объекты
Система агрегации объектов.
var Soldier = function() {
Soldier._super.call(this);
this.leftHand = this.own(new Hand("left"));
this.rightHand = this.own(new Hand("right"));
};
JW.extend(Soldier, JW.Class);
var soldier = new Soldier();
soldier.destroy();
// руки уничтожены тоже

31. Структура фреймворка
1. Классы и объекты (JW.Class)
2. События (JW.Event)

32. События
Нет никаких Observable. Есть Event.
this.titleChangeEvent = this.own(new JW.Event());
this.titleChangeEvent.trigger(
new JW.ValueEventParams(this, title));
this.own(obj.titleChangeEvent.bind(
this._onTitleChange, this))
Подписка.

33. Структура фреймворка
1. Классы и объекты (JW.Class)
2. События (JW.Event)
3. Свойства (JW.Property)

34. Свойства
Интерфейс проще некуда:
● Метод get()
● Метод set(value)
● Событие changeEvent

35. Свойства
Автоматическое дублирование.
source target1 target2
var source = new JW.Property("apple");
var target1 = new JW.Property();
target1.bindTo(source);
var target2 = new JW.Property();
target2.bindTo(target1);
source.set("banana");
// target2.get() === "banana"

36. Свойства
Функтор формирует свойство по формуле.
target '{value} {unit}'
JW.Functor
target == '1000 MW' value == 1000, unit == 'MW'
target == '1500 МВ' value == 1500, unit == 'МВ'

37. Свойства
Функтор формирует свойство по формуле.
target '{value} {unit}'
var target = new JW.Functor(
[ value, unit ],
function(value, unit) {
return value + " " + unit;
},
this
).target;
JW.Functor

38. Свойства
Switcher переключает on/off.
Hash (#doc_id) view selected?
JW.Functor JW.Switcher
http://myapp.com/#5077-MB

39. Свойства
Switcher переключает on/off.
Hash (#doc_id) view selected?
JW.Functor JW.Switcher
this.own(new JW.Switcher([view], {
init: function(view) { view.selected.set(true); },
done: function(view) { view.selected.set(false); },
scope: this
}));

40. Свойства
Можно осуществлять Data binding.
var el = $("#document");
this.own(new JW.UI.ClassUpdater(
el, "my-selected", selected));
this.own(new JW.UI.TextUpdater(el, name));
this.own(new JW.UI.ValueUpdater(el, name));
this.own(new JW.UI.ValueListener(el, name));
И двусторонний Data binding.

41. Свойства
Можно налету менять локализацию.
var printText = this.own(locale.getFunctor("print")).target;
this.own(new JW.UI.TextUpdater(el, printText));

42. Структура фреймворка
1. Классы и объекты (JW.Class)
2. События (JW.Event)
3. Свойства (JW.Property)
4. Коллекции (JW.AbstractCollection)

43. Коллекции
Три коллекции:
● Массив
(JW.AbstractArray)
● Словарь
(JW.AbstractMap)
● Множество
(JW.AbstractSet)

44. Коллекции
Три коллекции:
● Массив
(JW.AbstractArray)
● Словарь
(JW.AbstractMap)
● Множество
(JW.AbstractSet)
Две реализации:
● JW.Array
JW.Map
JW.Set
● JW.ObservableArray
JW.ObservableMap
JW.ObservableSet

45. Коллекции
И самое главное...

46. Коллекции
И самое главное...
СИНХРОНИЗАТОРЫ

47. Коллекции
Конвертер элементов (Mapper)
target[i] function(source[i])
var target = dataCollection.map(function(data) {
return new View(this, data);
}, this);

48. Коллекции
Конвертер элементов (Mapper)
target[i] function(source[i])
var target = dataCollection.map(function(data) {
return new View(this, data);
}, this);

49. Коллекции
Конвертер элементов (Mapper)
target[i] function(source[i])
var mapper = dataCollection.createMapper({
createItem: function(data) {
return new View(this, data);
},
destroyItem: JW.destroy,
scope: this
});
var viewCollection = mapper.target;

50. Коллекции
Конвертер элементов (Mapper)
target[i] function(source[i])
var mapper = dataCollection.createMapper({
createItem: function(data) {
return new View(this, data);
},
destroyItem: JW.destroy,
scope: this
});
var viewCollection = mapper.target;

51. Коллекции
Конвертер элементов (Mapper)
target[i] function(source[i])
var source = new JW.ObservableArray([5]);
var target = source.createMapper({
createItem: function(item) { return 2 * item; }
});
console.log(target.get(0)); // 10
source.add(7);
console.log(target.get(1)); // 14

52. Коллекции
Другие синхронизаторы
1. Конвертер элементов (Mapper)
target[i] function(source[i])
2. Фильтровщик (Filterer)
target[ ] function(source[ ]) ? source[ ] :

53. Коллекции
Другие синхронизаторы
1. Конвертер элементов (Mapper)
target[i] function(source[i])
2. Фильтровщик (Filterer)
target[ ] function(source[ ]) ? source[ ] :
3. Конвертер в множество (Lister)
JW.Set target[ ] source[ ]

54. Коллекции
Другие синхронизаторы
4. Конвертер в массив (Orderer)
JW.Array target (в порядке доб.) source

55. Коллекции
Другие синхронизаторы
4. Конвертер в массив (Orderer)
JW.Array target (в порядке доб.) source
5. Сортировщик (SorterComparing)
JW.Array target (sorted by f(x, y)) source

56. Коллекции
Другие синхронизаторы
4. Конвертер в массив (Orderer)
JW.Array target (в порядке доб.) source
5. Сортировщик (SorterComparing)
JW.Array target (sorted by f(x, y)) source
6. Объединитель массивов (Merger)
target source1 … sourceN

57. Коллекции
Другие синхронизаторы
7. Обратитель массива (Reverser)
target[i] source[length - i – 1]

58. Коллекции
Другие синхронизаторы
7. Обратитель массива (Reverser)
target[i] source[length - i – 1]
8. Индексатор (Indexer)
target[function(source[ ])] source[ ]

59. Коллекции
Можно делать цепочки синхронизаторов.
JW.Set JW.Array
JW.Set source list
JW.Map index
Sorter
Filterer
Indexer

60. Структура фреймворка
1. Классы и объекты (JW.Class)
2. События (JW.Event)
3. Свойства (JW.Property)
4. Коллекции (JW.AbstractCollection)
True

61. Структура фреймворка
1. Классы и объекты (JW.Class)
2. События (JW.Event)
3. Свойства (JW.Property)
4. Коллекции (JW.AbstractCollection)
5. Компоненты (JW.UI.Component)

62. Структура фреймворка
1. Классы и объекты (JW.Class)
2. События (JW.Event)
3. Свойства (JW.Property)
4. Коллекции (JW.AbstractCollection)
5. Компоненты (JW.UI.Component) ReactJS

63. И все-таки...

64. Компоненты
var Greeter = function() {
Greeter._super.call(this);
this.name = this.own(new JW.Property("wanderer"));
};
JW.extend(Greeter, JW.UI.Component, {
renderNameField: function(el) {
this.own(new JW.UI.ValueUpdater(el, this.name));
this.own(new JW.UI.ValueListener(el, this.name));
},
renderGreeting: function(el) {
var text = this.own(new JW.Functor([this.name], function(name) {
return "Hello, " + name + "!";
}, this)).target; // build greeting message
this.own(new JW.UI.TextUpdater(el, text));
}
});
JW.UI.template(Greeter, {
main:
'<div class="greeter">' +
'<p>Your name: <input jwid="name-field"></p>' +
'<div jwid="greeting"></div>' +
'</div>'
});
new Greeter().renderTo("body");

65. Компоненты
<div jwclass="greeter">
<p>Your name: <input jwid="name-field"></p>
<div jwid="greeting"></div>
</div>
<div class="greeter">
<p>Your name: <input class="greeter-name-field"></p>
<div class="greeter-greeting"></div>
</div>

66. Компоненты
Шаблонный движок JW.UI ну
ОООООЧЕНЬ
Быстрый.
Быстрее даже,
чем чистый HTML.

67. Компоненты
Шаблонный движок JW.UI ну
ОООООЧЕНЬ
Быстрый.
Быстрее даже,
чем чистый HTML.

68. Компоненты
Как это возможно?
● Каждый HTML-шаблон рендерится только
один раз
● После этого каждый новый компонент
получается клонированием отрендеренного
фрагмента
● Шаблон рендерится
напрямую браузером, без
всякого препроцессинга
● Никаких селекторов

69. Компоненты
renderDocument: function(el) {
return this.own(new DocumentView(this.document));
}
<div jwclass="my-component">
<div jwid="document"></div>
</div>
DocumentView

70. Компоненты
renderDocument: function(el) {
return this.own(new JW.Mapper([ this.document ], {
createValue: function(document) {
return new DocumentView(this.document);
}
destroyValue: JW.destroy,
scope: this
})).target;
}
<div jwclass="my-component">
<div jwid="document"></div>
</div>
DocumentView

71. Компоненты
renderDocuments: function(el) {
return this.documents.$map(function(document) {
return this.own(new DocumentView(document));
}, this);
}
<div jwclass="my-component">
<div jwid="documents">
</div>
</div>
DocumentView
DocumentView
DocumentView
DocumentView

72. Компоненты
renderDocuments: function(el) {
return this.own(this.documents.createMapper({
createItem: function(document) {
return new DocumentView(document);
},
destroyItem: JW.destroy,
scope: this
})).target;
}
<div jwclass="my-component">
<div jwid="documents">
</div>
</div>
DocumentView
DocumentView
DocumentView
DocumentView

73. Компоненты
renderDocument: function(el) {
return false;
}
<div jwclass="my-component">
<div jwid="document"></div>
</div>

74. Компоненты
renderDocument: function(el) {
this.own(new JW.UI.TextUpdater(el, this.text));
}
<div jwclass="my-component">
<div jwid="document"></div>
</div>

75. Компоненты
JW.UI.Component vs ReactJS (TBD)
● Совместим с jQuery
● Можно создавать поверх
существующего DOM
● Прозрачнее
● Дает полный контроль
над компонентами
и DOM
● Ниже порог входа
(проще на старте)
● Код проще
● Большое сообщество
разработчиков

76. Структура фреймворка
1. Классы и объекты (JW.Class)
2. События (JW.Event)
3. Свойства (JW.Property)
4. Коллекции (JW.AbstractCollection)
5. Компоненты (JW.UI.Component)
6. Система сборки (jWidget SDK)

77. Система сборки
Standalone проект
jWidget SDK
https://github.com/enepomnyaschih/jwsdk

78. Система сборки
Standalone проект
jWidget SDK
https://github.com/enepomnyaschih/jwsdk
Является прямой альтернативой GruntJS,
и посему планируется заменить
jWidget SDK плагином к GruntJS

79. И все же...

80. Система сборки
1. Формируем пакеты
{
"requires": [
"thirdparty/jwquery.js|auto",
"thirdparty/jwlib.js|auto",
"thirdparty/jwui.js|auto"
],
"resources": [
"mt/mt.js",
"mt/data/data.js",
"mt/data/tweet.js",
...
]
}

81. Система сборки
2. Создаем страницы
{
"package": "mt",
"template": "base",
"title": "Mini-Twitter"
}

82. Система сборки
3. Собираем
или
jwsdk debug jwsdk-config
jwsdk release jwsdk-config

83. Система сборки
Супер-фича: конвертирование шаблонов в JS
{
"resources": [
"mt/app/app.js",
"mt/app/app.jw.html : mt.App",
...
]
}
<div jwclass="mt-app">
<div jwid="profile"></div>
<div jwid="tweets"></div>
</div>
JW.UI.template(mt.App,{main:'<div
jwclass="mt-app"><div
jwid="profile"></div><div
jwid="tweets"></div></div>'});

84. Система сборки
Также поддерживаются другие форматы:
● html
● json
● txt
● less
● sass
● scss
● styl
● jsx (TBD)

85. Система сборки
Выполняются оптимизации:
● Объединение и минимизация JS

86. Система сборки
Выполняются оптимизации:
● Объединение и минимизация JS
● Параметр timestamp для браузерного
кэширования

87. Система сборки
Выполняются оптимизации:
● Объединение и минимизация JS
● Параметр timestamp для браузерного
кэширования
● Конвертирование малых изображений и
шрифтов в base64 Data URI

88. Система сборки
Выполняются оптимизации:
● Объединение и минимизация JS
● Параметр timestamp для браузерного
кэширования
● Конвертирование малых изображений и
шрифтов в base64 Data URI
● Поддержка динамической загрузки пакетов
по требованию

89. Совместимость jWidget с другими
библиотеками и фреймворками
● Весь функционал размещен в отдельном
пространстве имен JW

90. Совместимость jWidget с другими
библиотеками и фреймворками
● Весь функционал размещен в отдельном
пространстве имен JW
● UI-слой работает на базе jQuery

91. Совместимость jWidget с другими
библиотеками и фреймворками
● Весь функционал размещен в отдельном
пространстве имен JW
● UI-слой работает на базе jQuery
● Разрабатываются адаптеры между моделью
jWidget и UI-слоями других фреймворков
(например, ReactJS и ExtJS)

92. Ссылки
Twitter: @jwidgetproject
Почта: jwidgetproject@gmail.com
GitHub (там ссылка на документацию):
https://github.com/enepomnyaschih/jwidget
Статья на хабрахабре (там еще ссылки):
http://habrahabr.ru/post/219995/

93. Вопросы?
FAQ
● jWidget – почему так называется?
Потому что гладиолус
● Много ли пользователей у jWidget?
Пока нет
● Почему ООП-подход так важен?
Легко переносится на Dart и пр. платформы
● Есть ли готовая библиотека визуальных
компонентов?
Нет. Но легко совмещается с jQuery UI