Слайды доклада Александра Кожевина с MoscowJS 16

1. Александр Кожевин
front-end developer

2. Таблица Менделеева на famo.us:
http://alexander-kozhevin.com/famous/
2
2

3. 3

4. 4

5. 5

6. Главные проблемы:
Рендеринг + Анимация
6

7. 1998
Рендеринг: Что мы хотим 7
Сегодня

8. Анимация: Чего мы хотим 8

9. Анимация: Что у нас есть? 9

10. 10

11. FAMO.US = PORTABLE
RENDERING ENGINE
3D
DOM
Canvas
WebGL
iOS/Android/Kindle
NO install
NO download
NO plugin
PURE JavaScript
SMALL footprint
11

12. Почему он так быстр? 12
> Render Tree <
context var context = Engine.createContext();
modifier var chain = context.add(modifier);
surface chain.add(surface);

13. Famo.us крутой потому, что:
1. Интеграция с MV* фреймворками
2. Физика
3. Набор View’ек
4. Touch события
13

14. Touch event
var sync = new GenericSync(
['mouse', 'touch'],
{direction : GenericSync.DIRECTION_X}
);
sync.on('update', function(data) {
var currentPosition = this.pageViewPos.get();
if(currentPosition === 0 && data.velocity > 0) {
//do smth
}
14

15. FAMO.US работает: 15

16. “Чистый” famo.us
var backgroundSurface = new Surface({
size: [this.options.width, this.options.height],
properties: {
backgroundColor: 'black',
boxShadow: '0 0 1px black'
}
});
16

17. var rotateModifier = new StateModifier({
transform: Transform.rotateZ(this.options.angle)
});
var skewModifier = new StateModifier({
transform: Transform.skew(0, 0, this.options.angle)
});
this.add(rotateModifier).
add(skewModifier).add(backgroundSurface);
17

18. Famo.us + AngularJS
<fa-modifier ng-repeat="cat in cats"
fa-animate-enter="catEnter(cat.t, $done)"
fa-animate-leave="catLeave(cat.t, $done)"
>
<fa-surface>
...
</fa-surface>
</fa-modifier>
<fa-surface>
<input type="range" ng-model="data.t">
</fa-surface>
18

19. Let’s do cool stuff:
1. http://famo.us/
2. https://github.com/Famous/famous
3. https://github.com/thomasstreet/famous-angular-
examples
19

20. Спасибо за внимание!
Alexander Kozhevin
20
https://www.facebook.com/alexander.polymath

21. Вопросы?
21