I've worked on some projects with SenchaTouch. Basically, I love the core functionality of SenchaTouch. It supports many useful features for developers, includes:
+ A standard OOP with Javascript and its dynamically/clever JS class loading.
+ Data package for loading data from Ajax (JSON, XML) + Storage + Model
+ Dom accessing/querying
+ Logging
However, currently SenchaTouch cannot support some mobile OS with its UI layer, ex: Window Phone 7. So, when moving to a project that have the need to support a specific phones, we need to consider other frameworks to use (just for supporting the UI layer), like: JQuery Mobile.
Btw, I don't want to rewrite everything from scratch. I want to have a core framework that developer can based on to develop features. They need to follow only 1 coding convention, 1 style of OOP programming with JS. After reviewing some popular JS frameworks on the community, I decide to use the Core of SenchaTouch for this purpose.
Firstly, I create a simple project which includes the whole of SenchaTouch library and try to remove unnecessary classes in its folder. JS files are loaded in a very messy ways and I cannot control it after 30 mins. I found this is a crazy way.
I found that SenchaTouch supports a way to build its files using Sencha SDK tool (http://www.sencha.com/products/sdk-tools) and in SenchaTouch folder, you can find a jsb3 file. This file is used for building the SenchaTouch JS output files (to includes into your HTML pages).
I start from this one. Just copy the touch.jsb3 files to another one and customize it. Customizing task is only "removing all unnecessary JS files" (mostly they are classes of UI layer).
After doing this step, I have a problem with the JS loading mechanism of SenchaTouch via Ext.Loader. In the final package of the senchatouch, it loads all js files based on the default path = src folder. In my new project, I copy the senchatouch into www/lib folder. So, a lot of files cannot be loaded because of wrong path.
Because of this reason, I decide to separate the output into 2 packages:
1/ touch-core.js: includes the fundamental js classes for loading JS files + SenchaTouch class system.
2/ touch-extra.js: includes all of other advanced features of SenchaTouch: logging, Ajax, data model, storage
I must put the code of
Ext.Loader.setConfig({
enabled : true,
paths : {
'Ext' : 'libs/touch'
}
});
between 2 script tags to make it understand the correct path of Ext before loading the touch-extra file.
I found another critical issue in SenchaTouch build jsb3 file: the order of JS files are not correct and missing loading some important files. So, instead of using only 2 JS files (touch-core.js, touch-extra.js), it loads a lot of other files in the SenchaTouch src folder.
I decide to do a next improvement step. Based on the loading order of JS files, I put all of missing JS files/re-arrange the order of JS files in the jsb3 project. It takes me 1-2 hours :(. Finally, I created a jsb3 files for building the SenchaTouch core as my expectation:
touch-core.js: for using the Sencha Class system + DOM features.
touch-extra.js: for using other features (Ajax, Logging, Data Model, Storage, wrapper classes of using Device features, Utils).
After refactoring a little bit more, I can control deeply the way that Ext.Loader load JS files dynamically and the final script to use "Touch Core" in my project looks better. Now I only need to embed 3 js files:
+ touch-core.js
+ touch-extra.js
+ app.js
In the app.js file, I set the path of Ext.Loader to make it understand the correct path to load my application scripts:
Ext.Loader.setConfig({
enabled : true,
paths : {
'MyApp' : 'js/MyApp'
}
});
Now, I don't need to set the path of 'Ext' namespace anymore because I put all necessary scripts into the 2 Touch JS files.
I did some testings with all expected features in Sencha Core as mentioning at the beginning and see it works very well. From now, I can use any other HTML5 framework for the presentation layer and use the Sencha coding style with my favorite features to save my time.
I put the jsb files and the tutorial to use it into Github at: https://github.com/khoatran/Sencha-Core-build
If you want to use it or create your own custom build of Sencha, you can get this as a reference.
