Matias Niemela on the new AngularJS animations APIBy Lukas Ruebbelke
Matias Niemela is responsible for writing the new animations API in AngularJS. We were interested in its background and some of the history and design decisions around ngAnimate, so we decided we’d take some time to chat with Matias and ask him.
Lukas Ruebbelke: Matias, let’s start with a little background first. Tell us a bit about yourself and what you’ve been working on.
Matias Niemela: My name Matias and I live in Toronto, Canada. I’ve worked for nine months on the AngularJS core team remotely from Toronto, and I run and operate the blog yearofmoo.com. Lately I’ve been developing a lot of open-source code on the Angular project and improving my skills as a software engineer.
Lukas Ruebbelke: What has been your primary focus with AngularJS?
Matias Niemela: Primarily ngAnimate and a new interactive guide application for learning AngularJS.
Lukas Ruebbelke: Who’s idea was it to finally start writing ngAnimate and make it a real thing?
Matias Niemela: I originally emailed Miško Hevery (one of the original developers on the project, and still active) asking if I could help make animations a real thing and how I could help make new features of AngularJS come to fruition. I also mentioned my blog and who I was. A few weeks later, he replied and let me know he chatted with the team and the opportunity is up for the taking. At first I was going to help improve the docs, however the ngAnimate module was a really sought-after feature in AngularJS so we decided to move on that first. So I guess animations in AngularJS would have been developed with or without me, but I was just at the right place at the right time when I emailed him to kick things into gear.
Lukas Ruebbelke: Tell us about some of the design decisions that went into the new API for version 1.2.
Lukas Ruebbelke: Moving to a CSS class-based syntax makes it really easy to integrate with third-party libraries. What are some of your favorites ones out there at the moment?
Lukas Ruebbelke: My experience is that it’s pretty easy to hook ngAnimate into an existing AngularJS application. I realize this may not always be the case, so can you share any design considerations that would be helpful when building an application that is going to be animated?
Matias Niemela: Integrating ngAnimate into an existing application should be quite easy. The CSS classes in AngularJS are explicit enough not to collide with any other styles, but sometimes extra care may be required to make things work, and due to the strict CSS naming conventions, your animations may not appear the first time.
My recommendations for design would be to build your application without animations first, then add them on after things are working. Your application should work the same if ngAnimate is removed from your list of dependencies. If you’re upgrading a pre-existing application, then please migrate your own animation code to use ngAnimate instead of being inline within your directives. Also try to avoid crafting your own animation logic outside of what ngAnimate offers. We’re constantly looking into how to boost the capabilities of ngAnimate, so chances are what you’re doing on your own is already supported and encouraged within ngAnimate.
Lukas Ruebbelke: AngularJS really excels at doing enterprise CRUD type applications. ngAnimate really opens up the door to go far beyond that. What kind of things are you hoping people do with ngAnimate?
Matias Niemela: We’re hoping to see all kinds of websites and web applications use ngAnimate to build experiences that are not exclusively CRUD and/or enterprise services. Personal blogs, touch interfaces, mobile applications and so on could all benefit from what ngAnimate has to offer. As time goes on we’re hoping that developers use ngAnimate, provide feedback on how to improve its capabilities and share what they like and don’t like. Web animation integration code has always been subject to coupling and complexity and overall it is very difficult to sync animations properly into a web application. So far ngAnimate makes approaching animations much easier. Our goal with it is to provide rich animations without your application turning into spaghetti code. I feel like we’re getting closer to making a really nice common way of handling animations on the web. Who knows, maybe browsers vendors and/or the W3C may end up learning from ngAnimate and plan to develop a more robust animation API for the web.
Lukas Ruebbelke: One last question. And I have to warn you that we have your house surrounded and are not afraid to uses force if your answer is not satisfactory. Tell us something totally top secret about AngularJS that no one else could possibly know.
Matias Niemela: The development of ngAnimate has always been developed one step at a time so there’s nothing top secret in the works. Perhaps soon we’ll have better callback handling and synchronization between animations as well as staggering animations and more drivers for other animation tools. One thing for sure is that if there is a new and useful browser API then AngularJS will find a way to put it to use in the framework. Maybe sometime down the road once the new W3C web animations API is mainstream it will be combined into ngAnimate. Seeing how things have gone in the past nine months, everything new in AngularJS fits together so nicely together so I have no doubts about what’s to come. It really falls back onto the devs working on the framework and open-source. The collective input and creativity of the AngularJS team really shows in their work, and the overall synergy of everyone working together in the community helps make that work really shine.
Lukas Ruebbelke: OK, one more last question. Who is your best friend in the whole wide world?
Matias Niemela: Vim. Is that one going into the interview?
Lukas Ruebbelke: Yes it is!
Matias Niemela: Ok. Rewind!
Lukas Ruebbelke: No, that is awesome! Hilarious answer.
Lukas Ruebbelke: I really appreciate you taking time to answer some questions, and more importantly building something so incredibly awesome!
Matias Niemela: My pleasure. Be sure to thank Brad Green, Misko Hevery, Igor Minar, the remainder of the AngularJS team, as well as the amazing ng community for their never-ending devotion, passion and vision for helping make ngAnimate and AngularJS what it is.
About the Author
- New course: AngularJS Fundamentals
- Using AngularJS: Interview with Dan Wahlin, Joe Eames and Jim Cooper
- New course: Building a Site with Bootstrap, AngularJS, ASP.NET, EF and Azure
- AngularJS Step-by-Step: Services
- Video: Testing AngularJS Services with Dependencies
- Video: Killing Your Enemies with Vivid Animations in XNA
- AngularJS Step-by-Step: Controllers
- AngularJS Step-by-Step: Getting Started and Markup
- Video: Build Windows 8 Like UI Transitions and Animations in Single Page Apps
- New course: iOS Graphics and Animation Programming