First off, HTTP wasn’t necessarily the fastest protocol to use with GIT until they added a mod called git-http-backend, or SMART-HTTP, as of GIT 1.6.6. This article from the Pro GIT author, @chacon, details this and from my experience I cut my download times by two-thirds using this approach.  Moreover, github is also supporting this.  Basically what you need to do is as follows:

1. Confirm you have Apache 2.2 installed: rpm -q httpd (install it with yum otherwise)
2. Clone your GIT repo to Apache by doing the following (as per Pro GIT book):

   $ cd /var/www/html/git (mkdir if necessary)
   $ git clone  --bare /path/to/git_project gitproject.git
   $ cd gitproject.git
   $ mv  hooks/post- update.sample  hooks/post- update
   $ chmod a+x  hooks/post- update 

3. Update your httpd.conf to include this:

   SetEnv GIT_PROJECT_ROOT /var/www/html/git
   SetEnv GIT_HTTP_EXPORT_ALL
   ScriptAlias /git/ /usr/libexec/git-core/git-http-backend/

4. Add LDAP Authentication (in this case, any valid LDAP user will have access to the git location) as follows:

   <LocationMatch "^/git/.*/git-receive-pack$">
           SSLRequireSSL
           Order deny,allow
           Deny from All
           AuthName "GIT Repo"
           AuthType Basic
           AuthBasicProvider ldap
           AuthzLDAPAuthoritative off
           AuthLDAPURL "ldap://ldap-server.company.com:389/ou=users,o=company?uid"
           Require valid-user
   </LocationMatch>

5. Restart httpd: /etc/init.d/httpd restart

For LDAP authorization, of course you may have several different repos running off the same host, all which require certain users or groups access to the given location. This site explains this in detail, but here is an example I used so that I could bind a particular repo location to an LDAP group with SSL in place:

<LocationMatch "/git/gitproject*">
        SSLRequireSSL
        Order deny,allow
        Deny from All
        AuthName "GIT Repo"
        AuthType Basic
        AuthBasicProvider ldap
        AuthzLDAPAuthoritative on
        LDAPTrustedGlobalCert CA_BASE64 /etc/pki/tls/http/rootCA.crt
        AuthLDAPURL "ldaps://ldap-server.company.com:636/ou=users,o=company?uid"
        AuthLDAPGroupAttribute member
        AuthLDAPGroupAttributeIsDN on
        Require ldap-group cn=my.group,ou=groups,o=company
        Satisfy any
</LocationMatch>

In this example, I’m binding project.git (use wildcard for LocationMatch in-case users forget to add .git extension) to any member in the LDAP group “my.group”. Note that you may need to define a different LDAP group attribute to match the field that will contain the DN of your users .  If you are not storing DN, then you can set AuthLDAPGroupAttributeIsDN to off.

The last step is enable SSL on your Apache server.  We use self-signed CERTs internally so you’re going to have to add those certs to your GIT clients unless of course your using a well known root CA like Verisign.  To do that with msysgit, you open the $MYSYSGIT_INSTALL/bin/curl-ca-bundle.crt and add the base-64 encoded text of your keys to the end of this file.  Then run the following command from the GIT BASH:

$ git config --global http.sslcainfo c:\\apps\\Git\\bin\\curl-ca-bundle.crt

That’s pretty much it!  Now you can simply connect to your repo from msysgit with SSL (no SSH keys req’d) and LDAP authorization:

$ git clone https://mygitserver.company.com/git/project.git
Cloning Project...
Username: [put user name that's in the LDAP group]
Password: [password]
remote: Counting objects: 17, done.
remote: Compressing objects: 100% (13/13), done.
remote: Total 17 (delta 0), reused 0 (delta 0)
Unpacking objects: 100% (17/17), done.

Presentation Slides

Webinar Video Download

First, let’s start from the model.  In the code below you can see I’ve defined a model and proxy which will be the piece that will pull the data.  There’s nothing too special here with the exception of the namespace I used to define the model, ESearch.model.EPart.  These are crucial that they are spelled correctly because they will be used later in other parts of the MVC.

Ext.define('ESearch.model.EPart', {
    extend: 'Ext.data.Model',
    idProperty: 'id',
    fields: [
        {name:'id', type:'int'}, 'description', 'item_number', 'part_number'
    ],
    proxy: {
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        type: 'jsonp',
        url: 'http://solrdev1/solr-eti/select/',
        callbackKey: 'json.wrf',
        limitParam: 'rows',
        extraParams: {
            q: '*',
            wt:'json',
            hl:'on',
            'hl.fl': 'description',
            'json.nl':'arrarr'
        },
        reader: {
            root: 'response.docs',
            totalProperty: 'response.numFound'
        },
        // sends single sort as multi parameter
        simpleSortMode: true
    }
});

The next thing to consider is the store.  Arguably, this is not part of MVC per se, but it is used in conjunction with the model to define what type of store we want to use.  In this case, we want to use a buffered store of with a page size of 500.  You’ll also notice that in this code I create some listeners for beforeload and load so that I can allow sorting with Solr and to be able to do hit highlighting and query times.  You’ll also notice that I link the model to the store by using the namespace for the model parameter.  Let’s take a look:

// default to wildcard search
var query = '*';

Ext.define('ESearch.store.EParts', {
    extend: 'Ext.data.Store',
    model: 'ESearch.model.EPart',
    pageSize: 200,
    remoteSort: true,
    autoLoad:false,
    // allow the grid to interact with the paging scroller by buffering
    buffered: true,
    listeners: {
        beforeload:{ fn: function(store, options) {
            if (options && options.sorters) {
            var sorters = options.sorters;
            for (var i=0; i 1) {
                var queryParsed = query.replace(/\*/g,'').replace(/"/g, '').trim();
                var queries = queryParsed.split(' ');

                for (var i=0; i < queries.length; i++) {
                    if (queries[i]) {
                        var q = escapeRegExChars(queries[i]);

                        // Check to highlight text only in grid-body
                        var node = Ext.get("grid-inf").dom.childNodes;
                        for (var j=0; j < node.length;j++ ) {
                            if (node[j].className.contains("x-grid-body",true)) {
                                node = node[j];
                                break;
                            }
                        }

                        highlightText(node,
                                q + "+", 'HL', true);
                    }
                }
            }
            // temporary fix to address issue with scrollbars not resizing           
            var grid = Ext.getCmp('grid-inf');
            grid.resetScrollers();
          }
        }
    }
});

Now that I have the data being consumed the way I want it the next step is to put it into an infinity scrolling grid.  Here’s the code to do that:

Ext.define('ESearch.view.parts.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.partslist',
    store: 'EParts',
    initComponent: function() {

        var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
            groupHeaderTpl: 'Group: {name} ({rows.length})',
            startCollapsed: false
        });

        var selectFeature = Ext.create('qcom.grid.SelectFeature');

        var config = {
            name: 'qparts-grid',
            id: 'grid-inf',
            verticalScrollerType: 'paginggridscroller',
            loadMask: true,
            invalidateScrollerOnRefresh: false,
            disableSelection: false,
            features: [groupingFeature,selectFeature],
            viewConfig: {
                trackOver: false
            },
            // grid columns
            columns:[{xtype: 'rownumberer',width: 45, sortable: false},{
                id: 'id-col',
                header: "ID",
                dataIndex: 'id',
                width:60
            },{
                id:"descr",
                header: "Description",
                dataIndex: 'description',
                width: 300,
                renderer: columnWrap
            },{
                id:"itemnum",
                header: "Item Numbers",
                dataIndex: 'item_number',
                width: 100
            },{
                id: "partnum",
                header: "Part Numbers",
                dataIndex: 'part_number',
                flex: 1,
                renderer: columnWrap
            }]
            ,selModel:{
           selType:'rowmodel'
          ,allowDeselect:true
          ,mode:'MULTI'
         },
            tbar:
                ['Search:',{
                     xtype: 'textfield',
                     name: 'searchField',
                     hideLabel: true,
                     width: 250,
                     emptyText: "Enter search terms separated by space",
                     listeners: {
                         change: {
                            fn: function adjustQuery(field) {
                                // temporary fix to address issue with scrollbars not resizing
                                this.store.resetData();

                                // Regex query and add wildcards where appropriate
                                if (field.value.length >= 1) {
                                    var values = field.getValue().match(/[A-Za-z0-9_%\/\.\-\|]+|"[^"]+"/g),
                                        value =[];
                                    if (values && values.length > 1) {
                                        for ( var i=0; i < values.length; i++ ) {
                                            if (values[i].indexOf("\"") >= 0 ) {
                                                value.push(values[i].toLowerCase());
                                            }
                                            else {
                                                value.push("*" + values[i].toLowerCase() + "*");
                                            }
                                        }
                                        query = value.join(" ");
                                        if (Ext.isChrome) {
                                            console.log(query);
                                        }
                                    }
                                    else {
                                        if (field.getValue().indexOf("\"") >= 0 ) {
                                            value.push(field.getValue().toLowerCase());
                                            query = value.join(" ");
                                        }
                                        else {
                                            // temporary fix because regex not picking up 1 char
                                            var temp = values ? values[0] : field.getValue();
                                            query = "*" + temp.toLowerCase() + "*";
                                        }
                                        if (Ext.isChrome) {
                                            console.log(query);
                                        }
                                    }
                                    this.store.load({
                                        params: {q:query}
                                    });
                                }
                            },
                            scope: this,
                            buffer: 500
                         }
                     }
                },
                {
                     xtype: 'tbfill'
                },{
                     xtype: 'displayfield',
                     name: 'totalText',
                     id: 'totalText',
                     hideLabel: true,
                     baseCls: 'x-toolbar-text',
                     style: 'text-align:right;',
                     width:180
                }
            ]
        };
        // apply config object
     Ext.apply(this, config);

     // call parent initComponent
     this.callParent(arguments);
    }
});

So from the above code you see that I’m defining a Grid Panel and assigning an alias to it called “partslist” (more on that later), but one gotcha I found is that I could not use the full namespace for the store definition — I had to just simply call it “EParts”.  Finally, you’ll see me set-up the columns and create a top bar that will hold the search field.  I do a regex to process the search field to create a wildcard search and to preserve quotes.  I also set the buffer to 500 so they it will wait 500ms for keystrokes before firing the search again.

Now that we have the grid, we need to put it some where.  This is where I bring the window into the picture.  In the code below, I simply define my window size, where I want it in the browser, window capabilities like maximize, collapse and closable, and finally the items.  Notice for the items, I’m using the alias partslist from the previously defined grid as the xtype.  This allows me to insert a grid as I defined it before without having to instantiate it as a variable.  Let’s take a look:

Ext.define( 'ESearch.view.Portal', {
    extend: 'Ext.window.Window',
    alias: 'widget.portal',
        width: 800,
        height:600,
        x: 150,
        y: 80,
        layout:'fit',
        border: false,
        closable: true,
        maximizable: true,
        collapsible: true,
        title: 'EParts Search',
        items: [{
            xtype: 'partslist',
            itemId:'myPartList'
        }]
});

So to finish up the MVC portion, we need a controller.  In the code below you will see how we create the controller and then define the models, stores, views, and any references needed.  You’ll also see in the init function where I invoke the store for the initial load of data as well as an example of how we could listen for certain events and do something with that event.  Notice again, that the alias from the grid comes into play (partslist) so that we can capture button events from the grid.  This wasn’t completely implemented, but it gives an example how it might be implemented.

Ext.define('ESearch.controller.Search', {
    extend: 'Ext.app.Controller',
    models:[
        'EPart'
    ],
    stores:[
        'EParts'
    ],
    views:[
        'parts.List'
    ],
    refs:[{
         ref:'PartsList',
         selector:'partslist'
    }],
    init:function(app) {
            var store = this.getEPartsStore();
            store.guaranteeRange(0, 199);
            this.control({
                   'partslist button':{
                    click:this.onButtonClick
               }
          });
    },
    onButtonClick: function(btn, e) {
        if (btn.operation === 'newSearch') {
            //TODO need to find a nice way to instantiate a new window
        }
    }
});

The last little bit of code simply defines the application and sets some criteria as to what paths we should use and which pieces of Ext JS are required for this application to function.  One gotcha I noticed is that you must define the first part of your namespace as the the folder your app will fall under.  You’ll notice that I have mapped the path “app” to “ESearch” so thusly my directory structure for my application must follow something like this:

So for instance, ESearch.view.Portal, must live as a file called Portal.js under app/view and same for the other files you see there.  The App.js file that contains the following code will be under the “webapp” directory adjacent to “app” to maintain relative pathing.  All I do is create my viewport based on its namespace and fire .show() to kick the whole thing off.

Ext.Loader.setConfig({enabled: true,
        paths: {
            'Ext.ux':'lib/extjs4/ux/',
            'ESearch': 'app'
        }
});
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'ESearch.view.Portal',
    'Ext.grid.PagingScroller',
    'Ext.ux.grid.FiltersFeature',
    'Ext.grid.feature.Grouping',
    'Ext.grid.plugin.CellEditing',
    'Ext.state.CookieProvider'
]);

Ext.application({
     name:'ESearch',
     appFolder:'app',
     autoCreateViewport:false,
     controllers:['Search'],
     launch:function() {
     Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
     this.viewport = Ext.create('ESearch.view.Portal', {
              stateId:'esearchWindow'
     });
     window[this.name].app = this;

      this.viewport.show();

    }
});

And finally, we have an HTML file that points to all the necessary JS files for this application to work, which is pretty standard stuff to bootstrap the application. However, with this approach, I only had to define the App.js file and not all the underlying JS files in the MVC portion. This is because the pathing we used in the previous section.

I hope this is useful for folks that would like to explore MVC in Ext JS 4 a little more.  I really find it useful because it helps break up a larger component much along the lines I’m used to.  In this way you could have multiple DEVs work on the same project pretty easily without walking over each other.

It should be in the Apple Store in the coming months, so it will be great to play with that in the future. Great stuff!!

TieredMergePolicy is the new default that ignores segment order when selecting best merge and it does not over merge. Finite State Transducer (FST) based terms index is much smaller in memory and much faster in terms.

DocumentWriterPerThread (DWPT) prevents the index from being blocked while the flushing new segments.  Only the largest DWT is flushed out concurrently while others continue to index.  This benefits performance by 250%+.

SolrCloud is the integration of ZooKeeper to make managing several Solr nodes in a cluster more efficiently. -DzkRun Java param will just run an internal ZK instance.

Distributed requests can be managed by Solr w/o load balancer/VIP.  Just use pipe to define the shard lists or you can query across all shards by adding distrib=true to the queryParams.

Extended Dismax parser (superset of dismax) does term proximity boosting and so much more! See ref. here:

• Supports full Lucene query syntax in the absence of syntax errors
• Supports “and”/”or” to mean “AND”/”OR” in Lucene syntax mode
• When there are syntax errors, improved smart partial escaping of special characters is done to prevent them… in this mode, fielded queries, +/-, and phrase queries are still supported.
• Improved proximity boosting via word bi-grams… this prevents the problem of needing 100% of the words in the document to get any boost, as well as having all of the words in a single field.
• Advanced stopword handling… stopwords are not required in the mandatory part of the query but are still used (if indexed) in the proximity boosting part. If a query consists of all stopwords (e.g. to be or not to be) then all will be required.
• Supports the “boost” parameter.. like the dismax bf param, but multiplies the function query instead of adding it in
• Supports pure negative nested queries… so a query like +foo (-foo) will match all documents

New faceting performance improvements included deep faceting.  Pivot faceting allows you to do nested faceting now and Range faceting allows you do what we did with dates now with numbers.

Spatial search is perfect for geo searches.  You can now sort by any arbitrary function query (like closest item).  Pseudo-fields in Solr 4 will allow you to return distance from the point of origin.

Pseudo-fields allows you to return other info along with the document stored fields (function queries, globs, aliasing, multiple fl values).  For future, inline highlighting will provide highlighting details right with the fields rather than having it returned separately…very nice!

Group by field and group by query also look very helpful.

Pseudo-Join will allow you to do a restriction on a particular source very easily and quickly with just a simple “fq” param.  Lots of good examples shown in the slides.

Auto-suggest has two implementation (TST or FST); the latter is slower to build, but faster and more compress.

You can now index with curl and a JSON array and query results can be returned as CSV.

Last but not least, the new browse GUI for SOLR looks very nice too…

How to trick the user to give you feedback on the search results?? They won’t really do this otherwise. What was searched, navigation click through and “like” buttons.  Query log and click-through events are key to do this analysis.  In order to do this properly, you must consider the click-through in context of what was searched before.

Some Approaches

You can label the clicked item with the query terms. This can create collaborative filtering or a recommendation system.  However this approach can be sparse or noisy.  Can change intent, hidden intent, or no intent at all.

NOTE: if you don’t collect query logs, you should start so today! This will help collect user profile population, query suggestions, most useful information, and general user interest over time.

You can do vector analysis between the query and label.  The distance between the vectors can you give you some scoring attribute to use for relevancy.

Undesired effects included unbounded positive feedback (dominated by popularity but no longer relvante). Post clicks, off-topic, noisy labels.  Click data should be sub-linear and temporal in nature (so old click counts should be discounted) and finally it should be sanitized and bounded as to how much effect on the score.

How do you implement this?

Doing this in Solr is not OOTB, but fairly simple to implement. Need a component for logging queries, logging click-throughs (you can use a small JS to report this…see Google/Yahoo!), a tool to correlate and aggregate the logs and a tool to manage the click through history.

Next step is to take these results and use them as boost values.  Use ExternalFileField to note the docid with the field and the boost. Another approach is via full-index to join source docs and click data by docid+reindex –not viable for large corpuses.  Incremental field updates will be available in the future and probably the best fit for this use case (check back in a year).  You can use ParallelReader to have a separate index for the click data and zip it with the main index…this approach is complicated/fragile!

Commercial solution from Lucid Imagination has a click scoring framework that can help.

Over the next few days I blog my notes from the sessions that I attend at the conference.  I hope they provide some insight for others and reminders for me!

Keynote Notes

Google was first to use spell checking against terms in the docs from the index rather than just a big dictionary.

Recall is the percent of relevant docs returned (50 available only 25 returned is 50%)

Precision is the percent returned that are relevant (100 returned, 25 relevant, 25% precise)

100% recall is easy but really are striving for 100% precision too, which is a lot harder to do.

Getting good recall

• Use spell checking, synonyms to match users’ vocab
• NLP
• Normalize data
• collect, index and search all data

Getting good precision

• queries are too short (have users rank terms and use machine learning)
• implicit relevance feedback is available but doubles search execution and no one really uses it although it should be considered
• Watson or Google translate doesn’t use NLP but instead huge data set statistical analysis

Some history

• Lucene created by Doug Cutting and Apache release in 2001, wide acceptance by 2005
• Solr built in 2005 by Yonik Seeley for CNET; Apache release in 2006 and provide Lucene capabilities over http with faceting

Strengths:

• Best segmented index (like Google)
• Open Source
• Great Community

Basic premise is to use Lucene/Solr since it is the best and it’s free.  It continues to innovate and have strong community support.

The Blog-Health-o-Meter™ reads This blog is on fire!.

Crunchy numbers

A Boeing 747-400 passenger jet can hold 416 passengers. This blog was viewed about 2,500 times in 2010. That’s about 6 full 747s.

In 2010, there were 30 new posts, growing the total archive of this blog to 36 posts. There was 1 picture uploaded, taking a total of 221kb.

The busiest day of the year was November 18th with 244 views. The most popular post that day was SenchaCon Day1: ExtJS 4 Overview.

Where did they come from?

The top referring sites in 2010 were twitter.com, sencha.com, en.wordpress.com, linkedin.com, and liferay.com.

Some visitors came searching, mostly for extjs 4, missing an @xmlrootelement annotation, extjs4, senchacon, and missing @xmlrootelement.

Attractions in 2010

These are the posts and pages that got the most views in 2010.

SenchaCon Day1: ExtJS 4 Overview November 2010
2 comments

JAXB Missing XmlRootElement Exception July 2009

SenchaCon Day3: Theming SenchaTouch November 2010
2 comments

Development Strategies for Liferay 6 September 2010

Day 2 – Liferay Roadmap 2011 September 2010

The solution: shutdown your server and run this script.  This script has been improved upon from this post here to include portlets that you may have modified in your EXT.  I’ve also included a version for MAC/Linux users.

Windows Version:

@echo off
set app_name=%1
if "%app_name%" == "" goto end
set tomcat_home=C:\apps\liferay-portal-6.0-ee\tomcat-6.0.29

rmdir /S /Q %tomcat_home%\temp
rmdir /S /Q %tomcat_home%\webapps\%app_name%-ext
rmdir /S /Q %tomcat_home%\webapps\ROOT\html\portlet\ext
del /S /Q %tomcat_home%\lib\ext\ext-%app_name%-ext-service.jar
del /S /Q %tomcat_home%\webapps\ROOT\WEB-INF\lib\ext-%app_name%-ext-util-bridges.jar
del /S /Q %tomcat_home%\webapps\ROOT\WEB-INF\lib\ext-%app_name%-ext-util-taglib.jar
del /S /Q %tomcat_home%\webapps\ROOT\WEB-INF\lib\ext-%app_name%-ext-util-java.jar
del /S /Q %tomcat_home%\webapps\ROOT\WEB-INF\lib\ext-%app_name%-ext-impl.jar
del /S /Q %tomcat_home%\webapps\ROOT\WEB-INF\ext-%app_name%-ext.xml
del /S /Q %tomcat_home%\webapps\ROOT\WEB-INF\tiles-defs-ext.xml
del /S /Q %tomcat_home%\temp\liferay\com\liferay\portal\deploy\dependencies\ext-%app_name%-ext-util-bridges.jar
del /S /Q %tomcat_home%\temp\liferay\com\liferay\portal\deploy\dependencies\ext-%app_name%-ext-util-taglib.jar
del /S /Q %tomcat_home%\temp\liferay\com\liferay\portal\deploy\dependencies\ext-%app_name%-ext-util-java.jar
:end

Mac/Linux Version:

#!/bin/sh

if [ $# -ne 1 ]; then
 echo "Usage: clean-my-ext [ext-name]"
 exit 1
fi

tomcat_home="/local/mnt/apps/liferay/tomcat-6.0.29"
app_name="$1"

rm -rf $tomcat_home/temp
rm -rf $tomcat_home/webapps/$app_name-ext
rm -rf $tomcat_home/webapps/ROOT/html/portlet/ext
rm -f $tomcat_home/lib/ext/ext-$app_name-ext-service.jar
rm -f $tomcat_home/webapps/ROOT/WEB-INF/lib/ext-$app_name-ext-util-bridges.jar
rm -f $tomcat_home/webapps/ROOT/WEB-INF/lib/ext-$app_name-ext-util-taglib.jar
rm -f $tomcat_home/webapps/ROOT/WEB-INF/lib/ext-$app_name-ext-util-java.jar
rm -f $tomcat_home/webapps/ROOT/WEB-INF/lib/ext-$app_name-ext-impl.jar
rm -f $tomcat_home/webapps/ROOT/WEB-INF/ext-$app_name-ext.xml
rm -f $tomcat_home/webapps/ROOT/WEB-INF/tiles-defs-ext.xml
rm -f $tomcat_home/temp/liferay/com/liferay/portal/deploy/dependencies/ext-$app_name-ext-util-bridges.jar
rm -f $tomcat_home/temp/liferay/com/liferay/portal/deploy/dependencies/ext-$app_name-ext-util-taglib.jar
rm -f $tomcat_home/temp/liferay/com/liferay/portal/deploy/dependencies/ext-$app_name-ext-util-java.jar

Common JS Gotchas:

• No compiler so all errors at runtime.  Be sure you check case and check spelling. Declare variables in the appropriate scope by declaring vars at the top of a function to avoid accidental local vars.  Careful using reserved words like “class”.
• Truthiness & Equality: in JS there’s multiple ways things can be true/false rather than explicit.  Type coercion not performed by “===”.  Note: null/undefined are different (e.g., undefined means it doesn’t exist).
• Closure you have to check for variable binding (outside the closure) and variable shadowing (response is an example in an ajax call).
• No block scope only function scope (e.g., a variable in an IF block is global to the function)
• Prototypal inheritance
• Higher Order Functions can be passed to functions and be variables.

Tools to Debug

Chrome Debugger

• Elements screen to look at position in DOM, see styles and their precedence. You can search for DOM ids and modify styles dynamically.
• Scripts screen allows you to debug and view local and global variables. You can look at the call stack and set conditional breakpoints.
• Resources screen shows size and time it took to load various artifacts that come over HTTP or XHR.
• Console screen allows interactive commands and use log(), warn() and error() to log to the console

JSLint

• Code Quality Tool to check for undefined or inadvertently declared global vars, required blocking, unreachable code, trailing commas and much more.

RemoteJS

• Made by Webkit staff on Sencha team to help debug Android devices (on Github and blog).

Sencha Touch Specifics

On Data

• Is the URL correct?? Did the request complete?? Is data valid??
• Does the model align with the Component (from JSON for example).

Event Driven Model

• Use appropriate callbacks
• Remember that things are typically async

Overnesting

• Panels with no layout
• Specify layouts instead (be sure to specify layouts for Panel and use “fit”).  Use the DOM view in the Chrome debugger to see if elements have the correct height (common mistake is that they’ll be zero).

Dynamic Layouts

• Remember doLayout and doComponent to reset layout after changes to the component

What is “this”

• Log console.log(this) to be sure you’re dealing with the right object especially in callbacks and handlers.  You may not be in the right context.
• All callbacks allow you to specify scope

Event Handling

• Use capture and observe to check events.