Neue Skills müssen her

Da man in seiner Magento-Welt schnell gefangen wird, und in der täglichen Arbeit in Projekten wenig neue Technologien kennen lernt, wird es mal wieder Zeit für ein kleines Skill-Upgrade.

Leider kommt man sich schon extrem fortschrittlich vor, wenn man sich den WordPress-Code so ansieht. Wer hier Objekte findet, hat schon gut gesucht. Ich kommt aber ein wenig vom Thema ab. Jedenfalls liest man momentan immer wieder von coolen Features, Frameworks und Workflows, welche das Leben sehr viel leichter machen sollen.

Es ist halt nicht mehr in genug, einfach nur CSS zu schreiben – hier behaupten sich schon länger SCSS oder LESS. Dann liest man immer mehr von AngularJS aus dem Hause Google. Weiterhin drängt HHVM/Hack in den Markt – dort möchte man natürlich auch mitreden können und alles wenigstens mal ausprobiert haben. Also habe ich mir ein neues Projekt gesucht, in welchem nun die folgenden Technologien einsetzen werde:

Symfony 2

Für viele ein alter Hut und schon lange verfügbar – ich hatte allerdings bisher noch nicht das Vergnügen. Das soll sich nun ändern. Als mal über den Zend-Tellerrand hinausgeschaut und auf in eine neue Welt. So viel anders wird das wohl alles nicht sein – aber irgendwoher muss der Fame des Frameworks ja stammen. Einige Kollegen schwärmten schon öfter über das Stück Software.

Bootstrap 3

Einfach nur der Vollständigkeit halber hier genannt – natürlich schon sehr oft eingesetzt und einiges umgesetzt. Es gibt wohl sicher mittlerweile kaum jemanden, der noch nie mit Bootstrap gearbeitet hat.

jQuery

Genau wie bei vorigem Punkt, brauche ich hier sicher keinen zweiten Satz anfangen. Obwohl, wenn ich es genau nehme, sind meine jQuery-Skills auch noch nicht auf 100%. Nichtmal ansatzweise. Natürlich versteht man alles, aber da ist es wohl wie beim Fremdsprachen lernen: Lesen/zuhören geht leichter als Schreiben. So gibt es sicher für alles was man selbst so baut einen einfacheren Weg. Zumindest sollte jQuery in keinem Projekt fehlen.

LESS

Wie oben schon genannt, möchte ich mich nicht mehr durch einen riesen Berg von CSS-Selektoren kämpfen. Ich bin sicher kein Talent für saubere und möglichst elegante CSS-Dateien. Ich schreibe eigentlich meist alles unten drunter, was ich mir so ausgedacht habe. Falls das nicht so einfach geht, wird mal fix eine neue Klasse eingeführt. Ich bin zwar nicht sicher, wie gut mich LESS dabei unterstützen wird, das zu verbessern, aber wenigstens schreibe ich unterm Strich weniger und die Dateien werden sehr viel strukturierter.

Composer

Klar, kennt man. Und hat man auch sicher schon öfter eingesetzt. Allerdings habe ich noch kein Projekt komplett auf Composer aufgebaut, sondern nur erweitert. Bei code-x verwenden wir z.B. eine komplette Eigenentwicklung (basierend auf modman), da Composer irgendwie nicht so richtig in Magento zu integrieren ist. Hier gibt es zwar einige Ansätze, aber so wirklich cool war davon noch nichts was ich gesehen habe.

Bower

Für mich, bis vor zirka einer Woche, noch völlig unbekannt. Gut, ich bin jetzt auch kein Frontendentwickler – daher hänge ich sicher in den ein oder anderen Themen hinterher. Jedenfalls ist Bower ebenfalls ein Paketmananger. Die Besonderheit: Hier versammeln sich nur Frontend-Bibliotheken wie z.B. jQuery oder Bootstrap. So muss man die Quellen nicht mehr mit den Repo hängen, oder über irgendein Google-CDN integrieren, sondern kann diese ganz bequem per „bower install“-Kommando deployen. Cool – läuft jedenfalls super.

Node / npm

Tja, das wurde wohl wirklich mal Zeit. Irgendwie habe ich node bisher nur als Webserver wahrgenommen – da das Teil von so gut wie keinem Hosting-Provider aktuell unterstützt wird, hatte ich es relativ früh abgestempelt. Aber das war wohl ein Fehler – hinter dem Paketmananger npm (wow, schon der dritte im Beitrag) stecken jede Menge Möglichkeiten. So nutze ich in dem neuen Projekt diverse Pakete – dazu gehören zum Beispiel:

  • Grunt
  • JsHint
  • Uglify
  • Grunt-Watch
  • Grunt-less

Grunt

Der JavaScript Task-Runner wird auch immer populärer. Hier kann man verschieden konfigurierte Tasks regelmäßig ausführen. Zusammen mit Watch wird das Ganze zu einem wirklich genialen Entwicklungshelfer, welcher meiner Meinung nach (für manche Tasks) sogar einige kostenpflichtige Lösungen abhängt.

Für LESS-Kompilierungen bei Dateiänderungen hatte ich bisher CodeKit im Einsatz. Für kleinere Projekte wird das auch sicher beibehalten – einfach weil es schneller einzurichten geht. Aber für große Projekte, an denen man mit mehreren Entwicklern arbeitet, wird sich für mich sicher Grunt durchsetzen. Allein aus dem Grund, dass die Konfiguration mit in der Versionskontrolle liegt, und die IDE nicht von jedem Entwickler einzeln erneut konfiguriert werden muss – das führt auf Dauer eh nur zu Fehlern.

RequireJS

Wenn wir schon alles mit JavaScript zukleistern, dann wenigstens performant. Mit RequireJS definiert man im jeweiligen Kontext, welche JavaScript-Dateien denn wirklich gebraucht werden. Im Head bindet man am Ende nur noch eine JavaScript-Datei ein, und diese macht den Rest. Top!

Über

Jahrgang 87, gelernter Softwareentwickler und fast ein Jahrzehnt Erfahrung im Bereich Web-Entwicklung mit PHP und Web-Design. Diese Eigenschaften machen mich zu einem geeigneten und geschätzten Ansprechpartner für die Umsetzung Ihres Projektes. Weiterhin bin ich seit Ende 2013 Magento Certified Developer.

2 Kommentare


  • Klasse Zusammenfassung. In einem Magazin hatte ich auch von LESS und Sass gelesen – habe absolut noch keine Ahnung, was das eigentlich ist. Mit Bootstrap 3 werde ich demnächst auch mal arbeiten 🙂 viel wichtiger für mich ist es jedoch meine jQuery Skills auszubauen.

    Liebe Grüße
    Gitte

    • Naja, Bootstrap muss man ja nicht wirklich neu lernen – einfach nur einmal durch die „Components“-Sektion auf der Seite scrollen, und schon hat man einen Überblick, was wie funktioniert.

      In meinem „neuen Projekt“ nutze ich jedenfalls nur noch die LESS-Variante von Bootstrap. Diese wird dann mit einem Grunt-Watcher bei Änderungen automatisch kompiliert. So hat man nur noch eine große CSS-Datei (welche auch noch minified ist), anstatt zig CSS-Dateien einzeln zu laden. Extrem cool, wie ich finde.

Kommentar verfassen