"ractive.js — реактивные усы!" Ефим Соловьев, moscowjs 17

Ractive.js — реактивные усы

Ефим Соловьев MoscowJS 27/11/14

● Новостной портал - The Guardian

● Автор Rich Harris

Бриллиантовый век веб-разработки

2

● Нет DI контейнера или роутинга

● V в MVC

● По сути это:

● Шаблон

● Данные

3

Бриллиантовый век веб-разработки

● Шаблон

● Данные

● Анимация и SVG

● Директивы

● Наблюдатели

● Промисы

4

О чем сегодня?

Шаблон

6

Шаблон. Mustache.

{{#users}}

<a href='/users/{{@index+1}}'>{{name}}</a>

{{/users}}

Итерация в шаблоне

<a href='/users/1'>Алан</a>

<a href='/users/2'>Андрей</a>

<a href='/users/3'>Эмиль</a>

7

Шаблон. Mustache.

Результат выполнения

8

// Алгебра

<p>{{quantaty * price}}</p>

// Нативные функции

<p>{{Math.abs(-1)}}</p>

// Сторонние библиотеки

<p>{{$.trim(' oops! ')}}</p>

Шаблон. Выражения.

<script id='part' type='text/ractive'>

<img src='/img/{{id}}.jpg'/>

<p>{{title}}</p>

</script>

9

Шаблон. Partials.

Инициализация partial

<script id='tmpl' type='text/ractive'>

<div class='gallery'>

{{#items}} {{>part}} {{/items}}

</div>

</script>

10

Шаблон. Partials.

Вставка в шаблон

<div class='gallery'>

<img src='/img/cat.jpg'/>

<p>Кошка</p>

<img src='/img/dog.jpg'/>

<p>Собака</p>

</div>

11

Шаблон. Partials.

Результат выполнения

Parallel DOM

Фрагменты:

● Элемент

● События

● Descriptor

12

Ractive. Под капотом.

Данные

Нативный POJO

Двухсторонний data-binding

Keypath зависимости

14

Данные. Какие они?

// text

<input value='{{user.name}}'>

<p>{{user.name}}</p>

// checkbox

<input type='checkbox' checked='{{yes}}'>

Ответ: {{yes ? 'Да' : 'Нет'}}

15

Данные. Data-binding.

Ручная установка

// Set

var colors = ['red','gold','green'];

ractive.set('colors', colors);

// Array mutator method

colors.push('smoky');

16

Данные. Установка значения.

«Don't worry, we're not modifying Array.prototype.

(What do you think this is, Ember? :-)»

- docs.ractivejs.org

17

Данные. Array.

var ractive = new Ractive({

magic: true

});

18

Данные. Магия...

…о, нет! Оно работает само!

Dependency graph

Prototype chain injection для Array mutators

ES5 accessors через Object.defineProperty

Не 'dirty checking' на каждый $scope.$digest()

19

Ractive. Под капотом.

Анимация и SVG

Использование анимации

<div sytle='height:{{height}}%'></div>

ractive.animate('height', 100);

20%

100%

21

Анимация. Основное.

Стандартные функции

ractive.animate('height', 50, {

easing: 'easeOut'

});

22

Анимация. Ослабление.

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

Анимация. Ослабление.

ractive.animate('users', data, {

duration: 300, // default 400

step: function (t, value) {

// По завершению витка

},

complete: function (t, value) {

// По завершению анимации

}

});

24

Анимация. Дополнительно

<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. Пример.

SVG из коробки

Анимация с requestAnimationFrame()

До 72 свойств одновременно

26

Анимация. Итого.

Директивы

Инициализация компонента

Ractive.components.user = Ractive.extend({

template: '<p>{{name}}</p>',

data: { name: 'Rich' }

});

28

Директивы. Компоненты.

Использование в шаблоне

<div class='info'>

// Директива с параметрами

<user name='{{name}}' />

</div>

29

Директивы. Компоненты.

Проксирование событий

<a on-click='like'>Нравится!</a>

ractive.on('like', function (event) {

alert('Я знал, что тебе понравится!');

});

30

Директивы. Атрибуты.

Transition эффект

<div intro='fade'>Плавно появится</div>

<div outro='fade'>Плавно исчезнет</div>

31

Директивы. Атрибуты.

Наблюдатели

var ractive = new Ractive({

data: {

people: [

{ id: 1, name: 'Игнат' },

{ id: 2, name: 'Олег' }

]

}

});

25

Наблюдатели. Пример.

// Инициализация

ractive.observe('people.*',

function(new, old, keypath) {

// При изменении

});

34

Наблюдатели. Пример.

Промисы

36

ractive.set('num',1).then(function() {

// После полного завершения set

alert( 'Значение установлено!' );

});

Промисы. Где-то уже видел...

Контакты:

● efim.solovyev@gmail.com

● facebook.com/kystkysto

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

● docs.ractivejs.org

Tutorial:

● learn.ractivejs.org

Спасибо!