Skip to main content

Breaking JavaScript code down into components

Following on from my original post of learning how to put JavaScript together it's been a really productive week. Have I managed to write JavaScript that's easy to test? No, but I've wrapped up some reasonably complex logic into a component that can have some of it's functionality tested!

At the moment I've settled on QUnit as my JS unit testing framework and have a couple of tests verifying the default values of exposed properties - these are currently exposed as functions as I've wrapped up the variables in a closure to make them read only. Not sure if JavaScript even has the concept of a read only property in a form similar to C#. When calling the component in test conditions I've also been overwriting functions on the injected underscore library that failed due to a null/undefined reference - so not really mocking yet. The first issue I ran into was that I was pre-compiling the templates and these were defined inside script blocks of the calling ASP.NET view. In C# code you don't verify the view engine running when unit testing calls to the controller actions, so that indicates having a call to the template inside the main component is probably a suitable refactor. Applying this logic it has become apparent that my biggest problem is that my current JavaScript components are just one big black box. Using JQuery, Underscore and JSON/templating has made things cleaner but not really that much more testable!

The next step will be learning how to break the large big black boxes down into more focused components that can be easily tested in isolation to each other; and mocked/replaced when used inside of the calling component. This is much better and already feels closer to the comparable process in .NET. The code I am currently working on has a dialog box, which can be updated - that can be split out into it's own component. That includes initialisation, display updates and some button context functionality (once the processing is complete the text on the button changes from "Cancel" to "Close" but the functionality stays the same. These things become easier to test and wrap up a few of the JQuery/Templating calls quite nicely (making them easier to "Mock"). Another area of functionality which could be split out into it's own component is the AJAX calls. Similarly the "timer" based eventing system could be wrapped up as I noticed that there were several "clearInterval(...)" calls spread through out the code

After all the above refactors have been completed I'm hoping to end up with a single "controller" type object that orchestrates all the newly created components. This should make it far easier to test this controller object and possibly look to finally extract some of the business logic into smaller components too.

It seems strange to say, but it would appear right now that the biggest thing that was holding my JavaScript coding back was a fear of creating too many objects, preferring a single component that tried to contain and wrap everything up.....something that I left behind in the C# world many years ago! This was something of a surprise, up until recently I thought my biggest stumbling block was a lack of knowledge / understanding of JavaScript itself!

Comments

Popular posts from this blog

Why do my Android Notification only appear in the status bar?

I'm definitely getting back into Android development, I'm remembering that feeling of 'Surely this should be easier than this!'. All I wanted to do was to schedule a local notification which behaved similar to a push notification pop-up. That is, as well as showing the small icon in the status bar I wanted it to pop up on screen to notify the end user. All seems fairly easily, I found this code for how to schedule a notification. That all worked perfectly, apart from the notification would only appear in the status bar. Searching around I found loads of different answers / solutions, mostly all saying the same thing:It only worked if you used 'NotificationCompat.Builder' in place of 'Notification.Builder', orYou had to set the priority to 'NotificationCompat.PRIORITY_HIGH'As usually happens, none of these solutions worked for me until I added in the missing piece of the jigsaw:- '.setDefaults(Notification.DEFAULT_ALL)'. For me this…

IPhone hangs when running from XCode

I've had this happen a couple of times now and the first time was a little worrying that I'd bricked my iPhone. Basically I was running an application on my phone via XCode and when rebuilding an updated version it failed with a "busy" error message. Stopping XCode and unconnecting my phone had no effect, the phone was stuck displaying the loading screen of the application and wouldn't respond to any key commands. To fix you have to hard reboot, holding the power and home button until the phone reboots - doesn't lose any of the data you have on your phone (a concern the first time I did it).

Do "Task Hours" add anything in Scrum (Agile)?

What do task hours add to the overall process in scrum?This was a question that has arisen from all team members in both instances that I've helped teams switch over to scrum. The benefits of artifacts like the comparative story point estimation, the 2 week sprints, stand-ups and the end of sprint demo have been self evident to the team, but as one I think every team member has expressed dismay when it comes to task planning and estimating each task in hours. Left unchecked there is a natural tendency for people to actually begin to dread the start of each sprint purely due to the task planning session.In my current role we've been lucky to investigate this further as a team.The team sat down to discuss the problems it was experiencing with estimating tasks in hours and the following common themes appeared:It is hard: Maybe it shouldn't be, but time estimation is hard! Story points are comparative and abstracted making them easier to determine, but time estimate is gen…