Die Angst um das Ende von React bringt alte Bekannte zurück: Angular vs. Vue.js vs. Ember

Die Angst um das Ende von React bringt alte Bekannte zurück: Angular vs. Vue.js vs. Ember

Python, JavaScript, PHP, Java, C# – die Wahl der richten Programmiersprache und der passenden Frameworks stellt für Entwickler in manchen Augenblicken die Qual der Wahl dar. So gibt es für unterschiedliche Anforderungen und Schwerpunkte bestimmte Sprachen und Programme, die dafür am besten geeignet sind. Nichtsdestotrotz existieren einige Top-Acts, die die Liste anführen. So hat IT-Gigant IBM JavaScript zur besten Erlern-Programmiersprache 2017 gekürt.
Doch auch da ist die Auswahl für Frameworks riesig. Nachdem nun React für manche mehr oder weniger abgehakt werden kann – siehe dazu unseren letzten Blogbeitrag – wollen wir euch nun drei Alternativen dazu vorstellen. Diese lauten Angular, Vue.js und Ember.

Wer sind sie?

Alle drei Frameworks sind clientseitig, basieren auf dem MVVM (Model View ViewModel) Model, werden für das Erstellen von SPAs (Single Page Applications) verwendet und sind (mehr oder weniger) in JavaScript geschrieben. Angular wurde von Google entwickelt und gehört mit seiner Vorgängerversion AngularJS zu den am meisten verwendete JS Framework für SPAs. Angular 2 ist in Typescript geschrieben, das auf JavaScript, Java und C# basiert. Seit Ende März ist Version 4 auf dem Markt. Vue.js ist ein relativ junger Newcomer, der vorgibt, das Beste aus Angular und React herauszuholen. Ember wurde 2015 als das beste JavaScript Framework angepriesen und findet zum Beispiel bei Netflix, Yahoo und LinkedIn Verwendung.

Was können sie?

Bei allen drei Frameworks fällt durch das MVVM die Controller Einheit weg und es wird stattdessen eine Verbindung der Darstellungs- und Logikebene hergestellt. Interaktionen können so schneller und einfacher umgesetzt werden. Angular wird vor allem aufgrund der Einfachheit der Nutzung von den Entwicklern präferiert. Es kann somit mit WordPress‘ Konzept verglichen werden – sehr einfach zu verwenden, aber in der technischen Umsetzung nicht so extravagant. Bei Vue.js lag der Fokus darauf ein schnelles und schlankes Frontend Framework zu entwickeln. Ähnlich wie bei React wird hier eine virtuelle DOM Implementierung genutzt, die die Rendering Geschwindigkeit und den Speicherverbrauch laut Entwicklern um bis zu das Vierfache verbessert haben soll. Vue.js lässt ebenso dem Programmierer die Wahl zwischen Templates und JSX/Hyperscript. In Version 2 gibt es zusätzlich eine Redone-Rendering Schicht, die für eine bessere Performance sorgen soll. Ebenso ist das Framework mit der neuen Version auch (besser) auf die Entwicklung von mobilen Apps ausgerichtet. Ember folgt dem DRY Prinzip und ist nach dem Grundsatz data down, actions up aufgebaut. Das Framework nutzt Web Compoments, und will langfristig die Controller und Templates durch diese ersetzen.

Wie gut sind sie?

Angular stellt die beste Option für Unternehmensbasierte Apps und Programmierlandschaften mit hohen Lesbarkeits-Standards dar. Die bessere Wahl für die schnelle Entwicklung von betriebssystemübergreifenden Lösungsansätzen ist jedoch Vue.js. Das Framework punktet zudem durch eine einfache Handhabung. Ember wird demgegenüber vornehmlich für komplexe Webapplikationen und Websites mit vielen Features verwendet. So sind dynamische Apps und Websites bei Ember gut aufgehoben. Es ist das Framework, das einen, wenn man es verstanden hat, dazu befähigen kann, sehr produktiv zu sein. Jedoch heißt dies, dass die Lernkurve auch sehr hoch ist und es somit gleich zu Beginn viel zu lernen gibt.

Fazit

Alle drei Frameworks können zwar als Konkurrenten angesehen werden, jedoch besitzt keines davon einen signifikanten Vorteil gegenüber den anderen. Alle besitzen die gleiche Grundlage – sie sind ein JavaScript Framework. Das bedeutet im Endeffekt mehr Effizienz, Sicherheit und weniger Kosten als ohne Framework. Egal ob durch Angular, Vue.js oder Ember – Programmierarbeiten können zeitsparender und strukturierter umgesetzt werden und haben gleichzeitig bessere Sicherheitsbestimmungen. Zudem sind alle Frameworks Teil einer Open Source Software – und anders als React von Facebook – auch wirklich frei zugänglich.

Ist das das Ende für React?

Ist das das Ende für React?

Die JavaScript Bibliothek React von Facebook gehörte bisher zu den beliebtesten Tools zur Erstellung von interaktiven Websites. Jetzt kann React den Programmierern jedoch zum Verhängnis werden. Denn die Lizenz-Situation und Nutzungsbedingungen des eigentlich als Open Source ausgelegten Tools sind heikel geworden. Zu Open Source gehören Softwares, deren Quelltext öffentlich eingesehen, genutzt und verändert werden darf. Eigentlich.

 

Was steckt dahinter?

React, welches erstmals 2013 mit einer Open Source Software herausgegeben wurde, dient dazu, Anwendungen sehr flüssig darzustellen, selbst bei großen Datenbanken. Der Vorteil von React ist, dass dort ein virtuelles DOM vorliegt, welches einfacher zu manipulieren ist und die Bibliothek so in der Lage ist, Interaktionen schneller umzusetzen. Gleichzeitig nimmt React die Komplexität aus dem View-Layer. Demnach ist das Tool besonders nützlich, wenn eine Website viel Interaktivität fordert.
Jedoch steht die Verwendung von Facebook‘s Open Source Software, darunter eben auch genannte Bibliothek React, unter einer BSD Plus Lizenz. BSD (Barkeley Software Distribution) heißt, dass die Software nur kopiert, verändert und verbreitet werden darf, wenn das Copyright Vermerk des ursprünglichen Programms nicht entfernt wird. So weit so gut. Nun hat Facebook vor einigen Wochen eine weitere Klausel zum Lizenzrecht ihrer Software hinzugefügt. Diese sagt aus, dass jedem die Nutzungsrechte für eben jene Open Source Software entzogen werden, wenn mit der Nutzung in irgendeiner Weise Konkurrenz-Ansprüche zu Facebook entstehen. Weiterhin geht aus der Klausel hervor, dass durch eine Klage gegen Facebook die Lizenzrechte ebenfalls entfallen. Im Original heißt dies:

„The license granted hereunder will terminate, automatically and without notice, if you […]take a direct financial interest in[…] any Patent Assertion against Facebook […]“

Open Source Software mit BSD Plus Lizenz – heißt konkret?

Facebook‘s Technik-Direktor Adam Wolff begründet diese Entscheidung damit, dass Facebook die Balance halten möchte, weiterhin Open Source Software zur Verfügung zu stellen, gleichzeitig aber das eigene Unternehmen vor teuren Rechtsstreitigkeiten schützen will.
Die Website React-etc empfiehlt in dieser Hinsicht gar einen Anwalt heranzuziehen, wenn React weiter benutzt werden möchte. Ebenso rät ein Entwickler der Apache Foundation , dass Startups möglichst nicht React benutzen sollten. Dies könnte mögliche Firmenübernahmen gegebenenfalls verhindern. Die Apache Foundation, eine Gemeinschaft von Entwicklern, die an Open Source Software Projekten arbeiten, hat nun sogar die Verwendung der Open Source Software von Facebook ihren Programmierern untersagt. Diese Entscheidung wird damit begründet, dass diese Lizenz ein Risiko an den Konsumenten weiterreichen würde und dieses Risiko deutlich stärker zu Lasten der Anwender ausfallen würde. Außerdem würde dies die Apache-Richtlinien verletzen, die unter anderem diktieren, ein universeller Spender zu sein.

React – das trojanische Pferd unter Open Source?

Diese Entscheidung stellt nun ein großes Problem für Entwickler dar, die unter Apache arbeiten, da sie React an vielen Stellen verwendet haben. Am meisten jedoch stört sie die unethische Einstellung von Facebook gegenüber einer Open Source Software. React sei, so die Entwickler, ein trojanisches Pferd in der Open Source Community und diese Verhaltensweise sei kein Beispiel dafür, wie Open Source funktionieren sollte. Adam Wolff gibt zu, durch diese Entscheidung einige Nutzer zu verlieren, jedoch stehe der Schutz des Unternehmens an erster Stelle. Er argumentiert, dass Facebook die Software auch ganz vom öffentlichen Markt hätte nehmen können.

Also, ihr lieben Programmierer unter euch, passt auf, wenn ihr React benutzen wollt – Alternativen dazu stellen beispielsweise das Webframework vue.js, die Programmiersprache Elm oder die Bibliothek Riot.js dar.

Hilfreiche jQuery/Javascript Plugins – Teil 5

Hilfreiche jQuery/Javascript Plugins – Teil 5

Heute setzen wir unsere Reihe zu jQuery Plugins fort und stellen euch ein paar praktische Neuheiten vor, die jede Website zum absoluten Hingucker machen.

iziToast

iziToast

Mit diesem Plugin könnt ihr schicke Notifications auf eurer Website einbinden. Diese sind nicht nur schlank und flexibel, sondern auch noch responsive. Dadurch lassen sich informative Mitteilungen auf der Seite einblenden, aber auch Aufforderungen zu einer Aktion oder Warnmeldungen. Das sieht nicht nur gut aus, sondern macht die Seite auch persönlicher und interaktiver für Nutzer.

Hier eine beispielhafte Vorschau des Codes:

Mirror Effect

Der Name „Mirror Effect“ sagt eigentlich schon alles: Hiermit könnt ihr hübsche Spiegeleffekte erzeugen. Das macht sich zum Beispiel besonders gut auf der Landing Page einer Website. Ein Bild wird entweder innerhalb einer Slideshow gespiegelt, oder einfach als Dekoration. Wichtig ist, dass dafür ein moderner Browser verwendet wird.

nanogallery2

nanogallery2

nanogallery2 ermöglicht das Erstellen schöner Bildergalerien mit einer Vielzahl an Effekten. Es stehen eine Reihe von Designoptionen zur Verfügung, mit denen ihr nach Belieben eine Galerie für eine Website oder einen Blog entwerfen könnt. Individuell angepasst werden können zum Beispiel das Layout, Hover Effekte für Thumbnails und der Darstellungsmodus. Auch die Navigation über Tags und die Einbindung von Bildern aus Services wie Flickr ist möglich.

Das sieht dann zum Beispiel so aus:

Paroller.js

Dieses Plugin macht Parallax Scrolling auf Websites möglich. Das sieht zum einen wirklich elegant aus und bringt zum anderen Leben in die Seite. Während des Scrollens können sich Elemente entweder horizontal oder vertikal bewegen. Der Code lautet dann beispielsweise so:

Außerdem ist das Plugin auch noch für mobile Geräte geeignet. Was will man mehr?

 

Accelerated Mobile Pages

Accelerated Mobile Pages

Heute stellen wir euch eine der aktuellsten Entwicklungen im Bereich mobiler Internetnutzung vor:

Accelerated Mobile Pages (AMPs) sind auf mobile Nutzung spezialisierte Websites, die sich durch stark verringerte Ladezeiten auszeichnen. Es handelt sich dabei um ein von Google unterstütztes Open Source Projekt, das die Benutzerfreundlichkeit von mobilen Websites deutlich steigern soll. Sie sollen außerdem unabhängig von der Art des verwendeten Smartphones, Tablets, etc. sein.

Deutlicher Trend zur Nutzung mobiler Websites
In den letzten Jahren zeichnet sich ein deutlicher Trend zur Nutzung von Websites über mobile Endgeräte ab. Vor allem zum Lesen von Nachrichten oder für Online-Shopping werden vermehrt Smartphones oder Tablets verwendet. Durch lange Ladezeiten von Websites erhöht sich jedoch die Absprungrate der Nutzer – je länger eine Seite lädt, desto mehr Nutzer und potentielle Kunden brechen den Ladevorgang ab. Dadurch verringert sich zum Beispiel für Publisher die Anzahl ihrer Leser und die Höhe der Werbeeinahmen. Da die Zukunft des Internets in vielen Bereichen mobil ist, muss sich also an die veränderte Nutzung des Internets angepasst werden.

Aufruf von Websites in Sekundenbruchteilen
AMPs ermöglichen dies, indem sie die Gesamtgröße einer Website größtmöglich reduzieren. Da die Ladegeschwindigkeit von der Größe der Website abhängt, können AMPs Inhalte in einem Bruchteil der Ladezeit gegenüber herkömmlichen mobiloptimierten Websites darstellen. Die Darstellung von AMPs soll bis zu vier Mal schneller bei einem Zehntel des Datenvolumens erfolgen. Dies wird zum einen dadurch ermöglicht, dass zunächst nur die Inhalte geladen werden, die unmittelbar nach Öffnen der Seite sichtbar sein müssen. Die restlichen Inhalte werden dann nachgeladen. Dadurch ist das Lesen der Website bereits während des Ladevorgangs möglich.

Anpassung des Codes zur schnelleren Darstellung
Realisiert werden AMPs zum einen durch eine speziell angepasste Form von HTML – AMP-HTML genannt.  Zudem wird ein Content Delivery Network genutzt. Außerdem kommt eine Reduktion von CSS und Javascript zur Anwendung. Da Letzteres den Nachteil hat, dass es den Aufbau einer Seite stark verlangsamen kann, darf nur asynchrones Javascript verwendet werden. Auch CSS darf nur inline und mit maximal 50 Kilobytes implementiert werden.

Unterstützung durch Google Cache Server
Um schnelle Ladezeiten zu ermöglichen stellt Google außerdem Cache Server zur Verfügung. Validierte AMPs werden im Cache Server von Google gespeichert, auf einem Proxyserver bereitgestellt und über ein Content Delivery Network an den Nutzer ausgeliefert. Der Quellcode von AMPs kann von allen Servern interpretiert werden. Die AMP sollte idealerweise unter einer URL gehostet werden, die für den Nutzer nachvollziehbar ist, also zum Beispiel: amp.websiteurl.de/inhalt oder websiteurl.de/inhalt/amp.

Implementierung auf immer mehr Plattformen
Unterstützt werden AMPs mittlerweile durch viele Plattformen, wie zum Beispiel Twitter, Pinterest, und natürlich Google. So können Mobilgerätenutzer beispielsweise von Google zu einer im Cache gespeicherten AMP weitergeleitet werden, sofern in den Suchergebnissen eine Website mit einer gültigen AMP-Version vorhanden ist. Diese wird dann oberhalb der regulären Suchergebnisse angezeigt. Außerdem haben auch viele Medienhäuser mittlerweile AMPs implementiert und damit auf den Trend zum Nachrichtenkonsum über mobile Endgeräte reagiert. Dem ein oder anderen ist vielleicht schon aufgefallen, dass AMPs zum Beispiel in der Google News App integriert wurden und man dadurch bequem in Sekundenschnelle durch die Artikel swipen kann. Das schnellere Laden der Seiten betrifft übrigens auch Werbeanzeigen, sodass Schaltung von Werbung sich im Gegensatz zu herkömmlichen Websites nicht negativ auf die Nutzererfahrung und auswirkt. AMPs stellen also eine äußerst zukunftsorientierte Entwicklung dar, die Nutzerfreundlichkeit in den Vordergrund stellt.

Wer noch mehr über AMPs erfahren will und an Beispielen des AMP-HTML-Codes interessiert ist, sollte sich diesen Wiki-Eintrag ansehen.