Intercepting component state to ensure smooth animated transitions
Spoiler: The entire code inside this article can run as it is directly inside your browser (without any builds / transpilations). By default, it even runs within a WebWorker.
We will cover how to create an animated data view, as well as adjusting already running transitions in real time.
Potential use cases are e.g. web based shops where we want to enhance the user experience for product overviews or views containing clients or contacts.
Content
- Demo video
- The problem in detail
- How to use animated lists within your apps?
- Requirement: a collection (data store) implementation
- Diving into list.plugin.Animate
- Code & online demos
- Improvement ideas
- Learning neo.mjs
- Accenture is hiring neo.mjs developers in Germany
1. Demo video
You can watch a video of the final implementation here:
2. The problem in detail
To convert a data view into an animated list, we need to support 3 operations:
- Add: Fade in items
- Move: Adjust the item positions
- Remove: Fade out items
The add OP is already special. While we can rely on CSS to create a fadeIn effect:
transition: opacity 500ms ease-in-out;
Adding a new item with an opacity of 1 will not create an animation, so we need to add new items with an opacity of 0 first and change the opacity to 1 a tick later.
We need to ensure that the opacity change happens inside the next requestAnimationFrame() call, so we can just add a delay of e.g. 50ms to be on the safe side. Actually we want to start the move and remove OPs inside this callback as well, to ensure that all animations end exactly at the same time.
For the move OPs, we just need to change the absolute positions. CSS helps us here as well:
transition: transform 500ms ease-in-out;
We now can assign positions to each item like this:
transform: translate(200px, 300px);
Fore the remove OP, we need to set the opacity of an item to 0 and remove the item from the DOM, once the fade out is complete.
While this sounds fairly easy up to this point, it becomes a lot more tricky in case we want to adjust the list items while transitions are already running.
We could use a very slow transition duration of e.g. 3s, which allows us to change the list items state multiple times before the first transition is done.
The key here is to ensure that each item stays unique inside the DOM:
- When adding a new item, it could still be there (fading out)
- We could need to move items which are fading in
- We could need to remove items which are moving and / or be fading in
Relying on a virtual DOM engine can greatly simplify the given tasks.
3. How to use animated lists within your apps?
The PoC implementation is developed for the neo.mjs frontend framework, so using animated lists within this scope is trivial:
In case you are extending list.Base or when dropping a list instance into the component tree, you can just use the animate config.
The animation plugin will only get lazy loaded, in case you actually use it:
As you can see, pluginAnimateConfig is available to change default configs:
(you can drop an item like this into the items array of a container)
In case you are curious how this works internally or in case you would like to implement the same behavior for a different framework or library, follow the next sections closely.
4. Requirement: a collection (data store) implementation
Especially in case we want to implement a data view with client-side filtering and sorting, we need a collection class which can handle multiple filters and sorters, as well as the ability to dynamically adjust them.
Take a look into collection.Base to get the idea.
Inside this demo app, we are using the following store:
If you look close: we want to allow to filter the list by “name”, which is a combination of matches inside firstname or lastname. Instead of filtering via a given property , operator and value , we can also pass a custom filterBy() function.
This enables us to connect the demo controls fairly easily to adjust the filters and sorters:
Obviously we could (should) use a view controller to further simplify this logic.
5. Diving into list.plugin.Animate
Let me share a current snapshot of the plugin, it contains “just” 350 lines of code:
We will focus on onStoreFilter() in line 189.
As mentioned earlier, in case we are not intercepting running animations, the logic is fairly easy, since the filter event gives us data.items as well as data.oldItems , which is all we need.
However, when intercepting animations, the order and amount of list items within the DOM does not need to match the indexes of data.items .
As you know, read and write OPs on the real DOM are expensive. We are in luck, since we can just access this.owner.vdom instead.
In case we are intercepting the animation state, we will cancel the current setTimeout() logic and just trigger it again, once the new animations have finished. This can happen multiple times.
When adding new items, we just need the following check:
// flag items which are still inside the DOM (running remove OP)
if (intercept && map.includes(owner.getItemId(record[key]))) {
item.reAdded = true;
}→ only in case new items don’t exist inside the real DOM at this point in time, we will add them with an opacity of 0 one requestAnimationFrame() call before the animations start.
The rest is straight forward:
- added item => opacity 1
- moved item => new position
- removed item => opacity 0
The callback fn will clear all “removed” items from the real DOM.
Dynamically changing the transition duration at run time is worth a look too:
We could apply the new transition value to each list item itself, which could result in a lot of DOM write OPs.
We could also use CSS variables, but this would affect all instances at once.
So, we are just adding a new CSS rule to a dynamically added StyleSheet instead.
6. Code & online demos
You can find the code of the new plugin here:
src/list/plugin/Animate.mjs
The code of the demo app is here:
examples/list/animate
dist/production
Minified webpack based build without source maps:
dist/production/examples/list/animate/index.html
development mode (Chromium or Safari only)
Running the real JS code as it is directly inside your browser, no source maps needed: examples/list/animate/index.html
7. Improvement ideas
This PoC implementation leaves some areas, where we can further polish or enhance the logic. In case specific topics are of interest for you, please add a comment to the related ticket(s).
8. Learning neo.mjs
The framework has grown and evolved a lot, which is a good thing.
While it felt sufficient for a long time to just share the knowledge inside the blog section:
https://neomjs.github.io/pages/
this is definitely no longer the case.
I actually like the new React docs a lot (Kudos to the creators!) and we need something similar for the neo.mjs scope:
E.g. when looking into this article:
In case we would directly compare these items to neo:
- setting state does NOT request a new render (render happens only once for the main view of your app)
- neo stores state inside your component
- we don’t need snapshots (persistent vdom tree)
- variables and event handlers do survive
Now you might probably think:
“Whoa, this is the exact opposite behavior! So what are the pros and cons?”
Explaining the benefits and drawbacks would be one aspect which the new learning section needs to address.
However, being a framework, the scope is way bigger than the React ecosystem. We could easily end up with 50 to 100 guides / sections.
Since my time is limited, getting input on which items interest you the most would help me a lot to prioritise the work:
Thank you in advance!
9. Accenture is hiring neo.mjs developers in Germany
Already mentioned this inside my last blog post, but I would love to share it one more time, since we are still hiring a lot more developers in various roles.
While I was able to drive the framework development mostly on my own, it was very tricky to provide help and support for clients in need on top of this.
To resolve this I joined Accenture in September. The company is creating a new Cloud Technology Studio in Germany (Kaiserslautern) with the goal to scale this engineering hub up to at least 500 developers.
My new frontend lead role enables me to create a neo.mjs expert knowledge base for related app development. We can now offer enterprise grade framework support and trainings on top of this to ensure that client projects run successful.
No worries, the framework will stay open source.
In case you like the company concept: “Innovate in the new” and are up for the challenge to make an impact on redefining the way how frontend development works, you are welcome to join this team. The incentives are attractive.
For now, the roles are limited to Germany:
Best regards & happy coding,
Tobias
P.S.: You actually just experienced some of the benefits of using JSON based virtual DOM. Implementing this logic inside a template driven scope sounds a lot more challenging to me.
Preview image:
