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.min.js in the
Creating Hello World
helloworld.html file where we put our HTML, and a
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.
helloworld.html to look like this:
Let’s go through that step-by-step.
First, we load up
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
For now, I’m thinking of this as a name-space for the app.
Next, we make our
This sets up a planet with
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
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.
Hooking up 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:
And put this below the handlebars template in the body of the HTML:
I think that’s it for now. So far, this is looking pretty fun and magical.