Backbone.js and AngularJS at HannoverJS

Posted on December 6, 2011 by Leif Singer

HannoverJS is a local JavaScript user group that I’ve been attending. We meet once a month in rooms provided by a local school. Founded in August 2011 by Christoph Burgdorf, we now usually have around 10 to 15 attendees and two presentations each month.

Presentations are held by those who volunteer for one. As Christoph was looking for another talk for the November meet-up, I somewhat spontaneously agreed to give an introduction to the Backbone.JS MVC framework. For one, I’ve long been looking for a reason to take a more thorough look at Backbone – it seemed interesting, but I was never able to justify spending time with it. It sounds good enough: a simple layer for writing client-side JavaScript applications using the MVC pattern, as well as an interchangable persistence strategy that defaults to a simple RESTful CRUD solution. Apart from that, I was also in the mood to practice making slides and giving talks, so I didn’t hesitate for too long – about 18 hours, if I remember correctly.

I thoroughly enjoyed giving my talk, but getting to know Backbone better, I started to notice how intertwingled everything is. Views are provided by static HTML skeletons, templates, as well as a View class. The View class also has some responsibilities that I’d rather see in a controller. While I enjoyed learning about the framework, I doubt I’d choose it for a project. You can find my slides on Speakerdeck here.

After my presentation, however, it was Christoph’s turn with his talk on AngularJS – another MVC framework for JavaScript-heavy web applications. I found that one much more convincing.

You write your view completely in HTML and declaratively add event listeners and variable values. Events get sent to a method of your controller class, while values are read from variables of your controller. In 2001 and 2002 I worked with Apple’s WebObjects, and the approach of AngularJS reminded me a lot of it – except that WO works on the server.

However, WebObjects had a really nice editor for its views, called WebObjects Builder. Wikipedia has a screenshot. I really liked wiring views and controllers together with it, and similar principles are used in Apple’s InterfaceBuilder for Mac OS X and iOS applications today.

I enjoyed it so much, in fact, that I’d really love if someone implemented something like that for AngularJS. I’d definitely want to use it. Make it web-based, write it in AngularJS itself, and integrate it with Cloud9 and GitHub. Or maybe something like that already exists? Definitely drop me a line if you know of an existing project or you’re planning on implementing it yourself. :)

Tagged , | Leave a comment

A Collection of Notable Git Resources

Posted on May 5, 2011 by Leif Singer

Whenever a student or colleague asks me about getting started with git, I look up a set of resources I found quite enlightening and / or useful and give them a bunch of links, often with a hand-crafted description of each. To repeat myself less often in the future, I’m now using the power of a blog post that consolidates that material.

This is that blog post.

People asking me about git know that it’s a source control system and that it is, well, a little different. It’s distributed, you can use it locally without a network connection to a central server, and it’s incredibly hip. So I’ll skip that part. Let’s assume you’ve installed git and only know Subversion or something similar and you don’t know where to start. You need a mental model of git.

The Git Parable

This is a story which puts you in the place of someone inventing a git-like system. The author walks you through the problems of version control and how to solve them with some basic tools — like directories, index files, and hashes. This made me feel like I understood git for the first time — to a certain extent, of course.

The Git Parable

Git Immersion

Once you know the basics of “the git model”, you should get your hands dirty. From the website: “Git Immersion is a guided tour that walks through the fundamentals of Git, inspired by the premise that to know a thing is to do it.”

Git Immersion

Git’s commands and what they affect

Now that you’ve used git and its different commands, it’s helpful to have an overview that helps you putting everything together and that you can come back to for later reference. This interactive cheat sheet will show you which git commands will affect which areas of a git repository.

Git’s commands and what they affect

Git & SVN

While changing to git improves your life in several ways, you might need to support legacy Subversion repositories. Git integrates with SVN using the “git svn” command. I use it to push my commits to the Subversion server at work, so students that don’t use git (yet) may still access the most recent version of a project.

This blog post explains how to setup git with SVN when starting with a git repository. This other blog post discusses and solves some of the caveats that might occur with this setup.

In addition to Subversion, I push the commits to a git server I host myself — this allows students that *do* use git to avoid using Subversion. I found the following order of commands to be essential for making this setup work:

  1. git commit // commit to local git repository
  2. git svn fetch && git svn rebase // fetch updates from the SVN server
  3. git svn dcommit // commit to Subversion server
  4. git push origin master // commit to hosted git server

The “git svn dcommit” will rebase or reset your repository. Even though that might sound dangerous, it isn’t — it simply means that your local repository is updated to reflect the current state of the SVN repository. But it also means that if you first push to origin and then dcommit to SVN, your local repository will have changed after the latest push to origin. “git status” will show that your local repository and origin have diverged. This is not what I want, so I strictly adhere to the above order.

Hosted git

It’s very probable that you’ll want to put your repositories somewhere place, either as a backup, to share them with someone else, or for collaboration. I like the highly popular GitHub — they offer public repositories for free and private repositories for a modest monthly fee. Additionally, they have some other great features, such as easy forking of projects you like, easy sending and merging of pull requests, a bug tracking system, a wiki, and hosting of static web pages. As an alternative that also supports SVN, you might try codebase.

Hosting git yourself using gitolite

If you have a server and want to use it to host your git repositories yourself, gitolite is the best answer I’ve found so far. It’s easy to install and maintain — actually, you use git itself to update its configuration. Here are the installation instructions.

A List of Cheat Sheets and Useful Aliases

This page holds a plethora of cheat sheets and other useful little tricks for your daily work with git.

Pro Git: Professional Version Control

If you have any further questions regarding git, you might want to take a look at Pro Git — it’s a full book exclusively about your favorite subject, and you may read it for free, too! Of course, if you like the book and use it regularly, it might be practical to buy it. Also, it would be a nice thing to do.

Pro Git

 

And that’s it for my little round-up of git resources! If you feel I’ve missed anything essential or you find an error, just drop me a line on Twitter here.

Tagged | Leave a comment

On Simfy

Posted on May 3, 2011 by Leif Singer

I suppose Simfy is the only serious alternative to Spotify in Germany (Spotify isn’t available here yet). You pay about 8 Euros a month to be able to stream arbitrary music from their library to your mobile device. Fortunately, when signing up, they provide a few days of “premium” features as a trial. I believe there are several other advantages to their premium plan, but I was primarily interested in streaming to iOS, so that’s what I tried.

For my tastes, their selection of available music is completely sufficient. But to listen to streaming music, you need a streaming client — which, within the first hour of use, gave me the following error messages.

Network unavailable

Network unavailable

As you can see in the screenshot, I was on a Wifi network — my home network, in fact. When I tested the connection shortly after the first error, I found a download rate of 2 Mbit/s and an upload rate of 1 Mbit/s. This might not be the fastest connection ever, but it should suffice for streaming a bunch of MP3s.

I can only explain the first error by assuming Simfy’s server were too slow and the client figured *my* connection must be at fault (“your internect connection”). This happened around ten times during about 20 minutes of use.

Playback stopped

Playback stopped

This second error happened when I was trying to listen to music while also downloading some tracks for offline listening, a feature of the client. I never used Simfy on a device other than my iPhone.

Playback error

IMG 4947

As you can see, the track is playing at one minute, when suddenly “the link to this track has expired”.

In conclusion, Simfy is only usable when used in offline mode exclusively. As they’re in the music streaming business, I guess they’ll have a lot of catching up to do. I, for one, am thankful for the trial period which helped me decide that I will not pay for such a bug-ridden product.

Tagged | 1 Comment

A Zooming Bookmarklet for Comfy Reading

Posted on February 1, 2010 by Leif Singer

When reading articles on the web, I like to lean back a little. Ideally, one of my cats sleeps on my lap, further complicating reading. I therefore really need fonts and images to be a little larger. To scratch this itch, I created me a bookmarklet that zooms into the page as long as it will still fit the window. This enlargens the text and images as much as possible, while still avoiding a horizontal scrollbar. Perfect for my reading habits.

You can drag the following links to your bookmarks bar:

Clicking them will zoom in the current page or reset the zoom, respectively. Tested only on Safari 4 — might work in other browsers.

Oh, and yes, I know of the most excellent Readability. It’s just that I prefer to keep diagrams and such in their correct places, which — as to my knowledge — get removed by Readability.

Update: Mr. Slater just informed be that the bookmarklets do not work in Firefox 4.

Tagged | Leave a comment

Have git show what changed after pulling

Posted on January 6, 2010 by Leif Singer

When pulling in the latest changes from the Cappuccino repository, I often ask myself what changed: in which places I can expect improvements or differences. I found it therefore favorable to have git show me just that. After some searching, it turns out this is quite easy. Just open your ~/.gitconfig file and add the following two lines:

[alias]
pulled = log -p --reverse --no-merges --stat @{1}..

From now on, you can use ´git pulled´ to show those changes. If you just want to see the commits but not the actual code that changed, simply remove the ´-p´ flag.

During searching I also found a rather nice list of tweaks to your ~/.gitconfig, which turns on coloring and other fancy things.

Tagged , | Leave a comment

Using Apache2 as a reverse proxy for a Play! application

Posted on December 31, 2009 by Leif Singer

This post shows how to deploy a Play! application to a server that is running Apache2, mostly as a note to myself.

My server hosts multiple domains, and I want the Play! application to run on the example.org domain (which is, obviously, merely an example domain name). The other domains are being served by Apache, so just starting Play! on port 80 is not an option — it’s already in use. Instead, we will let run Play! on the default port (9000) and have Apache translate requests to example.org to the Play! instance. Apache, in this case, takes the role of a reverse proxy.

Prepare the Play! application

I’ll assume you’ve installed Play! on your server and uploaded the Play! application you want to run on it. Then change to the application’s directory and create an id for this specific deployment:

$ play id

Just enter a name you associate with your server, e.g., server1.

Now open the conf/application.conf file and add some deployment-specific options using the newly created id.

Tell Play! to launch the application in production mode on this server:

%server1.application.mode=PROD

Give database credentials, e.g., for a MySQL database server:

%server1.db=mysql:username:password@database

Tell JPA to only create the database schema once when it’s empty — so it doesn’t try updating it on its own:

%server1.jpa.ddl=create

Finally tell Play! that it will be behind a reverse proxy which we’ll configure in a second:

%server1.XForwardedSupport=127.0.0.1

If you so wished, you could now also change the port the Play! application will run on. This would be necessary when having multiple Play! applications running on the same server.

%server1.http.port=9001

Now start Play! so Apache will find it running when we restart it later:

$ play start

This starts the Play! application in the background. You stop it using ´play stop´, restart it using ´play restart´, and ´play status´ will give you some information on the current state of the application.

Make Apache a reverse proxy

Apache2 organizes configuration files into sites, probably to be found in /etc/apache2/sites-available and activated by being linked to in /etc/apache2/sites-enabled. Open the configuration file for the site in question and, for the example.org virtual host, add the ProxyPass and ProxyPassReverse directives. Your site configuration might look like this, then:

<VirtualHost *:80>

ProxyPass / http://127.0.0.1:9000/

ProxyPassReverse / http://127.0.0.1:9000/

ServerName example.org

</VirtualHost>

Now we need to add some additional modules to Apache so it actually knows how to do what we tell it to. All it takes is adding three soft links in the /etc/apache2/mods-enabled directory:

$ ln -s ../mods-available/headers.load headers.load

$ ln -s ../mods-available/proxy.load proxy.load

$ ln -s ../mods-available/proxy_http.load proxy_http.load

Now restart Apache like so:

$ /etc/init.d/apache2 restart

And that’s it — opening http://example.org in your web browser should now bring up your Play! application.

Tagged , | Leave a comment