Jumping Into Single-Web-Application Via Ember JS

I recently wrote a short post about hearing and now starting to learn the frameworks being developed for Single-Web-Applications (SWA).  SWAs are not new, Google has been doing it for some time as GMail and other applications. It is not the only company either.

But what is an SWA? It turns out, like AJAX, the core technologies for building a SWA is what was there all the time, mainly HTML, JavaScript, and CSS.  Surely, there are a few new techniques and recommendations from lessons learned.  After some time of making SWA the hard way, some people decided to create frameworks and template-ing libraries.

One of the best known library in the SWA space is Ember JS.  Backbone and Angular JS (from Google) are very well known too.  But Ember just has something about it when you start playing with it, it just seems intuitive.  Not surprisingly, many of the Ember JS developers are or were Ruby on Rails developer developerts.

Enough talking, let’s get into and talk later.

Step 0 – Download ‘Ember JS Starter Kit’

Step 1 – Unzip/Extract Archive To A Folder

Step 2 – Load The Index.html File In Your Browser

Step 3 – Customize : Just A Touch

Step 4 – Be Amazed : Reload In Your Browser

Let’s do it.

Step 0 – Head over to Ember JS and download starter kit.

Step 1 – Unzip/Extract Archive To A Folder

Regardless of your platform, extract the downloaded archive to some directory.  I like putting my development projects in my <home directory>/devel/projects or <home directory>/devel/playgound depending on what I am doing.

Step 2 – Load The Index.html File In Your Browser

At this point, you can open the index.html file in the Ember Starter Kit folder you created in the previous step.  BUT, the directory name is probably some long crazy thing.  If you want, and would recommend, that you change the name to something simple like ’ember’.    Regardless of what you decided to do, just use the File->Open menu item in your Web Browser to select the index.html file in the starter-kit directory.

What you should see, is something like “Welcome to Ember.js” and a bulleted-list of “red”, “yellow”, and “blue”.  If you see that, it proves that everything is working just fine.

Step 3 – Customize : Just A Touch

So what just happened?  Well, if you didn’t sneak a peak at the index.html file yet, you should now.  You will see that it is a very simple file with what is call “Handlebars template”.  That is the text inside the “<script>” tag with ‘type=”text/x-handlebar-template”‘ in the body.  NOTE: The actual text might be slightly different, but you should be able to find it.

That the Handlebar template, was handled a “model”, the data to put in the list.  Which was just a JavaScript array of the strings “red”, “yellow”, and “blue”.  Handlebars then rendered the HTML which you see.  Pretty simple, huh?

So where is the ‘model/data’ coming from?  That is coming from the js/app.js file. If you take a peak at this file, you will see that JavaScrip array. But don’t worry about anything else for now.  Let’s do something fun.  I know, you still have a few questions, but trust me, this will be cool.

Using your favorite or any text editor on your computer, open the index.html file in the starter-kit directory. Remember, you might have changed the name of this directory.

** Rant on text editors.  For Windows users, this will most likely be Notepad.  Linux user, you are using Linux, you do better be using Vim or Sublime Text if you have a GUI.  As a matter of fact, regardless of your platform, get Sublime Text or Vim.**

Now, replace all the text between the two set of <script> tags so that you only have one remaining with the following text:

<script type=”text/x-handlebars”>

<p>{{input type=”text” value=name}}</p>

This is my name: {{name}}
</script>

Step 4 – Be Amazed : Reload In Your Browser

And start typing in the text box.

Vollia!!!

Take a minute or so to savor the result.  If you had to do that without Handlebars/Embers, you would have to be write a JavaScript function to update the output label, and of course register it to the “onchange” event of the text box.  You didn’t have to do any of that and it is working.

See you soon when we do more fun stuff with Ember and Handlebars.