Understanding liquid-fire
Understanding liquid-fire
by @ianstarz
Denver Ember.js meetup 7-29-15First, a few thoughts on design...
Now, a product like this...
Not all fluff
Motion design can go beyond taking the cognitive load off of the user. Motion design can nudge the user experience in a particular direction.Let's not get too carried away though.
Material is metaphor
Material as a metaphor is easy for us to understand. We use metaphors all the time in computer science. For example, "bugs" or coding "closer to the metal" are metaphors that help anchor abstract ideas in the world of the physical.Bold, graphic, intentional
I believe this principle to be more subjective, and open to interpretation. Take it or leave it, but this is not what we're interested in right now.Motion provides meaning
This is what we're interested in. Motion provides meaning is the 3rd principle of Material Design, and it falls in line with the philosophies of liquid fire.The meanings...
Rachel Nabors provides us with some examples of this meaning in her article on A List Apart.Causality
http://alistapart.com/article/web-animation-at-work Here we see the meaning of causality. When a user affects something, and they feel they've affected something, it's because the motion happened after their interaction and not before. When it happens before, the system seems to "act on its own".Feedback
http://alistapart.com/article/web-animation-at-work Feedback provides the user with a sense that they have affected something. This way, if the user experience hangs, the user can suspect the system is hanging by something other than whether or not they actually pressed the button.Progression
http://alistapart.com/article/web-animation-at-work This is the base principle for animated spinners, but can be applied in many more creative ways. Progression is often used to keep users engaged while they are not necessarily affecting the system, but could also be used to show how incremental actions affect the system.Relationships
http://alistapart.com/article/web-animation-at-work One of the most important meanings behind motion is spatial relationship, which can help orient the user within their viewport. When we feel like the things we are seeing through the viewport are a part of a larger connected system, then when we move through the system we don't feel disjointed.How do we do this in Ember with liquid-fire?
Use motion design to understand application state changes To implement motion design in a way that plays nice with Ember Taking the principles we just covered we can more concretely define the goals of liquid-fire which are: 1) To use animation specifically to provide the user with natural information on how they are affecting the application state, and 2) to do so in a way that goes with the flow of the framework instead of fighting it.Animations in Ember without liquid-fire
To appreciate what liquid-fire does for us, let's first think about how we could animate without it. Also, because Ember prescribes storing the state of your application in the URL, we'll especially be interested in animating between routes./circle
For instance, we have a route called "circle".../square
...and a route called "square", and we move between these two routes.Without animation
Without animation, Ember's architecture goes through the following sequence to transition between the two routes./circle
When we leave the circle route, Ember's router will begin the transition.../circle
...which involves tearing down the current route.../square
...representing the new route hierarchy to the rendering layer.../square
...which the rendering layer then populates the route.Steps needed to animate
Route knows it's deactivating (exiting the circle route) Router determines which route we're going to (the sqaure route) Service we implement saves the view we're about to tear down. Tear down route, but allow service to keep copy of the view in the outlet Render the new route, but hide and position the new element (the square) Animate the old value (the circle) off the screen to the left Animate the new value (the square) onto the screen from the right Tear down the old value (remove the circle from the DOM) This is all fine and dandy, until we want to do a simple sliding transition. To animate the transition. We need both of the routes, both of the views available during the duration of the transition. In this case the steps to animate might look like this. (Step through list) Woah, that's alot, and worse yet it is concerning our Router, Routes, and View objects all with how things should animate. That's a lot of work! And it feels like we're fighting the framework.The main principles of liquid-fire
Use template helpers to keep track of old and new values Defer to a transition map when asking should we animate, and if so, how? This brings us to the two main principles of liquid-fire, which are these. (step through principles) All of the complexity of animating between state changes is now handled by liquid-fire by minimal impact to your templates and by introducing a new function (the transition map) into your application. You won't need to touch your router, routes, or views to make any of this work!Template helpers
Let's investigate these two principles in detail. The tempalte helpers are responsible for two things: 1) Saving the new and the old values when something changes, 2) adding some layout to help with animation.The additional markup
The additional markup
The additional markup
The transition map
matching routes
// app/transitions.js
export default function() {
this.transition(
this.fromRoute('circle'),
this.toRoute('square'),
this.use('toLeft')
);
}
Now this only goes in one direction.
matching routes
// app/transitions.js
export default function() {
this.transition(
this.fromRoute('circle'),
this.toRoute('square'),
this.use('toLeft')
);
this.transition(
this.fromRoute('square'),
this.toRoute('circle'),
this.use('toRight')
);
}
To go in the other direction, too, you could do this.
matching routes
// app/transitions.js
export default function() {
this.transition(
this.fromRoute('circle'),
this.toRoute('square'),
this.use('toLeft'),
this.reverse('toRight')
);
}
But this is so common that you can just do this.
Thank you :D
Understanding liquid-fire
by @ianstarz
Denver Ember.js meetup 7-29-15