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 Anwenungsgebieten.

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