Javascript coding patterns / best practise

[mattwoberts]

Hi,

I've been using Ext.NET for a few months now, and I'm finding that my javascript files are starting to get heavy and quite brittle, so I was thinking about refactoring them a bit. I've been looking at some of the new js frameworks / libs out there like backbone.js and knockout.js, and wondered if they could be useful in the context of the UI-oriented JS that we use in ext.net...

Current issues I have with my JS files:

• No seperation of concerns - a few JS classes containing code for UI, data operations, etc
• Cunfusion around "this" - since ExtJS usually changes the context of this when an event calls a method in my class, it prevents me from being able to call "this.otherMethod" from my classes
• Tight coupling - no testability

So, I was wondering if there are any best practice or thoughts on this. In hindsight, I think a better approach would be to separate out all of the code that gets data from UI elements into a separate class that populates a sort of view-model, and then use that view model in my other classes which perform operations on that code - this would help with testability too.

Any thoughts/ideas welcome!

(Please feel free to move to a more appropriate area in the forum if necessary)

Thanks
Matt

[Daniil]

Hi,

No seperation of concerns - a few JS classes containing code for UI, data operations, etc

Well, ExtJS team separated everything as much as they can. And ExtJS class is a very good example how to separate functionality in JavaScript.

You can consider GridPanel + Store + GridView + SelectionModel (Row- or Checkbox-) classes.

Cunfusion around "this" - since ExtJS usually changes the context of this when an event calls a method in my class, it prevents me from being able to call "this.otherMethod" from my classes

There is the .createDelegate() function in ExtJS which can help.
http://dev.sencha.com/deploy/ext-3.4...createDelegate

Also the native function .call() and apply() can help as well.

Tight coupling - no testability

There are some unit testing frameworks, please see:
http://stackoverflow.com/questions/3...unit-test-tool

[mattwoberts]

Thanks for the input, I'll take a look at the ExtJS source code as you suggest.

The issue I had with testability was not that I didn't know about the testing frameworks available, but more that the way my JS files were created meant that it was impossible to test because of the tight coupling between the JS and ExtJS - which is why view models would help for me.

Perhaps moving this thread to a more "general" section of the forum might be a good idea in case other people have good experience to share with this subject too?

Thanks

[Daniil]

Moved to "Open discussions".