--- layout: post title: "Getting up and running with Amber" --- I was quite excited by Yehuda Katz' [announcement of Amber.js][announcement] 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 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: * * * {% highlight html %} Hello World {% endhighlight %} * * * 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 {% highlight javascript %} HelloWorld = SC.Application.create(); {% endhighlight %} For now, I'm thinking of this as a name-space for the app. Next, we make our `Planet` class. {% highlight javascript %} HelloWorld.Planet = SC.Object.extend({ name: null, star: null, position: 0 }); {% endhighlight %} 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][demo1]. 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: {% highlight javascript %} HelloWorld.PlanetNameView = SC.TextField.extend({ insertNewline: function() { var value = this.get('value'); if (value) { HelloWorld.currentPlanet.set('name', value); this.set('value', ''); } } }); {% endhighlight %} And put this below the handlebars template in the body of the HTML: {% highlight html %}
{% endhighlight %} [Here's a demo to play around with][demo2]. 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][readme] and the [SproutCore 2.0 Guides][guides]. [announcement]: http://yehudakatz.com/2011/12/08/announcing-amber-js/ [demo1]: /demos/getting_up_and_running_with_amber/helloworld1.html [demo2]: /demos/getting_up_and_running_with_amber/helloworld2.html [readme]: https://github.com/amberjs/amber.js/blob/master/README.md [guides]: http://guides.sproutcore20.com/