Frontend-Tools bei 1000°DIGITAL

Für Web- und Software-Entwickler gibt es im Frontend-Bereich eine Breite Auswahl an Frameworks, mit denen Software entwickelt werden kann.

Gefühlt kommen alle 2 Monate neue Möglichkeiten hinzu, mit denen wir einzelne Workflows, und somit auch das Endprodukt verbessern können.

Hier ein neues CSS-Framework, da ein neues Bundling-Tool, und auf jeden Fall immer wieder ein neues JavaScript Framework.

New York is so cool for programmers, they even have this sign that keeps track of how many JavaScript frameworks are out there: pic.twitter.com/NLe2mMEEvs

— @Nick_Craver@infosec.exchange (@Nick_Craver) July 15, 2017

Oft ist die Versuchung groß, sich alles Neue anzuschauen und zu testen, ob es einem wirklich hilft. Oftmals fehlt dazu allerdings die Zeit, was aber nicht schlimm ist, da man bereits nach relativ kurzer Zeit feststellen kann, was sich weltweit so durchsetzt, und wo die Community beim Wachstum hilft.

1000° ♥ VueJS

Die wohl größte Entscheidung, die wir firmenintern für einheitliche Software-Entwicklung getroffen haben, ist wohl auf Vue (gesproche /vjuː/, wie englisch „view“) zu setzen.

VueJS zählt als eines der am schnellsten wachsenden JavaScript Frameworks aller Zeiten. Und das nicht ohne Grund: Es ist schnell, es ist einfach zu lernen, und jeden Tag kommen mehr Erweiterungsmöglichkeiten hinzu.

Seine Popularität kann man sicherlich langsam mit der von jQuery vergleichen.

Wir setzen Vue mittlerweile in etlichen Software-Projekten ein; sogar unsere Website haben wir mit Vue umgesetzt.

Auch die Entwicklung geht rasant voran. Nicht mal ein Jahr nach Release von v1.0.0 erschien schon v.2.0.0 mit etlichen Neuerungen und Optimierungen.

Wir bei 1000° lieben Vue und entwickeln damit individuelle, professionelle Software-Lösungen für jeden Bedarf.

Immer NextGen

Programmieren macht natürlich nur dann am meisten Spaß, wenn immer die neuesten Kniffe und Standards verwenden werden können. Leider ist das durch unterschiedliche Browser/-Versionen nicht möglich, da nicht immer jede neue Technik auch von allen Browsern sofort unterstützt wird.

Hierzu ein Beispiel:

CSS Grid

Vielen dürfte bekannt sein, dass spätestens seit dem enormen Erfolg von Twitters Bootstrap fast jede Website auf einem sogenannten Grid basiert. Das bedeutet, das Layout wird in Spalten aufgeteilt. Somit hat man zb. insgesamt 12 Spalten zur Verfügung, und die einzelnen Elemente verteilen sich darauf; z.B. kann eine Sidebar 4 Spalten einnehmen, und der Inhaltsbereich die restlichen 8. Auf dem Tablet nimmt die Sidebar dann 5 Spalten ein, der Content 7, und auf dem Smartphone nehmen beide jeweils 12 Spalten ein, und werden nichtmehr nebeneinander sondern untereinander angeordnet.

Soviel zum Hintergrund.

Ein solches Grid ist in der Programmierung immer mit etlichen „Hacks“ verbunden. Das bedeutet, man muss tricksen, um in allen Browsern ein einheitliches Ergebnis zu erhalten. Und selbst das ist nicht immer optimal.

Das wissen natürlich auch diejenigen, die für die Einführung von Standards in der Programmierung verantwortlich sind, und wollen uns Entwicklern dabei unter die Arme greifen, indem Sie neue Standards ankündigen, die in der Zukunft in alle Browser implementiert werden sollen.

Wie lange das dauert hängt leider immer vom jeweiligen Browserentwickler ab.

So wurde z.B. schon 2012 ein Vorschlag eingereicht, mit dem man Grids via CSS recht einfach umsetzen kann. Dieser Vorschlag hat so seine Runden gedreht, und wird nun langsam aber sicher von den Browserentwicklern übernommen.

Mittlerweile unterstützen sogar alle Browser CSS Grid, Microsofts Edge ab der nächsten Version 16 auch voll.

Ähnlich sieht es mit JavaScript aus. Dort gibt es immer wieder neue Standards, die mit kommenden Browser-Versionen verfügbar sind.

So lange will der Entwickler aber nicht warten. Muss er zum Glück auch nicht. Denn dafür gibt es Compiler. „Com… was?“ – Compiler. Diese dienen dazu, dass der Entwickler Code von Morgen schreiben kann, und der Compiler schreibt diesen Code für die Browser von heute um.

Für JavaScript gibt es da babel und für CSS PostCSS. Der Entwickler muss sich damit nichtmehr mit Fragen rumschlagen, wie „Unterstützt denn Browser XY diese Funktion?“. Der Compiler sorgt schon dafür.

Getestet werden muss natürlich trotzdem, denn besonders alte Browser schaffen auch nicht alles.

Aber Compiler verkürzen die nötige Testzeit enorm.

Tools zur Workflow-Optimierung

Werfen wir einfach mal ein paar Namen in den Raum: Gulp, Webpack, Sass, Yeoman.

Das wohl am meisten genutzte Frontend-Tool, welches fast alles andere beinhaltet ist bei 1000°: Gulp. Gulp ist ein sogenannter Taskrunner, basierend auf NodeJS.

Wie die Bezeichnung „Taskrunner“ schon sagt: er arbeitet Aufgaben ab. Aufgaben, die enorm viel Zeit in Anspruch nehmen würden, würde der Entwickler sie immer wieder von Hand ausführen müssen.

Kleines Beispiel: Wir entwickeln eine Vue-App. Vue benötigt Babel, um in aktuellen Browsern zu funktionieren. Außerdem hat Vue den großen Vorteil, dass man den Code in *.vue-Dateien schreiben kann. Diese sind in einen HTML-Teil, einen JavaScript-Teil und einen CSS-Teil aufgeteilt. Das kann kein Browser verarbeiten, also brauchen wir Webpack um diese *.vue-Dateien in reguläres JavaScript zu konvertieren und das CSS in eine eigene Datei herauszulösen.

Gulp ist nun dafür zuständig, zum einen die Vue-Dateien zu überwachen und zu verarbeiten, sobald sich daran etwas ändert, zum andern muss es aber auch Änderungen an Sass-Dateien erkennen und diese in CSS umwandeln, wie auch SVG-Dateien in einer Datei verschmelzen, oder Template-Dateien wie Twig in HTML oder PHP umzuwandeln, oder, oder, oder…

Gulp macht so vieles. Wenn man es ihm sagt.

Unser Entwickler Lars verwendet für seine Projekte eine Vorlage, mit der er jedes Projekt schnell starten kann: kittn.

Kittn ist ein Yeoman-Generator, mit dem ruck zuck eine Startpunkt mit verschiedensten Tools für die Entwicklung zur Verfügung steht.

Fazit

Gerne geben wir bei Interesse einen tieferen Einblick in unseren Entwicklungsprozess.

Wir freuen uns natürlich über Fragen und Anregungen in den Kommentaren!