Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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> 
// Сторонние...
<script id='part' type='text/ractive'> 
<img src='/img/{{id}}.jpg'/> 
<p>{{title}}</p> 
</script> 
9 
Шаблон. Partials. 
И...
<script id='tmpl' type='text/ractive'> 
<div class='gallery'> 
{{#items}} {{>part}} {{/items}} 
</div> 
</script> 
10 
Шаб...
<div class='gallery'> 
<img src='/img/cat.jpg'/> 
<p>Кошка</p> 
<img src='/img/dog.jpg'/> 
<p>Собака</p> 
</div> 
11 
Шабл...
 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}}'> 
Отве...
Ручная установка 
// Set 
var colors = ['red','gold','green']; 
ractive.set('colors', colors); 
// Array mutator method 
c...
«Don't worry, we're not modifying Array.prototype. 
(What do you think this is, Ember? :-)» 
- docs.ractivejs.org 
17 
Дан...
var ractive = new Ractive({ 
magic: true 
}); 
18 
Данные. Магия... 
…о, нет! Оно работает само!
 Dependency graph 
 Prototype chain injection для Array mutators 
 ES5 accessors через Object.defineProperty 
 Не 'dir...
Анимация и 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)...
ractive.animate('users', data, { 
duration: 300, // default 400 
step: function (t, value) { 
// По завершению витка 
}, 
...
<svg> 
<rect width='{{x}}' height='{{y}}'/> 
<text x='{{x/2}}' y='{{y/2}}'> 
{{Math.round(x * y)}} px² 
</text> 
</svg> 
/...
 SVG из коробки 
 Анимация с requestAnimationFrame() 
 До 72 свойств одновременно 
26 
Анимация. Итого.
Директивы
Инициализация компонента 
Ractive.components.user = Ractive.extend({ 
template: '<p>{{name}}</p>', 
data: { name: 'Rich' }...
Использование в шаблоне 
<div class='info'> 
// Директива с параметрами 
<user name='{{name}}' /> 
</div> 
29 
Директивы. ...
Проксирование событий 
<a on-click='like'>Нравится!</a> 
ractive.on('like', function (event) { 
alert('Я знал, что тебе по...
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: 
...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Как мы переходили на sails.js
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. 1. Ractive.js — реактивные усы Ефим Соловьев MoscowJS 27/11/14
  2. 2. Бриллиантовый век веб-разработки ● Новостной портал - The Guardian ● Автор Rich Harris 2
  3. 3. ● Нет DI контейнера или роутинга ● V в MVC ● По сути это: ● Шаблон ● Данные 3 Бриллиантовый век веб-разработки
  4. 4. ● Шаблон ● Данные ● Анимация и SVG ● Директивы ● Наблюдатели ● Промисы 4 О чем сегодня?
  5. 5. Шаблон
  6. 6. 6 Шаблон. Mustache. Итерация в шаблоне {{#users}} <a href='/users/{{@index+1}}'>{{name}}</a> {{/users}}
  7. 7. <a href='/users/1'>Алан</a> <a href='/users/2'>Андрей</a> <a href='/users/3'>Эмиль</a> 7 Шаблон. Mustache. Результат выполнения
  8. 8. 8 Шаблон. Выражения. // Алгебра <p>{{quantaty * price}}</p> // Нативные функции <p>{{Math.abs(-1)}}</p> // Сторонние библиотеки <p>{{$.trim(' oops! ')}}</p>
  9. 9. <script id='part' type='text/ractive'> <img src='/img/{{id}}.jpg'/> <p>{{title}}</p> </script> 9 Шаблон. Partials. Инициализация partial
  10. 10. <script id='tmpl' type='text/ractive'> <div class='gallery'> {{#items}} {{>part}} {{/items}} </div> </script> 10 Шаблон. Partials. Вставка в шаблон
  11. 11. <div class='gallery'> <img src='/img/cat.jpg'/> <p>Кошка</p> <img src='/img/dog.jpg'/> <p>Собака</p> </div> 11 Шаблон. Partials. Результат выполнения
  12. 12.  Parallel DOM  Фрагменты: ● Элемент ● События ● Descriptor 12 Ractive. Под капотом.
  13. 13. Данные
  14. 14.  Нативный POJO  Двухсторонний data-binding  Keypath зависимости 14 Данные. Какие они?
  15. 15. // text <input value='{{user.name}}'> <p>{{user.name}}</p> // checkbox <input type='checkbox' checked='{{yes}}'> Ответ: {{yes ? 'Да' : 'Нет'}} 15 Данные. Data-binding.
  16. 16. Ручная установка // Set var colors = ['red','gold','green']; ractive.set('colors', colors); // Array mutator method colors.push('smoky'); 16 Данные. Установка значения.
  17. 17. «Don't worry, we're not modifying Array.prototype. (What do you think this is, Ember? :-)» - docs.ractivejs.org 17 Данные. Array.
  18. 18. var ractive = new Ractive({ magic: true }); 18 Данные. Магия... …о, нет! Оно работает само!
  19. 19.  Dependency graph  Prototype chain injection для Array mutators  ES5 accessors через Object.defineProperty  Не 'dirty checking' на каждый $scope.$digest() 19 Ractive. Под капотом.
  20. 20. Анимация и SVG
  21. 21. Использование анимации <div sytle='height:{{height}}%'></div> ractive.animate('height', 100); 20% 100% 21 Анимация. Основное.
  22. 22. Стандартные функции ractive.animate('height', 50, { easing: 'easeOut' }); 22 Анимация. Ослабление.
  23. 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. 24. ractive.animate('users', data, { duration: 300, // default 400 step: function (t, value) { // По завершению витка }, complete: function (t, value) { // По завершению анимации } }); 24 Анимация. Дополнительно
  25. 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. 26.  SVG из коробки  Анимация с requestAnimationFrame()  До 72 свойств одновременно 26 Анимация. Итого.
  27. 27. Директивы
  28. 28. Инициализация компонента Ractive.components.user = Ractive.extend({ template: '<p>{{name}}</p>', data: { name: 'Rich' } }); 28 Директивы. Компоненты.
  29. 29. Использование в шаблоне <div class='info'> // Директива с параметрами <user name='{{name}}' /> </div> 29 Директивы. Компоненты.
  30. 30. Проксирование событий <a on-click='like'>Нравится!</a> ractive.on('like', function (event) { alert('Я знал, что тебе понравится!'); }); 30 Директивы. Атрибуты.
  31. 31. Transition эффект <div intro='fade'>Плавно появится</div> <div outro='fade'>Плавно исчезнет</div> 31 Директивы. Атрибуты.
  32. 32. Наблюдатели
  33. 33. var ractive = new Ractive({ data: { people: [ { id: 1, name: 'Игнат' }, { id: 2, name: 'Олег' } ] } }); 25 Наблюдатели. Пример.
  34. 34. // Инициализация ractive.observe('people.*', function(new, old, keypath) { // При изменении }); 34 Наблюдатели. Пример.
  35. 35. Промисы
  36. 36. 36 Промисы. Где-то уже видел... ractive.set('num',1).then(function() { // После полного завершения set alert( 'Значение установлено!' ); });
  37. 37. Спасибо! Контакты: ● efim.solovyev@gmail.com ● facebook.com/kystkysto Документация: ● docs.ractivejs.org Tutorial: ● learn.ractivejs.org
  • ssuserb49509

    Nov. 28, 2014

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

Views

Total views

1,235

On Slideshare

0

From embeds

0

Number of embeds

44

Actions

Downloads

9

Shares

0

Comments

0

Likes

1

×