Tag: angular

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.

201418Nov

Karma HTMLfile Reporter: Unit Test-Ergebnisse als HTML

Mit Karma steht seit geraumer Zeit ein komfortables Node.js-Modul zur Verfügung, mit dem sich automatisiert JavaScript-Unit Tests ausführen lassen. Dabei kann auf bekannte Test-Bibliotheken wie Jasmine, Mocha oder QUnit zurückgegriffen werden. Bisher hatte ich Karma in erster Linie bei AngularJS-Projekten im Einsatz und hier leistet es ganze Arbeit. Lediglich die Ausgabe der Unit Test-Ergebnisse in der Konsole störten etwas, weshalb ich ein Karma-Reporter-Plugin geschrieben habe, mit dem sich die Ergebnisse übersichtlich auf einer HTML-Seite ausgeben lassen.

Karma HTMLfile Reporter - Unit Test-Ergebnisse als HTML

Entstanden ist schließlich der Karma HTMLfile Reporter, der mittlerweile schon ein Jahr bei GitHub bereitsteht. Dennoch könnte es für einige Entwickler interessant sein, um sich einen besseren Überblick über die ausgeführten Unit Tests zu verschaffen.

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

201418Okt

Node.js: Desktop-File-Player auf Node-Webkit-Basis

Mit dem Node-Webkit-Projekt lassen sich ähnlich wie mit Mozillas XULRunner Desktop-Anwendungen für Windows, Mac OS X und Linux erstellen und dabei mit HTML, CSS und JavaScript entwickeln. Das Node-Webkit erlaubt die Ausführung von Node.js-Skripten, wodurch schnell und einfach funktionsfähige Desktop-Apps erzeugt werden können. Mit Gravit.io steht beispielsweise ein erster Vektor-Editor zur Verfügung und mit dem Node-Webkit File Player gibt es nun ein weiteres interessantes Projekt, mit dem diverse Dateitypen wie etwa TXT, LOG, JSON, MD, MP3, MP4, PNG oder JPEG "abgespielt" werden können.

Node-Webkit File Player - A File player for your desktop

Das Projekt dürfte eine gute Inspirationsquelle für eigene Desktop-Anwendungen sein. Es basiert neben Webkit auf den bewährten Frameworks Express und AngularJS. Das Scaffolding übernimmt der Generator slush-wean und alle weiteren Infos finden sich in dem Blog-Beitrag. Der Entwickler hat noch einen weiteren Beitrag verfasst, in dem es allgemein um erste Apps mit Node-Webkit geht.

201413Okt

AngularJS: Directives und Services für Material Design

Die neuen Material Design-Spezifikationen von Google dürften mittlerweile in aller Munde sein. Dabei handelt es sich um Design-Guidelines, die unter Anderem bei Android 5.0 für die Optik eingesetzt werden. Die Guidelines enthalten etliche Richtlinien und Empfehlungen für die Gestaltung von interaktiven Anwendungen, die auf mehrere Endgeräte ausgelegt sind. Das "Material Design" orientiert sich dabei stark an haptischen Gegebenheiten wie taktilem Feedback.
Mit dem Paper Elements Sampler des Polymer Projects stehen bereits Web-Komponenten bereit, die den Ideen des Material Designs folgen. Nun haben einige Core-Entwickler von AngularJS und Ionic das Ganze auch für AngularJS umgesetzt.

Material Design for AngularJS Apps

Eine Demo-Seite gibt es hier. Es handelt sich in erster Linie um erweiterte Attribute für bestehende DOM-Elemente und Directives/Services. Ein Beispiel für einen Material Design-Button:

  • <md-button noink class="md-button-colored">
  • Button (noInk)
  • </md-button>

Die Directives bestehen aus etlichen Bedienelementen wie Schaltflächen, Listen, Radio-Buttons, Slider, Header, Schalter, Tabs, Toolbars und vielem mehr. Viel Spaß beim Ausprobieren!

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.

201414Sep

Responsive Test: Online-Tool für responsive Websites

Mit Screenfly oder resizeMyBrowser stehen bereits Online-Tools zum Testen von Website-Größen bereit: Per iframe kann hier eine beliebige URL geladen und die Seite mit verschiedenen Fenstergrößen betrachtet werden. Mit Responsive Test steht nun ein weiterer Vertreter dieser Art zur Verfügung, der auf AngularJS und Bootstrap basiert.

Responsive Test - Test responsive layout, powered by AngularJS and Bootstrap 3

Das Tool bietet vordefinierte Größen von Smartphones und Tablets an, wodurch sich Media Queries und andere responsive Anpassungen testen lassen. Für jede Option wird ein semantischer Link erzeugt, der die unterschiedlichen Parameter des Tools enthält und somit weitergeleitet werden kann. Bei GitHub findet sich der Quellcode des Projekts.