Fitc React Spotlight 2016 - React for Vikings

325 Adelaide Street W.Toronto, ON, Canada M5V 1P8

Greetings,

Telephone: (416) 531-5263 Web: jam3.comEmail: [email protected]

All original concepts, designs andcopy the exclusive property of Jam3

● Director of Creative Technology at Jam3

● Wrangling animations creating ui for ~10 years

● Dad to two kids and husband to one wife

Digital agency in Toronto

Highly experiential work

+ A lot of animation+ WebGL+ Experimental

Lots of open source code

Always hiring

All original concepts, designs andcopy the exclusive property of Jam3

Try out new ways of working

Evaluate React

Evaluate F1

Community

Small/Consistent API

Components, components, components

redux

react-router

react-transition-group

react-f1

● A UI animation library - For reals. One F1 instance is one piece of UI

● Inspired by the way designers work

● Highly orchestrated animations

● Cross Platform

■ Works in React, basic DOM, Canvas, or really anything

■ ReactF1 uses F1-Dom and F1-Dom uses F1

● It uses path finding

■ Better separation of concerns

● Pickering, Toronto, Mississauga

● Drive from one place to another - this is why it's named F1

Design the look/states

Design the animations/transitions

Should produce better path to tooling

Consistent API throughout the entire app.

Very very testable via Unit tests.

It's react-f1's boss.

Chief component's tell other components what state they should be in.

The way that chief works is actually how all React animation's should work.

This is how F1 worked also.

But...

Custom parsers

Custom transitions via functions

Better documentation

Tooling

+ Unit testing harness

+ Integration with After Effects or Animate

+ Gallery

+ Etc.

https://www.npmjs.com/react-f1https://www.npmjs.com/easeshttps://www.npmjs.com/eases-fancyhttps://github.com/Jam3/f1-tutorialhttps://www.npmjs.com/f1-domhttps://www.npmjs.com/f1 https://www.npmjs.com/budohttps://www.npmjs.com/react-routerhttps://www.npmjs.com/react-addons-transition-grouphttp://jam3.github.io/fitc-react-spotlight/https://www.npmjs.com/~mikkohhttps://twitter.com/MikkoH

325 Adelaide Street W.Toronto, ON, Canada M5V 1P8

Telephone: (416) 531-5263 Web: jam3.comEmail: [email protected]

All original concepts, designs andcopy the exclusive property of Jam3