JavaScript ist längst nicht mehr nur für klassische Webprogrammierer interessant. Auch bei der Entwicklung von Unternehmensanwendungen spielt JavaScript eine immer größere Rolle: Enterprise-Entwickler mit Java- oder .NET-Hintergrund programmieren selbst Server- und Browser-seitig mit JavaScript, oder sie überarbeiten JavaScript-Code, der von Webagenturen erstellt wurde.

Das Buch “JavaScript für Enterprise-Entwickler: Professionell programmieren im Browser und auf dem Server” (Partner-Link zu Amazon) behandelt daher die Schwerpunkte, die für Entwickler aus dem Enterprise-Umfeld beim Umgang mit JavaScript besonders von Bedeutung sind.

Nach einem kompakten Überblick über die Kernkonzepte von JavaScript geht der Autor im Detail auf wichtige Themen der professionellen Anwendungsentwicklung ein. Behandelt werden u.a.:

- JavaScript als funktionale, prototypische und objektorientierte Sprache
- Testen
- Packaging
- Entwurfsmuster
- node.js: JavaScript auf dem Server

Zielgruppe sind professionelle Backend-Enwickler, die sich schnell in JavaScript einarbeiten wollen. Darüber hinaus spricht das Buch Webentwickler an, die über den Browser-Rand hinausblicken möchten.

Kenntnisse in der Webentwicklung sind für die Lektüre erforderlich, ein Java-EE- (oder .NET-) Hintergrund ist hilfreich.

Gesucht und gefunden durch:

• buch javascript enterprise

Tomasz Janzcuk von Microsoft zeigte, wie sich leichtgewichtige Node-Anwendungen (Singe-Page-Anwendungen, die auf node.js aufbauen) kostengünstig skalieren lassen. Es lassen sich nicht nur einzelne Node-Instanzen pro virtualisierter Maschine, sondern auch innerhalb einer virtualisierten Maschine verschiedene Node-Prozesse starten. Statt einzelner Node-Prozesse lassen sich zudem auch leichtgewichtige Threads verwenden. Dies ist aber nicht effektiv genug. Erst mit dem Verwenden von isolierten Kontexten innerhalb einzelner Threads lassen sich die Betriebskosten einer leichtgewichtigen Node-Anwendung signifikant drücken.

Andrea Giammarchi von Nokia berichtete von Problemen, die beim Entwickeln von HTML5-Apps auf neuen Endgeräten (Mobile und Tablet) auftreten. HTML5 ist kein fester Standard und die Implementierungen in verschiedenen (mobilen) Browsern sind noch sehr unterschiedlich. Er konnte Lösungen und Workarounds für gängige Probleme aufzeigen. Dieser Talk schien direkt aus der Praxis zu kommen und Giammarchi Tipps erscheinen sehr wertvoll.

Jed Schmidt rockte den Saal mit seinem Vortrag über 140byt.es.

Jakub Siemiątkowski implementierte Voxels in JavaScript. Wenn eine 3D-Welt nicht aus Polygonen sondern aus Würfeln zusammengesetzt wird, dann nennt man diese Würfel Voxel bzw. die Welt Voxelspace. Voxel sind sehr speicher- und rechenzeitintensiv. Trotzdem konnte er eine – wenn auch langsame und nicht besonders stabile – Implementierung live demonstrieren.

Lea Verou hielt einen sehr umfangreichen Talk über Polyfills. Polyfills sind Softwarekomponenten, die fehlende Implementierungen von spezifizierten Features in Webbrowsern durch JavaScript nachimplementieren. Wenn ein Browser das spezifizierte Feature selbst implementiert, dann werden die Polyfills nicht verwendet sondern die native Implementierung des Browser führt das Feature selbst aus. Polyfills sind also Softwarekomponenten, die nur so lange leben sollten, bis die jeweiligen Features von allen Zielbrowsern unterstützt wird.

James Coglan verwendete Websockets, um nahezu alle Laptops im Raum fernzusteuern, um darauf Musik wiederzugeben.

David Coallier demonstrierte node-php. Mit node-php lassen sich PHP-Anwendungen in Node ausführen. Durch node-php sind Node und PHP nicht länger Konkurrenzplattformen sondern lassen sich gemeinsam in einer Webanwendung nutzen.

Tom Robinson, einer der Autoren des Cappuccino Webframeworks, hielt einen Talk über Compiler und Interpreter. Er führte anschaulich und durch Beispiele in die Welt von Compilern ein, die selbst in JavaScript implementiert sind oder JavaScript als Zielsprache erzeugen. Jeder Entwickler sollte selbst in der Lage sein, einen eigenen Compiler für eine eigene (domänenspezifische) Sprache zu schreiben, denn dies ist nicht so schwer, wie es auf den ersten Blick erscheint.

Douglas Campos präsentierte dyn.js. Dyn.js ist eine JavaScript-Implementierung auf der Java Virtual Machine. Anders als Rhino, das noch auf Java 1.2 aufbaut, verwendet dyn.js „Invoke Dynamic“, ein neues Feature der JVM seit Java 7. Durch „Invoke Dynamic“ kann JavaScript für die JVM sehr viel einfacher und evtl. sogar performanter implementiert werden als dies noch Rhino tut.

Michael Aufreiter hielt einen sehr interessanten Talk über data.js. Data.js ist eine JavaScript-Biblothek zum Bauen von datengetriebenen Webapplikation. Es bietet Features zur Defintion, Manipluation und Persistierungen von Graphen in Node und / oder im Webbrowser. Data.js ist die technische Basis von substance.io, einem webbasierten Dokumentenmanagementsystem.

Erik Corry führte in den neuen Garbage Collector von Googles V8 ein. Zudem konnte er Tipps zeigen, um Memory-Leaks zu vermeiden.

Michal Budzyinski hielt einen unterhaltsamen Talk über anaglyphe 3D-Darstellung (jene bunten Bilder, die über zweifarbige Brillen erst dreidimensional wahrgenommen werden). Er konnte in einer Live-Coding-Session eine Demo entwickeln, in dem Side-By-Side-Bilder der NASA anaglyph im Browser dargestellt werden. Dazu verwendete er das Canvas-Element und JavaScript.

Beendet wurde die Konferenz durch zwei sehr emotionsgeladene Talks. James Whelton stellte das Projekt „Coder Dojo“ vor, in dem Kinder unterrichtet werden. Ein T-Shirt, das von Brendan Eich getragen wurde, wurde zugunsten dieses Projekts für 1.500 € an die Veranstalter versteigert. Chris Williams hielt schließlich das Schluss-Plädoyer, in dem er alle Anwesenden zu einer positiveren Einstellung im Umgang miteinander aufforderte.

Die Konferenz war sehr gelungen – ein Lob an die Veranstalter!

Gesucht und gefunden durch:

• james whelton jsconf

Der Veranstaltungsort – die Alte Münze Berlin – ist eine alte Geldfabrik in Berlin Mitte. Hier wurden 1935 bis 2006 Münzen geprägt. Seit der Schließung kann man die alten Münze als Veranstaltungsort mieten. Und die Alte Münze Berlin eignet sich hervorragend für eine Konferenz – etwas heruntergekommen aber mit dem gewissen etwas an Industrieromantik.

Dean McNamee berichtete von Plask. Laut der Konferenzbeschreibung ist Plask „is a multimedia programming environment. It brings together many of the recent advances in web-related technologies, graphics rendering, and languages, and brings them away from the web.“ Zwar hatte der Talk einige recht anschauliche Beispiele zur Verwendung von Plask, aber so richtig konnte ich die Essenz nicht fassen. Mir ist unklar, was Plask im Wesentlichen von anderen Exerimentier-Umgebungen wie Processing / Processing.js unterscheidet.

Peter van der Zee plädierte für mehr Tools. Im Bezug auf Entwicklerwerkzeuge befindet sich JavaScript – trotz Firebug, Web-Inspector und Chrome-Debugger – noch im Mittelalter. Als Beispiel für ein gelungenes Entwicklungswerkzeug präsentierte Van der Zee Zeon.js. Zeon.js is ist ein Tool, das im Browser läuft. In einer Text-Area lässt sich mit Zeon.js JavaScript bearbeiten. Zeon.js findet dabei Probleme. Anders als bekannte Tools wie JSLint ist Zeon.js jedoch interaktiv. Es ist eine wirkliche Hilfe und kein Hindernis beim Entwickeln. Zeon.js benutzt einen selbst geschriebenen Parser und statische Analsyse, um Probleme zu finden. Van der Zee führte Tiefer in dieses Thema ein und ermutigte die anwesenden Entwickler, ähnliche Werkzeuge zu schreiben, um die Arbeit mit JavaScript zu vereinfachen.

Aaron Quint ist der Autor von sammy.js. In seinem Talk rantete über Front-End-Frameworks. Frameworks sind keine Religion. Frameworks sollen Probleme lösen. Statt Hypes zu folgen sollten sich Entwickler wieder mehr ihren eigentlichen Aufgaben widmen und weniger fanatisch im Hinblick auf Technologien und Frameworks eingestellt sein.

Marijn Haverbeke, der Autor des Buchs „Eloquent JavaScript“ und des Minifizierers uglify.js, beschäftigte sich in letzter Zeit vermehrt mit Front-End-Performance, dem DOM und hardwarebeschleunigtem Rendering. In seinem Talk präsentierte er seine Erkenntnisse. Diese waren zwar teilweise nicht neu, trotzdem konnte man den Talk aber als gelungen bezeichnen.

Paul Bakaus, der Autor von jQuery-UI, ist inzwischen CTO bei der Social-Game-Schmiede Zynga. Er zeigte, welche Probleme es auch heute noch gibt, wenn man Spiele im Browser entwickeln möchte. Er plädierte dafür, alte Browser (< IE 9) nicht länger zu unterstützen. Zum Lösen des Problems des Scrollens und des Verschiebens des Viewports vor allem auf mobilen Endgeräten präsentierte er „Scroller“ und „Viewporter“. Diese stehen ab heute als OpenSource auf Github zur Verfügung.

Jan Kleinert und Paul Kinlan präsentierten Web-Intents. Web-Intents übertragen das Konzept der Intents auf Android-Smartphones („An intent is an abstract description of an operation to be performed…“) auf den Webbrowser. Statt eine Vielzahl von Diensten für Image Hosting, Social Bookmarking usw. zu integrieren (und den Benutzer damit zu verwirren), spezifiziert eine Anwendung lediglich einen Intent (wie „Sharing“ oder „Image Editing“). Der Webbrowser schlägt dann dem Nutzer Dienste vor, die genau dieses Feature bieten und bei denen er bereits registriert ist. Web-Intents könnten die Art, wie Webanwendungen Dienste dritter Webanwendungen integrieren, grundlegend verändern, sofern sich Web-Intents durchsetzen können.

Tobias Schneider, Nikolai Onken und Stephan Seidt präsentierten die „Arduino Extravaganza“. Dies ist ein Trinkspiel. Im Webbrowser müssen zwei Kontrahenten ein Problem in JavaScript lösen. Eine von einem Arduino-Board gesteuerte Zapfanlage mixt für den Verlierer ein hochalkoholisches Getränk. Die Farbe des Getränks wird vom Gewinner als Hexcode festgelegt – die Anlage kümmert sich vollautomatisch um die richtige Mischung. // no comment

Philip Tellis zeigte, wie sich Netzwerke mit JavaScript im Browser messen lassen. Dabei ging er ins Detail. Gegen Ende des Talks konnte er zeigen, wie sich ein Netzwerkscanner im Browser schreiben lässt, der automatisiert Cross-Site-Request-Forgery-Attacken durchführen kann. Dies war einer der interessantesten Talks bisher.

Jakob Mattson hielt ein Plädoyer für eine neue dynamische Sprache, die JavaScript ablösen sollte. JavaScript selbst sei zu statisch und zu wenig formbar, um den Ansprüchen an eine moderne, dynamische Sprache gerecht zu werden. Auch Sprachen wie CoffeeScript, die JavaScript erzeugen, sind laut Mattson kein Ausweg.

Alon Zakai zeige Emscripten. Emscripten ermöglicht es, C/C++-Code im Browser laufen zu lassen. Dazu nutzt Emscripten die LLVM (Low Level Virtual Machine). Ähnlich wie ein Java-Compiler Bytecode erzeugt, erzeugt LLVM-GCC (ein GCC-Compiler, der die LLVM unterstützt) Bitcode. Diesen Bitcode, der sehr viel einfacher als C/C++-Code ist, kann Emscripten zu JavaScript kompilieren. Standardbibliotheken bringt Emscripten gleich mit. So lassen sich C/C++-Bibliotheken direkt im Browser nutzen. Selbst komplexe Anwendungen wie das Computerspiel Quake laufen so im Browser. Dieser Talk war mehr als beeindruckend.

Als Überraschungsgast trat Bendan Eich, der Schöpfer von JavaScript, auf. Er zeigte, welche Features voraussichtlich in ES6 (ECMAScript 6th Edition) enthalten sein werden. Außerdem konnte er RiverTrail präsentieren. RiverTrail implementiert parallelisierbare Arrays in JavaScript. In einer grafischen Demo mit Web-CL zeigte er, dass eine parallelisierte Implementierung des Demos zehn mal so schnell lief wie eine sequentielle Implementierung. Sein Talk entsprach im Wesentlichen dem Talk, den er auf der Capitol.js gehalten hatte. Er lässt sich auf seiner Website komplett einsehen.

Gesucht und gefunden durch:

• alte münze berlin mieten
• js conf
• probleme ie9 zeon

In jüngster Zeit wandert der Fokus jedoch immer mehr auf die Optimierung einer geladenen Seite, also auf die Zeit, die ein Browser für das Rendering und die Manipulation des DOMs benötigt.

In diesem Blog-Beitrag werden ich mich auf JavaScript konzentrieren.

Document.write

Die Verwendung von document.write ist generell – auch für JavaScripte von Dritten – untersagt. Es sind stattdessen DOM-Operationen (auch innerHtml) zu verwenden. Dies dient nicht nur der der Performance, sondern auch der Robustheit.

Inline-JavaScript

Inline-JavaScript sollte vermieden werden. Wenn dies nicht geht, sollten sie sich am Ende der Seite befinden. Das gilt auch für Event-Listener, die direkt in HTML-Elemente geschrieben werden. Diese sollten eigentlich erst nach dem Laden der Seite gebunden werden. Es sollten zudem so wenige JavaScript-Blöcke wie möglich verwendet werden, da jeder Block zu einer kurzen Verzögerung im Rendering führt.

JavaScript-Blöcke

Jeder JavaScript-Block wird isoliert abgearbeitet. Wenn in einem solchen ein Fehler auftritt, beeinflusst dies andere JavaScript-Blöcke nicht. Daher sollten Scripte, die mit Scripten von Dritten (Tracking, Targeting etc.) interagieren, in einem eigenen Block laufen. Dies widerspricht zwar der Anforderung, möglichst wenige Inline-JavaScripte einzubinden, sorgt aber für Robustheit der Seite. Um Performance-Einbußen zu minimieren, sollten diese Blöcke ausschließlich am Seitenende eingesetzt werden.

Selektoren

Selektoren, die z.B. in jQuery verwendet werden, sollten möglichst performant sein.

Nach Möglichkeit sollten nur Selektoren verwendet werden, die moderne Browser nativ implementieren können. Ob ein Selektor in der nativen Implementierung eines Browser funktioniert, kann man über die Funktion document.querySelectorAll in der Firebug-, Safari-, Internet Explorer- oder Chrome-Konsole testen (z.B. document.querySelectorAll(“.container .p–heading-1″)).

Zum Beispiel implementieren nicht alle Browser die Funktion document.getElementsByClassName. Ein Class-Selektor müsste also von einer Library wie jQuery implementiert werden. Wenn man einen Class-Selektor verwendet, dann muss jQuery alle Elemente der Seite (oder des Bereichs) über einen *-Selektor in eine Liste sammeln und jedes Element prüfen, ob seine Klasse der Klasse des Selektors entspricht. Dies kann auf einer Seite mit sehr vielen Elementen lange dauern. Statt Class-Selektoren sollte man also möglichst ID-Selektoren verwenden. Wenn ein ID-Selektor nicht möglich ist, kann man Events auch per Event Delegation (siehe unten!) an ein Vorfahren-Element binden, dass sich per ID referenzieren lässt.

Minimiere DOM-Manipulationen

JavaScript-Engines werden immer schneller. Dies gilt aber nicht unbedingt für den Zugriff auf das DOM. Manipulationen hieran sind teuer, weswegen sie minimiert werden sollten. Auf DOM-Manipulationen in Schleifen sollte nach Möglichkeit völlig verzichtet werden.

Cache DOM-Nodes und Attribute

Das Ermitteln von DOM-Elementen und -Attributen kostet Zeit. Daher sollten Elemente und Attribute einmalig ermittelt und dann in Variablen gecacht werden. Wenn sich das DOM verändert, so verändert sich auch automatisch das DOM-Element, das bereits ermittelt wurde – es besteht keine Notwendigkeit, erneut das Element im DOM zu suchen und auszuwerten. Module, die Objekte kapseln, können auch zur Zwischenspeicherung der DOM-Elemente genutzt werden.

Minimiere Redraws und Reflows

Jede Änderung im DOM führt zu einer Neuberechnung und einem Rendering der Seite. Dieser Redraw findet immer nach Events bzw. nach dem Beenden von JavaScript-Callbacks, die durch diese Events ausgelöst wurden, statt.

Änderungen sollten kumulativ erfolgen. Statt aus dem DOM zu lesen, in das DOM zu schreiben, erneut aus dem DOM zu lesen und wieder in das DOM zu schreiben, sollten Lese- und Schreiboperationen gebündelt erfolgen, so dass diese Operationen in einem einzigen Redraw bzw. Reflow erfolgen.

Das Document-Ready-Event

Im Document-Ready-Event sollte so wenig wie möglich getan werden. Lediglich Event-Listener dürfen an Elemente gebunden werden. Diese Elemente sollten nach Möglichkeit per ID referenziert werden. Wenn dies nicht möglich ist, bietet sich Event Delegation (siehe unten!) an.

Gänzlich verzichtet werden sollte auf DOM-Manipulationen, die schon beim Laden der Seite stattfinden (wie das Erzeugen von DIVs auf Reserve oder das Setzen von Attributen aufgrund von CSS-Klassen). Das DOM sollte bereits auf dem Server statt erst im Browser manipuliert werden.

Lazy Initialisation

Berechnungen und Bindings beim Document-Ready-Event sollten minimiert werden (siehe oben!), sondern erst durchgeführt werden, wenn sie benötigt werden (z.B. nach einen Klick-Event). Natürlich ist im Einzelfall abzuwägen, ob Lazy Initialisation einen Vorteil bietet. Eine Lazy Initialisation bei einem MouseOver-Event könnte als störend (verzögert) empfunden werden, während sie nach einem Klick-Event vom User nicht bemerkt wird.

Event Delegation

Es kann nach dem Laden der Seite lange dauern, bis alle Event Handler an DOM-Elemente gebunden sind. Um diese Zeit zu minimieren, bietet sich Event Delegation an, die der der Lazy Initalisation ähnelt. Man registriert ein Event (z.B. ein Klick-Event) an einem umschließenden Bereich, der sich z.B. über eine ID referenzieren lässt. Die Auflösung auf das einzelne geklickte Element findet dann erst nach dem Klick-Event statt. Die Zeit, die beim Laden der Seite eingespart wird, tritt dann also bei jedem einzelnen Event auf. Daher ist im Einzelfall abzuwägen, ob Event Delegation einen Vorteil bietet. Eine Event Delegation bei einem MouseOver-Event könnte als störend empfunden werden, während eine Event Delegation nach einem Klick-Event vom User nicht bemerkt wird.

Dies ist ein Cross-Post vom Holisticon-Blog.

Gesucht und gefunden durch:

• jquery minimieren
• browser optimierung mit javascript
• javascript sollte man dom verwenden
• javascript performance dom
• javascript optimieren
• innerhtml with jquery javascript event delegation
• firebug chrome minimieren
• dom manipulation jquery performance
• dom innerhtml events delegate
• performance dom manipulation

ShortCuts:
J ScrollUP
K ScrollDown
ENTER Beitrag kommentieren
TAB+ENTER Beitrag absenden
qq Zum Chat

Kommentare:
@User – Links zu einem User
*Fett-Text*
_ kursiv _
- durchgestrichen -

{
    “cities”: [”Hamburg”, “New-York”, “Tokio”]
}

Ein Webbrowser lässt allerdings nicht zu, dass ein Script Daten von einer anderen Domain lädt als der, von der die Seite, in die das Script eingebettet wurde, geladen wurde. JavaScript hat also keinen Zugriff auf Daten, die von einer anderen Domain kommen. Diese Einschränkung ist ein Security-Feature des Browsers und als Same Origin Policy bekannt.

Oft ist es aber nötig, Daten von einer fremden Domain oder einer eigenen Subdomain zu ermitteln. Die saubere technische Lösung für dieses Problem ist Cross Origin Resource Sharing. Beim Cross Origin Resource Sharing werden Berechtigungen über HTTP-Header gesteuert. Leider funktioniert Cross Origin Resource Sharing nicht mit Legacy-Browsern, die noch häufig anzutreffen sind.

Ein Workaround, der in jedem Browser funktioniert, ist JSON-P: JSON with Padding. Ein Script darf selbst zwar keine Daten von einer fremden Domain anfordern, aber es darf einen Script-Tag generieren, der ein weiteres JavaScript von dieser fremden Domain lädt und direkt ausführt. Diesem nachgeladenen JavaScript übergibt man als GET-Parameter den Namen einer Callback-Funktion, die von dem nachgeladenen JavaScript ausgeführt werden sollte. Per Konvention trägt dieser GET-Parameter den Namen „_jsonp“.

Das so eingebundene Script muss dynamisch auf dem Server in einer Weise erzeugt werden, dass es die übergebene Callback-Funktion aufruft, sobald es vom Browser geladen wurde. Der Callback-Funktion werden in der Regel die Daten übergeben, die man ansonsten direkt als JSON-Objekt angefragt hätte:

jsonpCallback (

  {

    “cities”: [”Hamburg”, “New-York”, “Tokio”]

  }

);

Die Callback-Funktion wird von dem Script, das eigentlich die Daten anfordern wollte, bereitgestellt. So werden Daten von einer fremden Domain per JSON-P geladen. Front-End-Libraries wie jQuery stellen eine automatisch generierte Callback-Funktion bereit. Daher muss sich der Entwickler nicht um das Schreiben dieser Callback-Funktion kümmern.

return $.ajax(
 {

  type: “GET”,

  url: “http://my.otherdomain.de/rest-ws/myservice/” + data,

  error: errorcallback,

  success: callback,

  dataType: “jsonp”,

  jsonp: “_jsonp”,

  jsonpCallback: “ jsonpCallback “

 }
);

Auf Client-Seite stellt JSON-P also kein Problem dar und wird von gängigen JavaScript-Bibliotheken unterstützt.

Wie man auf einem Java Enterprise Server mit dem Spring Framework und CXF einen JSON-P-Provider realiseren kann, lässt sich auf dem Holisticon-Blog nachlesen.

Dies ist ein Crosspost vom SimonOx-Blog.

Gesucht und gefunden durch:

• json jquery
• jquery jsonp callback
• Cross-Origin Resource Sharing
• jquery same origin policy
• jquery json
• jquery jsonp
• json callback
• jquery callback json
• jquery jsonp script ressource
• jquery same origin

Jedes Mal, wenn ein neues Sub-Objekt erzeugt wird, werden zwei neue Funktionen erzeugt: einmal für das Sub-Objekt und einmal für das Super-Objekt. Diese Objekte sind nicht leichtgewichtig, denn das innere Super-Objekt wird als Closure im äußeren Sub-Objekt referenziert. Das Verwenden von vielen Closures kann zu Memory-Leaks führen.

Typen können nicht durch den Instanceof-Operator getestet werden. Sowohl das Super-Objekt “Square” als auch das Sub-Objekt “Box” sind einfache Funktionen. Eine Box-Objekt ist keine Instanz des Square-Objekts. Dies liegt daran, dass keine Konstruktorfunktion verwendet wird.

print(myBox instanceof square); // false


Typen lassen sich zudem nicht erweitern. Das Super-Objekt wird in einer Closure gehalten. Es ist von außen nicht sichtbar.

Der Syntax zum Erzeugen einer neuen Objekt-Instanz entspricht nicht den Konventionen von JavaScript.

var myBox = box(5);


Neue Objekt-Instanzen werden in JavaScript mit dem new-Operator auf einer Konstruktorfunktion erzeugt. Da das Entwurfsmuster der funktionalen Vererbung keine Konstrutkorfunktionen kennt, kann der new-Operator nicht verwendet werden. Dies kann zu Fehlern in der Verwendung des Codes führen.

new Box(5); // ReferenceError: Box is not defined

Funktionale Vererbung sollte also nur in Ausnahmefällen angewendet werden, in denen ein funktionales Paradigma am sinnvollsten erscheint.

Gesucht und gefunden durch:

• vererbung nachteile
• javascript vererbung
• jquery vererbung
• javascript funktionale vererbung
• vererbung in jquery
• nachteile von vererbung
• closures nachteile
• javascript vererbung -prototype
• javascript prototype closure
• vererbung vorteile nachteile

Funktionen sind Objekte. Wie Objekte können Funktionen auch selbst Eigenschaften (Properties) und Methoden (Funktionen) haben.

Funktionale Verberbung implementiert man, indem man eine Funktion erstellt, die Objekte erzeugt und diese zurückgibt. Innerhalb dieser Objekt-erzeugenden Funktion gibt es private Instanzvariablen. Auf diese kann das zurückgegebene Objekt als Closure zugreifen. Für die Nutzer des zurückgegebenen Objekts sind diese jedoch unsichtbar. Das zurückzugebende Objekt wird um Methoden erweitern. Diese Methoden haben ebenfalls Zugriff auf die privaten Variablen.

function square(width) {

  var squareObject = {};

  squareObject.getArea = function() {

    if (width > 0) {

      return width * width;

    }

 }

 return squareObject;

}

var mySquare = square(5);

print(mySquare.getArea()); // 25

print(mySquare.width); // undefined

Vererbung lässt sich in der funktionalen Vererbung durch das Dekorierer-Entwurfsmuster implementieren. Um einen Subtypen zu implementieren erweitert man den Supertypen um die benötigten Eigenschaften oder Methoden. Zu überschreibende Methoden speichert man in privaten Variablen, um diese auch dann noch verwenden zu können, wenn man die Methoden des Super-Objekts bereits überschrieben hat.

function box(width) {

  var boxObject = square(width);

  var getSquareArea = boxObject.getArea;

  boxObject.getVolume = function() {

    if (width > 0) {

      return getSquareArea() * width;

    }

  }

  boxObject.getArea = function() {

    if (width > 0) {

        return getSquareArea() * 6;

    }

  }

  return boxObject;

}

var myBox = box(5);

print(myBox.getVolume());  // 125

print(myBox.getArea()); // 150

Dieser Ansatz ist wohl der einfachste Ansatz zur Objekt-orientierten Programmierung in JavaScript, da er ohne Prototypen und Konstruktor-Objekte auskommt.

Wenn Du dich zur zweiten Gruppe zählst solltest Du diesen abschnitt lesen ansonsten gleich zur Installation und dem ersten Test springen.

Was node.js alles ist:

• Serverseitiges JavaScript
• Es ist Ereignis-Basiert, also vergleichbar mit einer Event-Machine
• Das JS ist die Ausführung von JavaScript-Engine V8 (das Ding, das Google Chrome so schnell macht ).
• Node.js stellt eine JavaScript-API auf das Netzwerk und Zugriff auf das Dateisystem zur Verfügung.
• Es lässt Sie JavaScript-Programme im Terminal ausführen. z.B. in dem man  ’node meineApp.js ” ausführt.

Wann und wieso sollte man Node benutzen ?

Node.js ist sehr gut, wenn Sie mehrere Dinge gleichzeitig tun muss. In Node.js läuft alles parallel, außer dem Code. Das kann man sich so vorstellen (Achtung Metapher), dass der Code so etwas wie der König ist und Node.js eine Menge von Dienern. Der König gibt seinen Dienern eine Liste von Aufgaben, die dann von den den Dienern untereinander aufgeteilt werden und und abgearbeitet (Metapher Ende).

Ein wichtiger Grund für Node.js ist die Effizienz. In einer Web-Anwendung ist das wichtigste Ansprechzeit, diese Kosten in der Regel Zeit, um all die Datenbank-Abfragen auszuführen. Mit Node.js kann man alle Anfragen auf einmal ausführen, wodurch die Reaktionszeit auf die Dauer der langsamste Anfrage minimiert wird.

Ein weiterer Grund ist JavaScript. Man kann Node.js benutzen, um Code zwischen dem Browser und Backen zu teilen. JavaScript ist auch auf dem Weg zu einem wirklich universellen Sprache zu werden.

Node.js installieren

Mac installation

Wer das großartige Hombrew unter OSX nutzt kann mit folgender Zeile node einfach installieren

brew install node

Ohne jeglichen schnickschnack brauchen wir lediglich drei schritte

1. Apples Developer tools XCode installieren
2. git Installieren
3. und folgende Zeilen ausführen

git clone git://github.com/ry/node.git
cd node
./configure
make
sudo make install

Ubuntu installation

Abhängigkeiten installieren

sudo apt-get install g++ curl libssl-dev apache2-utils

sudo apt-get install git-core

Dann aktuelle quellen von gitHub clonen und installieren

git clone git://github.com/ry/node.git
cd node
./configure
make
sudo make install

Windows installation

1. cygwin installieren
2. aus der SetUp der von cygwin folgende Pakete installieren
   

   • devel → openssl
   • devel → g++-gcc
   • devel → make
   • python → python
   • devel → git

3. dann die cygwin bash starten Start -> Cygwin -> Cygwin Basg Shell
4. Dann aktuelle quellen von gitHub clonen und installieren

git clone git://github.com/ry/node.git
cd node
./configure
make
sudo make install

Wir testen mal unsere erste helloWorld

In der Datei helloWorld.js kopieren wir zum testen folgende Zeilen:

var http = require(‘http’);

http.createServer(function (req, res) {

res.writeHead(200, {‘Content-Type’: ‘text/plain’});

res.end(‘Hallo Welt – helloNode.js \n’);

}).listen(8765, “127.0.0.1″);

console.log(‘Server running at http://127.0.0.1:8765/’);

node helloNode.js

Gesucht und gefunden durch:

• node js
• nodejs
• node js tutorial
• node js tutorial deutsch
• node js installieren
• nodejs tutorial
• node js anleitung
• nodejs tutorial deutsch
• was ist Node js
• nodejs installieren

Wenn immer mehr Anwendungslogik vom Server in den Client verlagert wird, stellt sich für einen Entwickler die Frage, ob der Rest der Anwendungslogik im Backend nicht in der gleichen Sprache entwickelt werden kann, die auch im Webbrowser verwendet wird. Es gibt keinen logischen Grund, warum JavaScript ausschließlich im Webbrowser laufen sollte. Es erscheint zudem wirtschaftlich, wenn man auf eine große Zahl an Entwicklern zurückgreifen kann, die in einer einzigen Sprache entwickeln. JavaScript auf dem Server könnte sicherlich nicht gewachsene SAP- oder SOA-Umgebungen, dafür aber Webframeworks wie ASP.net, Spring MVC / Webflow oder JSF ersetzen.

Inzwischen wird JavaScript also auf dem Server interessant. Sogar Datenbanken wie Couch-DB verwenden JavaScript als native Abfragesprache. Mit ECMAScript 5 gibt es zudem in der Sprache selbst interessante neue Features.

V8 ist die JavaScript-Laufzeitumgebung, die von Google für Googles Chome-Browser entwickelt wurde. V8 implementiert in der aktuellen Version 2.2 ECMA Script 3.

Google entwickelte mit V8 eine Laufzeitumgebung, die auf Mac OS X, Linux und Windows läuft. V8 ist komplett in C++ geschrieben und lässt sich eingebettet in C++-Applikationen verwenden. Außerdem lässt es sich natürlich auch allein stehend ausführen.

V8 gilt als sehr schnell. Verantwortlich für die Entwicklung war Lars Bak. Vor noch etwa zehn Jahren hatte Java den Ruf, langsam und hakelig zu sein. Ein kleines Start-Up um Lars Bak entwickelte jedoch eine neue Java Virtual Machine, die den Code zur Laufzeit kompilierte. Der Java JIT war geboren. Die von Lars Bak entwickelte Virtuelle Maschine ist der Ursprung von Hotspot, der aktuellen Java Virtual Machine von Sun Microsystems (jetzt Oracle). Erst durch Hotspot konnte Java die Popularität erreichen, die es heute hat. Genauso wie HotSpot Java beschleunigt hatte, beschleunigt V8 auch JavaScript.

V8 kompiliert JavaScript zu nativem Microcode anstatt es zu interpretieren. Weitere Beschleunigung erreicht V8, indem es die Rückgabewerte von Methoden cacht. Dieses Optimierungs-Technik wird inline caching genannt. Der Garbage Collector ist zwar ein Stop-the-World-Garbage Collector, allerdings ist er sehr schnell. Mit V8 läuft JavaScript fast so schnell wie ein kompiliertes, natives Programm.

Als V8 veröffentlicht wurde, war es etwa doppelt so schnell wie die Laufzeitumgebungen anderer Hersteller. Dies erst führte dazu, dass ein richtiges Wettrennen zwischen Browsern und deren JavaScript-Laufzeitumgebungen stattgefunden hat. Ohne V8 wären TraceMonkey, JägerMonkey oder SquirrelFish wahrscheinlich nicht so schnell entwickelt worden.

Google betrachtete JavaScript als einen der Treiber des Webs. Google ließ sich sogar dazu verleiten, ein reines Web-Betriebssystem Google Chrome OS anzukündigen, das sich ausschließlich durch Web-Technologien, also HTML und JavaScript, programmieren lässt.

V8 könnte eine – wenn nicht die – Grundlage für JavaScript auf dem Server oder in nativen Anwendungen bilden.

Um V8 zu installieren, benötigt man Subversion und SCons. Subversion ist ein Source-Code-Management-System, SCons ein Build-System. Unter MacOS verwendet man am besten Ports.

$ sudo port install scons subversion

Unter Ubuntu Linux verwendet man dazu den Package-Manger apt.

$ sudo apt-get install zip scons subversion

Unter der 64bit-Version von Ubuntu Linux könnte es notwendig sein, dass man zusätzlich noch die Multi-Lib-Packages installiert.

$ sudo apt-get install g++-multilib gcc-multilib

Anschließend kann man V8 aus dem Subversion-Repository auschecken und bauen.

$ svn checkout http://v8.googlecode.com/svn/trunk/ v8

$ cd v8

$ scons sample=shell

Nun kann man V8 über das Kommando „shell“ starten.

$ ./shell

V8 version 2.2.21

> print(“Hello World”);

Hello World

> quit();

Gesucht und gefunden durch:

• ajaxer
• google v8
• google v8 hello world
• javascript shell ubuntu v8
• v8 garbage collector

Jeder kann es und es ist wirklich einfacher, als Du vielleicht denkst seine eigene Safari Extension zu Programmieren.

Was du brauchst, um deine eigenen Safari-Erweiterung machen

• Kenntnisse in HTML, CSS und JavaScript
• Die neueste Version von Safari (in diesem Fall, Safari 5 )
• Melden Sie sich an die werden Teil der Safari bei Apple Developer Program
• Gültige Zertifikate signiert von Apple für jeden Safari-Erweiterung
• Aktivieren des Developer-Menü in Safari

An diesem Punkt ist es wirklich nur eine Frage der Idee, die man umsetzen möchte und den notwendigen HTML-und Javascript-Funktionalität für Ihre Erweiterungen.

Ein Teil der Entwicklung wird in Safari durch den so genannten Extension Builder (befindet sich unter Entwickler-Menü).

Apple nimmt einen ähnlichen Ansatz wie bei der Entwicklung für IOS, man muß also als Developer bei Apple registriert sein.  Jede  Safari Extensions muss ein Zertifikat von Apple zugewiesen bekommen. Zum Glück ist das erstellen eines Zertifikats  stressfrei und und mit einem Mac oder Windows Rechner online schon getan (Safari Certificate Assistant).

Gesucht und gefunden durch:

• safari extensions erstellen
• safari extensions entwickeln
• safari extension programmieren
• safari erweiterungen programmieren
• eigene safari extension
• safari addon programmieren
• safari erweiterung erstellen
• safari extension erstellen
• safari extensions programmieren
• safari erweiterung programmieren

Titan ist ein Open Source JavaScript Web-Framework basierend auf JSON und REST . Es basiert auf jQuery, wodurch es die einfach zu benutzen ist, vorrausgesetzt, man hat Erfahrungen in Javascript und JQuery. Titan arbeitet mit einer JSON-Schnittstelle, woddurch problemlos aus der JSON-Datenstruktur die HTML-Elemente erzeugt werden können.

Titan ist erstaunlich genial. Es ist extrem einfach zu bedienen und beschleunigt die Entwicklungszeiten. Wenn man sich bereits mit jQuery & Javascript auskjennt ist die Lernkurve gleich Null.

Features von Titan!

• Template unabhängig
  Titan darf nicht HTML generieren, sondern es nutzt die vorhandene benutzerdefinierte HTML-Elemente.
• Basierend auf Standards
  Titan ist 100% HTML und  CSS-Validie. Die Titan CSS-Schnittstelle ist vollständig gültig.
• Weniger Code ist guter Code
  Titan ist nur 25kb.

Bei den ersten gehversuchen mit Titan habe ich schnell Ergebnisse erzielen können, was mich zu diesem Artikel bewegt hat.

Gesucht und gefunden durch:

• titanium framework
• titanium javascript framework
• titanium js framework

Mag man zum Thema Betriebssystem und Browser denken was man will, aber warum soll Microsoft nicht gleich Apple den hauseigenen Browser in der aktuellen Version mit installieren dürfen? Warum kümmern sich monatelang EU-Gremien um diese Nichtigkeit?

Geht man von einem normalen Anwender aus, der sich im Technikmarkt einen vorkonfigurierten Computer kauft, welcher wohl zu 90% mit einem Windows Betriebssystem ausgestattet sein wird, fragt man sich, weshalb er nach Inbetriebnahme nicht den Standardbrowser des Betriebssystemherstellers finden und nutzen können soll.

Ist Microsoft etwa Schuld daran, dass bspw. Apple sein Betriebssystem nur für die hauseigenen und mitunter vollkommen überteuerten Computer anbietet? Hat man beim Leopard Firefox und Opera vorinstalliert? Wird google in seinem angekündigten Betriebssystem den Internet Explorer standardmäßig anbieten?

Trotz aller Fragen machte Microsoft den Kartellisten das Angebot, beim Start des Internet Explores eine Alternativbrowserauswahl, dem so gennanten Web Browser Ballot, bereit zu stellen

Quelle: microsoft.com

Das ist nun laut heise.de auch wieder nicht richtig, da man z.b. noch das Logo sieht und alles schlimm und furchtbar und Bevormundung und Verschwendung von Steuergelder in Brüssel!

Alle anderen Hersteller von Software-Anwendungen sollten sich schon mal in Brüssel bewerben, damit sie im nächsten Verfahren vielleicht auch ein kleines Werbebanner etc. nach der Windowsinstallation eingeblendet bekommen. E-Mail-Client Hersteller, wie wär es z.B. mit einer Beschwerde?

Gesucht und gefunden durch:

• bewegungsparallaxe
• css bewegungsparallaxe

Unter Bewegungsparallaxe versteht man in der Wahrnehmungspsychologie den Effekt, der sich optisch ergibt, wenn verschiedene Objekte unterschiedlich von einander entfernt in einer Landschaft verteilt sind und sich der Beobachter parallel zu diesen Objekten seitlich fortbewegt und dabei in Richtung Horizont blickt. Dieser Effekt tritt beispielsweise auf, wenn man aus dem Seitenfenster eines fahrenden Autos oder Zuges schaut.

Das Resultat ist, dass diejenigen Objekte, die nahe beim Betrachter sind, sich schneller bewegen als die weit vom Betrachter entfernten. Die Bewegung der Objekte geht approximativ gegen Null, je näher sie dem Horizont sind, der sich nur minimal bewegt (in Abhängigkeit von der Gesamtgeschwindigkeit).

Quelle: Wikipedia

Animationen sind was schönes. Animationen kennt man im Web jedoch oft nur in 2 Dimensionaler. Das man aber durch bewegungs Parallaxe auch 3D Animationen hinbekommt ist aus alter Zeit her auch nichts neues und wurde schon n-mal in Spielen Realisiert.

JQuery  jParallax

jParallax erstellt aus einem ausgewähltem Element in einem Fenster oder Viewport, mit deren Kind-Elementen eine Parallax-Animation. Die Kind-Elemente werden in Schichten/Layer unterteilt. Diese Schichten bewegen sich in Reaktion auf die Maus und je nach ihren Abmessungen (und Optionen für Schicht-Initialisierung). Dadurch entsteht ein eindrucksvoller Parallax-Effekt.

http://webdev.stephband.info/parallax.html

MooTools mParallax

mParallax funktioniert genau wie jParallax, ist jedoch wie der Name es andeutet auf MooTools basierend

http://www.piksite.com/mParallax/

JavaScript (No Framework)

Ohne jeglichen Framework und in puristischem Javascript hat Brett Taylor ein sehr schönes Beispiel für ein Parallax-Effekt hervorgebracht.

Ein weiteres Beispiel für Himmels, bzw, Sternen Animationen findet man  bei esqsoft

CSS

CSS-Tricks hat sich auch diesem Thema angenommen und ebenso ein anschauliches Beispiel mit der Einbettung von Content und einer Hintergrund-Parallaxe implementiert

Eine weitere Möglichkeit Parallax Animationen rein in CSS zu realiseren findet man auf der Seite von contentwithstyle.co.uk. Hier wurden auf  GIF-Animationen über ein ander geschichtet und dadurch auch eine Animation erstellt, die an die 16-Bit Konsolen erinnert.

Gesucht und gefunden durch:

• parallax js
• parallax javascript
• javascript parallax
• js parallax
• javascript animationen
• parallax animation
• parallaxe javascript
• javascript Parallaxe
• parallaxe html
• bewegungsparallaxe animation

Die aktuelle Version von Script.aculo.us setzt auf auf derPrototype Version 1.6.1 .  Es wurden einige Bugs behoben.

Gesucht und gefunden durch:

• prototype js sound

Pimp3 basiert auf  Prototype (1.6.0.3) und dem  Scriptaculous Sound (1.8.2)

Wenn man eine Alternative zu den gewohnten Flash-MP3 Playern sucht ist Pimp3 empfehlenswert.

Gesucht und gefunden durch:

• javascript mp3 player
• mp3 Player Javascript
• javascript mp3
• mp3 player ohne flash
• mp3 javascript
• js mp3 player
• java script mp3 player
• javascript mp3 player ohne flash
• javascript player
• javascript mp3player

Try it mooFX

Es folgende Horizontal/Vertikal Effekte:

• Vertical split
• Horizontal split
• Wipe right
• Wipe left
• Wipe up
• Wipe down
• Page Flip
• Horizontal panels
• Vertical panels

Wipes

Es bietet auf eine einfache Weise eine Bildergalerie zu erstellen. Wie der Name schon sagt, kann man Bilder zoomen – entweder als als PopUp (als Layer) oder in einer Box. Die Box kann verschoben werden und wird beim verschieben Transparent, was ich persönlich sehr nett finde.

Zoomy v2

Mann sollte es eher Keep It Simple and with Sense heissen.

Das wird hier jetzt auch geschehen