Here is a collection of things I wish someone told me when I was first starting with Sencha Touch.
- Take baby steps – Sometimes it’s best to make sure that you have your layout hammered out before you create that inherited view with 37 tabs, a header toolbar, a footer toolbar, and multiple profiles for phones and tablets.
- Learn to use the chrome developer tools – OK, I know how to use the Chrome developer tools. Using them for Sencha is a slightly different matter. You have to know what you’re looking for. For instance – newcomers to sencha create complex views and are baffled when they run the app and….nothing. They don’t see a thing. If you inspect the HTML with Chrome, you should at least see your element’s xtype. If you don’t, that’s a sign that you have a bad reference. If you see your view’s xtype, but the height/width is 0px, that usually means that you gave it a layout but didn’t properly specify the size.
- Don’t overuse element IDs – This was a difficult thing to learn. I had previously been working with jQueryMobile and gave EVERYTHING an ID. This all worked in my initial, small scale tests. Once I ramped up with multiple instances of views and inherited views, this quickly caused problems. This is because every ID must be unique throughout the entire DOM and there isn’t any real concept of scope. Instead of using element IDs, rely on using the DOM through the magic of Component Query. Component Query works similarly to jQuery selectors, except you can use an object’s xtype as a means of finding it.
- Use the command-line build tools – You’re going to use sencha cmd eventually when you package and deploy the application, so it’s best to make sure that your application builds correctly. Not only will this identify issues with your code, but I’ve seen cases where one syntax works before building, but fails when the application is packaged. It’s a tiresome process coming up with workarounds at the last minute.
- Organize your SASS – It starts off slowly, the app.scss file has one or two things in it. By the end of your project, it’s a tangled mess and you’ve got elements scattered throughout it. SASS allows you to break your styling into multiple files and bring them in with the @import directive. One possible approach is to separate the styles into common layout, typography, theme, and view-specific files.
Do you have any other tips someone could use when starting with Sencha Touch? Add them in the comments section.