Backbone.js: een korte introductie

In deze post beschrijf ik in het kort de werking van het web framework Backbone.js. Dit is mijn eerste serieuze kennismaking met Backbone.js. Tijdens het schrijven van deze post heb ik een voorbeeld uitgewerkt. Het is een voorbeeld dat ik eerder heb uitgewerkt voor het web framework AngularJS en dat maakt een vergelijking tussen beide mogelijk.

backbone-580

Wat is Backbone.js

Backbone.js is een JavaScript web framework. Het doel van Backbone.js is dezelfde als bijvoorbeeld AngularJS, namelijk structuur geven aan wegapplicaties.

Waarom Backbone.js?

Backbone.js is een populair web framework. Veel bekende bedrijven maken gebruik van Backbone.js voor hun webapplicaties. O.a. AirBnb, Walmart, Disqus, Soundcloud maar ook in Nederland bijvoorbeeld de Rabobank. Zie voor een internationaal overzicht: Projects and Companies using Backbone.js

Hoe werkt Backbone.js?

In hoofdlijnen bestaat een Backbone.js webapplicatie uit een Model en een View. Backbone.js is niet een MVC framework zoals bijvoorbeeld AngularJS dat wel is. In Backbone.js is het gebruikelijk dat de view de taken uitvoert die een controller in een MVC framework afhandelt.

Binnen Backbone.js bevindt de data zich in Models. Een model zorgt voor de validatie van gegevens en voor de synchronisatie van de gegevens tussen webapplicatie en server. Op het moment dat een waarde in het model wijzigt, vuurt het model een “change event” af. Views die een luister functie geregistreerd hebben, worden op de hoogte gebracht van de wijziging in het model. Op basis van deze wijziging bepaalt de view of het de informatie opnieuw moet renderen.

Werkend voorbeeld

Voor twee eerdere Blog posts over AngularJS heb ik een case bedacht en uitgewerkt. Het uitgewerkte voorbeeld is een currency converter voor Bitcoin. Deze webapplicatie doet aan veld validatie, binding van data tussen model en view en live update van de calculatie. Om elke minuut de actuele wisselkoers van Bitcoin op te halen, maakt de webapplicatie contact met de REST webservice van Mt.Gox exchange.

screenshot-backbonejs-bitcoinconverter

Bitcoin Converter Backbone.js example

Vergelijking met AngularJS

In vergelijking tot de AngularJS variant van de applicatie blijkt dat er 2,5 keer zoveel JavaScript code nodig is om een vergelijkbare webapplicatie te maken. Daarnaast is ook de HTML pagina groter, een factor 1,4.

Negatieve punten van Backbone.js in vergelijkt met AngularJS:
– Geen automatische data binding
– Validatie niet standaard aanwezig in view
– View bevat controller logica
– HTML en templates gescheiden

Conclusie

Backbone.js doet wat het belooft, het geeft structuur aan de webapplicatie en maakt de code in vergelijking met een oplossing waarbij alleen jQuery gebruikt is, overzichtelijker.

Als er daarentegen een keuze gemaakt moet worden tussen AngularJS of Backbone.js, dan is die keuze erg makkelijk. Er zijn geen goede redenen te bedenken om te kiezen voor Backbone.js. AngularJS is de grote winnaar. Een aandachtspunt voor AngularJS is de automatische binding. Een ontwikkelaar heeft hier geen enkele invloed op. In theorie kan dat onderdeel een performance bottleneck gaan vormen, maar aan de andere kant is het zaak een grote webapplicatie op te delen in kleinere overzichtelijke stukken waardoor dit in de praktijk geen issue is.

Referenties

Other variants of the demo Bitcoin converter application

  • Vue.js Bitcoin converter application – part 2 blog src demo
  • Vue.js Bitcoin converter application – part 1 blog src demo
  • Angular Bitcoin converter application [blog] src demo
  • AngularJS Bitcoin converter application blog src demo
  • Backbone Bitcoin converter application blog src demo

2 thoughts on “Backbone.js: een korte introductie”

Leave a Reply

Your email address will not be published. Required fields are marked *