Lightweight development

A lot of the stuff I work on at home are merely prototypes or proof of concepts, and there’s really no need for an entire architecture with a lot of layers and files. In a lot of ways, it’s demotivating to have a heavy setup process before even typing the first line of code. “Create solution” in visual studio just seems too heavy for a lot of ‘hack and run’ projects.

That’s why I plan to focus more on brevity and development speed. An “every line counts” approach, where you can see what the intent of the application is in a glance, without scrolling through 100 files.

Some services, tools and frameworks I might use:

  • A free RavenDB instance on RavenHQ.com for dumping my data
  • GitHub
  • JsFiddle
  • Twitter bootstrap
  • KnockoutJS

This way of working provides a nice contrast with the larger projects I typically work on during my day job. Also, everything is in the cloud and open-source, which is great for a lot of reasons.

Hopefully this approach will allow me to be more productive.

Stay tuned!

My first project on GitHub!

In my recent post Showing off code is hard I concluded that I wanted to focus more on sharing, the community and open source code.
A few days ago, I took a first step in the right direction. I created my very first GitHub repo! I forked this repo. It’s a simple demo of a multiplayer game using HTML5 Canvas for rendering, and SignalR for the network communication.
You can find my repo here. It’s called ‘Jetpack demo’, and builds on the foundations laid out by the original project. My goal with this project is to experiment with scalability, performance and manageability of games built on this simple stack. It’s not a real game, rather a proof of concept. At the moment, it only allows players to connect and fly around in the canvas. That’s about it 🙂
I really like the GitHub workflow so far. I’m using both GitHub for Windows and TortoiseGit. Putting small projects like this one online has a lot of advantages:
  • Instant backup
  • Can instantly show my creation to the guys at work 🙂
  • Maybe it helps/inspires someone
  • …and also…
…it puts some structure in my workflow!
Contrary to my projects at work, my personal projects tend to turn into a mess quite often. I start over a hundred times, throw code away only to realize I want it back, and I try to implement too much features at once. Working with Git (or any other version control system) makes me work more structured, even for mini-projects like this one. I do small, incremental updates with clear commit messages instead of dumping big-bang boatloads of code. This is a nice experience, so I’m going to put a lot of projects on GitHub in the future!
Specifically for this project, I have no real clue where it’s going. Worst case: it just sits on GitHub and gets abandoned. No harm there. It’s better than sitting on my harddrive.

But I might put some cool stuff in. Next things I might implement:

  1. Integrate a lightweight javascript game framework. Current #1 option for me is http://gamejs.org/, but I’m considering other options as well (let me know if you have a good one!). This abstracts away some of the canvas-related stuff and allows me to have an efficient and clear game loop.
  2. Experiment with simple physics, using server-side simulation and client-side motion prediction

Footnote: I often have the ‘my code is not good enough to release to the public’ syndrome. But more recently, I stopped giving a damn. If everyone thought that way, we’d still be in the stone ages of information technology 🙂

Twitter bootstrap

A few weeks ago, we built a new internal tool at work. Developing this very UI-intensive application required me to write more javascript, CSS and HTML5 and less C# than I’m used to. The process of writing so much javascript in a structured way is worth a blogpost of its own. For now, I want to focus on how we created the layout.

For an internal tool like this one, functionality is much more important than design. But although there’s no designer involved, people expect it to look good anyway. So I started looking for a quick way to make a decent layout. I could use a template or framework of course. But I was a little reluctant to that, because in the past that often resulted in me fighting the template, to ultimately end up with a less than optimal solution.

And then my colleague Thomas (who helped me build this app, even on a Sunday!) suggested to use the Twitter bootstrap framework, the UI framework created by some smart guys at Twitter. I checked it out and was pleasantly surprised…

Image

I instantly liked it, mainly because:

  • It’s very easy to get going
  • It has everything you’d expect in such a framework
  • The documentation is good
  • The design itself is very clean
  • As far as I could tell, it follows common conventions (both in layout and code)

But what I like most about it is the philosophy it follows. The way everything is structured just makes sense, even to someone who’s not a UI specialist. Just glance at the following snapshot, taken straight from the docs:

This is the kind of html you’ll be writing to do 80% of the work. Nothing complicated here. It’s completely void of any boiler plate code you’d typically have to write.

Finally, the knowledge you gain by using a framework like bootstrap is very relevant. It’s not about learning to work with a bunch of very specific abstractions. It’s submerging yourself in a coherent set of best practices presented in the best way possible: a working and modular framework.

Conclusion: Twitter bootstrap is a very useful framework for prototyping and developing tools and backend systems. I’m not sure how it fits in other use cases (as the base of a large website for example). As with all frameworks, It’s probably not the holy grail for all types of webapps and websites in the world. Anyway, I highly recommended it and will certainly use it again in future projects.

Side note: another great thing that we ended up using the (optional) LESS version of bootstrap. Checking out LESS was on my TODO list for a while, and I’m glad I had a hands-on start now.