Sencha Touch is a great choice in framework for creating complex HTML5 mobile applications – but that doesn’t mean you can’t make a royal unmaintainable mess of your code base if you don’t make an effort to keep things tidy.
You should always follow best practices as best you can, but I want to share a few specific tips that help me keep my codebase clean and easy to manage.
1. Split up large items into separate files
It is common in Sencha Touch to use arrays of objects when adding items to a component. Sometimes those objects may be pretty simple, like a toolbar perhaps:
items: [
{
xtype: 'toolbar',
title: 'My Cool Mobile App',
docked: 'top',
},
];But other times it might be something that requires a little more configuration, like a list or a map:
items: [
{
xtype: 'toolbar',
title: 'My Cool Mobile App',
docked: 'top',
},
{
xtype: 'list',
//... 30 lines of configuration ...
},
{
xtype: 'map',
//... 50 lines of configuration ...
},
];You can see how a file like this would quickly become hard to manage. Instead you should separate out complex items into their own views. We could take that list for example and create a new file called MyList.js and add the following code:
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.List',
xtype: 'mylist',
config: {
//config...
},
});
Then we can simply refer to it by its xtype, instead of defining it directly in the items array. Now our item array might look something like this:
items: [
{
xtype: 'toolbar',
title: 'My Cool Mobile App',
docked: 'top',
},
{
xtype: 'mylist',
},
{
xtype: 'mymap',
},
];2. Use subfolders and name files appropriately
As I stated above, it’s great to separate your code out into different files. But then that leads to problems of having a mess of files in your project and you don’t know where to find what you need to work on.
There are relations between files and this should be reflected in your directory structure. In the example I gave above it would probably make sense for that list we created to go in a subfolder related to its parent. Let’s look at a specific example.
Say we have a StoreLocator page in our application, and in that view we have a list and a map (just like we have above). We separate out the list and map into their own views, and put those child views inside of a subfolder. After doing that our directory structure might look like this:
– view
–storelocator
—StoreLocatormap.js
—StoreLocatorlist.js
–StoreLocator.js
This way we can easily see all of our main views, and if we are working on the StoreLocator page then all of its children are stored in the one folder, so we can easily see what’s relevant. If you want to store files in subdirectories though you must make sure the view definition reflects the path to the file:
Ext.define('MyApp.view.storelocator.StoreLocatorList', {
extend: 'Ext.dataview.List',
xtype: 'storelocatorlist',
config: {
//config...
},
});Notice how we are calling this class MyApp.view.storelocator.StoreLocatorList which reflects the directory structure. This same pattern is always used so if you wanted to add even more subfolders you could do something like MyApp.view.storelocator.subfolder.MyView.
3. Place item templates in your index.html file
Another common practice in Sencha Touch is to define item templates, which look something like this:
itemTpl: '{name}',it may also come in the form of an XTemplate or similar (you can do some pretty advanced stuff with the XTemplate). This example above is fine, but we can start creating some pretty complex item templates once HTML gets involved. One option is to join an array of strings to keep things tidy:
itemTpl: [
'<div>',
'<table>',
'<tr><td>Example</td></tr>',
'</table>',
'</div>',
].join('');This is a pretty tame example, but it keeps things neat enough if that’s your preference. However I find the best way is to store the template definitions in your index.html file, and have your templates simply look them up. For example you could add the following to your index.html file just above the microloader script:
<!-- My Template -->
<script type = "text/template" id = "tpl_my_list">
<img src = "{image}" />
<div class = "entry">
<div class = "item">
<span><strong>{name}</strong></span><br />
<br />
<table>
<tr>
<td>{distance}</td>
</tr>
</table>
</div>
</div>
</script>and then you can use it as your item template by doing the following:
itemTpl: document.getElementById('tpl_my_list').innerHTML;The benefits of this approach is that it allows for easy formatting and syntax highlighting, and you can store all of the HTML templates for your app in the one place.
Do you have any tips?
These few tips have gone a long way to helping me keep my projects organised, but there’s certainly a lot more that could be done. Feel free to share your tips and tricks for keeping Sencha Touch projects organised in the comments below.