Softwarearchitekt.at | Schulungen, Trainings & Beratung in Deutschland und Österreich | Berater, Trainer, Autor, Dozent

 

AngularJS mit TypeScript 1.5 und ES6-Modulen nutzen

Eine lästige Angelegenheit bei der Entwicklung von Web-Anwendungen ist die Tatsache, dass sich der Entwickler darum kümmern muss, sämtliche direkt sowie auch indirekt verwendete JavaScript-Dateien über Script-Tags zu referenzieren. EcmaScript 6 löst dieses Problem durch ein Modul-System, bei dem jede Datei einen eigenen Namensraum erhält und Konstrukte für andere Dateien exportieren kann. TypeScript 1.5 unterstützt dieses Modul-System. Das ist jedoch nur die halbe Miete, denn zur Laufzeit benötigt man auch einen Module-Loader, der in der Lage ist, die referenzierten Module zu laden. [Mehr]

AngularJS-1.x-Code mit ES7-Dekoratoren kürzer und prägnanter gestalten – und dabei an 2.0 angleichen

Das neue EcmaScript-Sprachelement für Dekoratoren kommt zwar erst 2016 mit EcmaScript 7, jedoch findet man dafür jetzt schon breite Unterstützung. Beispielsweise unterstützen es Transpiler wie Babel genauso wie TypeScript 1.5. Und auch Angular 2 wird sich darauf stützen. Aus diesem Grund spricht auch nichts dagegen, heute schon Dekoratoren einzusetzen, um AngularJS-1.x-Code kürzer und prägnanter zu gestalten. Ganz nebenbei kann man damit auch den Code ähnlich wie Angular-2.0-Code gestalten und sich somit auf eine künftige Migration vorbereiten. Das hier gezeigte Beispiel ... [Mehr]

Unterlagen zu meiner Session "AngularJS hinter den Kulissen" von der DotNet Cologne

Nachfolgend die Unterlagen zu meiner Session "AngularJS hinter den Kulissen", die ich heute auf der DotNet Cologne in Köln gehalten habe. Die Idee des Beispiels ist es, zu zeigen, wie AngularJS intern funktioniert, indem einige Konzepte von Angular manuell implementiert werden. Darunter befinden sich Direktiven, wie ng-show, ng-class oder ng-repeat sowie form und ng-model, aber auch ein minimaler $http-Service und ein manuelles Bootstrapping, den den Ersatz für ng-app mit einem Attribut my-app nachahmt. Im Zuge dessen veranschaulicht das Beispiel Möglichkeiten von Direktiven, wie Transclusion oder die Kommunikation zwischen Direktiven. [Mehr]

AngularJS mit EcmaScript 6 & Starter-Kit

Mein Kollege Vildan Softic, mit dem ich gemeinsam an unserem AngularJS-Buch gearbeitet habe, hat vor einiger Zeit in unserer Kolumne bei Heise Online über das Zusammenspiel von AngularJS und EcmaScript 6 geschrieben. Dabei zeigt er, wie man mit dem Transpiler Babel und einem Gulp-Task EcmaScript 6 nach EcmaScript 5, das heute schon in jedem Browser läuft, transpilieren kann. Als Ergänzung dazu zeige ich hier anhand einer Schritt-für-Schritt-Anleitung, wie man solch ein Projekt einrichtet. Wer die hier beschriebene Schritt-für-Schritt-Anleitung nicht durchmachen, sondern gleich AngularJS und EcmaScript nutzen möchte, findet das Ergebnis dieser Anleitung in Form eines Starter-Kits hier. Die nötigen Informationen zur Nutzung dieses Starter-Kits finden sich in der darin enthaltenen Datei readme.md. [Mehr]

TypeScript 1.5 Alpha in Visual Studio installieren

Seit einigen Tagen liegt eine Alpha-Version von TypeScript 1.5 vor. Eines der Highlights dieser neuen Version ist die Unterstützung für die EcmaScript-6-basierte Module. Ein weiteres Highlight ist das Konzept der Dekoratoren. Dabei handelt es sich um einen Vorschlag [1, 2] zur Integration von Annotationen in EcmaScript [1, 2]. Das Ziel davon ist es, bestehenden Code durch das Hinterlegen von Metadaten zu erweitern. Angular 2 wird dieses Konzept nutzen und es ist davon auszugehen, dass auch andere Frameworks davon Gebrauch machen werden, zumal sich analoge Konzepte in Sprachen ebenfalls einer großen Beliebtheit erfreuen. Für TypeScript 1.5 Alpha steht ein Sublime-Text-Plugin zur Verfügung. Dieses findet man inkl. einer Installationsanleitung unter [3]. Die vorliegende Alpha-Version kann jedoch auch mit Visual Studio 2015 (CTP) und Visual Studio 2013 genutzt werden. Um TypeScript 1.5 Alpha in Visual Studio einzurichten, ist es zunächst via Git zu beziehen. Anschließend ... [Mehr]

Validierungsframework mit Dekoratoren und Annotationen in TypeScript 1.5

TypeScript 1.5 führt neben der Modul-Grammatik von EcmaScript-6 auch das Konzept der Dekoratoren ein. Dabei handelt es sich um Funktionen, mit denen andere Sprachkonstrukte annotiert werden können. Zu diesen Konstrukten zählen Funktionen, Klassen aber auch Eigenschaften. JavaScript ruft die Dekorator-Funktionen beim Start eines Skripts auf und übergibt an diese die annotierten Konstrukte. Der Dekorator hat dann die Möglichkeit, diese Konstrukte zu erweitern oder durch andere Konstrukte zu ersetzen. Einen Überblick zu diesem Sprachkonstrukt, das auch in Angular 2 zum Einsatz kommen wird, findet man unter [1] und [2]. Dieser Beitrag demonstriert anhand der aktuell vorliegenden Alpha-Version von TypeScript den Einsatz von Dekoratoren am Beispiel eines einfachen Validierungsframeworks. Die Idee ist es, für Klassen sowie deren Eigenschaften mittels Annotationen Validierungsregeln festzulegen. Das nachfolgende Beispiel zeigt eine solche Klasse ... [Mehr]

Eindrücke vom IT-Visions Infotag 2015 in Essen

Nachfolgend ein paar Eindrücke von unserem gut besuchten Infotag in Essen. Wie jedes Jahr haben wir die Gelegenheit genutzt, um uns mit unseren Kunden und Interessenten über aktuelle Entwicklungen im .NET-Umfeld zu unterhalten. Wer den Infotag versäumt hat, hat am 11. 5. im München noch einmal die Chance, dabei zu sein. Infos dazu findet man ... [Mehr]

Eigene Komponenten mit Angular 2

Eine der Stärken von AngularJS ist seit jeher die Möglichkeit, mit Direktiven eigene Komponenten zu schaffen. Ab Angular 2 basieren diese Direktiven auf Web Components. Dieser Beitrag zeigt anhand eines Beispiels, wie man damit eigene Steuerelemente erstellen kann. Im Zuge dessen geht er auf die folgenden Aspekte, die sich durch die Umstellung auf Web Components nun anders gestalten, ein: Binden von Ereignissen in eigenen Komponenten, Binden von Werten in eigenen Komponenten, Transclusion, Kommunikation zwischen Komponenten [Mehr]

Web APIs mit ASP.NET MVC 6: Serialisierung mit Formatter beeinflussen

Um die (De)Serialisierung bei ASP.NET MVC 6 zu beeinflussen, kann der Entwickler beim Start der Anwendung die standardmäßig eingerichteten Formatter konfigurieren bzw. die genannten Auflistungen manipulieren, sprich weitere Formatter hinzufügen oder bestehende entfernen. Ein Beispiel dafür findet sich im nachfolgenden Listing. Es zeigt die Methode ConfigureServices der Klasse Startup, welche sich in jedem ASP.NET-MVC-6-Projekt befindet und die Web-Anwendung beim Hochfahren initialisiert. Die Aufgabe von ConfigureServices ist es, austauschbare Komponenten über den Dependency-Injection-Mechanismus von ASP.NET zur Verfügung zu stellen. Diese Komponenten, welche sich auch Services oder Dienste nennen, hinterlegt ConfigureServices in einer vom Web-Server übergebenen Auflistung des Typs IServiceCollection ... [Mehr]

Self-Hosting mit Kestrel in ASP.NET 5 bzw. ASP.NET MVC 6

David Fowler vom ASP.NET-Produktteam hat vor einigen Tagen ein Beispiel online gestellt, das zeigt, wie man ASP.NET 5 bzw. ASP.NET MVC 6 im Self-Hosting-Modus betreiben kann. Die bis dato bekannten Beispiele zu diesem Thema verwendeten eine ASP.NET-5-Anwendung, die unter Verwendung von Kommandozeilen-Parameter zu starten war. Die Beispiele von David zeigen hingegen, wie man mit Microsofts Entwicklungs-Web-Server Kestrel mehr Kontrolle über Self-Hosting bekommt, indem man den Self-Host bei Bedarf in einer eigenen Anwendung startet. Somit könnte man den Self-Host in einem Windows-Dienst oder innerhalb einer Windows-Anwendung starten. Ich habe das Beispiel von David ein wenig erweitert, sodass es zeigt, wie man eine Startup-Klasse, die die gewünschten Middleware-Komponenten aufsetzt und Services bereitstellt, einbinden kann. Das ist zum einen nützlich, wenn man eine Anwendung sowohl via Self-Host als auch in IIS hosten möchte und hilft zum anderen zu verstehen, was beim Hosting in IIS tatsächlich passiert, wenn hier ASP.NET 5 bzw. ASP.NET MVC 6 hochfährt. Das ganze versehe ich hier zur Erklärung auch mit einigen zusätzlichen Anmerkungen. [Mehr]