Today we’re thrilled to share with you the first developer preview of Sencha Touch 2. Sencha Touch 1.0 launched just one year ago and has become the leading framework to build mobile HTML5 apps. Today, we’re delivering a preview of our biggest update to the framework yet. We’ve focused on three key areas: Performance, Ease of Use, and Native Packaging. We’d like to share with you the details of each of these.
h3. Performance First
Our number one goal for Sencha Touch 2 is performance. Web apps can’t be beaten for convenience, but you want them to be fast too. There’s the measurable stuff: fast to boot up, fast to layout, fast to switch orientation, and fast to render. But there’s also the intangible aspects–scrolling needs to feel smooth and animations should be fluid and flicker-free.
h4. A Brand New Layout Engine
One of the key targets for performance improvement was the layout engine. The Sencha Touch 1.0 layout engine was extremely powerful and great for laying out apps just the way you want them, but the price for all that power was often reduced performance. This was especially evident when rotating the device, where layout updates could take up to a second to complete.
Our mission in Touch 2 was to dramatically improve layout performance while maintaining the flexibility that developers are accustomed to. To achieve this, we rethought how to size and position things on screen. The result is massively improved layout performance across the board. Screens pop onto the page much faster when navigating through the app, giving a much more fluid experience, but the most dramatic improvement is when changing a device’s orientation. The new layout engine is so fast we had to use a high-speed camera to measure it. Here’s the Kitchen Sink buttons example running on 1.x and 2.x, slowed down to one quarter speed:
Watch this video on Vimeo
That’s a Motorola Atrix rotating with 1.1 and 2.0. Shooting at 120 frames per second, Sencha Touch 1.1.0 takes 118 frames (0.98 seconds) to update the application layout. With Sencha Touch 2.0, it takes just 42 frames (0.35 seconds) for the exact same example. You’ll see see similar speedups throughout all the demo apps with Sencha Touch 2.0.
h4. Android Performance
Watch this video on Vimeo
The second big improvement we’ve made in Sencha Touch 2.0 is Android performance, particularly when it comes to scrolling and animation. Many of you noted the fact that Android devices were noticeably slower when scrolling through large lists, and that animations could be choppy and exhibit weird visual artifacts.
Touch 2 gives Android its own optimized mechanism for achieving both smooth scrolling and fast, fluid animations. We’ll go further into the technology behind these advances at SenchaCon later this month, but for now here’s the Motorola Atrix again, showing just how much faster 2.0 feels on Android devices.
Startup Time
The third major area of performance improvement is in Sencha Touch startup time. We’ve optimized everything we can put our hands on with startup. And so far we’re seeing between 10% to 25% improvement in startup time on a range of devices, when testing our Kitchen Sink example. This app is sizable–it demonstrates almost every component in the framework and on many devices loads almost a second faster in 2.x:
h3. Easy to Use
The second objective of Sencha Touch 2 is to make it easier to create applications. There are many things we’ve done to improve this, from simplifying configuration options, to providing more example code and completely overhauling the documentation.
h4. Class System and Apps
Sencha Touch 2 uses the powerful new class system from Ext JS 4. This gives us all of the benefits of dynamic loading, intelligent builds that only include the classes you use, mixins, configurations and all the other features of the new engine. We have a full guide to the new class system on the documentation site.
We’ve also brought across the improved application architecture from Ext JS 4, that includes ComponentQuery and production build support. All these features haven’t been at the expense of download size. We’ve been able to keep the total download payload roughly the same size, and that’s before build optimization.
h4. Streamlined Component Configuration
In the past, if you ever needed to set/get a config like “label” you would need to create your setters and getters yourself. Now, with Sencha Touch 2 you get this out of the box. The new class system gives you the ability to set up @[email protected]–simple properties that are automatically given getter and setter functions, defaults and more.
Sencha Touch 2 makes use of the config system throughout the framework so whenever you see a config on a class you already know that you can reconfigure it at any time (even after it is rendered). Even better, because the config’s setter name always follows the same pattern you already know what function to call.
For example, we can give a Text Field a label when we instantiate it and then know we can easily change it later:
var text = Ext.create('Ext.form.Text', { label: 'My Field' }); // anything we can configure also has a setter function // its name always follows the setConfigName pattern text.setLabel('Another Field');
From the Sencha Touch documentation, every listed config option has a getter and setter function. They all follow the exact same pattern of getConfigName and setConfigName. This makes it really easy to configure and reuse components throughout your app.
h4. Great Documentation
We’re totally obsessed with improving our documentation for Sencha Touch 2. The new docs feature all of our examples and videos baked right in, but the real improvements are in the class reference.
All of the most widely used classes in Sencha Touch 2 feature excellent documentation right in the API reference. Interspersed with the class docs are dozens of live examples that run right in your browser and let you see (and even modify) the example code on the fly. We’ve also brought all of the SASS variables for each Component into the API docs, making it much easier to see what you can customize.
Finally, we’re shipping 11 brand new guides out of the box. Check out our work in progress with guides that explain core concepts like Layouts, Components and Classes, and others that cover how to use components like tab panels, forms and carousels. For Sencha Touch veterans there’s a What’s New in 2 guide, and the new Getting Started guide takes you through building your first app from scratch.
h3. Native Packaging
One of the most common questions developers ask when building Sencha Touch apps is “how do I get my app in front of customers?” In many scenarios, building and deploying apps to the web is exactly what developers want and customers expect. In some cases, getting apps in to app stores is an added bonus.
Today, along with Sencha Touch 2 preview, we’re shipping a developer preview of our SDK Tools 2.0. This first preview is available on Mac OSX and packages your app for submission to the Apple App Store. The new SDK Tools include a new @sencha [email protected] command that enables you to take your Sencha Touch app and package it up for submission to Apple.
To make a developer’s life easier, on iOS the packager doesn’t require the native SDK so you can package without having to download the iOS SDK. Just download the SDK Tools and you’re ready to build. For developers who do have the the native SDKs, you can use the SDK Tools to directly push your app to the iOS emulator so you can see how your app will run on device.
There will be many more capabilities in our packaging tool by final release. If you’re interested in getting started, embedded in the documentation is a new guide that has all the details on how to use the new packaging capabilities. We think you’ll be as excited as we are with how easy it is now to build and package your web app for native distribution.
h3. Developer Preview
This is just a developer preview so we’re not quite feature complete yet. At the moment the main items missing from the release are multiple carousel animations, sortable tabs, draggables and history/deep linking support. These will all be coming back into the framework before general release.
As a preview release, *APIs are not yet frozen.* This should be fair warning. Because the API is not yet frozen, we’re also not yet guaranteeing backwards compatibility with Sencha Touch 1.x.
Everyone attending SenchaCon later this month will also be able to attend “Jamie Avins’ talk”:http://secure.lenos.com/lenos/sencha/SenchaCon2011/sessions.htm on migrating apps from Sencha Touch 1 to Sencha Touch 2.
h3. Conclusion
From faster startup time to Android advances, from fluid scrolling to amazing documentation, from native packaging to the new class system, Sencha Touch 2 will be a major step forward for developers looking to build mobile HTML5 applications. We’re very excited about all the improvements to Sencha Touch, and we’re excited to see what developers will accomplish. Join us in the forums and keep an eye on the blog as we post more articles on Touch 2.
And of course, if you want to meet the folks behind Touch, join us at SenchaCon in Austin, Texas!
Great job guys!!
Another work of art! We’rspeechlesschless. Mostly because our jaw dropped on android’s new performance improvements. Well done Sencha, well done.
So psyched, awesome work dev team!
I’ve been waiting to get my hands on this. It looks awesome guys. Wonderful work as always.
A shame the preview is not compatible with the BlackBerry PlayBook :(. I wanted to see if it was finally possible to use animations in apps, but the kitchensync demo make the browser crash and the doc doesn’t load on the device.
You dropped the dispatcher and routes?? Color me disappointed. That was the shinning jewel in Sencha touch 1.1
Certainly awesome work moving the two frameworks closer to a unified platform, but I personally feel like they are missing a large piece of the application puzzle with out a routing and dispatching system.
@esatterwhite nope, routes are coming back in an even better form. Like I said, we’ve dropped a feature or two from the PR so we can get it in your hands faster :) (I actually mention the routing stuff in the post)
I just installed the SDK and tried to package and run the twitter application on the iOS simulator. Just Awesome.
Awesome! Congrats dev team!!!
@esatterwhite This is just a developer preview so we’re not quite feature complete yet. At the moment the main items missing from the release are multiple carousel animations, sortable tabs, draggables and history/deep linking support (a large portion of MVC). These will all be coming back into the framework before general release.
Great work. Is this all the changes will be in final version 2.0? Will there be any new UI controls like Grid control will be added in final version?
Not a single new UI control? I mean, still no data grid??
First, THANKS, AWESOME !!1!!!!111 :)
Out of all removed features, I’d vote for router stuff to be #1 prio. :)
But then, I’m already happy. :)
@Murali @VH We don’t have new UI controls planned for 2.0. We’ve focused on three key areas: Performance, Ease of Use, and Native Packaging. We do have plans for new controls after 2.0 is released.
How to find the list of removed items? I don’t see anywhere in this blog.
SASS variables right in the API docs… nice touch. :)
Thank you, Jamie. Is there a roadmap for ST so we’d have something to plan our effort around?
@VH – as Jamie said we don’t have any new UI controls planned for Touch 2. We’ve had a strong focus on the fundamentals, like performance, Android, native packaging, and the like and that’s all been in response to what our customers have been asking. In the community we’ve seen tons of people build on top of the core classes in Touch to create things like data views and grids and other cool features like that. Of course, we’d love to bring some of that in to the core framework but in Touch 2 we’re focused on the features and areas I mentioned above.
@Murali – we haven’t removed features, they’re just not in preview yet.
Congrats guys! This looks very promising, well done.
This is the first Web UI Toolkit, which doesn’t suck on the Android (2.3) browser. Awesome job! Thank you so much!
@Aditya, all new features are great and I am sure you will get tons of positive feedback from guys building x-platform consumer apps. But since we build LOB apps, new features in 2.0 don’t help us that much, except, probably, better Android perf (we’re targeting primarily iPads and Windows tablets, where perf is OK), so we’d need to know how the roadmap looks like. Is it available? Because ST not having a given control is not necessarily a problem. The problem is not knowing when or whether certain feature will be implemented. Not having a roadmap is going to be a huge impediment for business ISVs adopting ST.
Cool!
Good job. I’m looking forward to playing with this when I get home.
Great work I’m sure but the Motorola Atrix is a dual-core beast of a phone and is one of the fastest out there atm. As a developer I’d like to know how well it performs on something like the Droid or Galaxy S.
I am a little concerned about app start up times, how related to the size of the kitchen sink demo is this?
Put another way, if I produced a native iOS package for a small productivity app in Sencha Touch 2, and which loaded 0.5k of text data from local storage into a list home page, how fast would it load on the iPhone 4 (non S)?
Nice!, wonder when we can get the full version in our hands
@Shaun we’ll record some more videos to show those other devices, but the performance improvements are pervasive (Galaxy S 2 looks great for example). Atrix was just the first device I picked up…
@camelCase there are definitely more improvements on bootup time coming, we’ve spent more time on layout speed so far
Are there plans to include a wrapper for native/device integration e.g. Getting acces to the camera when I have the app wrapped in the native wrapper?