David Deraedt

Following a thread on google+ created by the famous MrDoob, I thought it could be useful to share some thoughts regarding the file size on Edge Animate projects (aka compositions).

Understanding a composition file stucture

If you're not familiar with the file structure of an Edge Animate project, I strongly encourage you to read the first part of my Edge Animate for web developer series.

But as a reminder, here's roughly what it looks like: (assuming your page was named index).

• index.an is a JSON file used by the authoring tool to open the project (not to be published).
• index.html is the host HTML file
• index_edgePreload.js is the yepnope based loader which loads everything else.
• index_edge.js describes the composition content (assets, symbols, timelines)
• index_edgeActions.js holds the custom javascript code added by the user
• images (folder) contains all images used by the tool
• edge_includes (folder) contains all required libraries:
  • JSON2: a library for working with the JSON format (if not supported by the browser)
  • jQuery, v1.7.1
  • jQuery easing: a jQuery plugin describing easing functions for animations
  • Edge: the core Edge Animate library describing all JavaScript objects and classes used by an animation

It's important to remember that what we should look at when studying file size is not the project's files (used for authoring), but the final, optimized output which options are specified via the publish settings dialog.

File size breakdown

To study things properly, I took one of own projects, which you can see in action in the blog post mentionned above.

Also, I'm obviously not taking into account the media files (just images for now) which is unrelated to this discussion, but still very important for the actual project total file size. Actually, that's the very first thing to look at when looking for size optimization!

Now, let's take a look at the size of those files.

In this example, we can see that about 90% of the project size is in fact coming from our edge_includes folder which holds our javascript libraries. These libraries are not specific to our project. They are what make it possible for any edge animation to work. The rest of the files are what is really specific to your project and seems much more reasonnable (22Kb in this case).

In other words, the sum of these libraries can be thought of as our runtime, and should therefore be compared to the flash player (the runtime for flash content) rather then to SWF files. Of course, this comparison quickly finds its limits, but it still is important to understand this distinction.

Caching and CDN

Amongst those libraries, 95% of the file size actually comes from our two libraries: jQuery, and Edge. If we want to maximize the chance for users not to have to download them, they have to be in his browser cache.

A good way to do that is to deliver those files via a Content Delivery Network if possible, and then fallback to the local copy if the CDN is not available.

Fortunately, that's largely the case for jQuery, so you can expect that only a minority of your users will need to download those 100kb (approx).

The Edge animate framework (sometimes still called the Edge runtime) is, however, far from being as popular as jQuery, if only because it is so new. So, whether you distribute it locally or globally, so you have to assume that most users will indeed have to download it, at least for now.

Further thoughts

It should be clear for anyone now that Edge animate is not very well suited for very simple animations or transitions in a page. In that case, you're much better off with simple CSS3 or jQuery alone.

Edge Animate really shines for bigger, more ambitious, non trivial real life projects.

That said, I still think there is still room for improvements here. For instance, your project JS files could be concatenated and minified. Also, I'm sure there is a way to have a more modular approach to the "edge runtime" than we currently have.

But we also have to understand that ambitious projects have a cost in terms of file size. Maybe that's also one of the reason why flash content was so popular: having a plugin installed in such an ubiquitous way is a tremendous advantage for content delivery. But that's another story… ;)