Vorheriger Artikel Nächster Artikel

Frameworks und Gratis-Tools, die Webentwicklern das Leben erleichtern

Aus dem
t3n Magazin Nr. 26

12/2011 - 02/2012

Frameworks und Gratis-Tools, die Webentwicklern das Leben erleichtern

Immer mehr Endgeräte, zahlreiche Konfigurationen und wachsende Ansprüche der Nutzer zwingen zu aufwändigen Internet-Auftritten, optisch wie technologisch. Open-Source-Frameworks und Gratis-Tools wollen deshalb Web-Entwicklern das Leben erleichtern. Was bleibt, ist die Qual der Wahl. Ein Wegweiser.

Foto: joexx/Photocase

Die Idee ist fixiert, die Entwicklung beginnt, es folgen die bekannten Aufgaben: Layout von Logik trennen, eine passende Datenbank finden und die Browser-Unabhängigkeit gewährleisten. Doch das Rad rollt bereits, warum also neu erfinden? Und die angebotenen und Tools sind keineswegs überladene Alleskönner. Vielmehr tendieren die Hersteller zu spezialisierten Lösungen, die keine Leistungseinbußen durch zuviel Funktionalität mit sich bringen. Es gilt daher die Devise: Je spezifischer die Anforderung, desto passender das Framework. Der Vielzahl der Angebote entsprechend erhebt dieser Rundgang keinen Anspruch auf Vollständigkeit, sondern liefert auf den folgenden Seiten und in der anschließenden Tabelle einen Überblick der wichtigsten Vertreter.

CSS und HTML

Gerade bei der Browser-Unabhängigkeit gibt es viel zu tun. Da verwundert es kaum, dass gerade auf diesem Gebiet zahlreiche Bibliotheken um die Gunst der Entwickler buhlen. Etwa, um das Design zu vereinheitlichen. Darum kümmern sich CSS-Frameworks wie „960 Grid System“. Das Framework teilt eine 960 Pixel breite Seite in zwölf oder sechzehn Spalten ein. Über CSS-Klassen werden HTML-Blockelemente dann auf die Spalten verteilt, um ein stets einheitlich ausgerichtetes Gerüst zu erhalten.

Eher Geschmackssache sind CSS-Frameworks, die für ein typografisch einheitliches Bild sorgen oder Formulare „verschönern“. Um entsprechend Einfluss nehmen zu können, enthalten manche solcher Bibliotheken HTML-Templates. Sie sorgen zudem für optimierte Tabellen, W3C-konforme HTML-Mails oder bringen mit „Hacks“ technologisch humpelnde Browser wieder auf die Beine.

In eine gänzlich andere Kerbe schlagen „less“ und „Sass“: Sie erlauben den Einsatz von Funktionen, Variablen und Verschachtelungen in eigenem CSS-Code [1]. Das erleichtert etwa den Umgang mit Farbcodes oder mehrfach eingesetzten Effekten.

JavaScript

Ebenfalls der Browser-Unabhängigkeit geschuldet sind JavaScript-Frameworks. Sie verkürzen und vereinheitlichen Standard-Befehle der Skriptsprache, etwa den mühseligen Zugriff auf einzelne HTML-Elemente via „document.getElementById('id').style.display = 'none'“. Die Bibliothek „Prototype“ macht daraus ein simples „$('id').hide()“. Natürlich unabhängig vom verwendeten Browser und inklusive diverser Abfragen, ob das Element überhaupt existiert.

Neben derartiger Entwickler-Freiheit liegt die Stärke der JavaScript-Frameworks vor allem in der Usability: Tabellen sortieren, Inhalte verstecken und Formular-Eingaben auf ihre Richtigkeit prüfen funktioniert ohne Server-seitigen Code und mittels weniger Zeilen JavaScript. Auch AJAX, die portionierbare Server-Kommunikation durch die Hintertür, Drag and Drop und diverse Animationen sind mit den Bibliotheken möglich.

Rich Internet Applications (RIA)

Von einer Rich Internet Application ist die Rede, wenn der Nutzer mit der Seite interagieren kann, als befände er sich in einer Desktop-Anwendung. In die Klasse der „RIAs“ rutschen also sämtliche Frameworks, die das Erstellen solcher Applikationen unterstützen. Dass in dieser Kategorie mit „jQuery UI“ ein Namensvetter des JavaScript-Frameworks „jQuery“ auftaucht, ist also nur mitnichten Zufall: Die RIA-Version der Bibliothek enthält neben CSS- und JavaScript-Bibliothek ordnerweise Bilder und Symbole, die je nach Farbschema der eigenen Seite eingebunden werden.

Doch nicht nur mit HTML, CSS und JavaScript sind Anwendungen realisierbar, auch über Browser-Plugins wie Flash oder Silverlight ist ein beinahe natives Erlebnis möglich. Entsprechend warten Adobe und Microsoft mit Frameworks auf, um die Entwicklung solcher Applikationen zu erleichtern. Vorraussetzungen dafür sind neben einem entsprechend motivierten Benutzer vor allem ein Betriebssystem und ein Browser, die das Plugin auch zulassen. Was nach einem lächerlichen Apple-Adobe-Streit klingt, erlangt durch die stetig steigende Zahl mobiler Geräte neue Bedeutung.

Web-Apps

Als zunehmend populäre Lösung dieses Problems haben sich Web-Apps herauskristallisiert. Die Idee hinter solchen Anwendungen sind RIAs, die sich dynamisch der Display-Größe und -Ausrichtung von Smartphones und Tablets anpassen, vom Betriebssystem gewohnte Symbole einsetzen und somit auf verschiedenen Systemen das Gefühl geben, beinahe native Applikationen zu sein. Entsprechende Frameworks bieten neben den passenden Bildern und Effekten die Möglichkeit, Hardware-abhängige Dienste wie die geografische Ortung online zu umgehen. Denn auf GPS-Sensoren, Kameras und die Neigungswinkel der Geräte haben nur native Anwendungen Zugriff.

Ein weiterer Unterschied zu solchen iOS-, Android- oder Windows-Phone-7-Applikationen liegt in der Vermarktung: Web-Apps sind nicht in den jeweiligen App-Shops zu finden und bringen darüber kein Geld. Einen ausführlicheren Blick auf Web-Apps und deren Frameworks wirft außerdem der Artikel ab Seite 142.

Multi-OS-Apps

Wer Geld durch den Verkauf von Apps verdienen möchte, ist gut beraten, seine Anwendung in den jeweiligen Shops unterzubringen. Allein Apple, Google und Microsoft verlangen dafür aber bereits drei unterschiedliche Apps; von RIM (Blackberry), Samsung (Bada) und Nokia (Symbian) ist dabei noch gar nicht die Rede. Frameworks für Multi-OS-Apps dienen sich deshalb an, aus einer Code-Basis mehrere native Applikationen zu generieren.

„Rhodes“ setzt dafür auf die zentrale Sprache Ruby und konvertiert die Anwendung anschließend für Android, Blackberry, iOS, Windows Mobile und Windows Phone 7. Noch mehr Ziel-Systeme verspricht „PhoneGap“: Das Framework übersetzt herkömmliche Web-Apps mit passender Syntax für Android, Bada, Blackberry, iOS, Symbian, WebOS und Windows Phone 7. Dass solche Frameworks dennoch nicht auf sämtliche Feinheiten eines jeden Systems Rücksicht nehmen können, liegt auf der Hand.

Nativ-Apps

Um diesen kleinen aber feinen Unterschied auszuräumen, kommt man um eine native Applikation nicht herum. Doch auch Entwickler reiner Android-Apps kommen in den Genuss diverser Tools, die bei der Programmierung helfen. Schließlich ist das System – im Gegensatz zur Konkurrenz – und die Entwicklungsumgebung damit nicht vorgegeben.

„DroidDraw“ macht sich diese Eigenschaft zunutze und ermöglicht es, grafische Oberflächen von künftigen Android-Anwendungen im Browser zu gestalten. Der Entwickler ordnet dafür lediglich die gewünschten Bedienelemente in einem WYSIWYG-Editor an, das System antwortet mit dem entsprechenden Java-Code.

Einen Schritt weiter geht der „App Inventor“: Sein Editor erlaubt neben der Benutzeroberfläche auch das Definieren von Abhängigkeiten, Schleifen und Anweisungen. Ergebnis dieses WYSIWYG-Editors für ganze Apps ist wiederum purer Java-Code.

DroidDraw erlaubt es, grafische Android-Anwendungen im Browser zu gestalten und den passenden Java-Code im Anschluss herunterzuladen.
DroidDraw erlaubt es, grafische Android-Anwendungen im Browser zu gestalten und den passenden Java-Code im Anschluss herunterzuladen.

PHP

Mit gänzlich anderen Problemen haben PHP-Entwickler zu kämpfen. Denn weder gibt es auf Server-Seite Browser-Unstimmigkeiten, noch müssen diverse Betriebssysteme bedient werden. Stattdessen gilt es, manuell den Code sauber und ordentlich zu halten. Denn mit PHP ist es durchaus möglich, die Logik, das Aussehen und die Strukturen einer Software in einer Datei unterzubringen, was spätestens bei Programmier-Teams zu Chaos führt.

Hier springen Anbieter diverser PHP-Frameworks in die Bresche und leisten mit strikt objektorientierten und dem MVC-Ansatz folgenden Bibliotheken Schützenhilfe. „Lithium“ etwa, das aus „CakePHP“ hervor entstand, bietet neben den Grundklassen für das MVC-Konzept auch Abstraktionsklassen für Datenbanken, sowie Handler, die sich um sprechende URLs kümmern.

Andere Frameworks bieten zudem fertige AJAX-Handler, Caching-Module, Logging-Mechanismen oder berücksichtigen von Haus aus mehrsprachige Systeme. Darüber hinaus lassen sich manche Frameworks wie „FLOW3“ unter Unix-Systemen von der Kommandozeile aus bedienen und erlauben so das simultane Erstellen von Model, View und Controller. Garantiert ohne Tippfehler.

Templates

In alle großen PHP-Frameworks sind auch Template-Handler eingebaut, die sich um die passende Kodierung der generierten HTML-Dateien kümmern und mit Abhängigkeiten umgehen können. Letzteres ist vor allem bei Auflistungen sinnvoll, die bei vorhandenen Daten entsprechend dargestellt werden, bei fehlenden Einträgen allerdings eine Fehlermeldung ausspucken sollen. Wer auf ein PHP-Framework verzichtet, findet also möglicherweise mit „Smarty“, „Dwoo“ oder „Twig“ sein Glück.

Doch auch abseits von PHP können Programmierer auf Template-Frameworks zurückgreifen. „Haml“ richtet sich an Rails-Entwickler und kommt mit einer eigenen Syntax daher, die anhand von Einrückungen und an CSS-Selektoren angelehnte Auszeichnungen validen XHTML-Code erzeugt. Ein Ansatz, den auch „jade“ für das JavaScript-Server-Projekt „node.js“ verfolgt.

Server

„node.js“ ist ein Server, der insbesondere mit kleinen Datenmengen dank seiner ständigen Verfügbarkeit verhältnismäßig schnell umgehen und darauf antworten kann [2]. Das Besondere: Als Programmiersprache dient hierbei JavaScript.

Obschon Server nicht zu den Frameworks eines Programmierers im klassischen Sinn gezählt werden, dienen sich auch hier zahlreiche Tools an, um den Entwickler zu entlasten. So rücken die schnellen Webserver-Alternativen „NGINX“ und „lighttpd“ Apache zu Leibe und stoßen dabei auf reichlich Zuspruch. Bei großen Traffic-Mengen und mehreren Servern kommt man zudem nicht umhin, passende Zwischenspeicher wie „Varnish Cache“ oder Load Balancer wie „HAProxy“ einzusetzen.

Eine gänzlich andere Zielgruppe bedient das auf Ubuntu aufsetzende Server-Betriebssystem „OpenStack“, das als Basis für Cloud-Projekte dient. Dabei soll es möglich sein, sowohl gemeinsam genutzte Rechenleistung als auch große Mengen Speicherplatz als Cloud-Lösung für andere zur Verfügung zu stellen.

Data Storage

Apropos Speicherplatz – auch dafür gibt es unterstützende Tools. Das in diversen PHP-Frameworks bereits inkludierte „Doctrine“ etwa, das lästigem Aufbereiten von Daten für etwaige Datenbanken ein Ende bereiten will. Stattdessen speichert die Bibliothek PHP-Objekte direkt in ein relationales System und erlaubt Zugriffe über den SQL-Dialekt „Doctrine Query Language“ (DQL).

Wer nicht mit PHP entwickelt oder auf relationale Systeme verzichten möchte, findet mit NoSQL-Datenbanken [3] eine Alternative. Dokumentenbasierte Datenbanken wie „mongoDB“ oder Schlüssel-Wert-Speicher wie „CouchDB“ sind einfach zu handhaben und äußerst leistungsstark. Der Wegfall einer starren Tabellen-Struktur macht sie zudem äußerst flexibel und erweiterbar.

Sonstiges

Es bleibt, was in keine Kategorie passt. Frameworks für andere Programmiersprachen also. Die ebenfalls dem MVC-Ansatz folgenden Bibliotheken „Django“, „Ruby on Rails“ und „Play“ unterstützen Python-, Ruby- und Java-/Scala-Entwickler bei ihrer Arbeit. „Scala“, die stark skalierbare, in den Grundzügen aber an Java angelehnte Programmiersprache, ist übrigens ebenfalls einen Blick wert.

Fazit

Welches Ziel ein Entwickler auch verfolgt, ein Framework, das ihm den Weg erleichtert, existiert bereits mit ziemlicher Sicherheit. Wichtig für die Wahl ist neben genauer Kenntnis eigener Anforderungen vor allem Offenheit. Die Ansätze einzelner Frameworks wirken mitunter absurd und erfordern immer wieder, dass selbst erfahrene Programmierer über den eigenen Schatten springen und sich auf eine Keynote oder einleitende Worte der Entwickler einlassen. Doch nur Mut, der Aufwand lohnt sich. Meistens.

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Keine Antwort
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Frameworks
Virtual Reality im Browser: Mozilla stellt Open-Source-Framework für VR-Websites vor
Virtual Reality im Browser: Mozilla stellt Open-Source-Framework für VR-Websites vor

Mozillas A-Frame soll es deutlich einfacher machen, Virtual-Reality-Websites für den Desktop, Smartphones und VR-Brillen zu entwickeln. Wir werfen einen ersten Blick auf das Open-Source-Framework. » weiterlesen

JavaScript-Framework für komplexe Animationen: Was das Open-Source-Projekt mo.js kann
JavaScript-Framework für komplexe Animationen: Was das Open-Source-Projekt mo.js kann

JavaScript und CSS3 haben die Grundlage für anspruchsvolle Animationen geschaffen. Mit dem Framework mo.js ist mehr möglich als nur einfache Easing-Funktionen. Ihr habt jetzt die Möglichkeit, euch … » weiterlesen

Netflix-CEO Reed Hastings: „Virtual Reality ist für uns nicht relevant.“ [DLD16]
Netflix-CEO Reed Hastings: „Virtual Reality ist für uns nicht relevant.“ [DLD16]

Netflix ist zum Synonym für On-Demand-TV geworden. Wir sprachen mit Netflix-CEO Reed Hastings am Rande der DLD16-Konferenz über den Start des Video-Streaming-Angebots, Live-TV und Virtual Reality. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?