Blog Posts

One day with NodeJS

I spent last Friday in the mood of the innovation with a few other liipers. So we had all day long to explore a new technology, something we had never tried before. The main purpose of this hackday was to implement a simple REST API based on NodeJS providing a list of images taken randomly from the world wide web.

> Read more
Related Entries:
- Introduction to node.js at Webtuesday
- Semantic web meets frontend-awesomeness
- Introducing the application cache
- Applying Niwea: TV Sélection iPad app
- YUI Training

Comments [1]

Semantic web meets frontend-awesomeness

Frontend editing is a hot topic at the moment. With the HTML5 content-editable, there is no longer any excuse to reload a page in edit mode and render forms on server side. And even less to use the iframe mess of traditional WYSIWYG editors. One excellent frontend editing project is create.js. Its main strength is to use RDF annotations in HTML (RDFa) to explain the semantic structure of your content. Then you load create.js and tell it what editors to use for your entities. Storage happens based on backbone.js, the server backend is easy to implement.

> Read more
Related Entries:
- What Liip did after winning the IKS semantics UX contest
- Updating old Symfony2 CMF projects
- Symfony CMF hackday october 22nd in Cologne
- A frontend editor for Symfony2 CMF with the help of VIE
- Progress on PHPCR with a hackday

Comments [0]

Introducing the application cache

The Situation

We were building a webapp that has to work on older browsers without JavaScript. Naturally we're trying to reduce duplications so we didn't roll with JS Models but delivered finished markup over XHR. This worked really good as long as the frontend was "stoopid" and just displaying things but became a bit of a hassle when we started to add functionallity.

> Read more
Related Entries:
- Applying Niwea: TV Sélection iPad app
- One day with NodeJS
- Semantic web meets frontend-awesomeness
- YUI Training
- Backbone.js, a micro MVC for javascript

Comments [0]

Applying Niwea: TV Sélection iPad app

The Tages-Anzeiger TV-Sélection iPad app has been available for download in the Apple app store for about a week now.

> Read more
Related Entries:
- Introducing the application cache
- YUI Training
- Techday Slides: PhoneGap
- One day with NodeJS
- Semantic web meets frontend-awesomeness

Comments [2]

YUI Training

We already hosted a well received and interesting YUI3 introduction training. You can read about it here.

> Read more
Related Entries:
- Applying Niwea: TV Sélection iPad app
- One day with NodeJS
- Semantic web meets frontend-awesomeness
- Introducing the application cache
- Backbone.js, a micro MVC for javascript

Comments [6]

Backbone.js, a micro MVC for javascript

Backbone.js is a small javascript MVC framework, developped and open-sourced by documentcloud.

context

We used backbone here at Liip for some small js projects (mobile and web), specially for a js game which was pretty easy UI wise but contained a lot of internal logic.

why MVC?

Usually the first question is 'do you really need MVC for javascript?', and i guess there is no real answer to this... The truth is that it helped us a lot in clarifying what to do and how to structure our application. As we all have a different background within the team (Php, Actionscript, Python) 'speaking MVC' was a kind of common language.
Anyway in most of js apps you'll need a router, and objects that act as models and views. Call it as you want... it still looks a lot like MVC :)

why Backbone?

As said before we wanted a way to structure the javascript part of our apps. The goal was to have a tiny MVC layer that we could easily reuse and that would ease our life without too much overhead. And that's exactly what Backbone is!
For us the main points of interest were that it provides:
* base components for both the views and models/collections
* a simple router (match url to function) with optional parameters
* an event mechanism for inter-components communication
* an easy way to update views on model modification
* scoping facilities (mostly through underscore.js which is the only pre-requisite for Backbone)
* template integration

how?

Templates

We used only 1 html file containing the base div structure and templates with placeholders. Backbone (via underscore.js) allows you to define templates like:
<script type="text/template" id="my-template">

    <div class="myclass-<%= id %>">

        <p><%= label %></p>

    </div>

</script>
You can then call the _template method with an Object as argument.. Nothing revolutionary, but quite helpful!

Structure

For the js part we first started with 1 js file containing everything (models, views, etc..) as presented in the official example on backbone web page. This turned out to be not so maintainable as the file grew bigger and bigger, so we refactored to use 1 file for each logical part. In our case we had 1 for the 'simulator' where computation were done, 1 for the router, 1 for the game logic, and several for the views. All those components were pseudo namespaced in an object that we called 'app'.
This led to a quite decoupled application with components that have a clear role and scope. Nice!

Events

Who says decoupled says communication, and here again Backbone helped us by providing an easy event system. For example, at first we had some concurrency problems on start up, so we decided to just trigger an event when all components are created. Something like:
// in main.js

// initialize all components here

this.trigger('ready');


// in any component

this.app.bind('ready', this.onReady);

onReady: function () {

    // do stuff

}
and with a little help of underscore.js we even can set the scope of 'onReady' function as the component:
_.bindAll(this, 'onReady');
pretty easy huh?!
It works the same for views which want to listen to model changes. By default models trigger some useful events like 'change' or 'error' (more on this afterwards) on value change. To set or get a value on/from a model you use:
this.model.get('key');

this.model.set({'key':'value', 'key2':'value'});
This has some added value: you can use the default model validator very easily:
// just override the validate function

validate: function(attrs) {

    // do custom validation based on passed attrs and return true if ok or any string ('not valid value')

}
Returning anything else then true will trigger an error event that you can catch in your view and handle as needed.

Router

The 'controller' part in Backbone is a simple router. It allows you to map methods to urls, again very easily.
routes: {

    'main': 'mainHandler',

    'product/:id': 'productHandler'

},

productHandler: function(id) {

    // this will be called when /product/21 is reached, with of course id=21

}
There are a lot of other features in Backbone that i could talk about... History management, sync with backend, all views methods, etc... but hey! time for stützbier :)
NB: you can also find backbone and underscore.js in the microjs list. Happy coding!

Related Entries:
- One day with NodeJS
- Semantic web meets frontend-awesomeness
- Introducing the application cache
- Applying Niwea: TV Sélection iPad app
- YUI Training

Comments [1]

Kinect Hackday

On Monday 11th of April we (Dan, David, Gerhard and me) connected Microsofts Kinect sensor to play around with the amazing 3D signal the gadget provides. The goal was to create a small image carousel, controlled by the sensor. We wanted to try two different approaches: one with Flash and the other one with JavaScript.
> Read more
Related Entries:
- One day with NodeJS
- Semantic web meets frontend-awesomeness
- Introducing the application cache
- Applying Niwea: TV Sélection iPad app
- YUI Training

Comments [2]

webOS Hackday at Liip

 I'm organizing a webOS Development Hackday at Liip. Join me on February 10th at the Liip Zurich Office.

> Read more
Related Entries:
- One day with NodeJS
- Semantic web meets frontend-awesomeness
- Introducing the application cache
- Applying Niwea: TV Sélection iPad app
- YUI Training

Comments [0]

Techday Slides: PhoneGap

Pierre talked about the PhoneGap work we did for an unpuplished project. He also talked a lot about JavaScript in general and some concepts there. Actually, it's more about JavaScript, than PhoneGap. But that was fine and very interesting and entertaining (most of the fun is missing in the 99 slides, but there are still some gems). Get his slides.

Related Entries:
- Applying Niwea: TV Sélection iPad app
- One day with NodeJS
- Semantic web meets frontend-awesomeness
- Introducing the application cache
- YUI Training

Comments [0]

Introduction to node.js at Webtuesday

> Read more
Related Entries:
- One day with NodeJS
- Semantic web meets frontend-awesomeness
- Introducing the application cache
- Applying Niwea: TV Sélection iPad app
- YUI Training

Comments [3]

Next1-10/13