Abgrenzung#
Ein Framework grenzt sich zu einer Bibliothek dadurch ab, dass eine Bibliothek eine Ansammlung von Funktionen darstellt, die zustandsfrei daher kommt. Ein Framework liefert hingegen Ankerpunkte um Zustände zu halten, die etwa als Applikation, Definitionen, Komponenten, Instanzen und so weiter gehalten werden. Insbesondere erzeugen Framekworks eine Inversion of Control, weg von einer imperativen Programmierung, hin zu einer Komponenten orientierten Architektur.Features#
| - | JQuery | JQuery UI | AngularJS | Angular | Vue | React | Meteor | Polymer | Ember | Backbone | Dojo | ExtJS | Wakanda | Underscore |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Purpose | JS Functions | Widgets | ? | ? | JS Synchronization | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| Hersteller | JS Foundation | JS Foundation | ? | ? | ? | ? | ? | ? | ? | Dojo | ? | ? | ? | |
| Gründungsjahr | 2006 | 2007 | 2016 | 2018 | 2019 | 2013 | 2012 | ? | 2011 | 2015 | 2005 | 2013 | 2014 | 2009 |
| Programmiersprache | Javascript | Javascript | Javascript | Typescript | Javascript | Babel/JSX | ? | ? | ? | ? | ? | ? | ? | ? |
| HTML generieren | $("<tag>") | $("<tag>") | ? | ? | - | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| HTML laden | $.fn.load | $.fn.load | ? | ? | - | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| Komponente definieren | HTML Datei, $.extend | $.widget | ? | ? | new Vue | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| Komponente instantiieren | $.fn.load | $.fn.<widget> | ? | ? | - | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| Komponente referenzieren | CSS Selector | widget var | ? | ? | app var | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| Komponenten aggregieren | $.fn.append, ... | $.widget | ? | ? | - | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| Value anbinden | $.fn.val, $.fn.on | $.fn.<widget>(...) | ? | ? | EL, Attribute, If, Iteration | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| Client/Server-Kommunikation | $.ajax | $.ajax | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| Reactive Programming | - | - | ? | ? | - | ? | ? | ? | ? | ? | ? | ? | ? | ? |
Zusammenfassung#
| Framework | Zusammenfassung |
|---|---|
| JQuery | JQuery ist das wohl älteste und am weitesten verbreitete Basis-Framework. Es bietet Browser-Unabhängigkeit, Definition von Funktionen und Makros. JQuery kann und wird weiterhin parallel zu anderen Frameworks eingesetzt, bietet allerdings keine Vollautomatisierung von Templating, Synchronisierung, HTML-Generierung oder Single-Site-Application. Insbesondere bietet JQuery einen vereinheitlichten AJAX-Zugriff, der das Laden von JS, CSS, HTML und JSON vereinfacht, sowie die REST-Kommunikation ermöglicht |
| JQuery UI | JQuery UI ist eine Erweiterung von JQuery, die zwei Dinge liefert: Die Widget API mit der JS Komponenten definiert werden können, einige mitgelieferte Basiskomponenten. JQuery UI bietet den größten Markt an freien Komponneten, wie etwa Dropdown, Datepicker, Drag-and-Drop und anderen Extensions |
| Underscore JS | Underscore ist die neuere Konkurrenzveranstaltung zu JQuery, konnte aber nie wirklich aufholen. Letzten Endes konnte und kann man in JQuery durch $.extend und $.fn.extend jede Funktion erweitern, sodass es keinen Sinn macht auf ein anderes Basis-Framework umzusteigen oder es zusätzlich hinzuzunehmen. |
| Meteor | Meteor ist ein auf NodeJS basierendes Framework mit einheitlichem Client-Server Scripting. Völlig ungeeignet für Java-Browser-Anwendungen. |
| ZK | ZK ist als Work-around für JS-Lamer gedacht, etwa wie JSF. "Features" sind Ajax without JavaScript. Dann wird doch wieder Bootstrap und MVC bzw. MVVM unterstützt. Auch in der Programmierung von Groovy, Rhino, JRuby oder Jython ist man sich nicht ganz einig. Nähe besteht zudem zu XUL , welches in völlig veraltetem Microsoft C++ implementiert ist und von Mozilla Firefox Plugins bekannt ist. |
| ReactJS | React wird in der eigenen Programmiersprache JSX von Babel compiliert. Dies kann zwar im Browser stattfinden, allerdings ist der Code strikt von React abhängig und sollte zur Produktion vorcompiliert werden. Geschriebener Code kann, auch nicht auszugsweise, in anderem Zusammenhang verwendet werden. Es entsteht ein Gemisch aus HTML und Javascript. Es wird eine komplett neue Ebene für das Value-Binding und Event-Handling eingezogen. |
Anforderungen#
Anforderungen an ein Framework:- Reines HTML und Javascript
- Keine Drittsprache
- Kein völlig neues Konzept
- Nahtloses Einfügen in HTML/JS/CSS
- Dynamisches Nachladen von Komponenten
- Multiples Instantiieren von Komponenten
- Naming- und Id-Konzept
- Wiederfinden von Komponenten