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.

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

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 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?

Im dritten Teil unserer Frontend Framework Reihe kommen wir zu den etwas anspruchsvolleren Frameworks, die eher für Leute mit Berufserfahrung als Developer angemessen sind.

Da hätten wir zum einen Foundation, welches von Großunternehmen wie eBay, Facebook oder Mozilla benutzt wird. Dieses Framework unterstützt GPU Beschleunigungen, was gleichmäßige und blitzschnelle Animationen ermöglicht. Ebenso hat es keine Lock-In bei Styles, sodass man flexibler arbeiten kann. Zudem benutzt es REMS statt Pixel. Das hat den Nutzen, dass man sich nicht an bestimmte Höhen oder Breiten bei jedem Endgerät richten muss.

Foundation gilt als Framework für Entwickler mit einem gewissen Erfahrungspensum, die vor Allem schnelle, reaktionsfähige Webseiten programmieren.

Sucht ihr nach einem Framework, mit dem ihr simpel Google’s Material Design Richtlinien befolgt, dann macht ihr mit Material UI nichts falsch, denn es ist das am besten ausgearbeitete Framework, um die Richtlinien umzusetzen. Aber: es ist kein geeigneter Ansatzpunkt, um ein neues Webdesign Projekt aufzusetzen.

Mit gebrauchsfertigen CSS- und Materialdesign-kompatiblen Klassen beladen, wird Material UI auf dem LESS Preprocessor aufgebaut. Weil es React-Komponenten verwendet, ist ein gewisses Verständnis von React hilfreich.

Absolut bezeichnend für dieses Framework ist, dass es individuell anpassbare Stile enthält, die in einzelne Dateien getrennt sind. So können Sie LESS CSS-Variablen überschreiben, ohne Framework-Komponenten zu beeinflussen.

Insgesamt ist es daher für Entwickler geeignet, die Erfahrung mit React.js haben und einen einfachen Weg einschlagen wollen, um die Material Design Richtlinien umzusetzen.

Entwickelt von Yahoo Developern ist Pure ein Framework, mit dem man so gut wie jedes Projekt angehen kann. Mit einem Array an CSS Modulen kann man mit Pure reaktionsfähige Buttons, Menüs, Grids, Tabellen und anderen interessanten Features kreieren. Dennoch ist hierbei zu beachten, dass momentan noch keine jQuery oder JavaScript PlugIns dafür vorhanden sind, da das Framework Pure ausschließlich .css Dateien umfasst.

Wenn es mit Gzip minimiert und komprimiert wird, verkleinert sich die Dateigröße bereits auf 4,75 kB, was es zu einem der schnellsten, platzsparendsten und geschicktesten Frameworks macht. Das ist der Grund, weshalb gerade so viele Mobile Developer so begeistert von Pure sind.

Folglich ideal für Entwickler, die sich mit Responsive Development beschäftigen.

UIKit ist ein höchst modulares Framework, welches sich von anderen Frontend Frameworks hervorhebt. Einer der vielen Gründe hierbei ist wohl, dass es sich SASS CSS preprocessors und LESS gleichsam bedient.
Mit einer Anordnung von leichten, reaktionsfähigen Klassen mit den gleichbleibend, gleichnamigen conventions wurde UIKit zu einem der beliebtesten Frontend Frameworks.
Durch die 30 modularen und erweiterbaren Komponenten kann es kombiniert werden, um noch mehr Einsatzflexibilität zu bieten.

Es enthält Navigationskomponenten wie side navigation bars, Elemente wie HTML-Formulare und Tabellen, JavaScript-Komponenten wie Off-Canvas-Bars und modale Dialoge; verbreitete Elemente wie Buttons, Abzeichen, Overlays und Layoutkomponenten, einschließlich eines flüssigen, vollständig ansprechenden Grids.

Das Framework hat zwar unglaublich viel an Angebot zu bieten, ist jedoch durch seinen relativ neuen Status für Beginner nicht zwingend geeignet, da es dementsprechend wenige Entwickler gibt, die damit schon repräsentative Projekte oder Tutorials dazu angefertigt haben.
Daher stehen hier Möglichkeiten gegen die Schwierigkeit des Neuheitsgrades. Folglich ist es besser, wenn sich Entwickler mit einer ansehnlichen Erfahrung an Programmierung daran versuchen. Letzten Endes ist es ein sagenhaftes Framework für simple sowie für komplexe Projekte und eine echte Alternative mit viel Nutzungspotential.

Für Diejenigen unter uns, die besondere Layout Bedürfnisse haben, ist Susy ein geeignetes Tool. Der Begriff Tool fällt hier deshalb, weil viele Susy als Grid Maker klassifizieren. Dennoch rüstet dieses Layout Tool einen unabdingbar für individuelle, anspruchsvolle und kreative Layout Wünsche auf. Es übernimmt alle Kalkulationen für den Benutzer, sodass man viel an Zeit und Energie spart.

Alles in Einem sollte die Entscheidung, welches Framework man verwenden möchte, nicht auf ihrer Beliebtheit beruhen, sondern vielmehr darauf, was für den Bedarf der Entwicklung am besten passt.

In Teil 1 unseres „Frontend Frameworks“ haben wir euch schon einmal in die Materie eingeführt, wie ihr das richtige Framework für euch speziell ermittelt und was man dabei beachten sollte. Da hieß es, dass man nicht immer die gängigen Frameworks nutzen muss, um ein großartige Webseite zu programmieren. Es gibt so viele neue, alternative Möglichkeiten, die euch – je nach eurem Kenntnis-Stand – besser dienen können.

Unsere Einführung ist angelehnt an die Top 10 Frontend Frameworks aus 2016.
Nach jeder Kurzbeschreibung der Frameworks, wird eingestuft, für welche Entwickler welchen Kenntnisstandes diese geeignet sind. Teil 2 wird sich vorerst mit Coding-Beginnern und Berufseinsteigern in der Entwicklung beschäftigen. Im dritten Teil unserer Beitragsreihe kommen dann die Frameworks für Fortgeschrittene mit mehrjähriger Berufserfahrung. Dran bleiben lohnt sich!

Der Korrektheit halber führen wir erst einmal Bootstrap an, das allgemein als gängig gilt und oft verwendet wird. Das von den Twitter-Entwicklern programmierte Framework beinhaltet einige der vebreitetsten Programmiersprachen: HTML, JavaScript und CSS. Bootstrap beinhaltet reaktionsfähige Webdesign Standards, die es dir erlauben Webseiten in jeglicher Komplexität und Größe zu entwickeln. Weil das Framework regelmäßig geupdatet wird, kann es in kürzester Zeit auf neue Features reagieren und sie einbinden.

Das Rundum-Paket ist für Beginner und Diejenigen, die ein robusteres Framework bevorzugen, recht ideal, enthält jedoch den Nachteil, dass durch die für das Web unübliche Größe lange Ladezeiten entstehen können. Das kommt durch die Masse an Klassen zustande, wovon nur ein Bruchteil genutzt wird.

Ein absoluter Newcomer mit Potential ist Semantic-UI. Ein Framework, welches sich durch seine Einfachheit auszeichnet und für Beginner sowie für Jene, die ein flinkes und leichtes Framework bevorzugen, geeignet ist.

Man sagt, dass Jene, die ein komplexeres Design und komplexeres Development fordern, dieses Framework Schwachstellen aufweisen kann. Dennoch birgt es den Vorteil von kleinen Dateigrößen, kurzen Ladezeiten und unglaublicher Aufstellung an Bibliotheken, sodass man eigentlich keine anderen Bibliotheken mehr braucht.

Materialize beinhaltet Design Besonderheiten von Google und stellt ready-to-use buttons bereit, icons, Karten, Formen und anderen Komponenten. Diese Elemente werden in einer Standardversion und in der Version, die mit SASS läuft, angeboten.

Außerdem umfasst Materialize einen praktischen IZ column grid feature, was man für Website Layouts verwenden kann. Mit Materialize kann man Typographien, Schatten, Farben und andere prägnante Animationen verwenden. Der Vorteil der immensen Auswahl an Klassen ist hierbei definitiv als Vorteil zu nennen. Konträr dazu stehen die großen Dateigrößen, die ebenso lange laden müssen wie bei Bootstrap. Somit ist das Framework ein etwas sperriges.

Als geeignet eingestuft wird es für Entwickler, die noch etwas Orientierung und Anleitung brauchen bezüglich Google’s Material Design Spezifiken.

Diejenigen, die kleine Projekte umsetzen wollen, für welche nicht alle Style-Klassen eines großen Frameworks erforderlich sind, ist Skeleton eine nennenswerte Alternative, die nicht jedem geläufig ist.
Skeleton ist ein reaktionsfähiger Textbaustein mit einem 400 Zeilen Code. Dieses Framework ist lediglich dazu gedacht mit der Entwicklung eines Web Projektes anzufangen und bietet daher nur das Minimum an Voraussetzungen wie z.B. Tabellen, Formen, Listen, Buttons, etc. Daher für Berufseinsteiger ideal, die sich mit ersten Projekten profilieren wollen und neu in die Praxis- und Projektwelt eintreten.

Da es eine solche Vielzahl an verschiedenen Frontend Frameworks gibt, kann sich die Wahl des richtigen Frameworks schwierig gestalten. Wie viele andere Entwickler auch, neigt man oftmals dazu die beliebten und bewährten Optionen wie Bootstrap und Foundation zu nehmen. Dann aber wieder kann ein weniger weit verbreitetes Framework effektiver auf individuelle Bedürfnisse angepasst werden. Daher lohnt es sich, sich auf den neuesten Stand zu bringen und sich über verschiedene neue Frameworks und ihren Nutzen zu informieren. Über neuere Alternativen klären wir euch im zweiten Teil auf. In diesem Beitrag konzentrieren wir uns erst einmal auf die Faktoren, die ihr zu einer Ermittlung des richtigen Frameworks beachten müsst.

Aspekte, die man bei der Wahl des Frameworks beachten muss

• Dein Skill-Level: Du solltest dir immer darüber im Klaren sein, was du kannst und was nicht. Wenn du ein Anfänger bist, dann wäre es durchaus sinnvoller ein robusteres Framework wie Bootstrap zu wählen, da es schon vorausgestattet ist mit mehreren sinnvollen Widgets, die einem nicht allzu fordernde Coding Kenntnisse abverlangen. Bist du jedoch bereits geübter im Coden, solltest du Frameworks in Betracht ziehen, die mehr individuelle Anpassungen zulassen.

• Responsive Design: Jede Website, die man entwickelt, sollte ordnungsgemäß über alle Geräte zugänglich sein, da immer mehr Menschen über mobile Geräte auf das Internet zugreifen. Die WELT berichtete erst kürzlich über eine Studie von Adobe Digital Insights, die ausgewertet hat, dass Webseiten fast nur noch über Smartphones angesehen werden. An zweiter Stelle steht das Tablet und die heute schon altmodische Desktop-Ansicht über PCs bilden damit das Schlusslicht. Um die Kunden also anzusprechen, ist ein responsive Design also unabdingbar.
  Darüber hinaus hat die Studie ergeben, dass die allgemeine App-Nutzung und Neuinstallationen von Apps im weltweiten Trend stagniert, aber Deutschland hierbei die große Ausnahme bildet. Somit bilden wir einen großen Inlands-Markt an App-Nutzung ab. Deshalb: Bleib bei Frontend Frameworks, die reaktionsfähige Web-Designs unterstützen. In dieser Hinsicht solltest du deine Experimentierfreudigkeit nicht ausleben und dich nach den Marktanalysen richten.

• CSS Preprocessors: Solltest du diese benutzen und den ein oder anderen besonders nutzen, stelle im Voraus sicher, dass dein Framework diese unterstützt.

Alles zusammenfassend sollte das richtige Frontend-Framework das Webseiten-Design vereinfachen und optimieren und den Entwicklungsprozess beschleunigen. Dabei sollte bei der flexiblen Nutzung unterschiedlicher Funktionen keine Abstriche gemacht werden, damit immer noch ein einzigartiges und qualitatives Endergebnis rauskommt.

Heute stellen wir euch ein paar der jQuery Plugins für den Frontend Bereich vor, die wir persönlich für kreativ und nützlich erachten und warum.

• Material Design Hierarchical Display
  Wenn ihr dem Link, unterlegt im Bild, folgt, seht ihr wie aus vielen verschiedenen Elementen, ein einziges großes entsteht. An den Beispielen könnt ihr euch mit den Animationseffekten ausprobieren. In jedem Fall ist hier ein einschlägiger Effekt gegeben, wenn man diese Plugins auf Internetshops als Logo oder auf Unternehmenswebsites nutzt. Der Kreativität sind dabei keine Grenzen gesetzt, denn sowohl Effekte als auch Elementenanordnung und ob man aus vielen kleinen überhaupt ein großes zusammenhängendes machen möchte, sind individuell gestaltbar.

Einen Einblick in den Code seht ihr hier:

Mit 2 Zeilen ist diese Codierung also recht kurz und simpel gehalten, erzielt aber einen einschlägigen Effekt für einen professionellen Internet-Auftritt.

• TwentyTwenty
  
  Das perfekte Plugin, um einen Vergleich zwischen zwei Aspekten visuell hervorzuheben.
  Das Tool sorgt dafür, dass man zwei Bilder übereinander legen kann, ohne dass man zwei Bilder nebeneinander posten muss. Dabei kann man ganz einfach mittels eines Sliders das obere Bild schieben, um das untere zu sehen. Das eignet sich optimal für Vergleiche, in dem man diverse Änderungen an Gebäuden beispielsweise darstellen möchte. Durch den Slider bestimmt man selbst bis zu welchem Abschnitt man das obere Bild zur Seite schiebt und wie viel man vom anderen, unten gelegenen, offenbart. Somit kann man ganz genau Stück für Stück die übereinander liegenden Bilder live miteinander vergleichen. Für einen Vorher/Nachher-Effekt ideal.
  Hier der Code dazu:
  
  XHTML

  <div id="container1"> <img src="sample-before.png"> <img src="sample-after.png"> </div>

  1 2 3 4

  <div id="container1">   <img src="sample-before.png">   <img src="sample-after.png"> </div>

• RoundSlider

Hier haben wir einen Slider, den man ebenfalls individuell designen kann und für verschiedene Zwecke für sich nutzen kann. Auch hier sind Online-Shops als Beispiel zu nennen. Diese haben des Öfteren Funktionen, mit denen man die Mindest- sowie Maximal-Preishöhe einstellen kann. Dafür sind die modern gestalteten Slider ein Blickfang. Auch bei Abbildungen von Prozentzahlen können die Slider eine innovative Darstellungsform bieten, sodass man sich von anderen digitalen Präsenzen unterscheidet.
Hier könnt ihr euch die verschiedenen Optionen der Slides ansehen:

Das waren einige wenige Plugin Beispiele, in die man sich sowohl von der Programmierer-Seite als auch von einem unternehmerischen Standpunkt aus einarbeiten kann. Simple Codierung mit prägnantem Effekt durch Animation und Design ergeben Plugins, die jede digitale Präsenz nach Außen entsprechend vermarkten. In der heutigen Zeit ist das Visuelle aller anderen Vermarktung voraus. Daher lohnt es sich mit den einfachsten Mitteln auf Blickfang zu setzen.