A blog by Juri Urbainczyk | Juri on Google+ | Juri on Twitter | Juri on Xing

Monday, August 20, 2012

10 Golden Rules when working with Sencha Touch and JavaScript

Lately I had the chance to work extensively with Sencha Touch again, which is really a great framework. Here is some of the advice I have to offer:

1. Be mindful of brackets
If you open a bracket always close it immediately. And only then fill in the respective code between the brackets. The same applies for quotation marks. Even Better: Use an editor which comes with a sound support for JavaScript syntax highlighting and which can automatically close opened brackets. This will spare you a lot of trouble and save a lot of time which you would spend otherwise looking for the missing comma.

2. Don't forget: your developing for smartphones!
Dont't put to much widgets on you screens. Mobile devices are smaller than you think.

3. Use classes
 Use the class system of Sencha touch and extend the existing components. Extract you code into these new widgets. This will help to keep your code small and beautiful. The structure of you views should always be visible right out of the source code.

4. Run your app and play with it
Develop using Chrome and Safari. Test on native devices repeatedly. You will always be in for suprises.

5. Stay flexible
Dont't use fixed sizes for your components, employ relative sizes instead. E.g. never use "width:500px" but rather "width:20%". Fixed sizes will get you into trouble very swiftly.

6. Structure your app
Structure your application with the existing system of views, models and stores. Alayws start with the models. Use the convert option if you need special data for visualization which you did not get from the server.

7. Keep classes small.
Classes should never be longer than 2-3 pages in your editor of choice.

8. Use dynamic loading
Always fill in the "extends" attributes in order to enable Sencha Touch dynamic loading.

9. Use logging
Use comsole.log for early feedback during development. This is especially important for keeping track of store loading and initializing.

10. Don't reinvent the wheel
Use setRecord() and getRecord() to transfer data between stores and panels.

No comments:

Post a Comment