Слайды доклада "Ractive.js — реактивные усы!" Ефима Соловьева на MoscowJS 17

1. Ractive.js — реактивные усы
Ефим Соловьев MoscowJS 27/11/14

2. Бриллиантовый век веб-разработки
● Новостной портал - The Guardian
● Автор Rich Harris
2

3. ● Нет DI контейнера или роутинга
● V в MVC
● По сути это:
● Шаблон
● Данные
3
Бриллиантовый век веб-разработки

4. ● Шаблон
● Данные
● Анимация и SVG
● Директивы
● Наблюдатели
● Промисы
4
О чем сегодня?

5. Шаблон

6. 6
Шаблон. Mustache.
Итерация в шаблоне
{{#users}}
<a href='/users/{{@index+1}}'>{{name}}</a>
{{/users}}

7. <a href='/users/1'>Алан</a>
<a href='/users/2'>Андрей</a>
<a href='/users/3'>Эмиль</a>
7
Шаблон. Mustache.
Результат выполнения

8. 8
Шаблон. Выражения.
// Алгебра
<p>{{quantaty * price}}</p>
// Нативные функции
<p>{{Math.abs(-1)}}</p>
// Сторонние библиотеки
<p>{{$.trim(' oops! ')}}</p>

9. <script id='part' type='text/ractive'>
<img src='/img/{{id}}.jpg'/>
<p>{{title}}</p>
</script>
9
Шаблон. Partials.
Инициализация partial

10. <script id='tmpl' type='text/ractive'>
<div class='gallery'>
{{#items}} {{>part}} {{/items}}
</div>
</script>
10
Шаблон. Partials.
Вставка в шаблон

11. <div class='gallery'>
<img src='/img/cat.jpg'/>
<p>Кошка</p>
<img src='/img/dog.jpg'/>
<p>Собака</p>
</div>
11
Шаблон. Partials.
Результат выполнения

12.  Parallel DOM
 Фрагменты:
● Элемент
● События
● Descriptor
12
Ractive. Под капотом.

13. Данные

14.  Нативный POJO
 Двухсторонний data-binding
 Keypath зависимости
14
Данные. Какие они?

15. // text
<input value='{{user.name}}'>
<p>{{user.name}}</p>
// checkbox
<input type='checkbox' checked='{{yes}}'>
Ответ: {{yes ? 'Да' : 'Нет'}}
15
Данные. Data-binding.

16. Ручная установка
// Set
var colors = ['red','gold','green'];
ractive.set('colors', colors);
// Array mutator method
colors.push('smoky');
16
Данные. Установка значения.

17. «Don't worry, we're not modifying Array.prototype.
(What do you think this is, Ember? :-)»
- docs.ractivejs.org
17
Данные. Array.

18. var ractive = new Ractive({
magic: true
});
18
Данные. Магия...
…о, нет! Оно работает само!

19.  Dependency graph
 Prototype chain injection для Array mutators
 ES5 accessors через Object.defineProperty
 Не 'dirty checking' на каждый $scope.$digest()
19
Ractive. Под капотом.

20. Анимация и SVG

21. Использование анимации
<div sytle='height:{{height}}%'></div>
ractive.animate('height', 100);
20%
100%
21
Анимация. Основное.

22. Стандартные функции
ractive.animate('height', 50, {
easing: 'easeOut'
});
22
Анимация. Ослабление.

23. Custom easing
Ractive.easing.elastic = function (pos) {
return -1*Math.pow(4,-8*pos)*
Math.sin((pos*6-1)*(2*Math.PI)/2)+1;
}
23
Анимация. Ослабление.

24. ractive.animate('users', data, {
duration: 300, // default 400
step: function (t, value) {
// По завершению витка
},
complete: function (t, value) {
// По завершению анимации
}
});
24
Анимация. Дополнительно

25. <svg>
<rect width='{{x}}' height='{{y}}'/>
<text x='{{x/2}}' y='{{y/2}}'>
{{Math.round(x * y)}} px²
</text>
</svg>
// Приводим в действие
ractive.animate({x: 300, y: 200});
25
SVG. Пример.

26.  SVG из коробки
 Анимация с requestAnimationFrame()
 До 72 свойств одновременно
26
Анимация. Итого.

27. Директивы

28. Инициализация компонента
Ractive.components.user = Ractive.extend({
template: '<p>{{name}}</p>',
data: { name: 'Rich' }
});
28
Директивы. Компоненты.

29. Использование в шаблоне
<div class='info'>
// Директива с параметрами
<user name='{{name}}' />
</div>
29
Директивы. Компоненты.

30. Проксирование событий
<a on-click='like'>Нравится!</a>
ractive.on('like', function (event) {
alert('Я знал, что тебе понравится!');
});
30
Директивы. Атрибуты.

31. Transition эффект
<div intro='fade'>Плавно появится</div>
<div outro='fade'>Плавно исчезнет</div>
31
Директивы. Атрибуты.

32. Наблюдатели

33. var ractive = new Ractive({
data: {
people: [
{ id: 1, name: 'Игнат' },
{ id: 2, name: 'Олег' }
]
}
});
25
Наблюдатели. Пример.

34. // Инициализация
ractive.observe('people.*',
function(new, old, keypath) {
// При изменении
});
34
Наблюдатели. Пример.

35. Промисы

36. 36
Промисы. Где-то уже видел...
ractive.set('num',1).then(function() {
// После полного завершения set
alert( 'Значение установлено!' );
});

37. Спасибо!
Контакты:
● efim.solovyev@gmail.com
● facebook.com/kystkysto
Документация:
● docs.ractivejs.org
Tutorial:
● learn.ractivejs.org