Anzeige
Anzeige
Artikel

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.

7 Min.
Artikel merken
Anzeige
Anzeige
Foto: joexx/Photocase

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 Frameworks 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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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 – Open Source 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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige