Tag: oop-mvc

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, doch für echte Cross-Plattform-Apps auf JavaScript-Basis empfiehlt sich bis auf Weiteres immer noch Ionic, das auf AngularJS, PhoneGap und 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 extrem 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.

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.