Category Archives: /LUKE

So richtest du deine Entwicklungsumgebung für die Entwicklung mit Cordova ein.

Im ersten Artikel wurde der Rechner komplett für die Entwicklung einer hybriden Android App eingerichtet. Im zweiten Teil wurde die App mit Crosswalk und Cordova aufgesetzt und ein Emulator (AVD) zum Test der App eingerichtet. Nachdem du dort die Lauffähigkeit überprüft hast, können wir uns jetzt der Entwicklungsumegebung zuwenden. Continue reading

So erstellst du eine hybride App mit Cordova + Crosswalk.

Im ersten Teil der Serie haben wir unseren Rechner für die Erstellung von hybriden MobileApps vorbereitet; alles installiert und heruntergeladen was nötig ist um eine Android App mit Webtechnologie zu erstellen.

Jetzt geht es an die Erstellung der App. Wir setzen die Cordova App mit Crosswalk auf, richten ein erstes Testdevice ein und schauen mal, wie unsere App so flimmert. Continue reading

Was benötige ich für die Entwicklung einer hybriden App?

Der Plan

Ich möchte mal wieder ein neues Projekt umsetzen. Da dachte ich mir, ich nutze die Gelegenheit und fange noch einmal ganz frisch an. So schreibe ich wirklich jeden Schritt mit und du solltest am Ende definitiv auf dem gleichen Stand sein wie ich. Alles natürlich mit Screenshots unterlegt.

Es wird eine App; zunächst kümmere ich mich um Android, ggf. folgt später noch die Auslieferung auf iOS Smartphones und vielleicht sogar Windows Phones. Eine Ausweitung auf Tablets als Endgeräte wäre auch denkbar. Dank der hybriden Entwicklung der App dürfte vor allem die Auslieferung auf iOS keine großen Extra-Aufwände in der Entwicklung bedeuten.

Die ersten Überlegungen: Welches Framework?

Für die Entwicklung von hybriden Apps mit Webtechnologie greift man am Besten auf eines der vielen Frameworks zurück. Initial stellte sich mir also die Frage ob ich PhoneGap, Cordova, Intel XDK, Titanium oder eine der vielen anderen Möglichkeiten nehmen soll. Ich habe mich sehr schnell auf PhoneGap oder Cordova eingeschränkt, weil ich diese als (Industrie-)Standard erachte. Die Entscheidung zwischen diesen beiden Kandidaten war zunächst darauf beschränkt, die Unterschiede heraus zu finden. Continue reading

Tutorial: Ghost Blog Installation

Ghost-Logo

Die Blogging-Plattform Ghost kann mal eine sehr gute Alternative für Blogger zu WordPress werden. WordPress ist mittlerweile viel mehr als nur für das Bloggen gedacht, dass kann aber auch Nachteile haben. Kompromisse müssen eingegangen werden, es schwirren für viele Nutzer unnötige Funktionen rum, das System wird langsamer und vielleicht noch der ein oder andere Punkt mehr.

Ghost will wirklich nur für das Bloggen gedacht sein, setzt auf node.js und hat sich über Kickstarter finanziert – ist aber kostenfrei erhältlich.

Continue reading

(HTML5 Canvas-)Bilder hochauflösend (Retina) darstellen

Vor guten zehn Monaten ist der letzte Artikel in der Kategorie “Leicht und klar erklärt” erschienen und so gab mir heute (mal wieder) ein Thema in der Firma eine perfekte Vorlage für einen Artikel.

Wie stelle ich HTML5 Canvas Grafiken auf einem iPad mit Retina-Display scharf dar? Folgende Erklärung gilt aber nicht nur für das Canvas-Element, auf Bilder/Fotos trifft dies ebenso zu. Fast alle Tablets haben mittlerweile hochauflösende Displays (High DPI – HiDPI) und so wird es immer wichtiger, dass du das folgende beachtest – zumindest wenn du deinen Besuchern Qualität bieten möchtest. Die vernünftige Darstellung von Bildern auf allen Geräten kann man als Teildisziplin von Responsive Webdesign bezeichnen. Auf zur Theorie:
Continue reading

JavaScript Closures leicht und klar erklärt

Mit der Kategorie “LUKE” – “leicht und klar erklärt” möchte ich eine neue Serie starten, in der ich einige Dinge beschreibe / erkläre. Im Gegensatz zu den meisten online Ressourcen werde ich es aber immer möglichst leicht halten und möchte klar und eingehend erklären, was Sache ist. Man könnte sagen, ich versuche es mit dem Wortschatz eines Anfängers und nicht mit dem eines Profis zu erklären. Wörter, die eventuell trotzdem unklar sein könnten, versuche ich möglichst immer mit einem Link zu hinterlegen, der diesen Begriff dann näher erklärt. Häufig findet man hinter Begriffen in Klammern “()” auch den Fachbegriff.

Als Eröffnungsthema der Kategorie nehme ich die Closures. Ein Closure (engl. Abschluss) ist in JavaScript ein Rückgabewert einer Funktion. Dieser Rückgabewert wiederum ist auch eine Funktion. Ein Closure ist also eine Funktion, die von einer Funktion zurückgegeben wird. Das besondere an dieser Funktion ist, dass sie quasi die Zeit einfrieren kann. Sie merkt sich ihre Umgebung (Context) zum Erstellungszeitpunkt und kann auf diese später wieder zugreifen, obwohl die Umgebung eigentlich nicht mehr existiert.  Wenn eine Funktion ihr Ende erreicht hat wird alles von ihr bekannte durch den Müllsammler (Garbage Collector) weggeräumt. Seht euch folgendes Beispiel an:

var noClosure = function () {
    var a = a || 1;
    var b = b || 2;
    b = b + 1;
    return a + b;
}
console.log(noClosure());
console.log(noClosure());
console.log(noClosure());
console.log(noClosure());
 
= 4
= 4
= 4
= 4

Wenn die Funktion “noClosure” aufgerufen wurde, gibt sie am Ende das Ergebnis von “a + b” zurück. Nachdem sie das getan hat, existieren die Variablen im Programm nicht mehr, weil Sie für den Müllsammler freigegeben wurden.* So können wir also auch nie wieder auf einen Wert, der in der Funktion lebte zurückgreifen. Die Variablen “a” und “b” müssen immer neu belegt werden, da der return aus “a + b” sonst schief gehen würde. Im Context existieren a und b somit nicht. Würde der Inhalt der Funktion noch existieren, würde durch “a || 1″ a zu a zugewiesen und nicht 1.**

Schauen wir uns dagegen folgendes an:

var closure = (function() {
    var a = 1;
    var b = 2;
 
    return function () {
        b = b + 1;
        return a + b;
    }
})();
console.log(closure());
console.log(closure());
console.log(closure());
console.log(closure());
 
= 4
= 5
= 6
= 7

Hier wird der Inhalt nicht jedes mal neu erstellt. Die Variable “b” hat nach jedem Aufruf einen um 1 erhöhten Wert zugewiesen. Wir konservieren also die Werte der Variable “a” und “b” anstelle sie jedes mal neu zu erstellen.

Closures sind ne tolle Sache, damit kann man vieles wirklich wirklich gutes und nützliches machen. Zum Beispiel Caching, Module-Patterns, private Werte usw. Ich bin mir abschließend aber noch nicht ganz sicher, ob man in JS wirklich soetwas wie “private” benötigt.

* Der Garbage Collector sammelt alle Dinge auf (und gibt den davon belegten Speicher wieder frei), die nicht mehr zu erreichen sind. Nicht mehr zu erreichen sind sie, wenn sie außerhalb der Sichtweite / des Anwendungsbereichs (Scope) sind.

** Der || Operator gibt den linken Wert zurück, wenn dieser truthy ist, also zum Beispiel NICHT false, undefined, null. Aufgrund des Hoistings existiert a nie in dieser Methode. Wäre die Methode aber konserviert, würde nicht jedes mal der Kontext zurück gesetzt werden, ein Hoisting müsste ebenfalls nicht stattfinden und a würde somit existieren.