react for vikings
TRANSCRIPT
WHERE
325 Adelaide Street W.Toronto, ON, Canada M5V 1P8
Greetings,
CONTACT
Telephone: (416) 531-5263
ONLINE
Web: jam3.comEmail: [email protected]
All original concepts, designs andcopy the exclusive property of Jam3
JAM3
REACT FOR VIKINGS
MIKKO HAAPOJA
● Director of Creative Technology at Jam3
● Wrangling animations creating ui for ~10 years
● Dad to two kids and husband to one wife
JAM3
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
VIKINGS
Worked on Vikings because...
Try out new ways of working
Evaluate React
Evaluate F1
Why is Jam3 using React?
Community
Small/Consistent API
Components, components, components
What was used to build Vikings?
redux
react-router
react-transition-group
react-f1
f1 or 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
Path Finding
What if you could describe your UI like a map?
● Pickering, Toronto, Mississauga
● Drive from one place to another - this is why it's named F1
Inspired by the way designers work
Design the look/states
Design the animations/transitions
Should produce better path to tooling
States
States
States with ui and styles defined
States In React
Transitions
Bi-Directional Transitions
Adding Animations
Getting Fancy
Getting Even Fancier
Transitions In React
Stuff we missed in React
Why define states and transitions in their own files?
Let’s look at the Vikings project...
The power of go and onComplete
Consistent API throughout the entire app.
Very very testable via Unit tests.
Something is missing... Chief!
The Chief's responsibilities
It's react-f1's boss.
Chief component's tell other components what state they should be in.
Chief's states
Chief's transitions
Chief In React
Chief's crazy function
Chief's crazy function becomes
A segway into animations via props...
The way that chief works is actually how all React animation's should work.
This is how F1 worked also.
But...
Other Features
Custom parsers
Custom transitions via functions
Where F1 is headed...
Better documentation
Tooling
+ Unit testing harness
+ Integration with After Effects or Animate
+ Gallery
+ Etc.
Links
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
THANKS
WHERE
325 Adelaide Street W.Toronto, ON, Canada M5V 1P8
CONTACT
Telephone: (416) 531-5263
ONLINE
Web: jam3.comEmail: [email protected]
All original concepts, designs andcopy the exclusive property of Jam3