Es ist nicht einfach sich auf neue Technologien einzulassen. jQuery ist eine längst etablierte und über viele Jahre gereifte Webdevelopment Frontend Technologie. Viele Plugins basieren auf dieser Technik. Bei vielen Out-Of-The-Box Lösungen ist sie das Maß der Dinge. Auch die großen Open-Source CMS-Boliden TYPO3 und WordPress setzen auf diese Technik. Und jeder weiß, einen Tod muß man halt sterben. Es ist zwar möglich einen Parallelbetrieb zu fahren, aber hier rät auf jeden Fall auch aktiv AngularJS dringend von ab.
AngularJS und jQuery im Vergleich
AngularJS ist eine junge Tecnologie. Die leider auch darunter leidet, daß jeder auf die Version 2.0 wartet und keiner so genau weiß was mit der Abwärtskompatibilität ist. jQuery ist schon in der Version 2 angekommen und hatte Aufgrund seines alleinigen Markt- und Stellenwertes nicht das Problem. Es war einfach die Antwort. Die verkürzte Schreibweise und die starke Library machten es sehr leicht innovative und komplexe Frontend DOM Manipulationen durchzuführen. AngularJS verfolgt ein anderes Ziel. Das mit Daten zu arbeiten. Eingaben schnell und effizient zu verarbeiten, eine extrem hohe Performance und durch das MVC-Prinzip eine hohe Code Lesbarkeit und Wartbarkeit.
Frontend Webdevelopment und Neues lernen
Vielleicht ist die Headline etwas zu spezifisch, für das was ich hier sagen möchte. Als Backend-Developer vielleicht noch weniger. Am Ende hängt die Qualität von Software doch ganz klar von den Fähigkeiten des Webdevelopers ab. Als guter Programmierer kann man sich in jeder Programmiersprache verwirklichen. Aber nicht jede Programmiersprache ist die Lösung für das Problem. TYPO3-Webdeveloper lösen alles in TYPO3. WordPress Developer machen alles mit irgendeinem Plugin. Und so weiter. Das ist traurig, aber wahr. Die Fähigkeit Neues zu lernen nimmt ab. Das ist bedauerlich und nicht zeitgemäß. AngularJS hat im Gegensatz zu jQuery eine sehr geringe Lernkurve und spart vor allem sehr viel Quellcode. Aber beide sind keine Sache für mal eben. Man muß sich natürlich damit intensiv beschäftigen, einige Tutorials anschauen und viel Googeln. Erst dann kann man AngularJS oder jQuery als Werkzeug nutzen.
jQuery DOM-Manipulation
AngularJS und jQuery im Vergleich
jQuery ist sehr eng an den eigentlichen HTML Code gebunden. Es ist dort sehr statisch verankert. Es referenziert über CSS-Klassen oder HTML IDs. Daher sind Änderungen immer in der Regel an 2 Stellen durchzuführen. Also wird das HTML referenziert und über den eigentlichen Javascript Code manipuliert. Hier sind natürlich, wie übrigens bei beiden, dann schöne Effekte vorhanden. Aber diese enge Kopplung macht die Entwicklung komplex. Nur Effekte sind aber nicht das, was den User interessiert. Denn der will Daten. Schnell, aktuell und einfach. Und so sollte auch Software für das Frontend sein. Zielführend. Und das ist AngularJS eindeutig stärker. Mit jQuery kann man sehr schicke Effekte machen und so ein richtiges Frontend Feuerwerk abschießen. Da ist AngularJS noch ein wenig in den Kinderschuhen, entwickelt sich aber gerade durch Google im Hintergrund rasend schnell. Aber jQuery hat hier auch einen beachtlichen zeitlichen Vorsprung.
AngularJS Data Binding Scope-Object
AngularJS und jQuery im Vergleich
Ja das gibt es auch in jQuery. Aber nicht in der Form. In AngularJS definiert sich alles im $scope-Object. Darüber hinaus gibt es noch ein globales Scope Object, aber das soll jetzt einmal nebensächlich sein und die Nutzung ist auch zu vermeiden. Wichtig ist, daß dieses Scope-Object im Frontend und sagen wir mal Backend, also dem js-Teil der Applikation permanent zur Verfügung steht und sich Änderungen, vor allem von Daten. Da ich nun befreit von dieser harten Bindung zwischen HTML und Javascript bin kann ich im Template einfach ein Formularfeld definieren, welches sich um $scope.name kümmert. Hier brauche ich keinen HTML oder CSS Selektor. Sondern nur ein ng-bind=“name“. und fertig. Gerade in komplexen Anwendungen benötigt man einen eindeutigen Identifier. Ja und warum nicht einfach ein eigenes Data-Attribute verwenden. Damit wird HTML auch wieder HTML. Wer kennt das nicht. Feste Javascript Selectoren, die an mehreren Stellen im Frontend verwendet werden. Hier werden dann CSS-Klassen verwendet. css=“js-gallery-img-thumb img-thumb“. Ja wer braucht denn sowas. Muß ich meinen JS-Selector also mit aller Gewalt ins HTML schlagen. Und ist es ein DIV oder ein SPAN? Oder doch nur ein <i></i>? Nein da ist AngularJS einfach, schön und effektiv.
AngularJS is magic
Ein MVC-Framework im Frontend. Mit eigenen Unittests. Routing, Views und Controllern. Ja das macht Spaß und ist sexy. Darüber hinaus die tolle AJAX-Integration und natürlich die Performance. Die Views sind schon beim Client. Nur die Daten werden übertragen. Kaum Interpretationszeit. Wenig Datentransfer. Das ist das neue Internet. Eine zeitlang gab es ja jeden Tag ein neues mega Javascript-Framework. Emberjs, Dojo etc. Alle haben Licht und Schatten. Abei AngularJS sehe ich allerdings nur Licht 😉
Bildquelle AngularJS und jQuery im Vergleich
https://www.airpair.com/angularjs/posts/jquery-angularjs-comparison-migration-walkthrough
