JavaScript and me

Where did it all go wrong

It must have been about 10 years ago when I first did some JavaScript and at the time I thought it was pretty good, I only used it on and off between then and university but with no real direction. I enjoyed JavaScript that much that I didn’t think twice about using it for my final year project at university, at the time Web2.0 and AJAX was all the craze but no libs existed and everything had to be done by hand. I was struggling to find a project in my final year and I happened across a geospatial professor at university and with google maps not having been out long I set about creating a geoblog that could be updated via email. it was a PHP backend with a Javascript and XML front end, there was just an index and everything, management, logins, maps etc was dynamic.

Cutting edge stuff! and yet I hated it, it took the magic out of the process and after I finished that project I vowed never to touch it again! well until I was forced into it…

Learning from the ground up

Last week I was sort of forced into it, although the week before I took my self to that pain so I am some what to blame.

Either way, I decided that this week would be a learning week so I’ve been going through W3 Schools and Code Academy to re-familiarise myself with JavaScript. I’ve got to say the Code Academy stuff was good and I’d recommend it to anyone that wants to learn how to program.

I found it useful to recap the stuff I could remember and I learnt a few things too, but then I came across This this which does a good job of explaining why certain ways of doing things are better.

I imagine that all of this reading and learning will help a little but I don’t do that good with reading… practicals are always good, so next week will be all about actually doing something with Node.js

Making something good

One of the big reasons for learning a language is to use it, and by having a practical use for it it helps motivate you to do more, luckily there is a project that we started and I have purpose. My role is the web UI / server side of a larger piece of work, luckily I have some help… Hopefully in a month or so i’ll be able to give out some more details but it will be a little while to get it up and off the ground and sort of doing what it’s meant to in a prototype style. If we can pull it off it’s fair to say it will revolutionise how we currently work and provide a good platform the managing what we do, really looking forward to getting it to the basic prototype phase so we can start iterating on each bit until it’s perfect!

When in doubt, use more JavaScript

Oh, gawd, why

Over the last couple of weeks i’ve been playing with some new technology, not to any depth but just enough to get a feel for it. The week before last it was all Python & Django followed by AngularJS, well this week has been a bit more Javascript in the form of Node.js; granted I’ve not done much but I’ve done some.

As always it started in a random planning session where we have decided that we will make our own tool that will replace our current monitoring tools, the architecture was all drawn up, queue services, agents, plugins, a super fast “worker” process for handling the queue and a management console for pushing commands in and displaying results.

Because of my last two blog posts I got volunteered to do the front end, which is good as I will learn more AngularJS which I would like and I will learn more bootstrap which I would like, I also thought I’d get to write a nice backend in the language of my choice; turns out, not so much.

Would it be Ruby now I’m getting proficient with it? maybe Python, the rest is in Python, I could live with python, it’s not too dissimilar to ruby. It turns out it would be in node.js, oh gawd why. I’m not a fan of JavaScript, and here’s why; back in the day for my university final year project, back when AJAX had just come out and there were no libraries to do it I made a GeoBlog, using google maps API’s, JavaScript and PHP. It had over 1000 lines of javascript, there were no debuggers, the best you had was a console to point out syntax errors. Well that was a nightmare, at least now things have improved with proper debuggers in the browser etc etc so this time would be better…

Sort of…

To be honest node.js isn’t that bad to write simple things in, I’ve been getting more confused by having controllers and routes for both angular and node and trying to keep that separation in my head. I’ve so far been keeping good to my promise to do button first development so other than writing a simple api to return json I’ve not had to do much in node yet and only a little angular but at some point i’m going to get really stuck.

For some reason all these moving parts haven’t yet fallen into place and I’m wondering if I need to go back to some basics and re-vist javascript in it’s pure form and start building on that to get int node and angular. At the moment my coding is purely google, copy, paste, edit; not much in the way of understanding and if I’m going to make this thing work I need more of an understanding.

Maybe I should start with my old friend w3schools followed by some Code Academy followed by all of these

Busy week ahead I think, wonder if it will help or confuse me more, either way more updates next week I think :)

Angular.js – starting something new

Why not!?

Last week I played with Python / Django the natural extension of this was to not do python but to look at using something like Angular and bootstrap, the main reason for this is that just using python / django gives you server side manipulation but why do it all on the server? Ideally the server would generate relavent data and sent the data back to the client for processing, this is how the internet is meant to work after all. Think about simple HTML and CSS, HTML is just a data structure and CSS formats that to make it look pretty for you, now, with modern computers being so powerful, why not have it do the formatting in CSS and also manipulate the data into the right structure.
This way the server just generates a response of say JSON and the client takes this and manipulates it into tables / lists or what ever you need. Another advantage to this approach is all of a sudden you have an ajax driven website with not too much effort which is more efficient on bandwidth, combined with local client side caching of information the user experience should be pretty quick and seamless with or with ut the server, as long a sit pulls the dat to start with it should be okay.

So that covers why Angular, Bootstrap on the other hand is more or less just CSS but quite frankly, I can’t do CSS it never looks right so by using bootstrap I can then programatically set out hierarchy and classes etc while leaving the pretty styling to a theme generator Like this or download one Like this

Tasklist

Okay this is not really fully featured.. You can’t delete stuff from the list it just gets bigger and bigger but was only done to use the combination of applications in the right way and see if it worked, well it works, you can add tasks and it displays them so lets have a look at how pretty it is:

I was only able to achieve this level of prettyness because of bootstrap my past sites have all looked terrible…
The home page just includes some example code from the AngularJS website to prove I managed to get Angular working before butchering it with my typos.

Here’s a picture of it listing the tasks…

So for starters if you’d like to criticise the code the best way of doing that is on GitHub I have no intention of making it any better but if you want to play with Angular, Mongo, Python and Django where python/Django provides a rest api to the DB and Bootsrap/AngularJS provides the front end then this has it all and the set up is pretty straight forward and some brief notes on install / settings in the README. Maybe you could add the ability to edit or delete tasks maybe put a checkbox next to them and track a done status who knows…

Overall…

I quite like Angular and bootstrap as a combo, I think it’s got some real potential to do some powerful stuff and i’m sure people out there are doing some really crazy things with it, hopefully one day that will be me and there will be something worth while coming out of it. I’m not convinced on python/django combination, I’m sure it’s okay but I really need to write some more of it and see how it goes; I’m fairly sure it’ll be better than RoR but that’s not a good framework for ruby anyway.

My next task having played with those is to do something even more whacky, maybe some sort of node.js backend, angular boot strap front end and some sort of queue… The next project I’m working on with a larger team will be pretty good and once we have something up and working it can be shared, the oddest thing will be the “button driven development” approach to development, which is basically top down, where you prototype the interface to look as you want it to and then fill the data with dummy values or hard coded values. Once that’s done write a backend that provides the data. In theory by the time you get to do the technical nitty gritty there’s a very clear idea on what the output should be.

Python – A Django experience

For a little while

The team here have been looking at rapid development of web applications and have been trying python with Django to deliver some nice projects in a short period of time and with good results thus far. Up until the other day I really hadn’t done anything with Python and I had no intention to, but as these little skunk works projects have come to an end and the results look okay I figured it was worth learning a little.

Now, there’s always two approaches to this, start slow, learn python, learn some django and keep building on it until it all works and is fantastic or just dive in, I chose to dive in. The downside of diving in is you end up with some stupid errors where you don’t know the syntax, how the frame work works what should be done etc etc so you spend a lot of time googling! The advantage of this approach is you tend to learn more quicker, especially if you’re like me and struggle to read the doc and then apply, i’m only good with example sand then making mistakes, but with examples you’re on auto pilot.

So I had a bit of a chat today about the structure of Django where to put certain things and it was suggested to do something simple like a task list so that’s what I did, I made a simple task list, I decided to complicated it by using mongo as the database which the only example I had of it did not make use of the models in Django but tbh, I dived in i’m not sure what i was meant to to do there anyway… Although…. I do know that with MySQL I can use the models to outline the database structure and have the manage.py create the db for me, but alas I chose a harder route.

Some bad code

My view’s looks a little like this, I had started out with good intentions of using csfr but it was causing problems so I ended up removing it, in fact I removed quite a bit to simplify this to make it easier to debug, and it worked as this now works…

# Create your views here.
from pymongo import Connection
from django import forms
from django.shortcuts import render_to_response
from django.template import RequestContext
from django.http import HttpResponse, HttpResponseRedirect
from django.core.urlresolvers import reverse


def add_task(request):
    return render_to_response('add.html')

def add(request):
    if request.POST['task'] and request.POST['detail']:
        databaseName = "test"
        connection = Connection()

        db = connection[databaseName]
        todo = db['tasks']
        task = {"task" : request.POST['task'], "detail" : request.POST['detail']}

        todo.save(task)
        
        return HttpResponseRedirect(reverse('task.views.list'))

def list(response):
    databaseName = "test"
    connection = Connection()

    db = connection[databaseName]
    todo = db['tasks']
    tasks = []
    for task in todo.find():
        tasks.append({ 'task': task['task'], 'detail': task['detail']})
        #tasks.append(task['task'])
    print tasks
    return render_to_response('list.html', {"tasks":tasks})

The template for the add is very simple, it’s just a html form really not templating involved and it posts to the add method (which may have been the issue with the csfr stuff)

<html>
<head>Test</head>
<body>

    <p>Testing django</p>

    <h1>list</h1>
    <table align="centre">
    <th>
        <td>Task</td><td>Details</td>
    </th>
    {% for task in tasks %}
    <tr>
        <td>
            {{ task.task }}
        </td>
        <td>
            {{ task.detail }}
        </td>
    </tr>
    {% endfor %}
    </table>

</body>
</html>

As you can see the template is straight forward, the bigest issue I had with the template is I was generating a json string so

tasks.append("{ 'task': '"+task['task']+"', 'detail': '"+task['detail']+"'}")

Although this looked okay it was really a problem, either way, so far from what I can tell Django is okay, python isn’t too bad and I will do some more over the coming weeks to help me understand it better but it seems okay, nothing to sing about just yet though.