View Full Version : Best practice/ feedback on first project

18 Aug 2011, 1:53 AM

i am about to finish my very first sencha touch project. I'll post a showcase link as soon as it is online. Altogether the development was pretty straight forward except for some expected "research + getting used to new things" - delay.

Although i am pretty happy with the result right now there are still some things that feel suboptimal. O would like to hear your opinion about. Not sure if i missed some conventions, concepts or best pratice things:

1. Diretory layout:
Currently my project's root folder looks as follows:
- app
- ressources
- lib

"app" consists of controllers, models and views

"ressources" consist of several subfolders holding scss, css, images as well as data. Were data contains a bunch of json files i used to populate stores of models. There are no dynamic stores in my application atm.

"lib" contains the sencha touch framework and optional some non application specific libs.

The main thing that bugs me about the this layout is the fact that it mixes public and private files. I.e. public in terms of deployment. E.g. resources holds the scss stuff which i do not want to upload to the webserver. Further more some of my images are "compassed" to inline images so there is no need to upload them ass well.

2. Naming conventions
I am not sure how to name or were to put custom javascript that is neighter a model nor a view or a controller. E.g let's assume i would like to extend the ext.form.slider and used it within my views. How would i name it, where would i but it? Is there any best pratise for this?.

3. Images
I got a bunch of images within my application. ATM i am just using a component.html: '<img .../> ' to place them. But this sometimes results in wired layout issue due to the fact that sencha/the browser isn't aware of the image size until the image is fully loaded. Even if it's fully loaded i still have to explictly set the surrounding component size as well as the image size.
Since i need to keep things resolution independed thats kinda annoying because i have to specify the image dimension and the component dimensions in em. Though i got a mixin for this task it still feels a little uglsyand blows up the css.

4. Theming
ATM i do it this way: include all scss style sheets of widgets i am using in my application and overriding it's properties afterwards to fit my needs. I wonder if its better to exclude a certain widget completly and define it from scratch if its look n feel differs to much from the sencha default.

5. Some practical questions

5.1 Empty stores/results
If i apply a certain filter to a store and the result is empty i would like to display a message saying something like "change your filter settings" or something instead of an empty list.

What is the established way to solve this problem?:
a. Make the controller displaying a different view.
b. Make a distinction of cases within the view.
c. Somethings else

5.2 Device dependend navigation
I love that "iphone like" tab bar main navigation. But on the iphone you always have that button browser bar when surfing a mobile app. Using a button tab bar as main navigation in this case is waste of space.

To workarround this i would like to make a case distinction introducing an alternative navigation concept for iphones while keeping the button tab bar for android devices or ipads.

Are you guys aware of any samples addressing this problem?

Thank you for reading ;),


19 Aug 2011, 1:44 AM
1. Your directory structure is totally up to you, so just split your resources into public and private folders...

2. How about an extra widgets folder? There is no best practice, but you might want to mimic sencha touch's src directory structure

5.1 Maybe this can simply be solved by setting the data view's emptyText property

5.2 Have a look at this nice tutorial http://www.sencha.com/learn/idiomatic-layouts-with-sencha-touch