Skip to main content

Easy animations with Sproutcore 1.10

The release of Sproutcore 1.10 marks an important step in the life of this very popular framework. Lots of new features make developing applications on the Sproutcore framework even easier and fun.

One improvement that I am sure will catch your eye (pun intended) is view animations. Coding view animations was rather easy also on previous versions, but with 1.10 animations are now first class citizens bolted into the core rendering subsystem.
For an example of what is available out of the box see this demo.

So how would you use this goodness in an actual Sproutcore application? And how much code would it take?

As an example I have put together a very basic Sproutcore app (source, demo) which has two states: an authentication form and a main screen. Logging in transitions the app from the login form to the main screen and logging out returns the app to the login screen. Pretty simple.



By default the transition is immediate: the HTML elements are removed from the DOM and those representing the next state are appended in their place. Instead we want the transition to be animated with the elements of each screen sliding in and out with an effect similar to those on OS X and iOS.

Thanks to the scaffolding introduced in 1.10 it just so happens that very little coding is required.

First we specify the animations that we want on each view with 4 lines of code like the following:


At this point views are animated on append, but not on removal (except for the toolbar since it has a high zIndex). The animation on remove is not visible simply because the new view is appended over the one being animated and therefore hiding it.

We need to delay the append step for the time necessary to the animation to complete, which we do with the following code:


In total: 4 lines of code for each view we want to animate plus 3 for each state, grandtotal: 16+6=22 lines of code! (without indentation for readability it would have been just 18).

Not bad, huh?

Comments

Popular posts from this blog

Indexing Apache access logs with ELK (Elasticsearch+Logstash+Kibana)

Who said that grepping Apache logs has to be boring?

The truth is that, as Enteprise applications move to the browser too, Apache access logs are a gold mine, it does not matter what your role is: developer, support or sysadmin. If you are not mining them you are most likely missing out a ton of information and, probably, making the wrong decisions.
ELK (Elasticsearch, Logstash, Kibana) is a terrific, Open Source stack for visually analyzing Apache (or nginx) logs (but also any other timestamped data).

From 0 to ZFS replication in 5m with syncoid

The ZFS filesystem has many features that once you try them you can never go back. One of the lesser known is probably the support for replicating a zfs filesystem by sending the changes over the network with zfs send/receive.
Technically the filesystem changes don't even need to be sent over a network: you could as well dump them on a removable disk, then receive  from the same removable disk.

Detect missed executions with OpenNMS

Everyone knows that OpenNMS is a powerful monitoring solution, but not everyone knows that since version 1.10 circa it embeds the Drools rule processing engine. Drools programs can then be used to extend the event handling logic in new and powerful ways.

The following example shows how OpenNMS can be extended to detect missed executions for recurring activities like backups or scheduled jobs.