Ember.js – JavaScript Framework für Single Page Webapps

23. November 2013 · Kategorien: Internet, JavaScript, Webentwicklung

Ember.JS - JavaScript Framework

Das JavaScript-Framework Ember.js vereinfacht die Entwicklung sauber geschriebener Webapplikationen. Dieser Artikel wird Dir einen ersten Einblick geben und Dir erklären, wann Ember.js für Dich in Frage kommen könnte.

Was ist Ember.js?

Ember.js ist ein so genanntes MVC-JavaScript-Framework. Das MVC steht hierbei für Model, View, Controller. Das kennen wir bereits aus Frameworks anderer Programmiersprachen.
JavaScript kann erfahrungsgemäß sehr schnell unübersichtlich werden. Durch Ember.js kann viel leichter Struktur und Ordnung in den Code gebracht werden.

Wann kommt Ember.js in Frage?

Ember.js soll die Programmierung von Single Page Applications vereinfachen und ist demnach nicht für jede Art von Webseiten geeignet.
Single Page bedeutet, dass es streng genommen nur eine HTML-Seite gibt: Sämtliche Links, Buttons und andere Interaktionselemente, die ein Besucher benutzen kann, führen dazu, dass JavaScript den Zustand dieser einen HTML-Seite verändert – aber keine neue Seite lädt.
Single Page Applications sind dann sinnvoll, wenn eine Webseite nicht für Suchmaschinen optimiert sein muss. Zum Beispiel ein Backend-System, auf das nur wenige Benutzer Zugriff haben. Auch kann Ember.js hilfreich sein, wenn man eine bestehende Desktopanwendung als Browseranwendung neu schreiben muss.

Erste Schritte mit Ember.js

Während vor einigen Monaten noch die Dokumentation von Ember.js kritisiert wurde, hat sich einiges getan. Auf der offiziellen Webseite gibt es ein sehr gutes Tutorial, das Schritt für Schritt die Entwicklung einer ToDo-Listen-Verwaltung beschreibt.
Wem Video-Tutorials eher zusagen, der sollte einen Blick auf folgenden Link werfen: Building an Ember.js Application – YouTube.
Da Ember.js auf das Template-System Handlebars.js aufsetzt, schadet es nicht, dieses vorher zu erlernen. Eine kleine, hilfreiche Einführung zu Handlebars.js findet sich hier.

Folgendes Beispiel demonstriert euch einen Bruchteil der Möglichkeiten, die euch Ember.js bietet. Nach Klick auf einen Button wird eine Controller-Action PersonController::actionSet() aufgerufen, die wiederum ein Controller-Attribut person ändert. Ein Handlebars.js-View ist an dieses Attribut gebunden, sodass dessen Änderungen sofort im Browser angezeigt werden.

Das HTML sieht so aus:

<html>
<head>
  <script type="text/javascript" src="js/libs/jquery.min.js" ></script>
  <script type="text/javascript" src="js/libs/handlebars-1.0.0.js"></script>
  <script type="text/javascript" src="js/libs/ember.js"></script>
  <script type="text/javascript" src="js/application.js"></script>
</head>
<body>
  <script type="text/x-handlebars">
    {{#view HelloWorldApp.PersonView }}
     <b>Nachname:</b> {{controller.person.last_name}}<br />
     <b>Vorname:</b> {{controller.person.first_name}}<br />
     <b>Alter:</b> {{controller.person.age}}<br />
    {{/view}}
  </script>
  
  <button  id="person-btn">Meganize</button>
</body>
</html> 

Zu beachten ist, dass sowohl jQuery als auch Handlebars.js eingeunden werden muss, damit Ember.js läuft. Weiterhin muss natürlich Ember.js selbst und auch unsere eigene JavaScript-Login – im Beispiel application.js eingebunden werden.

Der Inhalt der Datei application.js sieht so aus:

$(function() {
  // Wir initialisieren unsere App, geben ihr den Namen "HelloWorldApp" und
  // machen Sie global verfügbar, indem wir sie an das window-Object binden
  window.HelloWorldApp = Ember.Application.create();

  // Folgende Zeilen definieren den Aufbau des Person-Models
  HelloWorldApp.Person = Ember.Object.extend({
    last_name: null,
    first_name: null,
    age: null
  });

  // Natürlich brauchen wir auch einen Controller,
  // der unsere eigentliche Applikations-Logik beinhaltet.
  HelloWorldApp.PersonController = Ember.ObjectController.create({
    // Wir definieren ein Controller-Attribut für die Person und weisen ihr eine neue Model-Instanz zu
    person: HelloWorldApp.Person.create(),
    actionSet: function() {
        // Nun setzen wir die Werte für die soeben erzeugte Model-Instanz
        this.person.set('last_name', 'Fox');
        this.person.set('first_name', 'Megan');
        this.person.set('age', 62);
    }
  });
  
  // Mit der Definition des Views ermöglichen wir, 
  // Platzhalter im View direkt mit den Daten der Controller-Attribute
  // (in diesem Fall PersonController::person) zu rendern
  HelloWorldApp.PersonView = Ember.View.extend({
    'controller': HelloWorldApp.PersonController
  });
  
  // Zuletzt weisen wir dem Button zu, dass die Action 
  // PersonController::actionSet aufgerufen werden soll, wenn er geklickt wurde.
  $('#person-btn').click(function() {
    HelloWorldApp.PersonController.actionSet();
  });
});

Das ist alles. Zugegeben, für diese kleine Anwendung ist Ember.js natürlich viel zu überdimensioniert. Für komplexe Applikationen, die sehr viel mehr Logik beinhaltet, kann sich das Framework aber sehr wohl als nützlich erweisen.

Autor: | Kategorien: Internet, JavaScript, Webentwicklung

1 Kommentar zu Ember.js – JavaScript Framework für Single Page Webapps

  1. Einer sagt:

    Danke
    Ich suche schon ganze 5 Minuten nach einer Lösung :)
    Hatte schon bei anderen Seiten geschaut aber mit denen ihren hat es nicht geklappt aber mit deinem Script ging es sofort einwandfrei, du bist mein Held :)

Hinterlasse einen Kommentar zu Einer Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *