Anfang des Jahres wagte unser Entwickler Christopher Voigt einen Ausblick auf die Webtrends 2017 – von Programmiersprachen und Frameworks, speziell aus der Frontend-Entwicklung, bis zum Design fasste er für uns queos interessante Neuerungen zusammen, die auf uns alle zukommen würden – nicht nur auf Programmierer, sondern jeden Internetnutzer.

Und so verging das erste halbe Jahr wie im Flug – umso schneller in einer so dynamischen Branche wie der Software- & Webentwicklung, die sich ständig den neuesten Gegebenheiten stellen muss. Pünktlich zur Jahresmitte möchten wir uns die Zeit nehmen, nicht nur in die Zukunft zu schauen, sondern auch ein Resümee zu wagen und uns die Frage zu stellen: Was wurde eigentlich aus dem prophezeiten Webtrends 2017?

Im ersten Teil des Interviews sprechen wir über verschiedenste Trends in der Programmierung und was das für den Entwickleralltag bedeutet.

 

Chris, eine ganze Menge Trends hast Du zu Beginn des Jahres identifiziert. Fangen wir mal bei den technologischen Fortschritten  der Programmiersprachen an. Dort gab es Ende 2016 einige Neuerungen, wie zum Beispiel  HTML 5.1. Welche Änderungen ergeben sich aus dem Update für die Programmierung und welche neuen Möglichkeiten bietet das Update für die Nutzer? 

Grundsätzlich ändert sich ab HTML 5, dass jedes Jahr ein Update herausgebracht werden soll. Seit diesem Jahr gibt es außerdem eine Liste mit Elementen, aus der viel besser herausgelesen werden kann, welche Funktionen von welchem Browser bereits unterstützt werden. Diese Liste wird dann nach und nach erweitert. Als Beispiele für solche Funktionen könnten Neuerungen im Kontextmenü mit den Elementen Menü und Menüitem dienen. Die finale Spezifikation muss in mindestens zwei aktuellen Browsern funktionieren, um in die Liste aufgenommen zu werden.

Erwähnenswert ist auch das neue Picture-Element, in dem source-Elemente enthalten sind. Hier ist ab sofort erlaubt, mehrere Bildquellen anzugeben und nicht nur eine. Kein Nutzer muss also mehr ein HD-Bild auf sein Smartphone herunterladen, wenn ein Bild in kleiner Auflösung für den Zweck vollkommen ausreicht.

Was im Zuge der Veröffentlichung von HTML 5.2 noch hinzukommt, ist das Meta-Element für die Theme Color. Der Header wird dann in einer anderen Farbe angezeigt – passend zum Website-Design. Das kennt man aktuell von Googles Browser Chrome.

 

Die Vorteile von Less  als CSS-Präprozessor machen wir uns schon lange in unseren Web-Projekten zu Nutze. Der Trend geht zu Sass , nicht zuletzt aufgrund der Version 4 von Bootstrap, in der Sass als Haupt-Präprozessor Verwendung findet. Inwiefern stellt Sass eine Weiterentwicklung dar?

Sowohl Less als auch Sass erweitern den normalen CSS-Standard. Diese Präprozessoren fügen Variablen, Prozesse und Logikelemente zu CSS hinzu und vereinfachen damit bei Verschachtelungen das Codemanagement – dies kann die Arbeit durchaus stark beschleunigen. Sass kam allerdings vor Less auf den Markt, sodass nach der Veröffentlichung von Less ein regelrechter Hype entstand. Aktuell unterscheiden sich die Präprozessoren nicht mehr maßgeblich, sodass sich der Trend wieder mehr zu Sass entwickelt.

Langfristig ist es absehbar, dass Less und Sass überflüssig werden könnten und CSS diese Standards selbst abbildet. Einen ersten Schritt hat CSS dieses Jahr bereits getan, indem es die calc-Funktion und vor allem den Support von Variablen, sogenannte Custom Properties, eingeführt hat.

 

Kaffee ist wohl ein Trend unter Developern, der nicht so schnell überholt wird. 😉

 

Was JavaScript bzw. den standardisierten Teil ECMAScript betrifft, wurde ES7 im Juni 2016 verabschiedet und es ist für Mitte diesen Jahres die Version 8 geplant. Kann man schon vorher abschätzen, was diese Updates bedeuten?

ECMAScript 2015 – kurz auch ES6 – wurde ja bereits 2015 veröffentlicht. Die Versionbezeichnungen verwirren manchmal etwas. In diesem Update waren große Sprachumstellungen vorhanden. Der Code bestand fast schon aus einer völlig anderen Sprache, die nicht direkt JavaScript  war und nicht unbedingt browserverständlich ist. Dafür nutzen wir die Compiler babel.js, die den Code in den gewohnten JavaScript-Code übersetzt. Aber das wird hoffentlich mit dem nächsten Update ECMAScript überflüssig. So unterscheidet sich die Definition von Variablen und weitere Funktionen und vor allem Modulen.

Im letzten Jahr, also 2016, wurde dann ES7 verabschiedet, bei dem es, im Vergleich zum Jahr davor, nicht ganz so gravierende Änderungen gab. Dort gab es nur ein paar neue Features. So kann man nun die Funktion include nutzen, die  überprüft ob eine Zeichenkette gewisse Teile enthalt. Vorher musste man mit index > 0 kontrollieren, ob das Zeichen enthalten ist.

Außerdem wurde ein Exponentenoperator eingeführt, das doppelte Sternchen, also **.

ES8 soll dann dieses Jahr veröffentlicht werden. Hier erwarten wir ein Update zur asynchronen Programmierung, in dem die Schlüsselwörter async und await eingeführt werden. Unübersichtlicher Code mit Callbacks und Promises gehören dann der Vergangenheit an.

 

Die Programmierung mit TypeScript ist ebenfalls ein Trend-Thema. Welche Vorteile bringt die Sprache für die JavaScript-Programmierung?

TypeScript erlaubt die Entwicklung von JavaScript-Code mit Klassen, Interfaces und Vererbung. Ein entscheidender Vorteil, der sich bereits in einigen großen Projekten bewährt hat, ist das statische Typensystem. Mittels der Typisierung wird schon in frühen Phasen der Entwicklung sichtbar an welchen Stellen Probleme aufgrund nicht kompatibler Typen auftauchen.

Die Erstellung eigener Typen mittels Interfaces macht den Quellcode übersichtlicher und lesbarer. Obendrein lässt sich der Vorteil der automatischen Code-Vervollständigung in modernen IDEs nicht von der Hand weisen.

 

Als weit verbreitetes JavaScript-Framework hast du Angular genannt. Ein großes Thema ist dabei die übersprungene Version 3. Wie kam es zu der Versionshistorie? Warum der Versionssprung?

Während der Entwicklung der Version 2 wurde der Router nach anfänglichen Schwierigkeiten neu unter Version 3 entwickelt. Am 14.09.2016 wurde die finale Version 2 veröffentlicht. Um alle Paketversionen zu vereinheitlichen, wurde im Dezember die Entscheidung getroffen, die Version 3 zu überspringen. Die Version 4 wurde daraufhin für März 2017 angekündigt.

 

Was hat sich in Angular (Version 2+) gegenüber der Vorgängerversion AngularJS (1.x) geändert?

Angular ist von Grund auf neu und nun mit TypeScript geschrieben. TypeScript unterstützt die Spezifikation ES6 und bereits Teile der ES7 wie zum Beispiel Dekoratoren, die in Angular vielfach verwendet werden. Mittels TypeScript Compiler und Browser Polyfills wird die Unterstützung älterer Browser wie zum Beispiel IE10 gewährleistet.

 

Was Paketmanager betrifft, gab es in letzter Zeit viele Änderungen. Aktuell wird unter den queo-Entwicklern npm favorisiert und Bower eher nicht mehr genutzt. Du hattest yarn als Alternative vorgestellt. Welche Entwicklungen sind hier zu erwarten?

Bower und yarn sind letztendlich Erweiterungen von npm , die die größte JavaScript Package Registy – also Paketbibliothek – überhaupt ist. Bower reduziert diese Menge lediglich auf Frontend-Komponenten. Zeitfressend ist dabei, dass man eine eigene bower.json-Datei pflegen muss.

yarn hat keine eigene Registry und nutzt die von npm, da dort die meisten Frontend-Ressourcen bereits verfügbar sind. Noch ein Vorteil von yarn ist, dass es eine lokale Bibliothek anlegt, wenn es ein Paket einmal installiert. Wenn man es einmal heruntergeladen hat, muss man es also nicht jedes Mal anfragen, wenn man es benötigt, sondern kann das aus der Bibliothek benutzen. So kann man es im Zweifelsfall auch ohne Internet installieren und das macht die Arbeit mit yarn schneller.

Ende Mai 2017 wurde npm5 veröffentlicht. Ab dieser Version legt npm ebenfalls eine Logdatei der Pakete und deren Abhängigkeiten an. Zudem wurde auch der Installationsprozess der Module optimiert und beschleunigt.

Im direkten Vergleich ist yarn jedoch immer noch etwas schneller, bietet allerdings keinen großen Mehrwert mehr, da nun eventuell eine yarn.lock und eine package-lock.json im Projekt vorhanden sind. Da npm sicherlich nicht so schnell zu vertreiben ist, könnte yarn eher wieder zum Nischen-Manager werden.

node.js ist eine Technologie, die es erlaubt auf der Konsole JavaScript auszuführen ohne den Browser zu benutzen.  Zudem ist es vergleichsweise einfacher, damit einen lokalen Server zu erzeugen, als bspw. erst Apache oder XAMPP aufsetzen zu müssen.

Somit eignet es sich sehr gut als Schnittstelle oder Brückentechnologie. Ein weiterer Vorteil von Node gegenüber anderen Servern ist, dass es sehr klein ist und bei cloudbasierten Anwendungen weitverbreitet ist. Wie sehr sich das in diese Richtung weiterentwickelt, kann ich aktuell nicht voraussehen. Aber aus der Frontendentwicklung und den Package-Managern ist Node nicht wegzudenken und das wird auch sicherlich so bleiben.

Wir suchen einen Web Developer (m/w)!
Du baust mit Leidenschaft und Erfindergeist Baupläne für begeisternde Webauftritte? Du möchtest nicht nur nach Vorschrift programmieren, sondern durch eigene Ideen den konzeptuellen Feinschliff liefern? Mit Liebe zum Detail baust du clevere Lösungen - individuell und User-optimiert - ohne den Blick für das große Ganze zu verlieren? Dann nichts wie auf zu queo!

Du hattest die Entwicklertools Sublime Text, Visual Studio Code und Atom als kommende Coding-Werkzeuge aufgezeigt. Wofür sind sie geeignet und was macht sie so besonders?

Bei den genannten Tools handelt es sich um Quelltext-Editoren, die mit einer gewissen Basis ausgestattet sind, aber sich über Plug-Ins und Module erweitern lassen. Das ist ein Vorteil im Frontend-Umfeld, wo es unzählige Pakete und Bibliotheken gibt und alle eine gewisse Unterstützung bieten können, meistens über Plug-Ins und Code-Highlighting. Die Entwicklungsumgebung kann also individuell an die Erfordernisse des Projekts angepasst werden und bleibt aber im Grunde ein kleines Tool.

IntelliJ bietet viele IDEs (integrated development environments) an, wie WebStorm oder PHPStorm. Die IDEs haben eine vordefinierte Richtung und lassen sich auch in einem gewissen Umfang erweitern.

Wenn man aber mit Konsolen und Git-Tools arbeitet, ist nicht alles in einem Programm integriert aber es ist hochkonfigurierbar und lässt sich mit allen möglichen Plug-Ins erweitern. Somit entfällt der Einrichtungs- und Lernaufwand. Bei der Arbeit ist man mobiler, da man nicht an ein Gerät gebunden ist  – das ist der große Vorteil gegenüber IDEs.

Welche Tools man benutzt ist wohl persönliche Präferenz – alle drei sind sehr gut und eignen sich für verschiedene Zwecke.

 

Kannst Du uns einen Ausblick auf den zweiten Teil des Interviews zum Thema Webtrends geben?

Im zweiten Teil gehe ich auf  Trends ein, die nicht nur den Entwickler, sondern auch den Internetnutzer direkt tangieren: Neuerungen bei Google, Mobilfreundlichkeit und entsprechendes Webdesign. Das ist also auch ein sehr spannendes Thema!

 

Ich danke Dir für das Interview und freue mich auf den zweiten Teil!

 

Diskutieren Sie mit!

Alle mit einem markierten Felder sind Pflichtfelder und müssen ausgefüllt werden