Tag: oop-mvc

201421Sep

React Starter Kit: Einstieg für das Facebook-Framework

Das Frontend-Framework React dürfte mittlerweile in aller Munde sein. Zusammen mit AngularJS zählt es zu den Next-Gen-JavaScript-Frameworks, die mit MVC-Konzepten auskommen oder gar darüber hinausgehen, wie es Facebook mit seiner Flux-Architektur zeigt.
Die neuen Frameworks sind durch ihre Komplexität nicht gerade leicht zu verstehen, weshalb es bereits diverse Bücher und Tutorials gibt. Für React gibt es jetzt bei GitHub das React Starter Kit, das den Einstieg erleichtern soll.

React - A JavaScript library for building user interfaces

Dabei kommen moderne Techonlogien zum Einsatz: Neben der eigentlichen React.js-Bibliothek zählen Gulp, Webpack, BrowserSync und Bootstrap zu den Bestandteilen des Starter Kits. Auch der Karma Test Runner ist mit an Bord, der schon in AngularJS zur Grundausstattung gehört, um Unit Tests mit Jasmine durchzuführen.
Das Skeleton des React Starter Kits ist leicht verständlich und dürfte für viele Einsteiger einige Hürden nehmen, da gerade die Komponenten sowie die Verwendung von JSX-Templates am Anfang eine Herausforderung darstellen können.

201430Aug

JavaScript: Angular und React/Flux im Vergleich

Mittlerweile bieten sich für JavaScript etliche Frameworks und Lösungen an, mit denen sich eine Webanwendung umsetzen lässt. Gerade AngularJS und Facebooks React/Flux bieten durchdachte Funktionalitäten, die auf größere WebApps ausgelegt sind. Die Auswahl dürfte hier schwer fallen, da sich die Komponenten von React und Directives von AngularJS sehr ähnlich sind. Beide Konzepte zeichnen sich durch Zwei-Wege-Bindings und der einfachen Verknüpfung mit DOM-Elementen aus. React erlaubt zudem JSX-Templates, die das direkte Einbinden von HTML-Markup erlauben.

AngularJS - Superheroic JavaScript MVW Framework

Die Entscheidung für Components, Dispatcher und Stores oder Directives, Services und Controller kann durch die Betrachtung von direkten Code-Beispielen vereinfacht werden. Mittlerweile gibt es hierfür schon gute Ansätze, beispielsweise das bekannte TodoMVC-Projekt, das bei der Auswahl eines MV*-Frameworks behilflich sein soll.
Weiterhin gibt es von Pete Hunt bei Quora einen hilfreichen Artikel, bei dem AngularJS und React gegenübergestellt werden. Auch der Beitrag von Christian Alfoni zeigt mögliche Fallstricke der beiden Frameworks auf, wobei hier ein Backbone-Projekt die Basis darstellt.

201427Aug

JavaScript: Black Box Driven Development als Grundlage

Konzepte wie private Methoden oder Information Hiding sind in JavaScript nicht sofort ersichtlich, aber mit den richtigen Design Patterns sind auch diese Bereiche einfach zu bewerkstelligen. Das Module Pattern hat sich hierfür schon seit langer Zeit bewährt und eigentlich sollte es mittlerweile zum Standard geworden sein, da es gegenüber der Prototype- und Konstruktor-Methodik via new nur Vorteile bietet: Kapselung, private Methoden und ein Interface-Objekt, das nach außen gereicht wird und später beliebig erweitert werden kann. Eine echte Vererbung ist in JavaScript in der Regel nicht notwendig, denn es gilt: Composition over inheritance. So können bestehende Pseudo-Klassen, die auf dem Module Pattern aufbauen, instanziiert und schließlich erweitert werden.

Black Box Driven Development in JavaScript

Dass dieses Entwurfsmuster als Grundlage für JavaScript-Projekte dienen sollte, ist auch bei Mozilla bekannt. Hier wird die Bezeichnung "Black Box Driven Development" gewählt und im entsprechenden Artikel werden anhand von einfachen Code-Beispielen die Vorteile des "Revealing Module Pattern" aufgezeigt.

201426Aug

ECMAScript 6: Vergleich der neuen Funktionen mit C#

Zwei Programmiersprachen in einem Vergleich gegenüberzustellen ist immer etwas schwierig, vor allem wenn eine der Sprachen aus der Browser-Welt stammt und die Andere aus der Windows- und Server-Welt. Dennoch zeigt der Artikel von Marcell Spies interessante Vergleiche der neuen ES6-Funktionen und C# auf. Der Beitrag dürfte vor allem für C#-Entwickler interessant sein, da es zu fast jedem JavaScript-Feature ein entsprechendes C#-Snippet gibt.

ECMAScript 6 - Vergleich der neuen Funktionen mit C#

Aber auch für Web-Entwickler, die sich mit den neuen Funktionen von ECMAScript 6 vertraut machen möchten, dürfte der Artikel einen Blick wert sein: Die neuen Funktionen des JavaScript-Standards werden durch einfache Code-Snippets beleuchtet, angefangen bei Klassen und Modulen über Block Scopes und Rest-Parametern bis hin zu Lamdba-Operatoren, Generator-Funktionen und Promises. Der Beitrag dürfte also einen Platz in den Lesezeichen finden, wenn es um weitere Tipps für ES6 gibt.

201422Aug

DeLorean.js: Framework für Flux-Architekturen

Mit React wurde vor einiger Zeit ein JavaScript-Framework von und für Facebook veröffentlicht: Dabei handelt es sich um eine Komponente der Flux-Architektur, die sich als Pattern für Web-Applikationen versteht und bei dem sozialen Netzwerk zum Einsatz kommt. React stellt in der Flux-Architektur einen "View-Controller" dar, der sich bei dem Konzept in den unidirektionalen Datenfluss einfügt — dadurch wird die Business-Logik einfacher als bei einer MVC-Anwendung und die Daten bleiben in allen Bereichen, also auf dem Server und im Client, konsistent.

Flux - Application Architecture for Building User Interfaces

Eine Flux-Anwendung besteht also aus den drei folgenden Bereichen: Dispatcher, Stores und Views, wobei Letztere durch das React-Framework und JSX-Templates repräsentiert werden. Änderungen im Client werden also von einer React-Komponente erkannt und an eine Web-API weitergegeben, die wiederum lokale Stores durch entsprechende Dispatcher aktualisiert, wobei ein Dispatcher dafür sorgt, dass auf eventuelle Callbacks von anderen abhängigen Stores gewartet wird. Wer das Ganze in Aktion sehen möchte, kann sich das Flux Chat Example dazu ansehen.
Eine weitere interessante Anlaufstelle für das Flux-Pattern stellt nun auch das Framework DeLorean.js dar, das nicht nur mit React, sondern auch mit anderen Lösungen, wie etwa Flight.js von Twitter, eingesetzt werden kann. Durch entsprechende Fiddles von DeLorean.js dürfte die Funktionsweise von Flux etwas einfacher zu verstehen sein.

201421Aug

AngularJS: Styleguide und dokumentiertes Lern-Projekt

Wer sich mit der Materie von AngularJS vertraut machen möchte, findet auf der Website des Frameworks schon sehr gute Anlaufstellen, darunter interaktive Tutorials und Videos. Da sich die Bibliothek langsam, aber sicher zum neuen Standard für moderne Web-Apps etabliert, finden sich auch im Netz immer mehr Anleitungen und Boilerplates, die Interessierten Webentwicklern den Einstieg erleichtern sollen. So gibt es mit Angular Motto ein dokumentiertes AngularJS-Lern-Projekt, das auf dem AngularJS Styleguide von Todd Motto basiert.

AngularJS - Superheroic JavaScript MVW Framework

In dem Styleguide finden sich verschiedene "Best Practices" wieder, die sich auch in diversen Stack Overflow-Posts finden. So wird beispielsweise die Verwendung der "controllerAs"-Methode empfohlen, mit der sich Controller-Konstruktoren auf das this-Schlüsselwort beziehen, das automatisch an $scope gebunden wird. Dadurch können die Konstruktor-Methoden für Controller als separate Funktion erstellt werden, wodurch die Verwendung einer anonymen Funktion entfällt:

  • function MainCtrl () {
  • // …
  • }
  •  
  • angular
  • .module("app", [])
  • .controller("MainCtrl", MainCtrl)

Weiterhin finden sich in dem Styleguide noch andere Tipps, wie beispielsweise die Empfehlung von Array.join('') für Templates oder der Verwendung von $scope.$digest anstelle von $scope.$apply, da Letzteres auch im $rootScope einen $digest ausführt, was wiederum mit einem Dirty-Check der $$watchers verbunden ist.
Das "Angular-Motto"-Boilerplate versteht sich nicht direkt als Basis für neue AngularJS-Projekte, sondern als Lern-Projekt, das als Referenz dienen soll. Die verschiedenen Komponenten wie Controller, Directives, Filter und Services sind kommentiert, so dass die Logik in den einzelnen Dateien besser nachvollziehbar ist.
Wer hingegen ein echtes Starter-Projekt sucht, das auch als Grundlage für eine neue Web-App genutzt werden kann, ist mit dem angular-seed bestens bedient.

201411Aug

ECMAScript 6: Playground-Projekt zum Experimentieren

Für die nächste Version von ECMAScript, also ES6, gibt es mittlerweile diverse Tools und Artikel, die den Einstieg in die Zukunft von JavaScript etwas erleichtern. Neben Addy Osmani hat mittlerweile auch Karma- und AngularJS-Entwickler Vojta Jina bei GitHub ein Repository erstellt, das sich um ES6 dreht: Der ES6++ Playground stellt ein leeres Projekt dar, mit dem sich der kommende JavaScript-Standard direkt ausprobieren lässt. Traceur und RequireJS sind unter Anderem integriert, um die entsprechenden Funktionalitäten von ES6 zu simulieren.

ECMAScript 6 - Harmony

ECMAScript 6 wird Module unterstützen, Polymorphie und etliche weitere Funktionen, die aus anderen Programmiersprachen bekannt sind. Das "++" im Titel des ES6++ Playgrounds steht für zusätzliche Features, die nicht in den Spezifikationen enthalten sind, aber vom AngularJS-Team für die eigene Entwicklung eingesetzt werden. Dazu zählen Meta Data Annotations und Type Annotations. Durch Letzteres wird also zum Beispiel Folgendes möglich:

  • function request(url: String, data: Object, callback: Function) {
  • // …
  • }

Das GitHub-Repository basiert auf Node.js sowie dem Task Runner Gulp.js. Viel Spaß beim Ausprobieren von ES6.

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...