Tag: oop-mvc

201507Jun

JavaScript: ECMAScript 6 schon jetzt für Projekte einsetzen

Die Features von ECMAScript 6 (Harmony) können im Prinzip schon jetzt in 2015 für Projekte verwendet werden: Durch Transpiler wie Babel oder Traceur wird geschriebener ES6-Code für Browser in entsprechenden ES5-Fallback-Code umgewandelt, sofern diese ES6-Funktionen noch nicht unterstützen. Weiterhin empfiehlt sich die Verwendung eines Modulsystems (RequireJS, SystemJS), da durch ES6 echte Klassen und Module möglich sind. Zudem sollte ein Package-Manager wie jspm eingesetzt werden, um automatische Abhängigkeiten aufzulösen.

ECMAScript 6 - Harmony

Mit diesen Voraussetzungen lassen sich ohne Probleme schon jetzt moderne Web-Projekte auf ES6-Basis entwickeln. Damit der ganze Prozess etwas leichter verständlich wird, sind hierzu zwei Artikel zu empfehlen:

Die beiden Artikel ergänzen sich gegenseitig und stammen von angesehenen JavaScript-Entwicklern (Dr. Axel Rauschmayer und Cody Lindley von Telerik). Ein Blick auf ES6 lohnt sich in jedem Fall, zumal auch AngularJS 2 darauf basieren wird und Module einsetzt. Wer mit ES6 experimentieren möchte, nutzt dazu am besten den TypeScript Playground oder den Babel-REPL (Read-Eval-Print-Loop).

201529Mai

JavaScript: JSX anhand von React-Komponenten erklärt

Mit React hat Facebook auch JSX eingeführt, eine JavaScript-Syntax-Erweiterung, mit der XML-Notationen in JavaScript-Objekte transformiert werden. Obwohl die Verwendung von JSX in React optional ist, empfiehlt sich die Anwendung von JSX-Templates in React-Komponenten. Allerdings sollte klar sein, dass sich bei JSX nicht um eine Template-Sprache (wie etwa Handlebars oder EJS) handelt: JSX stellt eine deklarative Syntax dar, um das virtuelle DOM von React darzustellen. Der virtuelle DOM-Tree wird schließlich mit dem eigentlichen DOM-Tree der HTML-Seite abgeglichen, wobei nur die Änderungen synchronisiert werden.

JSX muss zudem nicht ausschließlich für HTML verwendet werden, sondern kann allgemein für das Abbilden von beliebigen Objektbäumen genutzt werden. Auch das Event-Handling unterscheidet sich bei JSX zu dem von anderen Template-Engines: Events werden an die React-Root-Node delegiert, wodurch nicht für mehrere Elemente Event-Listener im Speicher gehalten werden müssen.
Diese und weitere Aspekte werden in einem Artikel auf Medium.com beschrieben. Entwickler sollen dadurch ein besseres Bild von der Technologie erhalten, um sie zusammen mit React-Komponenten einsetzen zu können.

201525Mai

JavaScript: Alternative Konzepte zu Flux und React

Mittlerweile dürften die meisten JavaScript-Entwickler mit den Begriffen Flux oder React etwas anfangen können. Facebook hat damit neue Methoden zur Entwicklung moderner Webanwendungen geschaffen. Neben einem virtuellem DOM und einem unidirektionalen Datenfluss stehen bei React ein Klassensystem, Event-Emitter, Actions und Stores im Vordergrund der Funktionsweise. Das ganze stellt eine mögliche Lösung dar, bietet aber zugleich Raum für Weiterentwicklungen.

Flux - Application Architecture for Building User Interfaces

Inzwischen gibt es zwei Vertreter, welche die Paradigmen von Facebook analysiert und verändert haben. Zum einen hat der Entwickler Matti Lankinen eine Alternative beschrieben, die auf Bacon.js und React basiert: Hier wird also die Flux-Architektur mit ihren Konventionen aufgelöst und durch "Functional Reactive Programming (FRP)" ersetzt, bei dem Event-Streams die Grundlage bilden. Actions und Stores werden überflüssig, da eine "öffentliche API" als lokaler Dispatcher agiert und die Zustände innerhalb der Anwendung regelt. Eine beispielhafte TodoMVC-App demonstriert die Funktionsweise.
Der zweite Ansatz bezieht sich auf das UI-Framework Deku: Hierbei handelt es sich um eine funktionale Alternative zu React, die auf das Klassensystem verzichtet. ES6, JSX sowie Komponenten kommen hier weiterhin zum Einsatz, lediglich das Rendering gleicht bei dieser Idee dem einer Game-Engine.

201506Mai

JavaScript: Einführung in die Konzepte von React.js

Mit React.js stellen die Entwickler von Facebook schon seit geraumer Zeit eine Alternative zu AngularJS oder anderen MVW-Frameworks zur Verfügung. Zuletzt wurde mit React Native sogar ein Framework vorgestellt, mit dem sich native Mobile-Apps auf der Basis des JavaScript-Frameworks entwickeln lassen.
Der Einstieg in das vielseitige Framework gestaltet sich aber nicht unbedingt einfach, da verschiedene Konzepte verwendet werden und komplexe Bereiche abgedeckt werden. Die Entwickler von RisingStack haben daher ein ausführliches Tutorial veröffentlicht, das die Welt von React besser verständlich machen soll.

React - A JavaScript library for building user interfaces

Behandelt werden in dem Artikel die grundlegenden Themen rund um die JavaScript-Bibliothek. React setzt auf ES6 (mittels Babel-Transpiler) und Komponenten, die wiederum JSX-Templates beinhalten. Bei JSX handelt es sich um eine JavaScript-Erweiterung, welche die direkte Einbindung von XML-Code in JavaScript und Zwei-Wege-Bindings ermöglicht. React verarbeitet schließlich die JSX-Views, verknüpft dynamische Daten (Backend) in einem virtuellem DOM, welches für die Präsentation sorgt und auf Änderungen wartet (unidirektionaler Datenfluss). Dieser Sachverhalt wird ausführlich in dem Artikel beschrieben und am Ende wird noch eine mögliche Anwendungsstruktur aufgezeigt.
Mittlerweile ist auch schon der zweite Teil von insgesamt drei Teilen veröffentlicht worden.

201501Apr

React Native: Native Apps mit React/JavaScript erstellen

Und noch einmal Facebook: Bei den hauseigenen Open Source-Projekten tut sich momentan etwas. Noch steht die Veröffentlichung der eigenen IDE namens Nuclide aus und inzwischen wurde auch das Framework React Native zum Open Source-Projekt gemacht. Damit lassen sich native Apps für mobile Geräte auf Basis von React erzeugen. Derzeit steht nur die iOS-Version bereit, womit sich jedoch schon arbeiten lässt. Installiert wird das Framework per Node.js und auch die App-Entwicklung stützt sich ganz auf die V8-Engine: Zu Beginn läuft ein lokaler Server, auf den die App zugreift, so dass die App bzw. der View bei Code-Änderungen nur per Tastenkürzel neu geladen und nicht neu kompiliert werden muss.

React Native - A framework for building native apps using React

Das Beispiel funktioniert soweit einwandfrei, doch will man komplexere Anwendungen erstellen oder andere React-Widgets benutzen, erfordert es schon tiefer gehende Kenntnisse des Facebook-Frontend-Frameworks. Bei GitHub finden sich schon etliche Beispiele, welche die verschiedenen Komponenten oder gar Spiele demonstrieren.
Insgesamt ist der Ansatz interessant, allerdings lässt die Android-Unterstützung noch auf sich warten. Daher empfiehlt sich für die schnelle Entwicklung hybrider Cross-Plattform-Apps auf JavaScript-Basis vorerst das Ionic-Framework, das auf AngularJS und PhoneGap bzw. Cordova basiert und eigene JavaScript-/CSS-Komponenten bietet. Wer also ohnehin schon mit AngularJS vertraut ist, dürfte mit dem Ionic-Framework bestens bedient sein. Auch hier geht die App-Entwicklung dank Node.js und LiveReload sehr schnell von statten.

201511Mär

ANNE: Stack aus AngularJS, Node, Neo4J und Express

Für moderne Webanwendungen muss nicht immer ein LAMP-Stack (Linux, Apache, MySQL, PHP) her: Dank der Beliebtheit von Node.js und NoSQL-Datenbanken eröffnen sich Webentwicklern in diesem Bereich neue Möglichkeiten. Mit Node.js steht ein plattformunabhängiges Server-System bereit, das mit bestehenden NoSQL-Lösungen harmoniert. Zusammen mit dem Express-Framework, das sich mittlerweile als Quasi-Standard etabliert hat, werden neue Konstellationen möglich, um eine Webanwendung zu betreiben. MEAN (MongoDB, Express, AngularJS, Node.js) stellt einen dieser Technologie-Stacks dar.
Wer hier noch eine weitere Alternative sucht, könnte mit dem ANNE Stack (AngularJS, Node, Neo4J, Express) gut beraten sein: Hier kommt die Graph DB Neo4j zum Einsatz, die eine RESTful API bietet und über die Cypher-Syntax angesprochen werden kann.

ANNE Stack - AngularJS, Node, Neo4J and Express

In dem Blog-Eintrag von 42id wird der ANNE Stack anhand eines Problems beschrieben. Die dazugehörige Beispiel-Anwendung, ein System zur Verwaltung von Medikamenten, steht bei GitHub zum Download bereit. Der Stack dient in jedem Fall als Inspiration und gibt Einblick in eine mögliche Server-Anwendung auf Basis von Node.js.

201405Nov

Angular 2.0: Ausblick auf die Zukunft des Frameworks

Wer ab und zu auf der offiziellen AngularJS-Website vorbeischaut, wird eventuell auch das Video "Angular 2.0 Core by Igor Minar & Tobias Bosch at ng-europe 2014" gesehen haben. Die kommende Version 2.0, die frühestens Ende 2015 erwartet wird, zeichnet sich durch eine komplette Rundumerneuerung aus: An der Template-Engine hat sich Einiges getan, Web Components werden unterstützt und der neue Core basiert schließlich auf ES6 — genauer gesagt basiert er auf AtScript, einem TypeScript-Pendant von Google. Die Keynote zu AtScript findet sich bei YouTube. Natürlich wird AngularJS 2.0 auch nach ES5 kompilieren, um jetzige Browser zu unterstützen.

AngularJS - Superheroic JavaScript MVW Framework

Auch der Einsatz des jqLite-Wrappers wird optional, da Angular 2.0 auf neue Browser-Technologien ausgelegt sein wird. Diese beinhalten moderne DOM-Methoden, Web Components, Shadow DOM, Object.observe(), ES6 und ES7. Das sind die Funktionalitäten, die Angular bereits jetzt größtenteils abgedeckt und simuliert. Mit Object.observe() etwa werden Zwei-Wege-Data-Bindings nativ möglich sein und viele weitere Bereiche werden Angular in seiner jetzigen 1.x-Form ablösen. Die Community ist hier derzeit gespalten, da sich eine Migration von 1.x auf 2.x sehr komplex gestalten wird. An die Anpassungen, die Angular-Frameworks wie Ionic vornehmen müssen, ist hier noch garnicht zu denken.
Es gibt natürlich kritische Stimmen, die die negativen Seiten des MVW-Frameworks beleuchten und auch widerlegen. Doch viele der Punkte werden in Angular 2.0 nicht mehr relevant sein, da es beispielweise kein $scope mehr geben wird. Entgegen einiger Meinungen hat die Erfahrung gezeigt, dass sich AngularJS hervorragend für größere Projekte, mobile WebApps (PhoneGap/Cordova) oder gar Desktop-Anwendungen eignet und durch eventuell notwendige Optimierungen eine solide Arbeitsweise an den Tag legt.

201426Okt

Flux: Unidirektionaler Datenfluss mit AngularJS

Facebook macht mit seiner Flux-Architektur schon seit einiger Zeit Gebrauch von dem Prinzip des unidirektionalen Datenflusses. Grundsätzlich muss das Flux-Konzept nicht unbedingt mit Facebooks React-Framework umgesetzt werden, denn es handelt sich nur um eine Alternative zum klassischen MVC-Ansatz, die auf moderne Web-Applikationen ausgelegt ist. Bei Flux findet sich die eigentliche Business-Logik in den Stores, die die Daten aus den Views durch Dispatcher erhalten. Dieses Konstrukt lässt sich auch einfach mit AngularJS umsetzen – ein Beispiel dafür liefert dieser Beitrag, der die verschiedenen Bereiche beleuchtet.

AngularJS - Superheroic JavaScript MVW Framework

In dem Artikel greift der Entwickler Victor Savkin zudem auf ES6-Elemente wie Arrow Functions oder class zurück, um die entsprechenden Funktionalitäten umzusetzen. Auch der EventEmitter, der als Message-Bus-System fungiert, wird in dem Beitrag selbst geschrieben. Hierfür könnte aber auch auf $scope.emit zurückgegriffen werden, da AngularJS bereits von Haus aus mit einem soliden PubSub-System ausgestattet ist.
Der Beitrag dürfte dennoch interessant für Webentwickler sein, die den Flux-Ansatz einmal ohne React und JSX ausprobieren wollen. Zudem gibt der Autor Hinweise auf eine mögliche Komplexität, die sich durch Flux in einer größeren Anwendung ergeben kann.