Durch Bibliotheken und Frameworks effizienter Arbeiten

Gute Programmierer sind in der Regel "faule" Personen, die sich die Arbeit intelligent erleichtern, um durch einen geringen Aufwand ein maximales Ergebnis zu erzielen. FĂŒr viele Probleme und Aufgaben gibt es schon vorgefertigte Algorithmen, die in den meisten FĂ€llen einfach zu erlernen sind und Dir enorm mit der Entwicklung von Webseiten und Programmen helfen können.

Der Fachbegriff dieser Hilfs-Algorithmen lautet Bibliotheken, oder Frameworks. Eine Bibliothek ist eine Sammlung von Unterprogrammen, Algorithmen oder Routinen, die fĂŒr verschiedene, gleichartige Anwendungen ausgelegt sind. Ein Framework ist eine Rahmenstruktur, die Du als Vorlage eines Programms verwenden kannst. Ein Framework kann zum Beispiel fĂŒr ein Spiel, oder eine Webseite nĂŒtzlich sein.

Wir zeigen Dir die besten und am meisten Verwendeten Bibliotheken und Frameworks im Web und erklÀren Dir die Anwendungsbereiche der einzelnen Hilfsprogramme.

jQuery

Viele Entwickler schĂ€tzen jQuery beim Erstellen von dynamischen Inhalten auf der Webseite. Einige Webentwickler möchten gar nicht mehr ohne jQuery Programmieren, da es die Skript-Sprache JavaScript mit allerlei Hilfsmitteln und Erweiterungen ergĂ€nzt, die sehr umstĂ€ndlich fĂŒr Projekte erstellt werden mĂŒssen.

Das Selektieren von Elementen im DOM wird zum Kinderspiel und ein AJAX-Befehl benötigt nur noch wenige Zeilen verstĂ€ndlichen Code, um weitere Inhalte vom Server nachzuladen. Sogar Asynchrone Befehlsketten werden durch Defferred-Objekte ermöglicht und können bei so manchen Problemen wahre Lebensretter werden, wenn der Code nicht auf einmal sondern nacheinander ausgefĂŒhrt werden muss.

Dank des No-Conflict-Mode kann jQuery in verschiedenen Versionen simultan auf einer Webseite aufgerufen werden. Dadurch können Àltere Skripte zusammen mit brandneuen im gleichen Kontext agieren. Das ist Notwendig, wenn eine Webseite neu erstellt wird und alte Skripte neben den Neuen jQuery-Algorithmen erhalten bleiben sollen.

Leider hinterlĂ€sst die Bibliothek einen kleinen Nachgeschmack: Es kann die Performance der Webseite enorm drosseln, wenn man sich als Entwickler nicht ausreichend informiert. Viele Funktionen, wie der .find()-Befehl können störende Ruckler bei Ressourcen-Schwachen Rechnern hervorrufen. Das kann dazu fĂŒhren, dass der Verbraucher die Webseite genervt vor Abschluss einer Conversion verlĂ€sst.

Allerdings ĂŒberwiegen die Vorteile gegenĂŒber den Nachteilen. Durch die Erleichterung vieler gĂ€ngiger Algorithmen und die Vereinfachung der Syntax und Logik ist jQuery eines der am hĂ€ufigsten anzutreffenden Bibliotheken im Web.

Solltest Du dennoch darauf bestehen Deine Web-Inhalte mit JavaScript zu dynamisieren, findest du viele Alternativen auf YouMightNotNeedJquery.com. Diese Ansammlung an Algorithmen ersetzen viele einfache jQuery-Befehle, die Du Dir nur kopieren und anpassen musst, um das gleiche Ergebnis zu erhalten.

Bootstrap

"Mobile First" sagt Google nicht nur, sondern schreit es mittlerweile lauthals raus. Der Suchmaschinen-Gigant meint damit, dass Webseiten die keine mobile Darstellung besitzen, weniger gut bis gar nicht auf den Suchmaschinen-Ergebnisseiten (SERPs) auftauchen. Dieses Verhalten wird einem Großteil der Surfer verschuldet, die mit Ihrem Smartphone Webseiten besuchen. Bereits Ende 2017 ermittelten Experten, dass Smartphone-Benutzer 80% der gesamten Web-Surfer im Jahr 2018 ausmachen werden.

Ein Webseiten-Betreiber möchte seine Inhalte nicht fĂŒr die verschiedenen Darstellungsformen getrennt voneinander verwalten. Im besten Fall sollen die Inhalte einmal aufbereitet und fĂŒr jedes GerĂ€t optimal dargestellt werden.

Hier kommt Bootstrap von den Entwicklern von Twitter ins Spiel. Dank der sogenannten Responsiven Gestaltung von Elementen passen sich diese immer an die Auflösung des Browser-Fensters an. Die Breite spielt eine GrĂ¶ĂŸere Rolle als die Höhe, da Elemente, die nebeneinander keinen Platz mehr haben untereinander platziert werden sollen, um den Inhalt in jeder Auflösung lesbar darzustellen.

Codepalm ist ebenfalls mobil einsetzbar. Falls Du gerade an einem Desktop-Rechner sitzt kannst Du die mobile Darstellung testen, indem Du Deinen Browser einfach kleiner einstellst. Du wirst merken, dass sich die Navigation verÀndert und die Sidebar unter den Inhalt anordnet. Alternativ kannst du auch in den Entwickler-Werkzeugen Deines Browsers ein mobiles GerÀt emulieren.

Bootstrap bietet nicht nur das responsive Verhalten, sondern liefert darĂŒber hinaus auch noch einige Inhaltselemente, wie Tabellen oder Slider, die Du fĂŒr Dein Web-Projekt verwenden kannst. In den Bootstrap Dokumentationen findest Du weitere Informationen und Anleitungen zum Einstieg der Verwendung von Responsiven Darstellungen.

FontAwesome

FontAwesome ist eine großartige, kostenlose Bibliothek fĂŒr Icons, die als Schriftart auf Webseiten verwendet werden können. Mit einer CSS-Datei und mehreren SVG-Bildern ist FontAwesome eine schlanke Alternative zu Bilder-Icons, wenn Du eine große Auswahl an Symbolen benötigst.

Dank vordefinierter CSS-Klassen kannst Du die Icons nicht nur als statische Objekte platzieren, sondern mit ein paar rudimentÀren Animationen versehen. Darunter gibt es die Möglichkeit mehrere Icons mit wenigen Zeilen Code aufeinander zu stapeln oder das Symbol als eine Lade-Animation drehen zu lassen.

Es finden sich nicht nur generische Icons in der Datenbank wieder, sondern auch Firmenlogos, wie Facebook, YouTube, Pinterest und viele mehr. Zusammen mit der "Stapeln"-CSS-Klasse kannst Du ein hochauflösendes Icon zu Deiner Fanpage erstellen. Hier ein Beispiel zur Fanpage von Codepalm:


	
	

Ergebnis:

Seitdem die Version 5.0 der Icon-Bibliothek erschienen ist gibt es sogar die Möglichkeit den Symbolen verschiedene Gewichtungen (Normal DĂŒnn und Fett) in der Pro-Version zu setzen. Die kostenpflichtige Version ist schon fĂŒr 60$ erhĂ€ltlich und bietet neben der Gewichtung weitere Icons-Sets und weitere Entwickler-Tools.

Weitere Informationen findest Du auf der Webseite von Font Awesome 5.0.

Templates und Plugins

Als Web-Entwickler einer Agentur möchte man dem Kunden schnellstmöglich das beste Ergebnis liefern. Das bedeutet, dass die Entwicklung relativ schnell abgeschlossen sein sollte, die Kosten sollten sich auf einem bezahlbaren Niveau befinden und vor allem sollte die Technologie der Webseite fĂŒr Langlebigkeit ausgerichtet sein.

Damit diese 3 Faktoren eingehalten werden können, kannst Du auf bereits erstellte Ressourcen zurĂŒckgreifen. Nein, Du "cheatest" nicht, wenn Du auf bereits existierenden Code zurĂŒckgreifst. Du vereinfachst Dir Deine Arbeit und stellst Deinen Kunden zufrieden, indem Du ihm in der Rechnung eine kleinere Zahl vorlegen kannst, als andere Web-Entwickler.

Es gibt genau 2 große entscheidende Faktoren, die die Kosten einer Webseite in die Höhe treiben können: Das Design und die FunktionalitĂ€t. Und fĂŒr beide dieser Aspekte gibt es bereits vorgefertigte Ressourcen, die Du in vielen FĂ€llen fĂŒr wenig Geld kaufen kannst, wenn Sie ĂŒberhaupt etwas kosten sollten.

Ein Template ist ein in HTML und CSS umgesetztes Design, das als Vorlage fĂŒr eine Webseite, einen Newsletter oder Andere dient. Durch eigene CSS-Anpassungen kann der Entwickler die Corporate Identity (Firmenspezifische Stile wie Text und Bild) in das vorhandene Design implementieren. Eine große Quelle guter Templates findest Du auf Themeforest.net.

Durch Plugins (auch "Extensions" oder Ă€hnliches genannt), können mehr Funktionen zu einem Projekt hinzugefĂŒgt werden. Der Programmierer installiert und konfiguriert diese Erweiterungen, damit der Webseiten-Betreiber, oder dessen Redakteure sie verwenden können. Je nach Art Deines Projekts gibt es unterschiedliche Quellen fĂŒr Plugins oder Extensions. Einige davon findest du hier:

Kennst Du noch weitere gute Quellen fĂŒr Code-Snippets? Hinterlasse mir einen Kommentar!

Phaser.io

In der Spiele-Programmierung im Web greift man gerne auf Frameworks zurĂŒck, die neben einfachen Eingabemöglichkeiten eine Physics-Engine, vordefinierte Klassen und einen Renderer fĂŒr das Canvas verwenden. In den letzten Jahren stach dabei das Framework Phaser.io aus der Masse hervor.

Zu den Standard-Eigenschaften, die ein modernes Game-Framework besitzen sollte bietet Phaser.io ein einstellbares Kamera-Objekt, die Möglichkeit das Spiel Cross-Plattform-FĂ€hig zu erstellen und ein Plugin-System um weitere nĂŒtzliche Drittanbieter Skripte hinzuzufĂŒgen. Bei der Portierung auf mobile GerĂ€te hilft PhoneGap.

Fortgeschrittene Benutzer schĂ€tzen auch die Möglichkeit den Core des Frameworks ĂŒber GitHub immer auf den aktuellstem Stand zu halten. Zum aktuellen Stand wurde der GitHub-Code schon weit ĂŒber 5.000 Mal geforkt.

Das Framework hat einen entscheidenden Vorteil gegenĂŒber der Konkurrenz: Ein Partikel-System. Die meisten Game-Frameworks beinhalten zwar sehr gute Rendering-Möglichkeiten, jedoch ist Phaser.io eines der wenigen, die ein sehr starkes Partikel-System mitliefern.

Solltest Du Dich noch gar nicht in der Spiele-Programmierung auskennen kannst Du Dir unsere Beitragsreihe Grundlagen der Spieleprogrammierung im Web ansehen. In diesem Beitrag erklĂ€ren wir Dir Schritt fĂŒr Schritt die wichtigsten Grundkenntnisse in der Spiele-Entwicklung. Im Artikel verwenden wir noch kein Framework oder Canvas, da wir der Meinung sind, dass Einsteiger vor dem "richtigen" Erstellen eines Spiels zuerst die Basics und vor allem die Loop verinnerlichen sollten.

 

Es gibt unzĂ€hlig viele Frameworks und Bibliotheken, um Dir bei der Erstellung Deiner Webseite oder Deines Programms zu helfen. Die oben genannten Beispiele sind nur wenige, aber dafĂŒr sind sie sehr einfach zu erlernen und extrem nĂŒtzlich in den verschiedenen Anwendungsgebieten.

Kennst Du noch weitere sehr nĂŒtzliche Frameworks fĂŒr das Web? Hinterlasse uns einen Kommentar mit Deiner Empfehlung und Deinen Erfahrungen!

 

Codepalm
Deine erste Webseite programmieren
Teil 3: Die Arbeit mit Erweiterungen erleichtern