Archive for March, 2010

Web IDE tips

March 27, 2010 2 comments

  It has passed 3 month since I use Web IDE for my front end tasks. Sometimes it works brilliant but in some cases it makes me pain after refactoring. This beast can do changes in unpredictable places and the worst is that it leaves the latent errors. I understand the challenge of creating IDE for dynamic languages such as javascript. Anyway the benefit of using is tremendous. I found out the following rules that could make you more happy with this IDE.

1) One javascript class per file (the size of class doesn’t matter).
2) Unique names for methods, field, and classes. It means that if it’s supposed to be named “onRender” you better to name it “onRenderMyComponent”. The long names is painless with this IDE as you have intellisense.
3) Do not make long namespaces, for instance, “”.
4) Do not make huge classes. First of all, it is hard to maintain in terms dynamic languages, thus it leads IDE errors.
5) If you have external library files (such as ExtJs, JQuery, DOJO .etc) it is better to track changes out there before committing.

  As you see some of items are just good practices of programming javascript but some are related to Web IDE.

Categories: javascript, pattern

ExtJs. Struggling against boilerplate code.

March 23, 2010 Leave a comment

  I don’t like any scent of boilerplate code in any programming language, specially in dynamic languages. The dynamic languages are just not designed for it, having boilerplate code out there twice pain as in static languages.
  If you are using well-known “Preconfigured class” idiom, you will find the following idiom very useful. It delegates part of routine to just one method. I name it “config merge” idiom:

Config = {};
Config.merge = function(config, defaultConfig){
        config = config||{};
        defaultConfig =  defaultConfig||{};
        Ext.applyIf(config, defaultConfig);
        return config;

I bet the following routine of incoming config and default config is repeated in your code sometimes or more often:

MyCompany.MySuperPanel = Ext.extend(Ext.Panel, {
         config = config||{};
         var defaultConfig = {width:100, height:200, autoScroll:false};
         Ext.applyIf(config, defaultConfig);, config);

And with “merge” idiom:

 MyCompany.MySuperPanel = Ext.extend(Ext.Panel, {
          Config.merge(config, {width:100, height:200, autoScroll:false});
, config);

Applying this idiom results in twice less code or even in one line code.,
    Config.merge(config, {width:100, height:200, autoScroll:false}));