Es ist wieder Freitag und das heißt: #FrontendFriday! :)

Heute geht es um das Framework Bootstrap, welches der ein oder andere kennt, angewendet oder auch nur mal gehört hat.

Was ist Bootstrap?

Jeder möchte sich sein Leben einfach machen, deshalb gibt es auch Boostrap, welches ein Frontend-Framework ist. Es werden viele HTML- und CSS-Vorlagen bereitgestellt, um verschiedene Webseite-Elemente unterschiedlich darzustellen.

Hierzu gehören Formulare, Buttons, Tabellen, Navigationsleisten sowie ein Grid-System für Layouts. Über HTML- und CSS-Vorlagen hinaus ist es durch JavaScript-Module möglich, Interaktionen, wie z.B. Bilder-Slideshow, Tabs und Dialogboxen auf der Webseite einzubinden.

Bootstrap bietet alle Voraussetzungen, um responsive Design optimal zu gestalten, sei es für Desktop, Smartphone oder Tablet.

Ihr wollt wissen was Bootstrap an Layout und viele andere Features mit sich bringt, dann könnt ihr euch gerne die Dokumentation anschauen: https://getbootstrap.com/docs/4.3/getting-started/introduction/

Was ist jQuery?

Boostrap erleichtert die Arbeit eines Entwicklers in Sachen HTML und CSS. jQuery hingegen die JavaScript-Arbeit – es ist eine JavaScript-Bibliothek.

Es überbrückt technische Unterschiede verschiedene Browsern – ermöglicht komfortablen und kompakten Code, der im Vergleich zu reinem JavaScript häufig sehr viel kürzer ist.

Mehr zu jQuery: https://jquery.com/

Bootstrap verwendete für die JavaScript Modulen jQuery, jedoch nur bis Version 4.3

Warum verwendet Bootstrap 4.3 kein jQuery mehr?

Etwas was die Community wohl bereits länger diskutiert hat, war der Abschied von jQuery für die DOM-Manipulation (Document Object Model) bzw. -Navigation.

Bootstrap wird ohne jQuery auskommen und dies wird derzeit entfernt. Bootstrap ist nicht das erste Tool, das diesen Schritt geht, auch Ember und GitHub arbeiten bereits nicht mehr standardmäßig mit jQuery.

Der wichtigste Punkt hierbei ist: Schonen von Ressourcen auf dem Server!

Bye Bye jQuery – Hello Hugo.js

Bei Hugo handelt es sich um einen Static Site Generator, der in Go geschrieben ist. Hugo beschreibt sich selbst: world’s fastest static website engine.

Hugo zählt zu den Statischen Webseiten-Generatoren und kann ganz ohne weitere Hilfsmittel genutzt werden.

Aber warum nun Hugo.js?

Es handelt sich hierbei um einen statischem Webseitengenerator – Dies bedeutet, dass der Inhalt nicht jedes Mal neu generiert wird, sondern nur, wenn sich der Inhalt der jeweiligen Seite ändert.

Insbesondere ermöglicht es Hugo, dass nur diejenigen HTML-Dokumente der jeweiligen Webseite neu gebaut werden müssen, in denen Änderungen auftraten.

Hierdurch sollen die Ressourcen des Servers geschont und eine hohe Effizienz von diesem erreicht werden.

Mehr zu Hugo: https://gohugo.io/getting-started/

Fazit

jQuery hat viel Arbeit für den Frontend-Entwickler entnommen, vor allem, wenn man Einsteiger ist. Im Gegensatz zum reinem JavaScript war auch der Code häufig viel kürzer und lesbarer.

Um Ressourcen sowohl auf dem Server, als auch lokal beim Entwickeln zu sparen, sodass die Inhalte nicht immer wieder neu erstellt werden müssen, ist Hugo hierbei sehr Ressourcen- und Zeit-Sparender.