Tag: oop-mvc

JavaScript: Ein Blick auf moderne Web-Frameworks

Steve Sanderson, der Entwickler von Knockout, dürfte mit seinen Worten die Zukunft von JavaScript-Anwendungen sehr gut beschreiben: Während eine größere Web-Applikation bisher mit Server-Rendering, Ajax-Schnittstellen und etwas jQuery-Code auskam, werden zukünftige Anwendungen geeignete Datenmodelle und ein solides Client-Side-Rendering erfordern. Aus diesem Grund wurden MVW-Frameworks (Model-View-Whatever) wie Knockout, Backbone oder AngularJS ins Leben gerufen. Mit dem TodoMVC-Projekt soll Entwicklern die Wahl des richtigen Frameworks erleichtert werden.
Die Leute von "SoftFinity" haben ein paar interessante Artikel zu dieser Thematik veröffentlicht, in denen sie die genannten Bibliotheken beleuchten.

Die Artikelreihe "The Battle of Modern Javascript Frameworks" zeigt Kernfunktionen, Vor- und Nachteile sowie Community-Support (Stack Overflow, GitHub) der beliebtesten Frameworks auf. Abschließend gibt es ein Fazit. Hier die Artikelreihe im Überblick:

• The Battle of Modern Javascript Frameworks – Part II: Knockout.js
• The Battle of Modern Javascript Frameworks – Part III: Backbone.js
• The Battle of Modern Javascript Frameworks – Part IV: Angular.js
• The Battle of Modern Javascript Frameworks – Part V: Ember.js
• The Battle of Modern Javascript Frameworks – Conclusion

Insgesamt schneidet Knockout dank seiner guten Dokumentation und dem interaktiven Tutorial-System sehr gut ab, wenn es um kleine bis mittlere Projekte geht. Für größere Projekte eignet sich Backbone, wobei es hier keine data-bindings gibt und strenge Konventionen eingehalten werden müssen. Wer Knockout und Backbone vereint haben möchte, greift entweder zu Knockback oder wirft einen Blick auf AngularJS, das ebenfalls viele Funktionen vereint und auf komplexere Projekte ausgelegt ist. Alles Weitere findet sich in der kurzen und dennoch sehr gelungenen Artikelreihe.

AuraJS: Framework für skalierbare JavaScript-Projekte

Viele werden den Entwickler und Chrome-Mitarbeiter Addy Osmani bereits von seinem Blog, seinen eBooks oder seinem TodoMVC-Projekt kennen. Er hat vor einiger Zeit eine sehr interessante Präsentation über skalierbare JavaScript-Anwendungen veröffentlicht, in der er auf verschiedene Aspekte von JavaScript und größeren Projekten eingeht.
Hier geht es vor allem um Entwurfsmuster, Privatisierung, asynchrone Module (AMD) und einer Widget-Architektur. Basierend auf seiner Präsentation ist nun das Framework AuraJS entstanden und steht ab sofort bei GitHub als Open-Source-Projekt bereit.

AuraJS stellt ein skalierbares Framework dar, das im Kern aus dem Mediator-Pattern (publish, subscribe, installTo) besteht und das asynchrone Laden von Modulen durch das Facade-Pattern ermöglicht. Lose Kopplung sowie das Privatisieren von Attributen und Methoden durch das Module- bzw. Facade-Pattern stehen hierbei im Vordergrund. Zudem stellt AuraJS ein Wrapper für jQuery und Dojo dar, wodurch auch DOM-Manipulationen möglich sind:

• aura.core.dom.query('#search_input').attr('title', 'test');
  aura.core.dom.animate('#button', { width: 200, duration: 50 });

Mit den Aura-Todos steht bereits ein AuraJS-Beispiel zur Verfügung, das mit Node.js und Grunt erzeugt werden kann. Die Bibliothek dürfte eine gute Inspiration für zukünftige JavaScript-Projekte mit größerem Anspruch sein.

LLJS: Speicherverwaltung mit Low-Level-JavaScript

Mit ECMAScript 5.1 und auch mit der kommenden Harmony-Version stehen in JavaScript viele neue Funktionen und Konzepte bereit, welche die Sprache noch dynamischer machen, als sie ohnehin schon ist. Entwickler, die aus dem Low-Level-Bereich kommen und mit C oder C++ gearbeitet haben, könnten bezüglich der manuellen Speicherverwaltung Interesse an dem Projekt LLJS (Low-Level JavaScript) haben: Dabei handelt es sich um einen Compiler, der C und JavaScript vereint und interessante Features wie Pointer, Structs oder Typisierung bietet. Der LLJS-Compiler kann per Node.js, in einer JavaScript-Shell (Spidermonkey) oder im Browser verwendet werden.

Der Memory Allocator in LLJS ist eine Ableitung der K&R-Implementierung in C und verwendet die Funktionen malloc und free zur Verwaltung der Heap- und Stack-Pointer. Die eigentliche Speicherverwaltung wird durch typisierte Arrays erreicht, wobei Pointer als Integer-Adressen abgelegt werden. Ein kurzes Beispiel von LLJS-Code, der Pointer und typisierte Funktionen demonstriert:

• function u16 *memcpy2(u16 *dst, u16 *src, uint length) {
• for (let int i = 0; i < length; ++i) {
• *dst++ = *src++;
• }
• return dst;
• }

Das LLJS-Projekt steht bei GitHub zur Verfügung und stellt derzeit einen Prototypen dar. Dennoch ist der Ansatz interessant, wenn es um effiziente Speichernutzung geht.

TypeScript: JavaScript-Erweiterung von Microsoft

JavaScript erlebt schon seit einiger Zeit einen Umbruch, da es durch Frameworks, Echtzeit-Interpreter und die serverseitige Verwendung auch für größere Webanwendungen wesentlich attraktiver geworden ist. Google versucht mit seiner eigenen Programmiersprache Dart dem Grundprinzip von JavaScript entgegenzuwirken. Allerdings ist die browserseitige Integration von Dart noch offen und wird nicht von allen Browserherstellern gleichermaßen angenommen. Da Dart aber auch auf dem Server ausgeführt werden kann, dürfte dieser Aspekt für Entwickler eher unwichtig sein.
Einen anderen Weg geht hier Microsoft: Wie gestern in einem Blog-Eintrag verkündet wurde, stellt Microsoft mit TypeScript ab sofort ein JavaScript-Superset zur Verfügung, das mit Node.js auf dem Server interpretiert werden kann. Bei TypeScript handelt es sich also um eine Alternative zu CoffeeScript oder LiveScript. TypeScript bietet bessere alternative Möglichkeiten zur objektorientierten Programmierung (Klassen, Kapselung, etc.), Typenüberprüfung und spezielle Schnittstellen.

Der Vorteil an TypeScript ist, dass sich bestehender JavaScript-Code weiterhin verwenden lässt und die TypeScript-Schreibweise optional ist. Zudem ist es durch sogenannte "Declare"-Dateien möglich, auf bestehenden Code (und damit auch auf JavaScript-Frameworks) zurückzugreifen. TypeScript ist Open-Source und kann auch als Visual Studio-Plugin heruntergeladen werden.

Code School: Die Anatomie von Backbone.js

Wer sich in eine Programmiersprache einarbeiten will oder die Materie zu einer komplexen Thematik vertiefen möchte, findet auch im Netz gute Anlaufstellen. Seiten wie Codecademy oder Code School bieten hier gute Quellen, die auch interaktiv genutzt werden können. So kann das Erlernte direkt auf der Seite ausprobiert und angewendet werden. Kürzlich erschien bei Code School auch eine Anleitung für Backbone.js, die Entwicklern das JavaScript-MVC-Framework näherbringen soll.

Die Anleitung, die aus Videos und interaktiven Bereichen besteht, gliedert sich in 7 Teile, in denen die Grundzüge von MVC, Templating, Events, Collections und Routing beleuchtet werden. Der komplette Kurs kostet 55 USD — hinter den Anleitungen von Code School steckt immerhin ein hoher Aufwand und die Qualität kann sich sehen lassen. Wer sich erst einmal selbst überzeugen will, kann das erste Level des Backbone-Tutorials auch ohne Anmeldung ausprobieren. Das Prinzip der "Levels" bei Code School zeigt den persönlichen Fortschritt der Anwender und hilft, das eigene Wissen in einem Bereich besser einzuschätzen.

Webentwicklung: PHP in Version 5.4.0 veröffentlicht

Die Entwickler hinter PHP haben kürzlich die Skriptsprache in Version 5.4.0 veröffentlicht. Mit dieser Version wurden diverse Neuerungen eingeführt und alte Relikte begraben: Unter Anderem wurden die INI-Direktiven "safe_mode", "magic_quotes_gpc" und "register_globals" entfernt, was viele PHP-Entwickler freuen dürfte. Zudem gibt es neue Sprachfunktionen, die das Entwickeln von PHP-Anwendungen beschleunigen können. So können Arrays nun erstellt werden mit:

• // Numerisch indiziert
• $arrayA = [1, 2, 3, 4];
•  
• // Assoziativ
• $arrayB = ["eins" => 1, "zwei" => 2, "drei" => 3];

Weiterhin können Array-Elemente direkt bei einem Funktionsaufruf referenziert werden, wie etwa "foo()[0]". Außerdem lassen sich Klassenobjekte schon bei der Instanziierung ansprechen.

Eine Liste der Neuerungen findet sich hier und die neu eingeführten Funktionen gibt es auf dieser Seite. Ein weiteres Feature stellen Traits dar, mit denen sich Code einfacher wiederverwenden lässt. Durch "use TraitName;" können also Methoden und Attribute einfach in eine Klasse übernommen werden, was einer vereinfachten Vererbung entspricht.
Die neue PHP-Version steht hier zum Download bereit und eine Anleitung zur Migration findet sich auf dieser Seite.

Knockback: Backbone.js und Knockout.js vereint

Wer mit JavaScript dynamische User Interfaces entwickeln möchte und dabei modernste Technologien einsetzen will, wird sich wahrscheinlich schon mit Knocktout.js auseinandergesetzt haben: Die unabhängige Bibliothek basiert auf dem Model-View-View Model-Prinzip (MVVM) und bietet verschiedene Features, die für das Handling von komplexen User Interfaces nützlich sein können.
Kevin Malakoff hat neben der Knockout-Bibliothek auch noch die Vorteile des MVC-Frameworks Backbone.js herangezogen und die beiden Komponenten in einer neuen Bibliothek vereint. Daraus entstanden ist Knockback, eine Schnittmenge der genannten Tools.

So unterstützt Knockback deklarative Bindings, Dependency Tracking, Object-Relational-Mapping (ORM), Serialization, HTML5-Data-Bindings, Routing, eine klare Trennung von Models, Views und Controllern (ViewModels) sowie eine Unterstützung für Mehrsprachigkeit. Damit dürften wichtige Bereiche von dynamischen JavaScript-User Interfaces abgedeckt sein. Eine Dokumentation mit Beispielen findet sich bei GitHub.

JavaScript: Sammlung mit Patterns und Anti-Patterns

In der Softwareentwicklung stellen Entwurfsmuster (Design Patterns) Lösungsansätze für bestimmte Probleme dar und lassen sich daher ganz unterschiedlich einsetzen. Ein Muster ist nur in einigen Fällen sinnvoll und sollte außerdem bestimmte Kriterien erfüllen. Auch für JavaScript gibt es bereits Entwurfsmuster, die verschiedene Bereiche abdecken.
So wie es Muster gibt, bestehen auch Antimuster (oder Anti-Patterns), die als "Bad Practices" anzusehen sind. Der Entwickler Shi Chuan hat sich die Mühe gemacht, etliche Muster und Antimuster für JavaScript zusammenzutragen. Auf dieser Website findet sich die Sammlung, die eine große GitHub-Seite widerspiegelt.

In der Sammlung finden sich allgemeine Muster, funktionale und objektbezogene Muster, Entwurfsmuster oder auch jQuery-Muster. Ein kleines Beispiel, das für die Erstellung eines Objekts das dazugehörige Muster und Antimuster zeigt:

• // Anti-Pattern
• var car = new Object();
• car.goes = "far";
•  
• // Empfohlenes Pattern
• var car = { goes: "far" };

Die Muster stammen von unterschiedlichen Quellen und diese sind auch im Quelltext vermerkt. Unter den klassischen Entwurfsmustern finden sich häufig verwendete Design-Patterns wie der Observer, das Singleton oder die Factory.
Die Sammlung soll künftig noch um weitere Patterns erweitert werden, wie etwa DOM- oder Browser-Muster.