Guten!

Webentwicklung ist längst nicht mehr das, was es einst war: langweilig, angestaubt und oft auch nervig. Webentwicklung ist modern, unkompliziert und bereitet einfach viel Freude - nicht zuletzt durch viele nützliche Tools und Libraries, die in den letzten paar (oder sogar Paar) Jahren aufkamen.

Hier möchte ich nun einige dieser Helferlein (aka Heinzelmännchen) vorstellen, die ich persönlich nutze und sehr wertschätze. Und wer weiß - vielleicht kommt zum ein oder anderen Tool auch mal ein Tutorial.

Frontend

Twitter Bootstrap

Bootstrap von Twitter (ja genau, dieses Twitter!) ist inzwischen sehr bekannt und hat sich etabliert. Das Bootstrapteam bezeichnet Bootstrap selbst als "HTML, CSS, and JS framework for developing responsive, mobile first projects on the web" - und genau das trifft es ziemlich gut. Bootstrap ist ein modulares Frontend-Framework mit ziemlich vielen und dazu auch noch nützlichen Komponententen (z.B. Grids, Forms, Modal-Boxen oder aber auch ganze Navigationsleisten). Mehr möchte ich dazu auch gar nicht sagen - einfach mal auf der Bootstrap-Seite vorbeischauen.

Kube

Kube ist, ähnlich wie Bootstrap, ein HTML, CSS und JS Framework, allerdings viel kleiner - was nicht heißt, dass es nicht auch leistungsstark ist. Kube kommt von Haus aus mit einem sehr ansehnlichen Theme daher, das, wie bei Bootstrap, aber leicht angepasst werden kann. Ich verwende Kube sehr gerne für kleinere Projekte, weil es alles dafür benötigte bietet und wunderbar als Basis dient. Auch hier gilt: Einfach auf eigene Faust erforschen - die Webseite bietet eine sehr angenehme Dokumentation und viele Beispiele.

jQuery

jQuery ist ein JS-Framework. Genau genommen die wahrscheinlich längste Praline das wahrscheinlich verbreitetste (huh, das Wort sieht komisch aus) JS-Framework der Welt. jQuery bietet Möglichkeiten für DOM-Manipulation, ajax-Requests, Animationen, Eventhandling und eigentlich auch sonst alles, was das Herz begehrt.

Ember.js

Ember.js ist ein Frontend-MVC-Javascript-Framework (langes Wort), das in den meisten Fällen für Userinterfaces on-top einer RESTful-API verwendet wird. Dröseln wir den Begriff mal ein Wenig auf: MVC steht für Model, View, Controller. Huh? Stark vereinfacht erklärt: Models sorgen für die Daten (z.B. API), Views für das Aussehen und Controller für die Awendungslogik. Jede genauere Erklärung würde nun zu weit führen.

P.S. Ember.js verwendet jQuery für verschiedenste Aufgaben.

Bower

Bower ist ein Dependency/Package Manager ("A package manager for the web" - so bower.io) für Assets. Bitte, verurteilt mich nicht für diese nicht-ganz-korrekte Aussage, aber so lässt sich die Hauptaufgabe am einfachsten beschreiben. Bower hilft, Bibliotheken herunterzuladen und zu verwenden. Meiner Meinung nach ist Bower ohne Gulp (oder Grunt…) nur wenig sinnvoll - das ist aber, wie alles auf dieser Welt, abhängig vom Betrachter.

Gulp

Und damit sind wir auch schon bei Gulp. Gulp ist ein Buildsystem ("The streaming build system") für Assets, ähnlich wie Grunt - aber kleiner, schöner und mit mehr Sweg. Gulp baut auf node.js. Jedes Buildfile ist eine Javascript-Datei, die auf Methoden von Gulp und dessen Plugins zugreift. Gulp ist cool, weil es einfach viel Arbeit abnimmt. So kann man Gulp zum Beispiel ein Sass-Sheet zum Fraß vorwerfen geben und erhält am Ende eine CSS-Datei, die gleichzeitig auch noch minifiziert (bessere Übersetzung für minified parat? Schreib mir 'ne Mail!) und komprimiert ist, direkt im richtigen Ordner und wenn man möchte macht Gulp das auch noch vollautomatisch, sobald man die Sourcedatei ändert. Gäbe es noch Hexenverbrennung, wäre Gulp wohl nicht mehr so lebendig, aber zum Glück gibt es die ja nicht mehr.

Sass

Weil dem Mir keine gute Beschreibung für Sass einfallen möchte, zitiere ich einfach mal Wikipedia:

Sass […] ist eine Stylesheet-Sprache, die als Präprozessor die Erzeugung von Cascading Stylesheets erleichtert…

Das ist es, was Sass tut. Nein ehrlich, Sass ist genial. Mit Sass kann man endlich Variablen in Stylesheets verwenden. Man braucht nicht mehr mit hässlichen Selektoren rumfummeln, sondern kann die einzelnen Selektoren in der selben Hierarchie wie im HTML-Code anordnen. Sass biete sog. Mixins, grob gesagt Funktionen. Man kann Rechenoperationen ausführen. Sass lässt CSS-Eigenschaften von einem anderen Element vererben. Die Liste ist lang, auch ohne nur ein Wort dazu zu erklären. Einfach mal anschauen, Sass ist toll.

P.S. Ja, es gibt Alternativen. Nein ich mag LESS nicht. Ja, Sass hat mehr Sweg als LESS.

Backend

Vorab: Ja, ich mag PHP. Man könnte mich nun hassen oder es auch lassen (ha, Reim!) - das steht jedem frei.

PHP

Kurz und knapp: PHP.

node.js

Ebenfalls kurz und knapp: Javascript für den Server. Die längere Fassung: Node.js ist eine Plattform, die es ermöglicht, Javascript-Code serverseitig auszuführen. Im Hintergrund werkelt v8 (nein, kein achtzylindriger Motor :c), die Javascript-Engine, die Google für Chrome entwickelt hat und auch darin verwendet - und im übrigen sehr schnell ist. Node.js ist eventbasiert und setzt auf nicht-blockende Ein- und Ausgaben. Das ist natürlich toll, weil so alles ohne Probleme parael dazu (ich möchte mir damit keine Feinde machen, aber seien wir ehrlich: er sagt doch parael, oder?) ablaufen kann. Mehr will ich dazu auch gar nicht sagen.

P.S. Dieses Blog hier basiert auf node.js, genau genommen Ghost.

npm

npm ist der Package/Dependency Manager für node.js. Quasi alle Pakete, die man in node.js Anwendungen benutzt, werden über npm installiert.

Composer / Packagist

Composer ist ein Dependency Manager für PHP. Packagist das Haupt-Repository für Composer. Auf Packagist gibt es quasi alle Bibliotheken, Frameworks und den ganzen Rest, den man benötigt. Composer erlaubt es auch, ganze Projekte mit einem einzelnen Befehl zu erstellen (siehe z.B. Laravel oder Symfony).

Symfony (2)

Symfony bezeichnet zwei verschiedene Dinge:

Laravel

Laravel ist ein PHP-MVC-Framework für Web-Handwerker ("for Web Artisans"). Ich nutze Laravel seit Version 3.x, x > 1, wobei ich damals™ eher weniger davon begeistert war. Das lag zum einen an meiner damaligen Unerfahrenheit mit MVC-Frameworks, zum anderen an Laravel. Seit Version 4 hat Laravel allerdings stark aufgeholt - und bald soll auch schon der 5. Streich folgen, der sehr viele neue Features, z.B. Annotations, liefert. Aber darum soll es hier nicht gehen.

Laravel bietet sehr viele Features, auf die ich hier gar nicht eingehen kann und will. Die wunderschöne Homepage hilft gerne weiter.

Silex

Silex ist ein Micro-Framework für PHP, entwickelt von Fabien Potencier (der Symfony-Typ) und Igor Wiedler. Silex bietet im Grunde genommen nicht viel mehr als Routing und einen Dependency Container. Doch daraus lässt sich, besonders in Kombination mit Flint, einiges erreichen.

Slim

Slim ist, wie Silex, ein Micro-Framework. Nur noch eine Nummer kleiner. Fertig.

Twig

Die schönste PHP-Template-Engine der Welt. Die Syntax ist in großen Teilen von Jinja inspiriert. Twig bietet von Haus aus eine Sandbox (Variablen werden automatisch escaped) und die Möglichkeit, eigene Filter und Funktionen zu erstellen. Twig legt viel Wert auf Sicherheit und Geschwindigkeit - und scheint auch einen sehr guten Mittelweg gefunden zu haben.

Sonstiges

Github

Der Slogan beschreibt Github eigentlich ziemlich gut:

Build software better, together

Im Grunde genommen ist Github nur ein Git-Hoster. Nicht im Grunde genommen ist Github eine riesige Community von Entwicklern, die gemeinsam großartige Open Source Projekte bauen.

StackOverflow

Ein Q&A-Board (Question and Answer, Frage und Antwort, Question et Réponse, …). Frage stellen, Antwort bekommen oder aber auch einfach Frage lesen, antworten.

Google

C'mon, Google kennt doch wohl jeder.

Schluss aus, setzen sechs.

Bildquelle: Unsplash