Tag: tutorials

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.

201421Aug

AngularJS: Styleguide und dokumentiertes Lern-Projekt

Wer sich mit der Materie von AngularJS vertraut machen möchte, findet auf der Website des Frameworks schon sehr gute Anlaufstellen, darunter interaktive Tutorials und Videos. Da sich die Bibliothek langsam, aber sicher zum neuen Standard für moderne Web-Apps etabliert, finden sich auch im Netz immer mehr Anleitungen und Boilerplates, die Interessierten Webentwicklern den Einstieg erleichtern sollen. So gibt es mit Angular Motto ein dokumentiertes AngularJS-Lern-Projekt, das auf dem AngularJS Styleguide von Todd Motto basiert.

AngularJS - Superheroic JavaScript MVW Framework

In dem Styleguide finden sich verschiedene "Best Practices" wieder, die sich auch in diversen Stack Overflow-Posts finden. So wird beispielsweise die Verwendung der "controllerAs"-Methode empfohlen, mit der sich Controller-Konstruktoren auf das this-Schlüsselwort beziehen, das automatisch an $scope gebunden wird. Dadurch können die Konstruktor-Methoden für Controller als separate Funktion erstellt werden, wodurch die Verwendung einer anonymen Funktion entfällt:

  • function MainCtrl () {
  • // …
  • }
  •  
  • angular
  • .module("app", [])
  • .controller("MainCtrl", MainCtrl)

Weiterhin finden sich in dem Styleguide noch andere Tipps, wie beispielsweise die Empfehlung von Array.join('') für Templates oder der Verwendung von $scope.$digest anstelle von $scope.$apply, da Letzteres auch im $rootScope einen $digest ausführt, was wiederum mit einem Dirty-Check der $$watchers verbunden ist.
Das "Angular-Motto"-Boilerplate versteht sich nicht direkt als Basis für neue AngularJS-Projekte, sondern als Lern-Projekt, das als Referenz dienen soll. Die verschiedenen Komponenten wie Controller, Directives, Filter und Services sind kommentiert, so dass die Logik in den einzelnen Dateien besser nachvollziehbar ist.
Wer hingegen ein echtes Starter-Projekt sucht, das auch als Grundlage für eine neue Web-App genutzt werden kann, ist mit dem angular-seed bestens bedient.

201304Dez

reSRC: Sammlung freier Bücher über Programmierung

Was darf es denn sein? Ein Exkurs in die Grafikprogrammierung mit DirectX, OpenGL und Shadern? Oder doch eher die Bereiche Software-Architektur, Datenbanken, Betriebssysteme und Datamining? Allein die Liste der unterschiedlichen Fachgebiete und Programmiersprachen scheint endlos zu sein: Bei reSRC gibt es die "List of Free Programming Books", die Entwickler-Herzen höher schlagen lässt. Hier dürfte wirklich für jeden Programmierer etwas dabei sein.

reSRC - List of Free Programming Books

Neben sprachunabhängigen Bereichen, die teilweise oben schon aufgezählt wurden, gibt es für ziemlich jede Programmiersprache Links zu kostenlosen PDF-eBooks oder Websites: Von ASP.NET und Assembler über C++, CoffeeScript und Dart, vorbei an Erlang, Go, Haskell, JavaScript und Lua bis hin zu Objective-C, PHP, Processing, Python, Ruby, Scala, SQL oder gar TypeScript. Inzwischen gibt es für JavaScript sogar Unterbereiche wie Knockout.js, AngularJS, Backbone oder node.js. Da lohnt sich das Stöbern also.

201303Dez

HTML5: Tutorial für verschiedene Canvas-Zeicheneffekte

Browser-Zeichentools wie Sketchpad, Harmony oder Livebrush sind inzwischen bekannt. Die Apps sind unterschiedlich komplex und doch sind viele der eingebauten Zeicheneffekte relativ unkompliziert in der Programmierung. Juriy Zaytsev, besser bekannt ist als "kangax" und Schöpfer des unverzichtbaren "ECMAScript 5 compatibility tables", hat einen interessanten Artikel über die Erstellung verschiedener Zeicheneffekte mit dem HTML5-Canvas-Element veröffentlicht.

Perfection Kills -  Exploring canvas drawing techniques

In dem Beitrag erklärt der ehemalige Prototype.js-Core-Entwickler Stück für Stück Möglichkeiten, um eine virtuelle Zeichenfläche bzw. entsprechende Pinsel mit JavaScript zu erzeugen. Vom punkt-basierten Ansatz über Kantenglättung und Bezier-Kurven bis hin zu multiplen Pinselspitzen dürfte für jeden Geschmack etwas dabei sein. Alle Pinsel könne direkt über die eingebundenen CodePen-Widgets ausprobiert und angepasst werden. Viel Spaß beim Zeichnen!

201330Nov

Webentwicklung: Interaktive Tutorials für HTML5-Games

Seit der Einführung des Canvas-Elements steht auch HTML-Spieleentwicklern eine Grafikschnittstelle zur Verfügung, mit der sich auch komplexere Animationen und Effekte umsetzen lassen. Dabei muss nicht mehr auf CSS ausgewichen werden und zudem ist die Entwicklung dank JavaScript und der Canvas-API denkbar einfach. Doch ein HTML5-Spiel besteht nicht nur aus der Kommunikation mit der Schnittstelle, sondern erfordert vor allem Kreativität und natürlich Verständnis für mathematische Gegebenheiten.
Bei Crunchzilla finden sich interaktive Anleitungen für die Entwicklung von Browser-Games: Dabei sind die Tutorials in die Bereiche "Code Monster", "Code Maven" und "Game Maven" unterteilt.

Crunchzilla - Interaktive Tutorials für HTML5-Games

Die Bereiche sind sowohl an Jugendliche als auch an Erwachsene gerichtet: In einem Live-Editor kann JavaScript-Code bearbeitet werden und rechts daneben findet sich die entsprechende Echtzeit-Vorschau. Ein virtueller Mentor führt angehende Spieleentwickler von Beginn an durch die verschiedenen Kurse und gibt Tipps zur Entwicklung bestimmter Szenarien. So werden nach und nach kleine Spiele im Browser entwickelt, die sich durchaus sehen lassen können.

201320Nov

TogetherJS: Echtzeit-Kollaboration auf Website einbinden

Das Projekt ist zwar schon etwas älter, aber vielleicht nicht jedem bekannt: Mit Mozillas TogetherJS lässt sich ein kleines Tool zur Echtzeit-Kollaboration auf einer beliebigen Website einbetten: Nach der Einbindung wird eine kompakte Benutzeroberfläche eingeblendet, über die sich weitere Benutzer zu der aktiven Sitzung einladen lassen. Teilnehmer innerhalb einer Session können dann auf der Website miteinander chatten und die Elemente der Seite verwenden. Andere Benutzer können dabei den Mauszeiger und die Tastatureingaben in Echtzeit verfolgen.

TogetherJS - Collaboration made easy

TogetherJS arbeitet mit Web Sockets und ein Mozilla-Server (Hub) kümmert sich um das Weiterleiten der Pakete. Lediglich das Skript und ein Button zur Aktivierung müssen auf der gewüntschten Website eingebunden werden.

  • <script src="https://togetherjs.com/togetherjs-min.js"></script>
  • <button onclick="TogetherJS(this); return false;">Start TogetherJS</button>

Auf der Website des Projekts gibt es auch Beispiele, die das Testen von TogetherJS in Echtzeit erlauben. Das Skript dürfte sich für viele Szenarien als nützlich erweisen, beispielsweise bei Hilfestellungen in einem Content-Management-System oder um Website-Feedback einzuholen.