Intersult: Javascript Frameworks

This page (revision-28) was last changed on 27-Feb-2020 17:36 by Dieter Käppel

This page was created on 20-Feb-2020 19:44 by Dieter Käppel

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Pagination: Previous 12all (Total items: 28 )

Version	Date Modified	Size	Author	Changes ...
28	27-Feb-2020 17:36	6 KB	Dieter Käppel	to previous
27	27-Feb-2020 17:36	6 KB	Dieter Käppel	to previous \| to last
26	24-Feb-2020 14:32	6 KB	Dieter Käppel	to previous \| to last
25	24-Feb-2020 14:31	6 KB	Dieter Käppel	to previous \| to last
24	24-Feb-2020 14:29	6 KB	Dieter Käppel	to previous \| to last
23	24-Feb-2020 14:29	6 KB	Dieter Käppel	to previous \| to last
22	24-Feb-2020 14:28	6 KB	Dieter Käppel	to previous \| to last
21	24-Feb-2020 14:27	5 KB	Dieter Käppel	to previous \| to last

Pagination: Previous 12all (Total items: 28 )

Page References

Incoming links	Outgoing links
Javascript Frameworks Javascript Frameworks RequireJS Vue	Javascript Frameworks JSF

Version management

Difference between version and

At line 3 changed 59 lines

!!!Anforderungen

Anforderungen an ein Framework:

* Reines HTML und Javascript

* Keine Drittsprache erforderlich

* Kein völlig neues Konzept

* Nahtloses Einfügen in HTML/JS/CSS

* Templating System

** Komponenten als Tags

** Dynamisches Nachladen von Komponenten

** Komponente mehrfach instantiieren

** Konzept zum Generieren von "Client Ids"

* Wiederfinden von Komponenten

* Freie Lizenz (Apache, MIT, etc.)

!!!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|?|?|?|Facebook|?|?|?|?|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|-|-|Autom. Rendering, Watches|?|-|?|?|?|?|?|?|?|?|?

||-|Feature nicht vorhanden

||?|Noch nicht evaluiert

!!!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|https://en.wikipedia.org/wiki/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.

|Angular|Der Nachfolger von AngularJS heißt nur noch Angular. Das Javascript wurde nicht nur im Namen gestrichen, auch die Entwicklung erfolgt jetzt mit Microsoft Typescript. Es gibt zwar zahlreiche Übersetzer, doch letzten Endes begibt man sich damit wohl mehr in eine Microsoft Welt. Auch ohne Microsoft prinzipiell als Gegenargument verwenden zu wollen, ist alleine das Verwenden einer Drittsprache eine zusätzliche Hürde. Entwickler arbeiten nicht in Javascript, die entstehenden Scripte müssen erst compiliert werden, der generierte Javascript-Code ist schließlich nicht im Browser debugbar. Diese Komplexität und Abhängigkeit von mehreren Tools möchte man in der Regel keinem Projekt oder Entwickler zufügen.

|AngularJS|AngularJS ist offiziell durch Angular abgelöst worden. Für AngularJS wurde ein "Long Term Maintainance Mode". Man würde wohl auf eine auslaufende Technologie setzen. Früher oder später würden Browseränderungen nicht mehr unterstützt werden. Als Umstieg auf eine "neue" Technologie macht dies wohl wenig Sinn.

|Backbone|Zitat: "While templating for a view isn't a function provided directly by Backbone". Die Anleitung empfiehlt Views mit Underscore zu implementieren. Das eigentliche Ziel des Frameworks wurde damit verfehlt.

|Vue|Mit Vue scheint ein einfaches Templating möglich zu sein. HTML kann auf verschiedene Weisen erzeugt werden. Es kann entweder bestehender HTML-Code verwendet werden, <template>-Tags genutzt, HTML als Text im Javascript geschrieben, weiterhin HTML durch Javascript erzeugt werden, also auch mit Hilfsmitteln wie JQuery oder durch spezielle VUE-Dateien geladen werden. Ergebnis sind Tags, die wiederum im HTML eingebettet werden können. Nebenher bietet Vue einige HTML-Attribute, mit denen die Komponenten anhand eines Json-Models instantiiert werden können, wie v-if, v-for oder v-bind.

!!!Abgrenzung zu Javascript Bibliotheken

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.

!!!Links

* [Wikipedia Comparison|https://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks]

* [Underscore|https://underscorejs.org/]

* [Ionos|https://www.ionos.de/digitalguide/websites/web-entwicklung/beliebte-javascript-frameworks-und-bibliotheken/]

* [Wikipedia Ember|https://de.wikipedia.org/wiki/Ember.js]

* [Wikipedia Meteor|https://de.wikipedia.org/wiki/Meteor_(Webframework)]

* [Wikipedia Underscore|https://de.wikipedia.org/wiki/Underscore.js]

* [Wikipedia Vue|https://de.wikipedia.org/wiki/Vue.js]

* [Vue Introduction|https://vuejs.org/v2/guide/index.html]

||-||JQuery||JQuery UI||AngularJS||Angular||Vue||React

||Programmiersprache|Javascript|Javascript|Javascript|Typescript|Javascript|?

||HTML generieren|Javascript functions|Javascript functions|?|?|-|?

||HTML laden|$.fn.load|$.fn.load|?|?|-|?

||Komponente definieren|HTML Datei|$.widget|?|?|new Vue|?

||Komponente instantiieren|$.fn.load|$.fn.<widget>|?|?|-|?

||Komponente referenzieren|CSS Selector|widget var|?|?|app var|?

||Value anbinden|$.fn.val/$.fn.on|$.fn.<widget>(...)|?|?|EL/Attribute/If/Iteration|?

||Client/Server-Kommunikation|$.ajax|$.ajax|?|?|?|?

This page (revision-28) was last changed on 27-Feb-2020 17:36 by Dieter Käppel Top

Übersicht
Startseite
Das Unternehmen
Produkte
Consulting
Referenzen

Jobmarkt
Jobangebote
Profile

Hilfe
Suche
Seitenindex
Letzte Änderungen
Sichere Verbindung

Systeme
Tickets
Jenkins
Nexus
SVN
Email Client

2904 Aufrufe

referenziert von
Javascript Frameworks
RequireJS
Vue