Tag: oop-mvc

201330Dez

Web 3.0: JavaScript-Frameworks und die Zukunft

Die Überschrift wurde absichtlich mit dem Buzzword "Web 3.0" versehen, da die "Versionsnummer des Webs" häufig als Synonym für die Zukunft des Internets gebraucht wird und die Bezeichnung den Kern dieses Artikels trifft: Es geht nicht um das Web 3.0 in seiner Gesamtheit, also um künstliche Intelligenz und Ubiquitous Computing, sondern um den Beginn einer neuen JavaScript-Ära. Während die Bezeichnung "Web 2.0" im Bezug auf JavaScript die bisherigen JavaScript-Frameworks und damit vor allem jQuery kennzeichnet, lässt sich in 2013 ein Umschwung im Bereich der Webentwicklung erkennen, der durch neue Ansätze wie MVC-Frameworks oder Node.js geprägt ist. Die jQuery-Epoche ist zwar noch allgegenwärtig, doch mit der stärkeren Verbreitung moderner Webbrowser und HTML5/CSS3 sowie ECMAScript 5 bzw. 6 wird sich das in Zukunft ändern.

JavaScript und Webstandards seit 2009

Die Grafik soll in etwa veranschaulichen, wie die Entwicklung von Webstandards und JavaScript-Frameworks seit 2009 vorangeschritten ist. ECMAScript 6 alias "Harmony" soll Ende 2013 seinen finalen Status erreichen. Bibliotheken wie MooTools, Prototype oder Dojo wurden einst entwickelt, um das Schreiben von JavaScript-Anwendungen einfacher zu machen und eine Website leichter mit Besonderheiten ausstatten zu können. Dazu zählten hauptsächlich Animationen und der Umgang mit Ajax, was JavaScript schließlich zum Durchbruch verhalf. Auch heute sind die Features aktueller Frameworks noch immer essenziell, wenngleich sich die Verteilung und Popularität der verschiedenen Bibliotheken etwas geändert hat. Die obige Grafik zeigt die Beliebtheit der JavaScript-Frameworks und jQuery dürfte heute, also Ende 2013, der klare Liebling im Bereich der Ajax- und DOM-Frameworks sein.

Weiterlesen...
201301Dez

Videogular: HTML5-Video-Player für AngularJS

Einst waren es jQuery-Plugins, heute sind es AngularJS-Directives: Mit Videogular steht ein voll ausgestatteter HTML5-Video-Player bereit, der über Angular konfiguriert und erweitert werden kann. Dazu müssen das entsprechende Angular-Markup vorhanden sowie die Module "com.2fdevs.videogular" in die App eingebunden sein. Bei GitHub findet sich die Dokumentation sowie ein Wiki dazu.

Videogular - A video player for AngularJS

Im Controller-Scope können die Eigenschaften für den Player festgelegt werden. Ein Auszug:

  • <videogular vg-width="config.width" vg-height="config.height">
  •  
  • $scope.config = {
  • width: 740,
  • height: 380,
  • autoHide: false,
  • autoPlay: false,
  • responsive: true
  • };

Der Angular-Player unterstützt mobile Endgeräte sowie einen Vollbildmodus. Er lässt sich über Themes anpassen und kann per Plugins erweitert werden.
Für AngularJS gibt es mittlerweile eine Reihe an interessanten Directives, wie beispielsweise das Deckgrid, mit dem sich Inhalte in einem Raster darstellen lassen.

201326Nov

JavaScript: Angular und Backbone im Vergleich

Über aktuelle MVC- und MVVM-Frameworks gibt es bereits interessante Artikelreihen, in denen die unterschiedlichen Aspekte der Bibliotheken beleuchtet werden. Entwickler haben die freie Wahl zwischen Angular, Backbone, Ember, Knockout und weiteren "Next-Gen-Frameworks". Da es immer unterschiedliche Sichtweisen gibt, kann es bei der Auswahl hilfreich sein, verschiedene Quellen anzusehen. So gibt es bei InfoQ einen weiteren Beitrag, in dem die Kernaspekte von Angular und Backbone etwas genauer betrachtet werden.

InfoQ -  Contrasting Backbone and Angular

Der Beitrag behandelt verschiedene Themengebiete, die bei der Umsetzung einer Webanwendung eine Rolle spielen: Business-Logik, DOM-Struktur, View-Logik, Model-View-Synchronisation, Interaktionen, Routing und Komponenten. In Tabellen werden jeweils die zutreffenden Verhaltensweisen von Backbone und Angular bei diesen Themen aufgelistet. Zusätzlich wird der Beitrag durch Abbildungen ergänzt, womit er auf jeden Fall ein besseres Bild der beiden Bibliotheken vermitteln dürfte.

201325Nov

jQuery Evergreen: jQuery-API für moderne Webbrowser

Moderne Webbrowser, die mit ECMAScript 5 ausgestattet sind, bieten bereits eine umfangreiche Funktionssammlung, die nicht mehr komplett mit jQuery ersetzt werden muss. Die Selector-Engines der Browser wurden erweitert und mit CSS3 lassen sich viele Animationen umsetzen, für die vorher jQuery notwendig war. Aus diesem Grund gibt es bereits diverse Micro-Libraries wie Min.js oder Zepto, die nur mit dem Nötigsten ausgestattet sind.
Lars Kappert hat nun mit jQuery Evergreen auch das jQuery-Pendant fertiggestellt: Eine API, welche auf die Fähigkeiten von aktuellen Webbrowsern aufbaut und dennoch den Komfort der beliebten JavaScript-Bibliothek bietet.

jQuery Evergreen - Lean and mean jQuery API for modern browsers

So lassen sich Events mi ".on()" und ".off()" zuweisen und entfernen und DOM-Manipulationen mit "addClass()" sind ebenfalls möglich. Weiterhin wurde die "find()"-Methode sowie "$.attr()" eingebaut. Lediglich die komplexeren Bereiche von jQuery wie "$.animate", "$.ajax" und "$.Deferred" wurden nicht umgesetzt. Für Internet Explorer 9 wird zudem ein Polyfill benötigt, der den Browser um die native "classList"-API erweitert.
jQuery Evergreen wurde übrigens im ES6-Stil geschrieben und in Module gekapselt. Es kann in den gängigen Browsern verwendet werden, da es mit dem ES6 Module Transpiler in AMD-Syntax konvertiert wurde.

201311Nov

AngularJS: Release 1.2.0, Caching und Animationen

Auch bei AngularJS hat sich in dieser Woche wieder Einiges getan: Zum einen wurde die stabile Version 1.0.8 nun durch den Release der Version 1.2.0 ersetzt — hier gibt es einige Neuerungen, die unter Anderem Animationen, striktes Escaping, die ng-repeat-Directive sowie die "Controller as"-Syntax betreffen. Weiterhin gibt es ein paar Tipps zum Caching mittels "$cacheFactory" und der Verwendung eines LRU-Caches (Least Recently Used) und schließlich wurde noch ein Artikel über Performance-Optimierung durch DOM-Caching und Watcher-Anpassungen veröffentlicht.

AngularJS - Superheroic JavaScript MVW Framework

Den Round-Up gibt es hier als Liste:

201307Nov

Callback Hell: Leitfaden für asynchrone JavaScript-Apps

Im Zeitalter der ereignisgetriebenen Web-Anwendungen, die inzwischen sowohl client- als auch serverseitig auf JavaScript basieren, kann es schnell passieren, dass sich der Code in eine "Callback Hell" verwandelt und dadurch die Wartbarkeit verschlechtert wird. Callbacks sind asynchrone Funktionsaufrufe, die nach dem Eintreffen eines bestimmten Ereignisses ausgeführt werden und weitere Logik enthalten. Callbacks müssen nicht zwangsweise etwas mit Server-Abfragen, also XMLHttpRequests, zu tun haben: Sie können auch an anderen Stellen im Code verwendet werden, wodurch sie praktisch überall in einem JavaScript-Projekt enthalten sein können.
Die "Callback Hell" entsteht also, wenn Funktionsaufrufe sehr tief ineinander verschachtelt und zudem nicht gekennzeichnet sind. Wie Entwickler die Fallstricke im Callback-Dschungel umgehen können, kann nun auf der Website CallbackHell.com nachgelesen werden.

Callback Hell - A guide to writing asynchronous javascript programs

Dort finden sich typische Negativ-Beispiele von schlecht eingesetzten Callbacks sowie Tipps, um die Code-Qualität zu verbessern. Ein Beispiel:

  • var form = document.querySelector('form');
  •  
  • Ausgangssituation:
  • form.onsubmit = function(submitEvent) { …
  •  
  • Optimierung 1:
  • form.onsubmit = function formSubmit(submitEvent) { …
  •  
  • Optimierung 2:
  • function formSubmit(submitEvent) { …
  • document.querySelector('form').onsubmit = formSubmit;

Im Wesentlichen bestehen die Möglichkeiten der Optimierungen im Benennen von Funktionen sowie dem Modularisieren und Kapseln einzelner Funktionen. Letzteres ist gerade für Node.js-Anwendungen sehr gut anwendbar, da hier mit dem CommonJS-Modulsystem und der "exports"-Funktion bereits echte Module verwendet werden können.

201310Sep

Webshell: Web-APIs einfach verwenden und kombinieren

Die Arbeit mit verschiedenen Web-APIs, also öffentliche Schnittstellen zu Google Maps, Facebook, Spotify, Soundcloud, uvm., gestaltet sich nicht immer einfach, da unterschiedliche Konventionen eingehalten werden müssen, verschiedene Datenformate vorliegen können oder Abhängigkeiten beachtet werden müssen. Besonders wenn verschiedene APIs in einer Webapp kombiniert werden sollen, kann es etwas länger dauern, bis die entsprechende Dokumentation analysiert wurde.
Abhilfe will hier das Projekt Webshell schaffen, das sich als "API für APIs" versteht: Es handelt sich um einen Gateway, der HTTP-API-Requests über eine JavaScript-Bibliothek vereinfacht. Die Web-APIs werden also nicht mehr direkt aufgerufen, sondern über den Webshell-Layer (ein Node.js-Server) angesteuert.

Webshell - The API Combinator

Webshell vereinheitlicht die API-Endpoints in ein REST/JSON-Format und stellt sie als JavaScript-Objekte zur Verfügung. Dadurch ist die Kombination mehrerer APIs denkbar einfach:

  • var m = apis.google.maps({height: "215px"})
  • m.center("San francisco")
  • m.addMarker({
  • address: "Cityhall, San Francisco, CA",
  • icon: apis.gravatar("team@webshell.io", {view: null})
  • });

Hier wurde also ein Gravatar-Bild in einem Google Maps-Widget integriert. Der Webshell API Explorer zeigt die bisher unterstützten APIs. Für die Verwendung der Webshell wird lediglich ein GitHub-Konto benötigt. Die Dokumentation gibt Aufschluss über weitere Details des Projekts.

201309Jul

JavaScriptOO: Große Liste mit Libraries und Beispielen

Umfangreiche Skript-Datenbanken wie JSDB.io, Jster oder Microjs sind nützliche Helferlein, wenn es darum geht, die richtige JavaScript-Bibliothek für einen bestimmten Zweck zu finden. Die letzte gelungene Sammlung war Unheap, die allerdings auf jQuery-Plugins beschränkt ist.
Generelle JavaScript-Lösungen werden nun auch auf der Seite JavaScriptOO.com aufgelistet. Auch hier sind die Bibliotheken in unterschiedliche Kategorien eingeteilt, so dass eine Sortierung nach Einsatzgebiet möglich ist.

JavaScriptOO - Every javascript project you should be looking into

In der Liste finden sich unter Anderem Bibliotheken für Charts, Canvas-Effekte, Animationen, Mobile-Anwendungen, MVC-Architekturen oder auch Unit Testing. Der Vorteil von JavaScriptOO ist nun, dass zu den aufgelisteten Libraries auch direkt ein lauffähiges Beispiel beiliegt, das den Einsatz der Bibliothek zeigt. Die Seite des Canvas-Frameworks Two.js wäre ein Beispiel dafür.
Es fehlen noch einige Code-Schnipsel und wer selbst entsprechenden Code beisteuern will, findet die ausstehenden Beispiele auf dieser Seite.