24 Oct 2015

The rebuild is progressing well. I've implemented ¬70% of the functionality and aim to have the rest done in the next week or two. I will then move on to testing.

I'm re-writing every line of ExtJS code into jQuery and have come to the conclusion that jQuery is a lot more fun.

So what's great about jQuery?

Working with the DOM

With jQuery you work with HTML elements instead of abstract components. This gives you a head start by letting you utilize all your HTML and CSS knowledge. In ExtJS I would regularly be checking the api documentation to see which method changed the title or some other attribute. Sometimes the method wouldn't exist and you would need an unholy hack to solve it. With jQuery pretty much everything is in a HTML element, use Chrome inspector to find it, write code to access it, set the new value and you're done.

jQuery code

$( "'#tabs li.active a" ).text('New title'); //simples

ExtJS code

tabs.getActiveTab().setTitle('New title'); //did I do that right? let me check the docs..

Selectors

Selectors are great for accessing components. In Extjs I would store my components in arrays or objects. If I needed to access components with a certain flag, I could iterate over them, testing for properties until I found what I was after. With jQuery you can do all this in one go just by using some clever selectors. Again your css knowledge comes in handy here as you can select by any combination of classes, pseudo-classes, attributes etc.

jQuery code

//get all edited tabs

$( "tabs li[data-edited]" );

ExtJS code

//get all edited tabs, need a dreaded loop for this..

var editedTabs = array();

Ext.each(tabs.tabs, function(tab)){

    if(tab.edited) {

        editedTabs.push(tab)l

    }

}

Data attributes

At first I was annoyed with jQuery that when setting HTML data attributes using .data() it was not recorded to the DOM. How daft, it would be so handy to use the data attribute as a selector. I worked around it by setting the data attribute using the less concise .attr() method. This seemed like a miss to me and I put it down to performance concerns of the jQuery team. Then I discovered that when using the .data() method you can actually assign any data type to DOM elements even huge strings or objects and then it all made sense. This is a sweet perk for me as it's more convenient and cleaner to access data attributes than it is to maintain an array of values somewhere else.

jQuery code

//what, you can assign an object to a HTML element? Yes, you can.

$( this ).data('editor', component);

ExtJS code

//ok we will need an object to store these components

var editorComponents = {};

editorComponents[tab.id] = component;

//remove this value when the tab is removed

tabs.on('remove', function(tab){

    delete editorComponents[tab.id]

});

All of this is leading to considerably more concise code. I think by the time I'm done the codebase will be less than half the size it was with similar functionality. Not only will this equate to faster loading but it will also be a heck of a lot easier to maintain.