Introducing Sencha Animator: The CSS3 Alternative to Flash
Today we’re thrilled to announce the developer preview release of Sencha Animator, a new GUI-based desktop application that enables interactive designers to easily create rich media animations for HTML5-capable devices. With Apple’s decision to exclude Flash from their iOS, interactive designers have been searching for a way to bring the power of web animation to iOS devices without hand-coding hundreds, if not thousands of lines of CSS3. Well, the search is over. Check out our demos, then download Sencha Animator and give it a whirl (you’ll need to get a forum account if you don’t already have one.)
An Animation Power Tool
Sencha Animator allows you simply place objects (text, shapes, and images) onto a re-sizable stage area, configure their properties and then animate to bring them to life. You can move, scale, skew and rotate objects singly or at various levels of nesting, in 2D or 3D space. With Sencha Animator, you can also take advantage of CSS3 capabilities like gradients, blurs, reflections and shadows. You can create basic animations quickly and easily. But Animator is also designed to be a CSS3 power-tool. So when you need to add HTML or custom CSS, it’s easy to do that too. Best of all, Sencha Animator outputs pure CSS3 animation code, so it’s hardware accelerated on Apple iOS, which creates incredibly smooth animations. This also means it’s ready to work with any JavaScript library, not just Sencha.
Web Animations & CSS3 Ads
There are two editions of Sencha Animator— Standard Edition and Ad Builder Edition. The Standard Edition (today’s preview release) includes all the capabilities you need for normal web app animations. CSS Animations can replace Flash in many areas where it was once used: splash screens, educational content, motion graphics, kinetic typography, instructions, and more. Mobile designers and developers should be particularly thrilled since CSS3 animations are the only animation technology that works on the major mobile platforms- iOS, Android and Blackberry OS6. (Android lacks SVG and the BlackBerry Torch is not high powered enough to run Canvas).
However by license, the Standard Edition may not be used to create advertising, so if you’re an advertising agency, you’ll need to use our Ad Builder edition. If you’re interested in this edition, contact us directly and we’ll add you to a forthcoming private beta.
How Much Does It Cost
We’re pricing standard edition like a traditional design tool: on a per user basis in the low hundreds of dollars.
What’s Coming Next
Today’s release is very much a preview release, and there are rough edges that will be sanded down before release. In our in-house usability testing, we’ve identified several areas for improvement that we want to tackle. And of course, there are lots of CSS3 properties that we will bring into the application before we ship the final release: a better color picker, a gradient maker, more complete backgrounds support and more complete text formatting properties are just a few of the obvious features that you can expect. If you’re a user of Sencha Touch or Sencha Designer, you can also expect some nice integration features. We also hope to expand support to non-Webkit browsers as they add appropriate support for the CSS3 Animation spec.
And One Last Thing…
For those of you wondering what Sencha Animator is written in, the answer is… Ext JS of course! Ext JS provided an enormous short-cut in development time and allowed us to deliver the product on multiple platforms without worrying about Objective-C or Windows APIs.
Make A JavaScript Formatter with V8 and jsbeautifier
If you’re a JavaScript developer, you should check out a handy online tool called jsbeautifier.org, written by Einar Lielmanis. By simply pasting your JavaScript code and clicking Beautify, the jsbeautifier tool automatically reformats and reindents your JavaScript code (or JSON snippets) based on spacing, packing, and other options that you can configure.
A great feature of jsbeautifier is that the formatter has a JavaScript API (check it out here http://github.com/einars/js-beautify/), whose simple API call is js_beautify(js_source_text, options). This returns the formatted version of js_source_text based on the settings passed in in options.
If you want to programmatically “beautify” local files, you can also run the jsbeautifier script from the command line. There is support for Rhino, a JavaScript interpreter written in Java, to invoke the beautifier with the content of any file. Or if you’d prefer to not use Rhino, I recently added support for Qt Script or V8. Qt Script is the JavaScript engine built into Qt, the multi-platform application framework from Nokia. V8 is the JavaScript engine that powers Google Chrome.
In one of my previous blog posts, JavaScript Engines: How to Compile Them, I discussed how JavaScript engines can do more than just power a web browser. Today, I’ll use the V8-based beautifier as an example of how to embed V8 in a command-line application.
Get the Code
Let’s start by checking out the code, whic is as easy as:
git clone git://github.com/einars/js-beautify.git
cd js-beautify/v8
What we want is in the v8/ subdirectory.
Next, we need to compile V8, it should be under lib/. You can read JavaScript Engines: How to Compile Them for the details on this.
svn checkout -r 5610 http://v8.googlecode.com/svn/trunk lib
cd lib && scons mode=release && cd ..
Note: We’re using V8 version 2.4.9 (revision 5610), earlier or later versions may have slightly different APIs.
When you’ve successfully compiled V8, you will get a static library: lib/libv8.a.
Next, compile the beautifer:
g++ -o jsbeautify jsbeautify.cpp -Ilib/include/ -lv8 -Llib
The resulting executable jsbeautify is the final tool. Just place jsbeautify in your PATH to use it.
Now, you can set up your text editor to launch jsbeautify as an external application, and you have a handy auto-formatter!
Try out the tool by passing a file name as the argument, and the beautified contents will be printed out:
./jsbeautify hello.js
You can use the –overwrite option if you want to overwrite the original file.
How It Works
You’ll need a little background in C++ to understand the following code snippets (since V8 is written in C++). And to follow everything perfectly, you should also read the Getting Started Guide To V8 and the V8 Embedder’s Guide.
This is the annotated version of our tool:
FILE* f = fopen(argv[1], "rb");
if (!f) {
printf("Error: unable to open file %s\n", argv[1]);
return 0;
}
fseek(f, 0, SEEK_END);
int len = ftell(f);
rewind(f);
char* buf = new char[len + 1];
fread(buf, 1, len, f);
fclose(f);The first thing the program does is read the input file (the name is passed as an argument to the program) and load the contents to a buffer (allocated from the heap). Nothing fancy here, just basic I/O (written for simplicity). Obviously, the buffer lives in the C++ world, so we need to transfer it to the JavaScript world so it can be accessed by the beautifier function.
HandleScope handle_scope;
Handle<ObjectTemplate> global = ObjectTemplate::New();
global->Set("code", String::New(buf, len));
Handle<Context> context = Context::New(NULL, global);As mentioned in the V8 Embedder’s Guide, to use V8, we have to prepare a handle scope, a global object, and an execution context. To pass the buffer content from C++ to JavaScript, we set the property called ‘code’ in our global object to point to a new String object initialized with the buffer content. From this point, any JavaScript code running in the context can refer to and get the value of ‘code’.
Context::Scope context_scope(context);
Handle<Script> beautifyScript = Script::Compile(String::New(beautify_code));
beautifyScript->Run();Context needs to be entered before we can use it, this is easily achieved using the context scope. After that, we compile the script which actually implements the js_beautify function and then immediately evaluate it.
Handle<Script> runnerScript = Script::Compile(String::New("js_beautify(code)"));
Handle<Value> result = runnerScript->Run();At this stage, the JavaScript context already has access to an object (which is actually a string) named ‘code’ and a function ‘js_beautify’. So now we just need to connect the dots: evaluate “js_beautify(code)” and get the result. We also need to transfer the result, which still lives in the JavaScript world, back to our application’s C++ world:
if (!result.IsEmpty() && !result->IsUndefined()) {
String::Utf8Value str(result);
printf("%s\n", *str);
}The final step is to print it out. And that’s all!
This example shows how you can quickly use V8 to wrap and execute a JavaScript function and turn it into a real-world tool. I hope it serves as a good start for you to explore the features of V8 as an embedded scripting engine!
HTML5: The New Minimum for Mobile Web Devices
We designed Sencha Touch as a framework for building rich applications for HTML5-enabled mobile devices. Back in 2009 when we started our development, this meant Google Android 2+ and Apple iOS 2+ devices. Since then, these devices have been joined by the Apple iPad, the Blackberry Torch, the Blackberry Playbook tablet, the Google Android tablet, and the forthcoming WebOS based HP tablet and Nokia Meego phone.
Of course, we could have built something that worked on more primitive devices, but we chose not to do this for a variety of factors. The biggest being user experience and performance. You can’t build rich web apps on older devices that have basic browsers and incomplete and often buggy JavaScript. A rich app experience is the new minimum user expectation on mobile.
For this, we blame iPhone and Android. iPhone and Android native apps have set a new standard for mobile performance and experience. People love using these apps. And now it’s up to the mobile web to meet the new, higher, expectations. This means delivering web apps with polish, dynamism and performance. And the only way to do this in a mobile browser—without Flash—is with HTML5 family technologies.
“Mobile is Not a Small Desktop”
A mobile device is not just a small desktop. Taking something that works in a desktop browser with a mouse/keyboard interface and shrinking it down to mobile doesn’t cut it. What’s different? Two things: limited screen real estate, and your finger is your only input device. These two things have deep design implications.
First, when screens are this small, even the simplest apps have to provide for fast and easy navigation through content and data. This means that the app has to pre-load content that falls outside the current view and bring it quickly onto the screen when needed. Ajax has made this very familiar to us on the desktop, but most legacy phones lack Ajax support. Should you really plan an app where you make a user wait for a page fetch every time you want to show new content?
And then there’s animation. When the screen is this small, animating navigation actions becomes very important. Animating a content transition tells the user where the new piece of content is located relative to previous content in the extended “content space”. Without animations, you will burn a lot of screen real estate with breadcrumbs and other location aids.
Finally, on-screen widgets on a touch-screen device have to be very large to allow for touch control. Apple Human Interface Guidelines recommend a 42 pixel minimum height for buttons. That’s a huge amount of real-estate taken up by navigation. If tapping buttons is the only way to get around your app, you’ll end up with screen-clutter: lots of UI widgets and a tiny amount of content.
However, if you have advanced gestures, you can reduce the amount of UI chrome. Android & iOS native frameworks give you lots of tools for navigation without widget clutter:
- Components like carousels, that let you gesture directly on content areas for navigation
- Complex gestures such as pinch/spread on content to zoom in/out
- Modal dialogs and action sheets to confirm/cancel actions
- Pop-over menus that overlay the main content area
- Modal input widgets - e.g. date spinners
- And much more…
Luckily, these native functions are also possible using a mobile web browser as long as it has a solid Javascript implementation and good CSS3 support.
And Let’s Talk About Offline
And we haven’t even talked about web apps that need geolocation or offline support. Being able to use a mobile app even when you’re on 3G in San Francisco (aka offline), means it needs to have local storage for both data and application assets. Again this requires HTML5.
By the beginning of next year, all new smart-phones from Apple, Android, RIM, and Nokia will be HTML5-ready. In market share terms, most of them will be cheap Android-powered HTML5 mobile devices. They’re already in the delivery pipeline of all the major carriers. This is why we chose the design strategy that we did.