Sencha Touch 2 Hits Beta
February 1, 2012 by Ed Spencer · 2 Comments
Earlier today we released Sencha Touch 2 Beta 1 – check out the official sencha.com blog post and release notes to find out all of the awesome stuff packed into this release.
This is a really important release for us – Sencha Touch 2 is another huge leap forward for the mobile web and hitting beta is a massive milestone for everyone involved with the project. From a personal standpoint, working on this release with the amazing Touch team has been immensely gratifying and I hope the end result more than meets your expectations of what the mobile web can do.
While you should check out the official blog post and release notes to find out the large scale changes, there are a number of things I’d really like to highlight today.
A Note on Builds
Before we get into the meat of B1 itself, first a quick note that we’ve updated the set of builds that we generate with the release. Previously there had been some confusion around which build you should be using in which circumstances so we’ve tried to simplify that.
Most people, most of the time should be using the new sencha-touch-debug.js while developing their app as it is unminified code that contains all of the debug warnings and comments. If you’re migrating from 1.x, use the new builds/sencha-touch-all-compat.js build as it provides an easier migration path by logging additional warnings when you use 1.x-style class configurations.
Because we provide 5 builds in total we created a guide on the shipped builds and JSBuilder (the tool that creates a custom build specifically for your app). The guide contains a table showing all of the options enabled for each build – hopefully that makes it easy to choose which build is best for your needs.
Performance
In case you haven’t seen Sencha Touch 2 yet the first thing you need to know is that it’s fast. Crazy fast. Check out this side by side comparison between 1.x and 2.x:
Layout performance is enormously faster in 2.x due to a brand new layout engine that operates much closer to the browser’s optimized CSS layout engine. The difference is pretty startling, especially on Android devices, which had sometimes struggled with Sencha Touch 1. Performance remains a top priority for us and we’re really pleased with the improvements that we’ve secured with 2.0.
Navigation View
The new Navigation View is one of the slickest, sexiest things we’ve created for 2.0. I could play with this thing all day. If you’ve got a phone in your pocket or a tablet near by open up the Navigation View example and see it for yourself. If you’re not, check out this beautiful video of it in action:
Navigation Views are really easy to put together and make your application immediately come to life. Check out the Navigation View docs to see how easy it is to add this to your own applications.
Awesome new examples
As of beta 1 we have 24 examples shipped with the SDK, including no fewer than 6 MVC examples – Kitchen Sink, Jogs with Friends, Twitter, Kiva, Navigation View and GeoCongress.
The Kitchen Sink and Twitter examples also take advantage of Device Profiles, which are a powerful way to customize your app to render customized UI for tablets and phones. Take a look at the Kitchen Sink on your phone and on an iPad to see how it rearranges itself depending on the screen size.
Finally, if you’re seeing Sencha Touch 2 for the first time you may not have seen the new inline examples in the documentation center. This is a brand new thing for Sencha Touch and allows you to edit code live on the documentation page and immediately see the results – give it a go on the Carousel docs.
Ludicrous Amounts of Documentation
Speaking of docs, we have a stunning amount of learning material for Sencha Touch 2. We’ve been through all of the major classes, making sure that the functions are clearly documented and that each one has some great intro text that describes what the class does and how it fits in with the rest of the framework.
We’ve also created over 20 brand new guides for Sencha Touch 2, covering everything from getting started through to developing using MVC, using Components and creating custom builds for your applications. We’ve put a huge amount of effort into our docs for Sencha Touch 2 and I really hope it pays off for you guys and makes it easier than ever to create great mobile web apps.
Go Build Something
It’s only beta 1 but we’re very happy with the performance, stability, API and documentation of Sencha Touch 2. I think it’s the best thing we’ve ever created, and really highlights what the mobile web is capable of. 2012 looks set to be a very exciting year for Sencha Touch so I hope you’ll join us on the adventure and build something amazing with it.
The Class System in Sencha Touch 2 – What you need to know
January 28, 2012 by Ed Spencer · 3 Comments
Sencha Touch 1 used the class system from Ext JS 3, which provides a simple but powerful inheritance system that makes it easier to write big complex things like applications and frameworks.
With Sencha Touch 2 we’ve taken Ext JS 4’s much more advanced class system and used it to create a leaner, cleaner and more beautiful framework. This post takes you through what has changed and how to use it to improve your apps.
Syntax
The first thing you’ll notice when comparing code from 1.x and 2.x is that the class syntax is different. Back in 1.x we would define a class like this:
MyApp.CustomPanel = Ext.extend(Ext.Panel, {
html: 'Some html'
});
This would create a subclass of Ext.Panel called MyApp.CustomPanel, setting the html configuration to ‘Some html’. Any time we create a new instance of our subclass (by calling new MyApp.CustomPanel()), we’ll now get a slightly customized Ext.Panel instance.
Now let’s see how the same class is defined in Sencha Touch 2:
Ext.define('MyApp.CustomPanel', {
extend: 'Ext.Panel',
config: {
html: 'Some html'
}
});
There are a few changes here, let’s go through them one by one. Firstly and most obviously we’ve swapped out Ext.extend for Ext.define. Ext.define operates using strings – notice that both ‘MyApp.CustomPanel’ and ‘Ext.Panel’ are now wrapped in quotes. This enables one of the most powerful parts of the new class system – dynamic loading.
I actually talked about this in a post about Ext JS 4 last year so if you’re not familiar you should check out the post, but in a nutshell Sencha Touch 2 will automatically ensure that the class you’re extending (Ext.Panel) is loaded on the page, fetching it from your server if necessary. This makes development easier and enables you to create custom builds that only contain the class your app actually uses.
The second notable change is that we’re using a ‘config’ block now. Configs are a special thing in Sencha Touch 2 – they are properties of a class that can be retrieved and updated at any time, and provide extremely useful hook functions that enable you to run any custom logic you like whenever one of them is changed.
Whenever you want to customize any of the configurations of a subclass in Sencha Touch 2, just place them in the config block and the framework takes care of the rest, as we’ll see in a moment.
Consistency
The biggest improvement that comes from the config system is consistency. Let’s take our MyApp.CustomPanel class above and create an instance of it:
var myPanel = Ext.create('MyApp.CustomPanel');
Every configuration has an automatically generated getter and setter function, which we can use like this:
myPanel.setHtml('New HTML');
myPanel.getHtml(); //returns 'New HTML'
This might not seem much, but the convention applies to every single configuration in the entire framework. This eliminates the guesswork from the API – if you know the config name, you know how to get it and update it. Contrast this with Sencha Touch 1 where retrieving the html config meant finding some property on the instance, and updating it meant calling myPanel.update(’New HTML’), which is nowhere near as predictable.
Instantiating
You probably noticed that we used a new function above – Ext.create. This is very similar to just calling ‘new MyApp.CustomPanel()’, with the exception that Ext.create uses the dynamic loading system to automatically load the class you are trying to instantiate if it is not already on the page. This can make life much easier when developing your app as you don’t have to immediately manage dependencies – it just works.
In the example above we just instantiated a default MyApp.CustomPanel but of course we can customize it at instantiation time by passing configs into Ext.create:
var myPanel = Ext.create('MyApp.CustomPanel', {
html: 'Some Custom HTML'
});
We can still call getHtml() and setHtml() to retrieve and update our html config at any time.
Subclassing and Custom Configs
We created a simple subclass above that provided a new default value for Ext.Panel’s html config. However, we can also add our own configs to our subclasses:
Ext.define('MyApp.CustomPanel', {
extend: 'Ext.Panel',
config: {
html: 'Some html',
anotherConfig: 'default value'
}
});
The ‘anotherConfig’ configuration doesn’t exist on Ext.Panel so it’s defined for the first time on MyApp.CustomPanel. This automatically creates our getter and setter functions for us:
var myPanel = Ext.create('MyApp.CustomPanel');
myPanel.setAnotherConfig('Something else');
myPanel.getAnotherConfig(); //now returns 'Something else'
Notice how the getter and setter names were automatically capitalized to use camelCase like all of the other functions in the framework. This was done automatically, but Sencha Touch 2 does another couple of very nice things for you – it creates hook functions:
Ext.define('MyApp.CustomPanel', {
extend: 'Ext.Panel',
config: {
html: 'Some html',
anotherConfig: 'default value'
},
applyAnotherConfig: function(value) {
return "[TEST] " + value;
},
updateAnotherConfig: function(value, oldValue) {
this.setHtml("HTML is now " + value);
}
});
We’ve added two new functions to our class – applyAnotherConfig and updateAnotherConfig – these are both called when we call setAnotherConfig. The first one that is called is applyAnotherConfig. This is passed the value of the configuration (’default value’ by default in this case) and is given the opportunity to modify it. In this case we’re prepending “[TEST] ” to whatever anotherConfig is set to:
var myPanel = Ext.create('MyApp.CustomPanel');
myPanel.setAnotherConfig('Something else');
myPanel.getAnotherConfig(); //now returns '[TEST] Something else'
The second function, updateAnotherConfig, is called after applyAnotherConfig has had a chance to modify the value and is usually used to effect some other change – whether it’s updating the DOM, sending an AJAX request, or setting another config as we do here.
When we run the code above, as well as ‘[TEST] ‘ being prepended to our anotherConfig configuration, we’re calling this.setHtml to update the html configuration too. There’s no limit to what you can do inside these hook functions, just remember the rule – the apply functions are used to transform new values before they are saved, the update functions are used to perform the actual side-effects of changing the value (e.g. updating the DOM or configuring other classes).
How we use it
The example above is a little contrived to show the point – let’s look at a real example from Sencha Touch 2’s Ext.Panel class:
applyBodyPadding: function(bodyPadding) {
if (bodyPadding === true) {
bodyPadding = 5;
}
bodyPadding = Ext.dom.Element.unitizeBox(bodyPadding);
return bodyPadding;
},
updateBodyPadding: function(newBodyPadding) {
this.element.setStyle('padding', newBodyPadding);
}
Here we see the apply and update functions for the bodyPadding config. Notice that in the applyBodyPadding function we set a default and use the framework’s unitizeBox function to parse CSS padding strings (like ‘5px 5px 10px 15px’) into top, left, bottom and right paddings, which we then return as the transformed value.
The updateBodyPadding then takes this modified value and performs the actual updates – in this case setting the padding style on the Panel’s element based on the new configuration. You can see similar usage in almost any component class in the framework.
Find out more
This is just a look through the most important aspects of the new class system and how they impact you when writing apps in Sencha Touch 2. To find out more about the class system we recommend taking a look at the Class System guide and if you have any questions the forums are a great place to start.
Sencha Touch 2 PR4 – Big Improvements in Data and MVC
January 24, 2012 by Ed Spencer · 2 Comments
Today we released Sencha Touch 2.0 PR4 – the fourth and final preview release before we hit beta. While we’re technically calling this one a preview release, we’re pretty happy with the performance, stability and overall quality of this release and consider it exceptionally close to beta quality.
As well as a good number of enhancements and bug fixes PR4 brings a couple of long-awaited improvements to two of the most important parts of Sencha Touch – the data package and the application architecture.
First up, the data package has been ported to use the new config system, which normalizes all of the configuration options for every class in the data package, providing a clean and predictable way to configure and update your data classes. We’re still cleaning up some of the data package documentation and given the scope of some of the changes we’re expecting a few bugs to appear as a result but overall we’re very happy with the improved capabilities of Ext.data.
MVC Improvements
The second big improvement in PR4 is to the application architecture. The MVC classes have also been upgraded to use the new config system, again yielding big improvements in the API and general flexibility of your code.
History support has been baked directly into Controllers, enabling you to easily define routes that your Controller cares about, as well as the functions that handle those routes right there in your Controller file. The Kitchen Sink example has been upgraded to use routes out of the box – try it on a mobile device or desktop browser and watch how it reacts to the back/forward buttons.
Equally important, Device Profiles have been upgraded to make creating apps that adapt to different screen sizes much simpler than ever before. Once again the Kitchen Sink has been upgraded to take advantage of device profiles. If you load it on a tablet device you’ll see a split screen view with the menu on the left and the content on the right, whereas the phone version employs a nested list to save screen space.
To cap it off the deep linking support means you can navigate to any view on a phone, send the link to a friend on a tablet and they’ll be taken to the same view customized for their screen size. As an example, try opening http://dev.sencha.com/deploy/sencha-touch-2-pr4/examples/kitchensink/#demo/forms on a tablet and a phone to see it show the Forms demo specialized for each type of device.
As PR4 is the first time we’ve exposed this expanded functionality to the public we expect that there will be bugs and edge cases that crop up. We’ll be keeping a close eye on the bug forums and addressing any issues as quickly as possible, as well as creating additional MVC-driven examples for you to learn from. For now, the kitchen sink is the best example of Sencha Touch 2 MVC in action.
Docs
We’ve made a huge push over the last couple of years to radically improve our documentation, and I think that even in the pre-beta PR4 release Sencha Touch 2 has the best docs we’ve ever created. While there are still holes to be filled in, we already ship with 20 guides on how to use the framework, including 4 brand new guides for PR4:
As well as the guides, most of the classes now contain generous documentation explaining their function and the context in which they operate. As we move to beta and then to GA we’ll be shifting our focus onto producing great demos and examples to showcase the framework’s capabilities and provide realistic sample code to draw from.
There’s a full set of release notes explaining the improvements in PR4 and the important known issues. We expect to be shipping regular releases from now until GA so be sure to keep an eye on the forums, twitter and the sencha blog for more details.
SenchaCon 2011: The Best Bits
October 26, 2011 by Ed Spencer · 5 Comments
SenchaCon 2011 is drawing to a close and it’s been another awesome ride. We were joined by 600 of the best and brightest of the Sencha community and I think it’s pretty safe to say we had an awesome time. Day 3 is just drawing to a close so here’s a few highlights from the week.
Ext JS 4.1 Performance Preview Released
There were a number of big announcements on day 1. Probably the most exciting one for me was the release of Ext JS 4.1 Performance Preview. We’ve been working like fiends to improve Ext JS’s performance profile on older browsers (IE6, IE7 and IE8 in particular) and on Monday we were able to share some of what we’ve achieved.
Page load, render and layout times are all enormously improved and have been the focus of our optimizations so far. Since 4.0 we’ve been building up a performance benchmarking rig that tests all of our 100+ examples (and a number of real-world customer apps) on consumer grade hardware with a range of browsers. We’ve seen massive improvements in loading time on these older browsers – for example the Themes Viewer example with its 300 Components all rendered at load time now starts up twice as fast as it did in 4.0.7.
To give a flavor for the breadth of the improvement we ran the tests on every example and summed up the loading time for each browser. As you can see below, 4.1 is able to speed through all of the examples significantly faster than 4.0.7, giving a massive performance boost across the board. It got so much faster that IE8 is now able to load all 100+ examples in a little under 20 seconds, compared with almost 60 in 4.0.7:
See the full announcement on the sencha.com blog, but like we said there, this is a pre-beta release with a number of known issues. We’d love for you to verify the speed improvements with your own apps but please don’t take it anywhere near production yet! We’ll have more content on what’s in 4.1 in later blog posts.
Other Announcements
While Ext JS is closest to my heart, there were a number of other announcements made over the last few days. First up is Sencha.IO, our new cloud service and now launching in beta. This is a set of 4 services – data, messages, login and app deployment – that make creating and deploying web apps a snap, especially when you integrate the social aspects of Sencha.IO data and messages.
We also announced that we’ve just closed a second round of funding, raising another $15 million to further advance the state of the art in HTML5 technologies. This is going to enable us to push forward even faster and bring you some exciting new technologies. It was great that Sequoia Capital and Radar Partners were so happy with their first round with us that they decided to invest again. The future is definitely very exciting at Sencha right now.
Favorite Sessions
There were over 50 sessions this year and with several tracks going on simultaneously it was impossible to go to them all. Jacky Nguyen definitely stole the show with his talk on the Sencha Class System. He has a ridiculously over the top presentation style and totally brought the house down. We’ll be sure to get him on stage more often!
Jamie and Nicolas’ talk on charting was very cool and generated lots of spontaneous applause (that happened a lot during the conference, which must be a good thing), and Rob and Dave’s demonstration of styling using the new beta Neptune theme was equally awesome.
Don lit the place up with his talk detailing the work that went into making Ext JS 4.1 so much faster, along with all the other new features in the release. Another mind blowing talk was given by John Willander, who demo’d a series of client-side attacks along with the BeEF Project, which happens to be writen in Ext JS. Based on what John presented we’ll definitely be looking at what we can do to help you secure your apps with Ext JS.
Of course, I had a couple of sessions myself, though a few technical problems early on made them rather more challenging than expected (it’s hard to talk to people when your microphone cuts out after every second word!). The Intro to MVC talk was a blast and the sacrifice to the gods of live demos seemed to pay off as the 20 minute live coding session went without a hitch. Anyone who wants the code I put together during that session can find it up on github.
Meeting Everyone
Although there were 600 people here this time it felt like I was able to meet almost everyone. Your intense enthusiasm for what we do really came through and to everyone who came up and gave us such great feedback it really drives us forward to keep improving your framework so thank you!
I saw more awesome Ext JS and Sencha Touch apps than I could count, and was pleasantly surprised to see how many people had been able to construct full applications using Sencha Touch 2 despite it only being in Developer Preview right now. It was also great getting to spend time hanging out with people and seeing them get excited when they start to see what’s possible with these products. Spending time in the flesh with developers is probably the most important part of the whole conference so it was great to meet so many of you.
Finally, Grgur announced that the second SourceCon Europe will be taking place in London around April of next year. The first SourceCon was an awesome experience in beautiful Split, Croatia, and next year we’ll be heading to London, England for this community-organized, Sencha-centric conference. They’ll be launching the conference website in a couple of weeks and given how good it was last year you’ll probably have to rush to get your tickets. Hope to see you there!
Ext JS 4.0.7 Released
October 20, 2011 by Ed Spencer · 9 Comments
I’m very happy to report that we released Ext JS 4.0.7 to the public today. This is the seventh patch release to the 4.0.x series and contains several hundred improvements and bug fixes compared to the last public version, 4.0.2a.
4.0.7 is all about robustness – we’ve found that our support subscribers have had a lot of success with the newer builds of Ext JS 4 so I’m really pleased that we can share this with you. We’re releasing this publicly earlier than we would usually do because it has taken us longer than we expected to get Ext JS 4.1 into your hands.
Michael put out a post on our blog last week with some updates on 4.1 and our desires around releases and communications with the community. Not being able to ship 4.1 to you yet has been a frustrating experience but I think that once you see it you’ll enjoy the vast improvements it brings.
In the meantime, I’m happy to answer questions in the comments, via twitter or email (ed @ sencha). You can download the build here and see the full release notes for 4.0.7 all the way back to 4.0.0.