If you’re just getting started with Sencha Touch there’s a lot of stumbling blocks you can run into, and a lot of things that seem really confusing make a lot of sense once they’ve been explained. I had my fair share of mistakes and difficulties when I started using Sencha Touch two years ago, so I’ve created a list of tips that I think would’ve been helpful to know when I was starting. This post would be far too long if I went over everything I mention in depth, so in some cases I’ve linked to another article where I (or someone else) talk about the issue in much more depth.
I’d also like to recommend that you take a look at my Beginners Guide to Sencha Touch eBook. I spent a lot of time writing this and tried to cover just about everything I think a beginner needs to know to get up and running fast with Sencha Touch. If you’re reasonably new to the framework, I think it will help you a lot.
1. Understand the MVC structure and how views interact with controllers
If you have a background in software you may be familiar with the Model View Controller (MVC) architecture. To over-simplify, it’s a way to organise applications to split up the presentation and logic. Views display things, Models handle logic and Controllers handle the flow of the program and interactions between the View and Model.
MVC support is one of the strengths of Sencha Touch and it’s really important to have a basic understanding of what it all means. Using it properly can make your application much more organised and maintainable. In the context of Sencha Touch the most important thing to understand are Views and Controllers. Models in Sencha Touch define data that we want to store and don’t do much heavy lifting in terms of logic. Most of the logic in your application will be contained within the Controllers.
To oversimplify even further, in Sencha Touch Views display things and fire events, Controllers listen to events from views and implement logic. For more information on how controllers interact with views take a look at this article.
2. Don’t put everything in one controller
While we’re on the topic of controllers… don’t create one controller that handles everything.
It’s common to see an ’App.js’ controller in a lot of Sencha Touch applications. Usually this is used to handle some generic functions like activating different views. This is fine for simple applications but as your app grows it’s important to create more controllers and split them up logically. Perhaps you would have one controller to handle navigation, another to handle authentication, and another to handle comments. Putting everything into the one controller, although certainly possible, will quickly get out of hand and become hard to manage.
3. Skip the Sencha Touch native packager, go straight for PhoneGap
Another cool thing about Sencha Touch is that it comes with it’s very own native packager to turn your web based application into installable files for iOS and Android. PhoneGap is just a lot better and easier to use though, and there’s really no reason to mess around with the Sencha Touch packager. I interviewed Simon Shepherd in my eBook and asked why he advocated using PhoneGap for packaging:
Personally, I use Adobe’s PhoneGap Build service since I’m on a windows computer and want to develop iOS applications. Using PhoneGap through the command line on your own computer though will give you unlimited access to all the options Simon describes. To get started using PhoneGap Build with Sencha Touch check out this article.
4. Have a good testing and debugging set up
You will undoubtedly have to do a lot of testing and debugging as you’re building your application. So it’s important to ensure you have a good debugging setup. On your desktop or laptop computer you are able to debug quite effectively through the browser simply by using the Safari or Chrome Dev tools. You can see JavaScript errors output to the console, as well as messages from any ’console.log’ statements you have within your application. You can use the ’Network’ tab to see requests and loading times and of course the ’Elements’ tab to inspect and modify the DOM.
These default tools are pretty powerful, but I would highly recommend taking that even further by installing the ‘App Inspector’ plugin. This will give you access to another tab called ’Sencha’ where you can inspect stores, layouts, events and more.
Of course at some point you will want to test your application when it is installed on a device, and that’s where things get a little trickier. We lose access to these handy browser based debugging tools and are operating blind. Often things don’t work quite the same when installed on a device, and if for some reason our app freezes or refuses to load where do we even start looking?
Fortunately, although debugging HTML5 applications is still far from perfect, we have some tools that we can use. Weinre has been around as an option for a long time, which allows remote debugging of an applications. I would recommend checking out [GapDebug][8] though, although it’s new and still being worked on it’s very impressive and provides a lot of advantages. I think GapDebug is a little more convenient and quick than Weinre but both essentially give you back the tools you had when testing through the browser.
5. Keep performance in mind
Remember when you’re developing on your powerful desktop or laptop computer, you’ve got a lot more power to work with. If you create a list with a 1000 items, or have deep nested structures in the DOM for example, you may find it works fine on a browser but when installed on a device scrolling could become very jerky.
If you’re making calls to a server and waiting for data to be loaded what’s going to happen in the mean time in your application? You’ll probably want to display some loading indicator until you actually receive the data instead of leaving the user wondering if anything is actually happening. Users expect applications to be quick and responsive, so it’s important to provide feedback to the user instantly.
Also keep in mind that some things are performed asynchronously. This means that code is not necessarily executed in order and race conditions can be created. A common example could be loading data from a store and then performing some operation – we might have a structure like this:
- Get reference to store
- Load store
- Grab the first record from the store and delete it
The store load in this example would be asynchronous – we’re not going to hold up the entire application from doing stuff until this store has loaded (this is a good thing as it makes our application more responsive, as discussed above) – so we could try performing an operation on a record in the store before it has even loaded. Obviously this will cause an error. In this case we would have to perform that operation only after the store has loaded, so we can add a callback to the store load function and run it once we get an indication that the store has been successfully loaded.
6. Use SASS and Compass
Don’t get into the habit of always embedding styles directly into your HTML or using the ’style’ config on components. It’s important to learn how to use your .scss files to define styles, and use compass to compile them. I don’t want to go in depth into how to use this here, but you can check out this tutorial or of course take a look at my eBook where this is covered.
In most cases you should be referencing a style in your .scss file with the ‘cls’ or ‘baseCls’ attributes like this:
{
xtype: 'panel',
cls: 'coolPanel'
}Not defining styles directly on a specific element like this:
{
xtype: 'panel',
style: {
background-color: '#000',
border: '1px solid #fff'
},
}This way we can use that same class for all of the panels that need that styling, and if we ever need to change it we don’t have to manually update every panel.
7. Connect with other Sencha Touch developers
Sorry if the last item on the list sounds like a bit of a cop out, but let me remind you of this quote:
Considering the size of the Sencha Touch community, there is not a whole lot of activity online. So I would encourage you to head over to the Sencha Touch forums and see if you can answer some peoples questions, or even just discuss the issue with them. If you’ve solved something you found particularly difficult chances are someone else has or will have the same problem, share your solution. Whether it’s on the Sencha Touch forums, a comment left on one of my tutorials or your own personal blog I think you’ll find you grow a lot by sharing with others (I certainly have).
In the spirit of #7 on this list, what are your tips for Sencha Touch beginners? Leave them in the comments below!
[8]: http://www.joshmorony.com/genuitec-release-epic-debugger-gapdebug-for-phonegap-apps/ ‘Genuitec Release EPIC Debugger ‘GapDebug’ for PhoneGap Apps’