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.

A not so short guide to ZFS on Linux

Updated Oct 16 2013: shadow copies, memory settings and links for further learning.
Updated Nov 15 2013: shadow copies example, samba tuning.

Unless you've been living under a rock you should have by now heard many stories about how awesome ZFS is and the many ways it can help with saving your bacon.

The downside is that ZFS is not available (natively) for Linux because the CDDL license under which it is released is incompatible with the GPL. Assuming you are not interested in converting to one of the many Illumos distributions or FreeBSD this guide might serve you as a starting point if you are attracted  by ZFS features but are reluctant to try it out on production systems.

Basically in this post I note down both the tought process and the actual commands for implementing a fileserver for a small office. The fileserver will run as a virtual machine in a large ESXi host and use ZFS as the filesystem for shared data.