To IDE or not

What’s in an IDE!

Over the last 15 years or so I have used a few IDE’s for programming “proper” applications in Pascal, Delphie, C/C++ or Java but since moving to the darker side of computing, the linux world I never really needed an IDE and they were just bloated text editors. I don’t think much has changed but there are some good points and I’m at a cross roads as to what to do.

Should I spend some time making Vim, the best text editor the world will ever see better or give up and use an IDE, it’s not as straight forward as I would like to think or as anyone else would probably think so I wonder how it will turn out.

The basics

I’m currently, and probably most likely to be doing web based development and Ruby / python. Up until recently I had just used Vim to get any Ruby programming I needed done, and to be honest it worked okay. I typically just opened a new terminal tab and then changed to the repo directory and started opening files, So I had to cd to a directory before opening the file it wasn’t killing me. I was able to just open and get on with making changes with no real hassle and with syntax high lighting it worked out quite well. Recently I have started to do more web based things and have started using an IDE for that and that’s what’s lead to this blog, there’s a few features of an IDE that I think I’m missing from Vim.

1, Being able to see the entire project directory easily and visually navigating to supporting files to have a quick view / edit is nice.
2, Refactoring, simple things like changing a variable name can be a real bugger in Vim, yes you can find and replace but that is not the same as refactoring, to refactor like an IDE does Vim would need to understand to some degree the codes structure and not to treat it all like text
3, Hiding chunks of code, being able to rol up / down sections of code can make it a lot easier to focus on what’s actually going on
4, Word completion, IDE’s know about the libs being used and the other variabels so can offer hints to complete the words being typed which is very handy
5, Short hand, being able to type short hand to do lots of things, like starting a html tag and having it auto completed speeds up development which must be good

I think if I could get the above features in Vim I probably would struggle to justify not using Vim, lets see what happens.

Vim IDE

1, This is seemingly an easy oen to address with something like NERD tree Initially this looks good so I’m saying point 1 is solved, just need some better aliases (:help 40.2)

2, In short, no, I’ve only seen normal find / replace or basically using grep, There does seem to be language specific ones like This but who wants to find a new refactoring plugin (if someone wrote it) for every new language…

3, This is again easy if you know what to look for Folding is not new and from my quick play seems good.

4, Again language specific it seems possible: this one for ruby, but what about python? javascript? etc etc

5, This one is a simple one that vim does do: Here but it’s almost like you have to hand crank it all!

Summary

So from what I can see I can spend some time making Vim do what I need, and no doubt there’s some stuff there for Ruby and Python that would make it a lot more useful to use as an IDE but it still doesn’t make it easy and will be rather language specific in terms of making it work well out of the box. It does seem that IDE’s are better at those specific tasks above, not to mention debugging and break points etc, maybe Vim can do more of that too and I just don’t know how.

Either way it coped better with the 5 original points than I thought it would and I have found some things out that suggest it may be worth tweaking my current vim to make it better. In the mean time I think I will continue to persevere with learning the IDE and it’s short cuts as it appears that it could dramatically speed up my development by just simply using the tools already there.

I wasn’t expecting to find vi to be as good as it was but in my head even though I prefer Vim at the moment I think the IDE will cope better in the long run, time will tell.

Pain and suffering with AngularJS

What a week!

Over the last month or so I have been steadily learning Javascript, Bootstrap, NodeJS and AngularJS well last week added to that mix was D3JS. I must have got to the end of my tether every day last week. I’m pretty sure I was suffering from information overload and before going any further I will say D3JS is really powerful and looks to be a tool I’d like to learn to use, the only downside is even after a week of drawing circles, bar charts and trying line graphs I am still struggling, but hopefully my struggling has not been in vein I learn some good things and if I’d known them before I’d started a lot less pain and suffering would have ensued.

The problems

So I don’t know angular, I also really struggle to read large chunks of text like the APIs, I did do the tutorial which helps but not really… There were a number of issues, not knowing how angular worked interms of where the right place to put things was a big set back, not knowing how to get data between the various components and updated was another. Another area of challenge was the asynchronous nature of Angular, making a $http.get request and not having data available instantly is odd but easily over come once you know how.

In importance order…

Callbacks

A long while a go I wrote a blog called What University forgot to mention about programming, it turns out this was one of those things that would have been really useful to be learning if the course wasn’t dumbed down to cater for those that didn’t come from an IT background at college.

In short I was doing this:

var data = [];

function getData(){
  $http.get('/api/data').success(function(response) {
    data = response;
  });
}
getData();
alert("data is 0!? " + data.length);

The problem with this is that getData is called and initiates the $http.get which does not return data, it returns the promise of having data; When it actually gets a response it moves on to the function declared in then(). Remember the way Javascript works is we passed in that function as an Object which then gets run when the data returns, it passes in the response for us to then handle. Because $http.get returns a promise that function is done, everything executed, the anonymous function we declared is a parameter that has been forked in the browser or language somewhere and is running isolated from everything else.

The way around this is to structure code in a way that allows for the callback to then do what you needed so….

function getData(cb) {
  $http.get('/api/data').success(function(response){
    cb(response);
  })
}

function drawGraph(newData) {
  //some code to draw a graph omitted...
}

//Draw a graph
getData(drawGraph);

By using the above method you only draw the graph when there is data, take this; rinse and repeat and all will be well, except this method is only really good for a one time graph. Controllers only get called once, they can be used to set up functions to be used in the view etc but they are ultimately only run once.

Data Binding

Firstly, read about Data binding. This first mistake I made was trying to do everything in a controller, it’s the most natural as everything in there gets run like when you include a normal js file, but it just makes life harder than it needs to be.

Originally I was doing something like this:

function getData(cb) {
  $http.get('/api/data').success(function(response){
     cb(resp);
  });
}

function updateData(data){
  drawGraph(data);
}

function drawGraph(data){
  //some code to draw a graph omitted...
  getData(updateData);
}

//Draws initial graph and then kicks off an infinite loop of getting data/drawing graphs 
getData(drawGraph);

I was using this to update and draw a graph. This works sort of but I was not able to get it to work because of my understanding of D3Js at the time, I’m sure smarter people than I could make it work but that’s not how it should be done; theres a better way like explained in the link above about data binding.

If you take your partial (template) and put certain triggers in it, even manual like ng-click you can do this a lot simpler, you can even use $watch to continuously update. so if you were to define a function or two like this…

In your controller:

$scope.updateGraph = function() {
  getData(reDrawGraph);
}

function reDrawGraph() {
  //code to RE-DRAW not draw the graph
  //Enter new, Transition, exit... more later...
}

In your partial:

<button class="btn btn-success" ng-click="updateGraph()">

You can make it update as you go. One step further would be to use $scope.data and just have a loop in the controller that sets that when data comes back, combined with a $watch to always re-draw.

Directives

Okay, so directives are useful, Until I learnt about them I was drawing all of my graphs from the controller and by far the must successful graphs I did were all in the directives area. I still think there was a better way because I was struggling to get it to work with $watch either way by having this layer you achieve two things, less crap in the controllers, and a nice location to do the DOM manipulation, which for graph drawing is kind of handy. Because this links right in with the html it is easier to manipulate.

Summary

These are just some of the major hurdles I overcame while trying to get D3JS working, and there’s more to come when I get on to D3JS which I have to admit I only got basic graphs drawn but I do think it’s an area worthy of diving into with more detail. All in all these experiences have made my understanding of Angular a lot better I am now able to quickly and easily make changes to pages to do basic things like looping through JSON data to display lists of data or forms to submit data.

A day of Javascript

Urghh!

Today I’ve been trying, trying really hard to apply some of that JavaScript knowledge to a simple problem, something that if I was doing it in HTML and PHP would have taken about an hour, and I’ve not done PHP for as long as I haven’t done JavaScript, but that’s not a fair comparison as like most people that used JavaScript in the past I did very limited things like pop up a window or an alert when something went wrong. I only had one thing to do today, add some functionality to a web app to upload files and store them locally on the server.

I’ve only spent 12 hours on it so far, and it sort of works if you ignore the fact that Drag and Drop won’t work an the progress bar doesn’t appear / update or that it doesn’t close the upload popup at some point, but if you’re willing to apply some manual intervention it will upload a file eventually and it will (after you’ve closed the upload dialog and refreshed the page…) display the new item.

I think some of the challenge is the many layers to the app, with html, css, javascript, bootstrap, angular, jquery and nodeJS; there’s just a lot of places doing stuff and it’s not all quite settled into my head yet… combine that with only recently having played with all of those and it’s a little confusing. I spent a lot of time trying to steal peoples code to save time from various open sourced git repos, I basically found that after stealing 5 and none working that I was wasting my time so I just took one as an example and went from there, This one in fact.

With in a couple of hours I had most of it down but not working, having dedicated this sprint to button first development I got the UI looking just right before moving on to any code. I then set about making the javascript bits work and I managed to get everything working apart from drag and drop, so it wasn’t posting data but it was showing files. For some reason the drop event I had setup was not getting triggered, every time I dropped something on it it did nothing ad the browser just opened it as a file.

Annoying, I imagine that something I’ve done in bootstrap or angular has had an impact on it but I don’t know and have just had to abandon it for now, maybe it’s the modal? maybe it’s some weird local issue, either way I’ll have to come back to it.

Some lessons learned

What’s the point in wasting a day on various elements of JavaScript if I’m not going to learn anything. Well I learnt loads! I learnt how to use the debugger in Webstorm which was pretty neat, once I’d clicked that button I found my issue in my node code really quickly, next time that will hopefully save me 2 hours :)
I also learnt that at my level of skill, using someone else’s complicated library for stuff is a bit hit and miss, especially if it requires working with multiple technologies that I’m also not familiar with…

In short at least by writing it my self / re-writing it from other’s examples I had some time to digest it and understand it, of course it doesn’t work but I fell better for having a go :) I am still relatively hopeful that in a few months this will all be second nature, but which time I would have probably forgotten all the ruby I know :)

Anyway, a short one today, more programming tomorrow and hopefully after another full day I would have the upload box working.