Tag: tutorials

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.

201311Sep

ECMAScript 6: Ein Blick auf Arrow Functions

Die sechste Version des ECMAScript-Standards mit dem Namen "Harmony" soll im Dezember 2013 fertiggestellt werden. Schon jetzt macht die Feature-Liste Lust auf das neue JavaScript: Block-Scopes, Typed Objects, Spreads, Proxies, Module und verbesserte Methoden für Iterationen zeichnen die wichtigsten Neuerungen aus. Ebenfalls interessant sind die sogenannten "Arrow Functions", deren Bezeichnung von der Verwendung des Arrow-Operators (=>) abgeleitet ist.

ECMAScript 6 - Harmony

Arrow Functions vereinfachen in bestimmten Situationen Methoden-Aufrufe und bieten zudem ein lexikalisches "this"-Binding, so dass "this" an der Stelle im Kontext steht, an der die Arrow Function aufgerufen wurde. Ein Beispiel:

  • var PageHandler = {
  • init: function() {
  • document.addEventListener("click",
  • event => this.doSomething(event.type), false);
  • },
  • doSomething: function(type) {
  • // Code
  • }
  • };

Weitere Beispiele und Erklärungen finden sich in diesem Artikel bei NCZOnline. Sehenswerte Präsentationen über die Neuerungen von ES6 allgemein gibt es hier und auf dieser Seite.

201328Mai

JavaScript: Ein Blick auf moderne Web-Frameworks

Steve Sanderson, der Entwickler von Knockout, dürfte mit seinen Worten die Zukunft von JavaScript-Anwendungen sehr gut beschreiben: Während eine größere Web-Applikation bisher mit Server-Rendering, Ajax-Schnittstellen und etwas jQuery-Code auskam, werden zukünftige Anwendungen geeignete Datenmodelle und ein solides Client-Side-Rendering erfordern. Aus diesem Grund wurden MVW-Frameworks (Model-View-Whatever) wie Knockout, Backbone oder AngularJS ins Leben gerufen. Mit dem TodoMVC-Projekt soll Entwicklern die Wahl des richtigen Frameworks erleichtert werden.
Die Leute von "SoftFinity" haben ein paar interessante Artikel zu dieser Thematik veröffentlicht, in denen sie die genannten Bibliotheken beleuchten.

The Battle of Modern Javascript Frameworks – Knockout, Backbone.js und AngularJS

Die Artikelreihe "The Battle of Modern Javascript Frameworks" zeigt Kernfunktionen, Vor- und Nachteile sowie Community-Support (Stack Overflow, GitHub) der beliebtesten Frameworks auf. Abschließend gibt es ein Fazit. Hier die Artikelreihe im Überblick:

Insgesamt schneidet Knockout dank seiner guten Dokumentation und dem interaktiven Tutorial-System sehr gut ab, wenn es um kleine bis mittlere Projekte geht. Für größere Projekte eignet sich Backbone, wobei es hier keine data-bindings gibt und strenge Konventionen eingehalten werden müssen. Wer Knockout und Backbone vereint haben möchte, greift entweder zu Knockback oder wirft einen Blick auf AngularJS, das ebenfalls viele Funktionen vereint und auf komplexere Projekte ausgelegt ist. Alles Weitere findet sich in der kurzen und dennoch sehr gelungenen Artikelreihe.

201211Dez

JavaScript: Mixins mit ECMAScript 5 verwenden

Mit dem Einsatz von Mixins in JavaScript lassen sich Eigenschaften und Methoden eines Objekts auf ein Anderes übertragen. Dies wird in der Regel durch eine klassische "extend"- oder "augment"-Funktion erreicht, welche die Attribute eines Quell-Objekts per "hasOwnProperty()" überprüft und anschließend auf das Ziel-Objekt kopiert.
Wer bei einer WebApp ECMAScript 5 und die damit verbundenen Getter und Setter verwenden kann, könnte auf ein Problem stoßen, das in diesem Artikel beschrieben wird.

NCZOnline - Are your mixins ECMAScript 5 compatible

So muss darauf geachtet werden, dass die Funktion, die Mixins erlaubt, auch die lokalen Getter und Setter berücksichtigt. Das Problem liegt daher im Scoping, da innerhalb des Ziel-Objekts eines Mixins ein eigenes Scope mit lokalen Variablen vorliegt. Eine Mixin-Funktion für ECMAScript 5 kann also so aussehen:

  • function mixin(receiver, supplier) {
  • Object.keys(supplier).forEach(function(value, property) {
  • Object.defineProperty(receiver, property, Object.getOwnPropertyDescriptor(supplier, property));
  • });
  • }

Eine Variante, die ein Fallback für ECMAScript 3 enthält, findet sich ebenfalls in dem Artikel.