Anatomy of a Sencha Touch 2 App

March 19, 2012 11 Comments

At its simplest, a Sencha Touch 2 application is just a small collection of text files – html, css and javascript. But applications often grow over time so to keep things organized and maintainable we have a set of simple conventions around how to structure and manage your application’s code.

A little while back we introduced a technology called Sencha Command. Command got a big overhaul for 2.0 and today it can generate all of the files your application needs for you. To get Sencha Command you’ll need to install the SDK Tools and then open up your terminal. To run the app generator you’ll need to make sure you’ve got a copy of the Sencha Touch 2 SDK, cd into it in your terminal and run the app generate command:

sencha generate app MyApp ../MyApp

This creates an application called MyApp with all of the files and folders you’ll need to get started generated for you. You end up with a folder structure that looks like this:

st2-dir-overview

This looks like a fair number of files and folders because I’ve expanded the app folder in the image above but really there are only 4 files and 3 folders at the top level. Let’s look at the files first:

  • index.html: simplest HTML file ever, just includes the app JS and CSS, plus a loading spinner
  • app.js: this is the heart of your app, sets up app name, dependencies and a launch function
  • app.json: used by the microloader to cache your app files in localStorage so it boots up faster
  • packager.json: configuration file used to package your app for native app stores

To begin with you’ll only really need to edit app.js – the others come in useful later on. Now let’s take a look at the folders:

  • app: contains all of your application’s source files – models, views, controllers etc
  • resources: contains the images and CSS used by your app, including the source SASS files
  • sdk: contains the important parts of the Touch SDK, including Sencha Command

The app folder

You’ll spend 90%+ of your time inside the app folder, so let’s drill down and take a look at what’s inside that. We’ve got 5 subfolders, all of which are empty except one – the view folder. This just contains a template view file that renders a tab panel when you first boot the app up. Let’s look at each:

Easy stuff. There’s a bunch of documentation on what each of those things are at the Touch 2 docs site, plus of course the Getting Started video with awesome narration by some British guy.

The resources folder

Moving on, let’s take a look at the resources folder:

st2-dir-resources

Five folders this time – in turn:

  • icons: the set of icons used when your app is added to the home screen. We create some nice default ones for you
  • loading: the loading/startup screen images to use when your app’s on a home screen or natively packaged
  • images: this is where you should put any app images that are not icons or loading images
  • sass: the source SASS files for your app. This is the place to alter the theming for your app, remove any CSS you’re not using and add your own styles
  • css: the compiled SASS files – these are the CSS files your app will use in production and are automatically minified for you

There are quite a few icon and loading images needed to cover all of the different sizes and resolutions of the devices that Sencha Touch 2 supports. We’ve included all of the different formats with the conventional file names as a guide – you can just replace the contents of resources/icons and resources/loading with your own images.

The sdk folder

Finally there’s the SDK directory, which contains the SDK’s source code and all of the dependencies used by Sencha Command. This includes Node.js, Phantom JS and others so it can start to add up. Of course, none of this goes into your production builds, which we keep as tiny and fast-loading as possible, but if you’re not going to use the SDK Tools (bad move, but your call!) you can remove the sdk/command directory to keep things leaner.

By vendoring all third-party dependencies like Node.js into your application directory we can be confident that there are no system-specific dependencies required, so you can zip up your app, send it to a friend and so long as she has the SDK Tools installed, everything should just work.

Hopefully that lays out the large-scale structure of what goes where and why – feel free to ask questions!

Filed under javascript, Misc, touch Tagged with , , , ,

What do you want from Sencha Touch 2.1?

March 14, 2012 22 Comments

Disclaimers: this is the most unofficial, non-Sencha-backed poll of all time. There’s no guarantee we’ll ever do any of it, yada yada.

Touch 2.0 went GA last week to easily the best product launch reception I’ve seen. It was great and the feedback’s wonderful but honeymoons are boring – I want to know what’s wrong with it 🙂

So, what do you want to see in Sencha Touch 2.1? I asked on Twitter just now and got a bunch of responses so here are some ideas. Even if what you want is on this list already drop a reply in the comments so I know more than one person cares about it:

touch-2-1-requests

We do of course have a few ideas up our sleeves too, but why spoil the surprise?

Filed under Misc

Sencha Touch 2 GA Released!

March 6, 2012 4 Comments

The last few months have flown by faster than almost any before them. The first Sencha Touch 2 release went out in October as a Developer Preview, coinciding with SenchaCon 2011, sparking a huge wave of interest from all over the HTML5 community. Today marks the GA release of Sencha Touch 2.0.0, and we couldn’t be happier with how far we’ve come.

See the announcement on sencha.com

It was only 18 months ago that we released the first version of Sencha Touch 1. It ushered in a brave new world, bringing tried and true approaches from the desktop together with the exciting new capabilities of the mobile web. But it was, to many of us, very much a version 1 product. ST2 is as big a step up from ST1 as ST1 was from everything that went before it.

Similar themes, great execution

For me, there are three core themes that go into any game-changing software release: Performance, Stability and Ease of Use. These themes come up again and again, especially for products at the bleeding edge of what’s possible. With the mobile web, each year can bring game changing developments – that’s one of the reasons developing Sencha Touch is so exciting.

Touch 2 really nails all of those themes. Performance was definitely the top priority of the three, and I think we’ve been able to permanently alter expectations of what web apps can do with the improvements we’ve made. Not only do apps feel much faster when you use them, today’s announcement on the incredible new fast startup performance is game changing in itself. It’s amazing how fast ST2 apps start up now, it really changes how they’re used when they consistently boot in a couple of seconds.

Stability is not sexy. It’s not a particularly great marketing ploy but it’s really important. Having a weekly release cycle and a huge developer community has really helped enable a fast turnaround on finding, fixing and verifying bugs. Lately new bug reports have been trickling in so slowly we almost wish there were more of them. Almost.

Oddly, documentation is something that’s really close to my heart. Back when I joined Sencha, improving the Ext JS docs was a prime concern and I think we took it up several notches between Ext JS 3 and 4. But that’s nothing compared to what we’ve done between Sencha Touch 1 and 2. As well as using the awesome new documentation app from Ext JS, we’ve added a ludicrous amount of new content including 35 brand new guides (up from zero) and way more examples than ever before.

We’ve also been creating new screencasts, augmenting the awesome material Drew Neil creates. For the Touch 2 GA release I created this 30 minute getting started video that covers everything from generating an app all the way through to packaging it for native app stores. This is the sort of material I always wished I had when I was first learning Ext JS:

Getting Started with Sencha Touch 2 from Sencha on Vimeo.

These take a lot of time to produce so if you like this sort of thing make sure you drop a comment here or on the sencha.com blog so I know to create more. I try to record them in a single take so you know there’s no magic going on behind the scenes – I think it shows it’s all real but it involves a lot of takes 🙂

Step One

All of the hard work to date has been to ship 2.0.0 – the first stable 2.x release. 2.0 itself is a step change over what went before it but there are already some incredible things lined up for the next few releases. Over the next couple of months we’ll continue to polish, optimize and act on the wonderful feedback you guys are providing, but first I think we’ve earned a break!

Filed under Misc

Building a data-driven image carousel with Sencha Touch 2

February 11, 2012 37 Comments

This evening I embarked on a little stellar voyage that I’d like to share with you all. Most people with great taste love astronomy and Sencha Touch 2, so why not combine them in a fun evening’s web app building?

NASA has been running a small site called APOD (Astronomy Picture Of the Day) for a long time now, as you can probably tell by the awesome web design of that page. Despite its 1998-era styling, this site incorporates some pretty stunning images of the universe and is begging for a mobile app interpretation.

We’re not going to go crazy, in fact this whole thing only took about an hour to create, but hopefully it’s a useful look at how to put something like this together. In this case, we’re just going to write a quick app that pulls down the last 20 pictures and shows them in a carousel with an optional title.

Here’s what it looks like live. You’ll need a webkit browser (Chrome or Safari) to see this, alternatively load up http://code.edspencer.net/apod on a phone or tablet device:

The full source code for the app is up on github, and we’ll go through it bit by bit below.

The App

Our app consists of 5 files:

index.html, which includes our JavaScript files and a little CSS
app.js, which boots our application up
app/model/Picture.js, which represents a single APOD picture
app/view/Picture.js, which shows a picture on the page
app/store/Pictures.js, which fetches the pictures from the APOD RSS feed

The whole thing is up on github and you can see a live demo at http://code.edspencer.net/apod. To see what it’s doing tap that link on your phone or tablet, and to really feel it add it to your homescreen to get rid of that browser chrome.

The Code

Most of the action happens in app.js, which for your enjoyment is more documentation than code. Here’s the gist of it:

This is pretty simple stuff and you can probably just follow the comments to see what’s going on. Basically though the app.js is responsible for launching our application, creating the Carousel and info Components, and setting up a couple of convenient event listeners.

We also had a few other files:

Picture Model

Found in app/model/Picture.js, our model is mostly just a list of fields sent back in the RSS feed. There is one that’s somewhat more complicated than the rest though – the ‘image’ field. Ideally, the RSS feed would have sent back the url of the image in a separate field and we could just pull it out like any other, but alas it is embedded inside the main content.

To get around this, we just specify a convert function that grabs the content field, finds the first image url inside of it and pulls it out. To make sure it looks good on any device we also pass it through Sencha IO src, which resizes the image to fit the screen size of whatever device we happen to be viewing it on:

Pictures Store

Our Store is even simpler than our Model. All it does is load the APOD RSS feed over JSON-P (via Google’s RSS Feed API) and decode the data with a very simple JSON Reader. This automatically pulls down the images and runs them through our Model’s convert function:

Tying it all together

Our app.js loads our Model and Store, plus a really simple Picture view that is basically just an Ext.Img. All it does then is render the Carousel and Info Component to the screen and tie up a couple of listeners.

In case you weren’t paying attention before, the info component is just an Ext.Component that we rendered up in app.js as a place to render the title of the image you’re currently looking at. When you swipe between items in the carousel the activeitemchange event is fired, which we listen to near the top of app.js. All our activeitemchange listener does is update the HTML of the info component to the title of the image we just swiped to.

But what about the info component itself? Well at the bottom of app.js we added a tap listener on Ext.Viewport that hides or shows the info Component whenever you tap anywhere on the screen (except if you tap on the Carousel indicator icons). With a little CSS transition loveliness we get a nice fade in/out transition when we tap the screen to reveal the image title. Here’s that tap listener again:

The End of the Beginning

This was a really simple app that shows how easy it is to put these things together with Sencha Touch 2. Like with most stories though there’s more to come so keep an eye out for parts 2 and 3 of this intergalactic adventure.

Filed under Examples, javascript, Misc, touch Tagged with , , , , ,

Like Android? Help us fix it

February 6, 2012 4 Comments

Near the end of last week’s Sencha Touch 2 beta release blog post there was an appeal to the community to help raise awareness of a nasty flashing issue with Android 4.x phones. Every time you tried to use an animation on a web page the browser would flash, wait a bit, then finally perform the animation.

We filed a ticket on this about a week ago and thanks to your help (over 300 of you starred the issue), got a prompt response from the Android team with a fix for the flashing issue.

Getting it Right

However, that’s only half the story. While the ugly flash is gone, animation performance on Android 4.x phones is still unacceptable. As it stands a 2 year old device running Android 2.x easily outruns the top of the range devices today running 4.x.

We really want to have excellent support for all Android devices. While 4.x accounts for only 1% of all Android phones today, that number is only going to go up. And when it does, we want to be ready to ship fast, fluid, beautiful apps onto it.

So we’ve created a new ticket with reduced, reproducible test cases and filed it to the bug tracker. We’ll continue to give the Android team as much support as we can in order to resolve this quickly, but once again we’ll need your help.

In fact all we need is a few seconds of your time. Just open the ticket and click the star at the top left. That’s all we need – it tells the Android team just how many people care about this issue and will help them prioritize it accordingly.

If you want to help out more, take a moment to add a comment to the ticket outlining your own experiences with this issue, like the m.lanyrd.com developer did. Highlighting specific cases where you’ve had problems will really help.

Thanks!

Helping raise awareness of this issue will help everyone who uses or develops for Android devices on the web, and enables technologies like Sencha Touch to deliver slick, immersive apps without resorting to rewriting your app for each platform. We appreciate your help!

Star the issue now

Filed under javascript, touch Tagged with , ,

Sencha Touch 2 Hits Beta

February 1, 2012 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.

Download Sencha Touch 2 Beta 1 Now

Filed under javascript, touch Tagged with , ,

The Class System in Sencha Touch 2 – What you need to know

January 28, 2012 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.

Filed under javascript, touch Tagged with , , ,

Sencha Touch 2 PR4 – Big Improvements in Data and MVC

January 24, 2012 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.

Filed under Misc

SenchaCon 2011: The Best Bits

October 26, 2011 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!

Filed under Misc

Ext JS 4.0.7 Released

October 20, 2011 10 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.

Filed under Misc

← Older posts

Newer posts →

%d bloggers like this: