Getting up and running with Amber

published Dec 08, 2011

I was quite excited by Yehuda Katz’ announcement of Amber.js this morning. I had been intrigued by SproutCore, but hadn’t really liked how big it felt. So, when Yehuda said “If you played with SproutCore and liked the concepts but felt like it was too heavy, give Amber a try”, I listened.

The following is mostly just notes of what I learned. It’s not at all complete, but it should get you up and running and get you something to play with quickly.

Getting it on your machine

Assuming that you have git, Ruby 1.9.2 and a recent version of bundler installed, this is pretty straightforward. So, use rvm use 1.9.2 or the rbenv equivalent if you need to. These commands should do it:

    git clone https://github.com/amberjs/amber.js.git
    cd amber.js
    bundle install
    rake dist

This will create sproutcore.js and sproutcore.min.js in the dist directory.

Creating Hello World

Now that we’ve got the Javascript files, we can make a new project skeleton for a hello world app. We want to end up with an helloworld.html file where we put our HTML, and a javascripts directory where we put some JS files to include.


mkdir hello_world
cd hello_world
mkdir javascripts
touch helloworld.html
cd javascripts
wget http://code.jquery.com/jquery-1.7.1.js
ln -s jquery-1.7.1.js jquery.js
ln -s <path-to-sproutcore.js>
cd ..

Okay, we’re all set now.

The first thing we’re going to do is create a SC application (it’s still called SC right now, presumably this will be renamed to Amber sometime soon) and a Planet model. We’ll then instantiate an instance of this model and show it off on the page.

Edit helloworld.html to look like this:


<html>
<head>
<title>Hello World</title>

<!-- JavaScript includes -->
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/sproutcore.js"></script>

<script type="text/javascript">
HelloWorld = SC.Application.create();

HelloWorld.Planet = SC.Object.extend({
  name: null,
  star: null,
  position: 0
});

HelloWorld.currentPlanet = HelloWorld.Planet.create({name: 'Earth', star: 'Sol', position: 3})
</script>

</head>
<body>

<script type="text/x-handlebars">
  Hello !
</script>

</body>

</html>

Let’s go through that step-by-step.

First, we load up jquery.js and sproutcore.js. Make sure to load jquery.js first or things will blow up.

Next, we set up our SproutCore (again, presumably soon to be Amber) application with

HelloWorld = SC.Application.create();

For now, I’m thinking of this as a name-space for the app.

Next, we make our Planet class.

HelloWorld.Planet = SC.Object.extend({
  name: null,
  star: null,
  position: 0
});

This sets up a planet with name, star and position attributes. The values of the hash are the default values.

Finally, we create an instance of a planet with HelloWorld.Planet.create, passing in a hash of attributes and assigning it to HelloWorld.currentPlanet.

That’s the end of the script.

Now comes the crazy part. We put a Handlebars template in the body tag, and it gets processed by Amber and stuck in to the DOM. The part inside the double-curly-braces gets replaced with what you would expect: the name of the planet we created. Also, it is bound to HelloWorld.currentPlanet, so any time the name of the planet changes, our view will change.

Play around with the demo.

Try opening up your JavaScript console and changing the name of the planet (hint: HelloWorld.currentPlanet.set('name', 'Venus')).

Hooking up a form

Okay, that’s useful, but we can’t expect our users to open up JavaScript consoles. Let’s hook our model up to a form.

To do this, we’ll create a view and a template. Notice that we’re taking a short-cut here and skipping the ‘C’ part of the MVC triumvarate. This is not a good idea, of course, but I’m getting tired and I don’t want to make this post too long.

The view is going to be a simple text field, so we’re going to extend SC.TextField. Put this at the bottom of your script block in the head of the HTML:

HelloWorld.PlanetNameView = SC.TextField.extend({
  insertNewline: function() {
    var value = this.get('value');
 
    if (value) {
      HelloWorld.currentPlanet.set('name', value);
      this.set('value', '');
    }
  }
});

And put this below the handlebars template in the body of the HTML:

<br />
<script type="text/x-handlebars">
Rename the planet: 
</script>

Here’s a demo to play around with.

I think that’s it for now. So far, this is looking pretty fun and magical.

Further Reading

If you’re intrigued, you can get more information from the Amber.js README and the SproutCore 2.0 Guides.

blog comments powered by Disqus