WebStrat: Create Basketball strategies online

Lately I’ve been working on a tool which allows me to visualize strategies for Basketball. It’s a HTML5 application which I called WebStrat. Click the link to see what it looks like. There also is an example strategy available.

Why did I do this?

I’m playing Basketball myself, the season just ended. As in every year you get a bunch of new players into the team who are needed to be integrated. Our team has a number of plays we’re using regularly which they need to learn.

In the past our coach often used hand-drawings, Microsoft Word and other static methods to show how our plays work. This was not the best solution so I decided to implement something better.

Aren’t there any other solutions?

Yes, there are. I found several alternatives:

These all have one or more of these disadvantages:

  • The price is way too high. At best a tool would be gratis.
  • It is hard to share the tactics you created
  • They are bound to a specific platform (Smartphone Apps, Windows Clients)
  • A certain work has to be done to get them running. Like installing it on your computer
  • The design is more 1990 than 2013. This point relates to user interface and handling.

There were a couple more apps I found. There are also more disadvantages, but these were enough for me to dive into Javascript again and create my own solution.

What features does WebStrat support?

With WebStrat it is easy to create and share your teams strategies:

  • No installation needed. Just visit the page with a modern webbrowser
  • The software does not cost a penny
  • Create strategies easily by using Drag&Drop and HTML
  • Share your strategies via Email, Facebook, Instant Messaging or other text-based services. Just copy the link and you’re good
  • The code is open source. Find it on GitHub

Technical information

When creating WebStrat I had 2 goals in mind: Get it done in a reasonable time and make it as generic as possible. Both goals are a bit contrary, but I think the result is good to use and to extend.

I used OOP principles in Javascript (Prototyping) as much as possible. This way it was possible to integrate some sort of abstraction. There is not just a Ball, there is a class Symbol where the Ball inherits from. To integrate other sports there still will be some work to do, but the base is there.

I tried to make the interface for storing the data abstract. There is a parent class Storage. I create a PasteBin-Storage to be independent of any server structure, but it would be easy to integrate a MongoDB or MySQL storage.

The UI currently is created with jQuery Mobile. The reason was that I’m familiar with how it works. However the mobile support is not very good, I tried to optimize the page for Desktop browsers. As with the other points, it wouldn’t be hard to change that, there just isn’t a need for now.

I tried to keep the tool as simple as possible, which leads to some hardcoded design decisions like using the PastebinStorage for loading and the ConsoleStorage for saving strategies. Of course it would be possible to create a UI where it is possible to choose between different Storages. Another trade-off had to be made with the JEditable integration. Currently it is needed to use HTML if you want some formatting, integrating a WYSIWYG editor would make sense here.

Project summary

During the project I learned a lot new things about Javascript. The biggest was Prototyping. Javascript uses a concept of OOP which I needed to get used to. Another thing I tried to do as good as possible was to split all the HTML/DOM code and the logic behind it. In the ned I’m quite happy with what I achieved: A piece of software which is very easy to use and which does what I wanted it to do. On the other side there are a lot of things I could imagine being better than now. There’s still some work to do if I get bored.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s