201604Jun

Angular 2 Seed: TypeScript-Starter-Kit für WebApps

Das Angular-Framework geht in die zweite Runde und auf der offiziellen Website befinden sich bereits ausführliche Tutorials und Ressourcen für Entwickler, die mit der neuen Version der Bibliothek arbeiten möchten. Angular 2 stellt eine Rundumerneuerung dar, bei der sich Einiges geändert hat: So wurden etwa Controller durch Components ersetzt, das $scope existiert in der Form nicht mehr und die Entwickler sind gänzlich auf ein Modulsystem umgestiegen. Zudem kommt RxJS zum Einsatz, was die Arbeit mit asynchronen Abläufen vereinfacht. Auch die Template-Syntax hat sich grundlegend geändert. Alles in allem ist Angular 2 aber schon jetzt ein durchdachtes und gelungenes Framework — wer sich die Alpha- und Beta-Versionen angesehen hat, dürfte einen ersten Eindruck erhalten haben.

Angular 2 Seed - A basic Angular 2 TypeScript starter project

Da ich mit den derzeitigen Seeds, also Angular 2-Boilerplates, nicht zufrieden war, habe ich einen eigenen Seed erstellt: Es handelt sich dabei um eine beispielhafte Single-Page-Application (SPA), die auf TypeScript, Sass und SystemJS basiert. Die Webanwendung enthält einen Login-Bereich sowie eine Dashboard-Ansicht, so dass es autorisierte und öffentliche Bereiche gibt. Zudem gibt es ein Directive, einen Service sowie eine Pipe. Auch eine Fehlerseite und das damit verbundene Routing-Konzept sind enthalten. Für die TypeScript- und Sass-Kompilierung sowie die Erzeugung des Angular 2-Bundles (SystemJS) kommt Gulp zum Einsatz. Hiermit kann auch eine Produktionsversion der WebApp erzeugt werden, bei der JavaScript und CSS jeweils in eine Datei zusammengeführt werden.
Eine Online-Demo des Angular 2-Seeds gibt es auf dieser Seite. Das Projekt steht bei GitHub zum Download bereit. Aktuell kommt bei dem Seed der RC1 von Angular 2 zum Einsatz.

201618Mai

GearAward: Digitale Kunstwerke von JavaScript-Künstlern

Dass sich mit HTML5, JavaScript und Canvas bzw. WebGL auch künstlerische Projekte umsetzen lassen, dürfte mittlerweile klar sein. Auf Seiten wie der GLSL Sandbox oder CreativeJS lassen sich derartige Werke begutachten. Eine weitere Seite, auf der digitale JavaScript-Kunstwerke gesammelt werden, stellt nun auch GearAward dar. Hier werden sämtliche 2D- und 3D-Effekte aufgelistet, die auch den dazugehörigen Quellcode beinhalten.

GearAward - Code-driven art

So finden sich dort etliche Canvas-Animationen, aber auch interessante WebGL-Beispiele wie etwa die THREE Image Transition, die aufwendige Bildübergänge auf Basis von THREE.js demonstriert. Bei GearAward dürften sich in der nächsten Zeit sicherlich noch mehr Beiträge finden, so dass man die Seite als Inspirationsquelle im Auge behalten sollte.

201629Mär

WebGL: Einführung in GLSL und 3D-Grundlagen

Wer sich für das Gebiet der 3D-Grafik interessiert und diese zudem im Browser darstellen möchte, kommt an WebGL und den Grundlagen von 3D-Grafikprogrammierung nicht vorbei. Es handelt es sich um ein mittlerweile sehr komplexes Feld, zumal auch die Anforderungen an dreidimensionale Darstellungen steigen. Bei WebGL handelt es sich um ein Subset von OpenGL, genauer gesagt basiert WebGL auf OpenGL ES (OpenGL for Embedded Systems). Es gibt ein paar Unterschiede im Vergleich zur OpenGL-API und was Shader betrifft, stehen in WebGL lediglich Vertex- und Fragment-Shader zur Verfügung — mit diesen beiden Arten von Shadern lassen sich dennoch aufwendige Effekte erzielen.

Can I use - WebGL 2016

Wenn man einen Blick auf die Browser wirft, die WebGL derzeit ganz oder teilweise unterstützen, lässt sich folgern, dass etwa 85% der Webbrowser mit dem 3D-Standard arbeiten können.
Der Einstieg in die Materie ist in diesem Bereich nicht gerade einfach, deshalb empfiehlt sich eine Anleitung wie die von Ilya Pestov. Es handelt sich dabei um eine Übersetzung eines russischen Artikels, der wiederum einen guten Einstieg in WebGL darstellt. Es werden GL-Grundlagen, Shader sowie Matrizen behandelt und schließlich wird am Ende ein rotierender 3D-Würfel mittels GLSL und JavaScript erzeugt.

201628Jan

Nativefier: Native Electron-Apps per Kommandozeile

Ich hatte bereits über ein Tutorial sowie UI-Komponenten für das Chromium-Framework Electron berichtet. Damit lassen sich native Desktop-Anwendungen für Windows, Mac OS X und Linux auf HTML- und JavaScript-Basis erstellen. Wer es besonders einfach möchte, kann jetzt ein Node.js-Package namens Nativefier verwenden. Damit lassen sich mit einem Befehl per Kommandozeile Electron-Apps aus Web-URLs erzeugen.

Nativefier - Wrap any web page natively without even thinking, across Windows, OSX and Linux

Nativefier lädt das aktuelle Electron-Paket herunter und erzeugt die notwendigen Dateien, je nach Plattform. Um beispielsweise Google Maps in eine Electron-App zu packen, ist lediglich folgender Befehl nötig:

  • $ nativefier maps.google.com

Im "resources"-Verzeichnis befindet sich neben den spezifischen JavaScript-Dateien eine generierte nativefier.json, in der die Einstellungen abgelegt sind. Hier sind verschiedene Optionen für die App möglich, wie etwa die Fenstergröße oder die Einstellung des Hauptmenüs. Auf der GitHub-Seite finden sich gesonderte Anleitungen für die verschiedenen Betriebssysteme, um eine komplette Anwendung samt Icon zu erstellen.