smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Tutorial: Todo-App mit backbone.js & CoffeeScript erstellen

22. Oktober 2012
Stephan
Todo-App mit backbone.js und CoffeeScript entwickeln

Da die meisten (interaktiven) Webapplikationen heutzutage sehr JavaScript-lastig sind, bietet es sich an, ein MVC-Framework zu verwenden. Das hat den großen Vorteil, dass der Code im Allgemeinen wartbarer, strukturierter und besser testbar ist als auch bleibt.

Ein Framework mit dem ich schon des Öfteren gearbeitet und gute Erfahrungen gemacht habe, ist backbone.js, welches wohl auch bald Einzug in WordPress erhalten wird (siehe wpgrafie.de).

Da ich nicht unbedingt ein JavaScript-Liebhaber bin, werde ich für dieses Tutorial den dazugehörigen Code in CoffeeScript schreiben. Falls ihr nicht wissen solltet, worum es sich bei CoffeeScript handelt, empfehle ich euch mal meinen Artikel Einführung in CoffeeScript zu lesen.

In dieser neuen Artikel-Serie möchte ich euch nun also zeigen, wie ihr eine einfache Todo-App in CoffeeScript auf Basis des MVC-Frameworks backbone.js realisieren könnt.

Todo-App

In dieser Artikel-Serie wollen wir eine einfache Applikation zum Verwalten von Todos erstellen. Damit ihr auch eine Vorstellung habt, was am Ende dabei rauskommt, habe ich schon mal eine Demo für euch bereitgestellt.

Todo-App

Aufbau der Artikel-Serie

Da diese Artikel-Serie wie eine Art Tutorial aufgebaut werden soll, wird die schrittweise Entwicklung der Todo-Applikation in mehreren Artikeln gezeigt und erläutert.

Damit auch diejenigen etwas davon haben, die vielleicht noch gar keine Erfahrung mit CoffeeScript gemacht haben, werde ich die jeweiligen Code-Auszüge sowohl als CoffeeScript als auch als rein JavaScript-basierten Code darstellen.

Teile der Artikel-Serie

Zur Übersicht eine Auflistung aller erschienenen Artikel dieser Artikel-Serie:

  1. Vorbereitungen vornehmen (Projektverzeichnis anlegen etc.)
  2. Model erstellen
  3. Collection – Liste von Models
  4. View-Struktur & Grundlagen einer backbone.js View
  5. Restliche Views implementieren
  6. Controller implementieren & App fertigstellen
  7. Daten mit Ruby on Rails per REST-API serverseitig speichern

Weiterführende Informationen

Wenn euch backbone.js bzw. CoffeeScript zusagt und ihr mehr darüber lernen wollt, empfehle ich euch die backbone.js und CoffeeScript Screencasts von peepcode.com mal anzuschauen, da diese wirklich sehr informativ und gut gemacht sind.

Fazit

Diese Artikel-Serie wird euch hoffentlich helfen, backbone.js sowie CoffeeScript besser kennenzulernen bzw. zu verstehen und euch vielleicht auch einen Anreiz bieten, mal selbst etwas in CoffeeScript bzw. mithilfe von backbone.js zu entwickeln.

Kommentare  
2 Kommentare vorhanden
1 JonasB schrieb am 22. Oktober 2012 um 11:28 Uhr

Coole Sache, die App macht einen echt schicken Eindruck. Mit backbone.js habe ich noch nicht gearbeitet und freue mich auf das Tutorial.

2 Stephan L. schrieb am 22. Oktober 2012 um 15:44 Uhr

Hi Jonas,

habe bisher mit backbone.js auch nur im Rahmen meiner Bachelorarbeit und einer Projektarbeit gearbeitet. Am Anfang war ich zwar ein wenig skeptisch (wie bei allem, was mit JavaScript zu tun hat :P), aber mit backbone.js macht OOP in JavaScript wenigstens „Spaß“! 😀

Hat halt auch den Vorteil, dass sich der Code gut mit Jasmine testen lässt.

Hast du denn schon mal mit CoffeeScript gearbeitet?

Beste Grüße

Stephan

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!