Tag: entwicklung

201330Dez

Web 3.0: JavaScript-Frameworks und die Zukunft

Die Überschrift wurde absichtlich mit dem Buzzword "Web 3.0" versehen, da die "Versionsnummer des Webs" häufig als Synonym für die Zukunft des Internets gebraucht wird und die Bezeichnung den Kern dieses Artikels trifft: Es geht nicht um das Web 3.0 in seiner Gesamtheit, also um künstliche Intelligenz und Ubiquitous Computing, sondern um den Beginn einer neuen JavaScript-Ära. Während die Bezeichnung "Web 2.0" im Bezug auf JavaScript die bisherigen JavaScript-Frameworks und damit vor allem jQuery kennzeichnet, lässt sich in 2013 ein Umschwung im Bereich der Webentwicklung erkennen, der durch neue Ansätze wie MVC-Frameworks oder Node.js geprägt ist. Die jQuery-Epoche ist zwar noch allgegenwärtig, doch mit der stärkeren Verbreitung moderner Webbrowser und HTML5/CSS3 sowie ECMAScript 5 bzw. 6 wird sich das in Zukunft ändern.

JavaScript und Webstandards seit 2009

Die Grafik soll in etwa veranschaulichen, wie die Entwicklung von Webstandards und JavaScript-Frameworks seit 2009 vorangeschritten ist. ECMAScript 6 alias "Harmony" soll Ende 2013 seinen finalen Status erreichen. Bibliotheken wie MooTools, Prototype oder Dojo wurden einst entwickelt, um das Schreiben von JavaScript-Anwendungen einfacher zu machen und eine Website leichter mit Besonderheiten ausstatten zu können. Dazu zählten hauptsächlich Animationen und der Umgang mit Ajax, was JavaScript schließlich zum Durchbruch verhalf. Auch heute sind die Features aktueller Frameworks noch immer essenziell, wenngleich sich die Verteilung und Popularität der verschiedenen Bibliotheken etwas geändert hat. Die obige Grafik zeigt die Beliebtheit der JavaScript-Frameworks und jQuery dürfte heute, also Ende 2013, der klare Liebling im Bereich der Ajax- und DOM-Frameworks sein.

Weiterlesen...
201330Dez

JavaScript: Transpiler, Module Loader und Polyfills für ES6

Zum Jahresende noch ein nützlicher Link für ES6-Interessierte: Addy Osmani hat bei GitHub ein Repository veröffentlicht, das interessante Tools für ECMAScript 6 beinhaltet. Neben Transpilern, also Code-Umwanderln, welche ES6-Syntax in ES5-Syntax konvertieren und damit ausführbar machen, finden sich auf der Seite weitere Tools für die Arbeit mit dem neuen JavaScript-Standard.

JavaScript - An aggregation of tooling for ES6

So stehen Grunt-Tasks bereit, mit denen sich das Transpiling automatisiert ausführen lässt. Auch Polyfills für Module Loader, mit denen sich ES6- und AMD-Module verwalten und erzeugen lassen, sind aufgeführt. Weiterhin gibt es Lückenfüller für Weakmaps, Promises, Reflections und einige String-Funktionen (z.B. startsWith oder endsWith). Abgerundet wird die Sammlung durch ES6-Code-Generatoren und Links zu weiterführenden Slides über ES6 und die Zukunft von JavaScript.

201328Dez

PhpFiddle: PHP/MySQL-Snippets online ausführen

Online-Editoren für etliche Programmiersprachen gibt es mittlerweile mehrfach: Ideone oder Compilr wären bekannte Vertreter dieser Art. Für JavaScript/HTML/CSS haben sich Tools wie JS Bin, JSFiddle oder CodePen durchgesetzt. Für PHP-Entwickler, die direkt im Browser ein Code-Snippet ausprobieren möchten oder einem Kollegen eine MySQL-Funktion zukommen lassen wollen, sollten einen Blick auf PhpFiddle werfen. Dabei handelt es sich im Prinzip um das Pendant zu JSFiddle, nur eben für PHP.

PhpFiddle - The Best Place to Run PHP/MySQL, HTML/CSS and JavaScript Online

Der Online-PHP-Editor kommt mit verschiedenen API-Anbindungen und bietet die Möglichkeit, bekannte Bibliotheken einzubinden. Zudem können SOAP- und XML-RPC-Services angesteuert werden und die Verwendung von MySQLi, PDO sowie PHPMailer ist ebenfalls möglich. Gerade für das schnelle Testen von MySQL-Abfragen dürfte PhpFiddle interessant sein: Der Code für die Verbindung zur Test-Datenbank kann per Klick geladen werden. Weiterhin kann der PHP-Code durch etliche Sniffer (PEAR, Squiz, Zend, etc.) validiert werden. Auch eine Securiy-Test-Suite zur Überprüfung von möglichen Sicherheitslücken (CSRF, RFE, XSS, DT, LFI, SQL Injections) steht zur Verfügung.
Schließlich gibt es auch noch eine abgespeckte Variante, die als PhpFiddle Lite bereitsteht und eine weniger komplexe Oberfläche bietet.

201327Dez

JavaScript: Use-Cases von ES6-Modulen im Detail

Die Verwendung von AMD-Modulen mit ECMAScript 5 hat sich inzwischen als bewährte Methode durchgesetzt, wenn es darum geht, größere JavaScript-Projekte in Komponenten zu kapseln und Abhängigkeiten zu erzeugen. Mit ECMAScript 6 (ES6) werden echte Module eingeführt, die per import und export erzeugt bzw. geladen werden können. Wer einen weiteren Blick in die Zukunft von ES6 werfen will, sollte sich den Gist über ES6-Module von Yehuda Katz ansehen. Dort werden diverse Use-Cases gezeigt, welche den Einsatz von ES6-Modulen verdeutlichen.

ES6 - Use-cases of modules

Der Artikel ist untergliedert in verschiedene Bereiche:

  • Terminology
  • Imports and Exports
  • Avoiding Scope Pollution
  • Concatenation
  • Modules in Non-Default Locations
  • The Compilation Pipeline
  • Configuration of Existing Loaders
  • Referencing Modules in HTML
  • Creating Modules from HTML

Neben dem Laden von ES6-Modulen wird auch das Laden von AMD-Modulen beschrieben sowie der Import von Node-Modulen. Der Beitrag gibt einen interessanten Einblick in die Richtung, in welche ES6 im Bereich der Module gehen wird.

201309Dez

JavaScript: Zufallsdaten aller Art mit Chance.js

Für Designer ist es das "Lorem Ipsum", für Entwickler sind es Zufallsdaten: Blindtext oder temporäre Inhalte, die später durch echten Content ersetzt werden. In JavaScript können derartige Daten vor allem für automatisierte Tests interessant sein, wenn verschiedene Werte überprüft werden sollen. Mit der Bibliothek Chance.js können zufällige Daten aller Art erzeugt werden: Boolesche Werte, Strings, Zahlen, Textblöcke, Personendaten, Adressdaten, Farbwerte, E-Mail-Adressen, Zeitangaben, Beträge oder gar GUIDs.

Chance.js - Utility library to generate anything random for JavaScript

Chance.js steht als Standalone-Skript zur Verfügung und kann im Browser, mit RequireJS oder Node.js genutzt werden. Ein paar Beispiele:

  • chance.birthday({string: true, american: false});
  • => "28/6/1993"
  •  
  • chance.word({length: 5});
  • => "valve"
  •  
  • chance.natural({min: 1, max: 20});
  • => 14
  •  
  • chance.color()
  • => "#123456"

Auf der Website des Skripts findet sich die Dokumentation zu allen Funktionen sowie den möglichen Optionen.

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!

201301Dez

Videogular: HTML5-Video-Player für AngularJS

Einst waren es jQuery-Plugins, heute sind es AngularJS-Directives: Mit Videogular steht ein voll ausgestatteter HTML5-Video-Player bereit, der über Angular konfiguriert und erweitert werden kann. Dazu müssen das entsprechende Angular-Markup vorhanden sowie die Module "com.2fdevs.videogular" in die App eingebunden sein. Bei GitHub findet sich die Dokumentation sowie ein Wiki dazu.

Videogular - A video player for AngularJS

Im Controller-Scope können die Eigenschaften für den Player festgelegt werden. Ein Auszug:

  • <videogular vg-width="config.width" vg-height="config.height">
  •  
  • $scope.config = {
  • width: 740,
  • height: 380,
  • autoHide: false,
  • autoPlay: false,
  • responsive: true
  • };

Der Angular-Player unterstützt mobile Endgeräte sowie einen Vollbildmodus. Er lässt sich über Themes anpassen und kann per Plugins erweitert werden.
Für AngularJS gibt es mittlerweile eine Reihe an interessanten Directives, wie beispielsweise das Deckgrid, mit dem sich Inhalte in einem Raster darstellen lassen.