Bower und Grunt

Auch in der Frontend-Entwicklung haben sich einige Technologien und Tools durchgesetzt. Hierzu gehören Bower und Grunt. In Kombination bieten beide Tools einen großen Mehrwert für jeden Entwickler.

Bower

Bower ist ein Paket-Manager, welcher hauptsächlich für Frontend verwendet wird (Javascripte, CSS, etc.). Bower kann hier über den Note-Package-Manager (NPM) installiert werden. Alle Infos können natürlich auch auf der Bower Website nachgelesen werden. Mit folgendem Kommando kann Bower installiert werden.

Danach sollte, sofern alles korrekt funktioniert hat, der Befehl „bower“ zur Verfügung stehen. Wenn ihr den Befehl ohne Parameter eingebt bekommt ihr hier die Help-Ausgabe mit allen verfügbaren Parametern und Optionen.


bower_commands

Einer der wichtigsten Befehle ist hier install. Mit dem install Befehl können nun neue Pakete in einem Projekt installiert werden. Hier ein paar Beispiele wie man Pakete installieren kann.

Während der Installation werden die Pakete im Ordner bower_components abgelegt und eine Datei bower.json erzeugt, sofern die noch nicht vorhanden ist. In dieser Datei befinden sich alle Module und Abhängigkeiten, sowie allgemeine Informationen.

Nachdem man sich nun alle benötigten Pakete in sein Projekt geladen hat kommt nun die Frage „wie binde ich das nun alles ein“. Klar man könnte nun hin gehen und alle JS-Dateien per Hand im HTML einbinden. Aber dies wäre ja langweilig. Hierfür nutzen wir Grunt und das Plugin grunt-bower-concat.

Grunt

Aber erstmal zu Grunt. Grunt ist ein Javascript Task-Runner. Mit diesem netten Tool ist es möglich sich eigene Tasks zu schreiben, welche verschiedene Aufgaben wie zum Beispiel Javascript-Minifying oder ähnliches übernehmen können.  Ihr fragt euch gerade vielleicht noch „warum brauche ich nun noch ein Tool“. Ganz einfach. Mit Grunt kann man allgemeine Aufgaben sehr gut vereinfachen und somit seinen Code aufräumen und schlanker machen, bevor man diese online stellt.

Auch Grunt kann hier über npm installiert werden.

Danach sollte der Befehl „grunt“ zur Verfügung stehen.

Bei einem neuen Grunt-Projekt spielen hier 2 Dateien eine größere Rolle. Einmal die Datei Gruntfile.js und die package.json. Die Datei Gruntfile.js ist um Grunt zu konfigurieren, neue Plugins zu laden oder neue Tasks zu erstellen.

Die Datei package.json ist hier hauptsächlich für npm um neue Module zu installieren, welche von Grunt genutzt werden können. Ein Beispiel package.json sieht wie folgt aus:

Die angegeben Module werden hier automatisch in den Ordner node_modules installiert und können dann von Grunt geladen werden und stehen zur bereit. Besonders interessant ist hier das Modul grunt-bower-concat, welches wir uns gleich noch genauer anschauen werden.

Grunt-Templates (Scaffolding)

Grunt-Init ist ein weitere Tool um aus bestehenden Templates ein Projekt zu erstellen. Ich möchte hier nun erstmal nicht weiter darauf eingehen, da wir dies hier erstmal per Hand machen. Wen dies interessiert der kann sich hier weitere Informationen holen.

Grunfile.js (Konfiguration)

Damit die Tasks von Grunt gefunden und ausgeführt werden müssen diese, wie schon erwähnt, in der Konfigurations-Datei angelegt und geladen werden. Hier zeige ich euch nun mal meine Datei, für ein kleines Projekt um dies ein wenig anhand des Beispiels zu erläutern.

Die Konfiguration teilt sich hier in die folgende Teile auf:

Unter dem Bereich initConfig werden Optionen zu den einzelnen Modulen konfiguriert. Für „grunt-bower-concat“ wird hier beispielsweise angegeben wo die fertige Datei am Ende hin geschrieben werden soll (dest, cssDest).

Mit loadNpmTasks können die in der package.json angegeben Module geladen werden. Zuletzt müssen diese noch Registriert werden, damit Grunt die Pakete korrekt und in der richtigen Reihenfolge ausführt.

Das war es für den Anfang eigentlich schon.

Grunt-Bower-Concat

Dem einen oder anderen sollte ggf. schon klar sein was das Modul am Ende tut. Grunt-Bower-Concat schaut am Ende nach welche Pakete installiert sind und sucht sich hier die Javascript- und CSS-Dateien automatisch zusammen und packt diese zu EINER Datei zusammen. Dies ist sehr praktisch, da man dadurch sehr viele Requests einsparen kann und mit dem Minifying die Dateien auch direkt noch kleiner bekommt.

Ein kleiner Tipp am Rande: Man sollte hier ein bisschen aufpassen was man so installiert, da die fertige Datei „bower.min.js“ unter Umständen sehr groß werden kann. Hier sollte man auch regelmäßig aufräumen.

Als letztes werden hier noch die JS- und CSS-Dateien komprimiert um eine bessere Performance zu erhalten. Es gibt noch sehr viele andere Möglichkeiten wie man Grunt nutzen kann. Ich denke hier lohnt es sich einfach ein bisschen auf der Website rum zu schauen und sich ein bisschen inspirieren zu lassen.

Fazit

Ich persönlich finde Grunt und Bower sehr hilfreich, da beide Tools einem viel Arbeit abnehmen und man auch schnell „mal eben“ neue Libs ausprobieren und installieren kann.

Magento Sicherheitslücken beheben

Immer wieder kommt es bei Magento, wie aber auch anderen System zu Sicherheitslücken. Diese sollten schnellstmöglich, sofern vorhanden, durch einen Patch behoben werden. Leider kommt dies meist viel zu kurz oder die Systeme sind gar nicht mehr update fähig. Sehr oft hört man auch die Aussage

Es ist ja bisher auch nichts passiert!

Oder:

Meine Seite ist doch viel zu klein!

Meistens kommen solche Angriffe übrigens, die meisten auf mittelständische Unternehmen, auch nicht angemeldet und treffen einen genau dann wenn man es überhaupt nicht gebrauchen kann. Hier sollte auf jeden fall mehr Sorgfalt an den Tag gelegt werden. Meistens sind die Konsequenzen weitreichend und sehr nervig zu beheben. Ist ein Shop erstmal kompromittiert ist es ohne Backup oder Versions-Kontrolle fast unmöglich diesen wieder einwandfrei herzustellen, geschweige denn ist die Sicherheitslücke. Man müsste hier in fast jeder Datei mit Schadcode rechnen.

Zudem sollte man hier auch beachten, dass die meisten Angreifer hier automatisierte Systeme haben, welche das Web durchsuchen und die Shops auf Sicherheitsprobleme testen und diese direkt ausnutzen.

Ihr Magento-System sollte daher regelmäßig auf Updates geprüft werden. Dies kann man recht einfach im Update-Manager durchführt werden. Diesen Findet man im Backend unter dem Punkt:

System -> Connect Manager -> Magento Connect Manager

Magento Connect Manager

Wenn man alles updaten will kann man hier den Punkt Mage_All_Latest verwenden, welcher alle Pakete updated. Wie man hier an den gelben Balken sehen kannst habe ich mein Testsystem schon etwas länger nicht mehr geupdated, wo diese Funktion sehr hilfreich ist.

Message-Center (Posteingang)

Im Magento Message-Center werden auch schon wichtige Informationen zu wichtigen Updates angezeigt. Diese sollten wirklich ernst genommen werden und schnellstmöglich installiert werden.


Magento Message Center

Einzelne Patches können hier weiter unten auf der Seite runtergeladen und mit Hilfe von „patch“ eingespielt werden.

Als Beispiel:

Hierfür wird natürlich der Patch-Befehl benötigt.