"Ractive.js — реактивные усы!" Ефим Соловьев, MoscowJS 17
1 like1,260 views
Документ представляет собой обзор ractive.js, фреймворка для создания реактивных веб-приложений. Обсуждаются его основные компоненты, такие как шаблоны, данные, анимация и директивы, а также предоставляются примеры кода. Также упоминаются ключевые особенности ractive.js, такие как двухсторонний data-binding и использование SVG.
![Ручная установка
// Set
var colors = ['red','gold','green'];
ractive.set('colors', colors);
// Array mutator method
colors.push('smoky');
16
Данные. Установка значения.](https://image.slidesharecdn.com/ractivejs-141127065501-conversion-gate01/85/Ractive-js-MoscowJS-17-16-320.jpg)
![var ractive = new Ractive({
data: {
people: [
{ id: 1, name: 'Игнат' },
{ id: 2, name: 'Олег' }
]
}
});
25
Наблюдатели. Пример.](https://image.slidesharecdn.com/ractivejs-141127065501-conversion-gate01/85/Ractive-js-MoscowJS-17-33-320.jpg)
"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