Seite wählen

NETWAYS Blog

AJAX mit Ruby on Rails und :remote => true

Mit :remote => true bietet das das Ruby Webframework Rails eine sehr einfache Methode um mit Hilfe von AJAX eine Webseite zu aktualisieren. Dieses kann z.B. einfach zu HTML-Elementen wie Formulare, Buttons, Links und Checkboxen hinzugefügt werden. Dadurch werden z.B. gefüllte Formulare nicht mehr wie gewohnt an den Webserver gesendet, sondern mit AJAX. Man erspart dem Benutzer dadurch einen lästigen ggf. langwierigen Seitenaufbau. Im Gegenzug muss man sich aber selber um eine Aktualisierung der Webseite mit Hilfe von jQuery oder JavaScript kümmern.

Folgender Code in einem View erstellt eine Checkbox welche bei einem Klick mit Hilfe von AJAX einen HTTP Post an die angeben URL sendet:

[ruby]
check_box_tag(
"my_checkbox", "i_am_checked", false,
data: {
remote: true,
url: "my_checkbox/click",
method: "POST"
}
)
[/ruby]

Der Request muss in diesem Fall vom my_checkbox Controller angenommen und verarbeitet werden. Um die Ansicht des Benutzers zu ändern schickt man mit den bekannten Rails Methoden Javascript an den Browser zurück. Im my_checkbox_controller.rb erweitert man z.B. die respond_to einfach um ein format.js:

[ruby]
def click
respond_to do |format|
format.js {}
end
end
[/ruby]

Der dazugehörigen View (click.js.erb) wird somit an den Browser zurück gesendet und man kann per JavaScript die Webseite aktualisieren:

[javascript]
console.log(‚I am the response!‘)
alert(‚You clicked the checkbox!‘)
[/javascript]

Rails bietet mit :remote=>true somit eine wirklich einfach Methode um AJAX für seine Webseite einzusetzen!

Achim Ledermüller
Achim Ledermüller
Senior Manager Cloud

Der Exil Regensburger kam 2012 zu NETWAYS, nachdem er dort sein Wirtschaftsinformatik Studium beendet hatte. In der Managed Services Abteilung ist er für den Betrieb und die Weiterentwicklung unserer Cloud-Plattform verantwortlich.

How css-tricks improved my work life

My relationship with CSS is some kind of a love-hate one and I think that is a sentiment a lot of web-devs share with me.
My biggest issue with it is, that it is really counterintuitive and most of the time it feels a bit like solving puzzles to make things align the way you want it to.

and oftentimes it feels a lot like


Properties that mean the same thing being worded inconsistently – I’m looking at you…

vertical-align: middle;
text-align: center;

And there is also some questionable naming with ‚grey‘ (#808080) being darker than ‚darkgrey‘ (#a9a9a9)…
In general there are too many quirks you need to just know. Unless you work with it every day, you need to google every second line in order to write your stylesheets.
There you can find all sorts of guidelines, help, blogposts with a nice mix of bad-practices and outdated information.
What helped me a lot is the website css-tricks.
mehr lesen…

Feu Mourek
Feu Mourek
Developer Advocate

Feu verbrachte seine Kindheit im schönen Steigerwald, bevor es sich aufmachte die Welt zu Erkunden. Seit September 2016 unterstützt es Icinga zunächst als Developer und seit 2020 als Developer Advocate, und NETWAYS als Git und GitLab Trainer. Seine Freizeit verbringt es hauptsächlich damit Video-, und Pen and Paper Rollenspiele zu spielen, sich Häuser zu designen (die es sich nie leisten können wird) oder ganz lässig mit seinem Cabrio durch die Gegend zu düsen.

NodeJS HA mit PM2…

ich hatte in Vergangenheit bereits einen Blog Post über NodeJS in Verbindung mit dem NodeJS ‚Cluster‘ Modul geschrieben ( siehe hier ), nun möchte ich euch zeigen wie Ihr eure NodeJS Anwendung auch ohne Programmierarbeit (also als reine Ops Tätigkeit) zum Cluster umfunktioniert und wie ihr diese anschließend verwalten könnt.
nodejs-logo-2015
Legen wir los, wir benötigen hierzu NodeJS, am besten 4.4 LTS und 4 zusätzliche Module/Helper, fangen wir also mit der Installation an…

$ npm install -g pm2
$ npm install -g express-generator
$ mkdir ~/project && cd project
$ npm install --save express
$ npm install --save sleep

…nun generieren wir das Express Anwendungsgerüst…

$ express -f .
   create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/users.js
   create : ./views
   create : ./views/index.jade
   create : ./views/layout.jade
   create : ./views/error.jade
   create : ./bin
   create : ./bin/www
   install dependencies:
     $ cd . && npm install
   run the app:
     $ DEBUG=project:* npm start
$

… danach löschen wir in der Datei app.js alles von Zeile 13 bis 58, wir benötigen nur das Gerüst selbst und ein paar Zeile selbst geschriebenen Code, um diesen kommen wir leider nicht herum, da wir ja auch was sehen wollen.
Fügt nun ab Zeile 14 folgenden Code hinzu…

var crypto = require( 'crypto' );
var util = require( 'util' );
var sleep = require( 'sleep' ).sleep;
function getRandHash() {
    var current_date = (new Date()).valueOf().toString();
    var random = Math.random().toString();
    return crypto.createHash('sha1').update(current_date + random).digest('hex');
}
var myID = getRandHash();
app.get( '/', function( req, res ) {
    sleep( Math.floor( (Math.random() * 3) + 1 ) );
    res.send({
        "ID": myID,
        "PID": process.pid,
        "ENV": process.env
    });
});

…nun starten wir die App über PM2 im Cluster Mode, hier bitte dem Parameter ‚-i‘ nur einen Wert gleich der Anzahl der CPU Cores mitgeben. Dann testen wir das Ganze doch gleich mal…

$ cd project
$ pm2 start bin/www -i 4

…ihr solltet nun folgende Ausgabe zu sehen bekommen…
pm2-start-www-cluster
…ihr könnt eure Anwendung auch auf Fehler überprüfen, dafür gibt euch PM2 einen Parameter ‚logs‘ mit, der wiederum einige Flags kennt. Wenn ihr nur ‚pm2 logs‘ eingebt dann bekommt ihr die Standardausgabe unserer Anwendung zu sehen, wenn ihr zusätzlich das Flag ‚–err‘ mit angebt, bekommt ihr die Standard Fehlerausgabe, was für das Debugging recht hilfreich ist.
pm2-logs-examine
So, nun könnt ihr in eurem Browser mal die Anwendung aufrufen. Der Listener der Anwendung horcht auf dem Port 3000. Ein Aufruf auf http://127.0.0.1:3000 sollte ein JSON liefern, ähnlich zu dieser Ausgabe hier…
pm2-cluster-test1
Da wir in unserem Code eine künstliche Verzögerung eingebaut haben, könnt ihr nun mit 2 direkt Aufeinander folgenden Browser Reload sehen das sich die ID u. PID Werte gelegentlich ändern, dies bedeutet, dass unsere Cluster Anwendung funktioniert.
pm2-logo
Ich hoffe ich konnte euch nun zum Spielen und Experimentieren animieren. PM2 wird von der Firma Kissmetrics als OpenSource Project stetig weiter entwickelt und hat noch so viel mehr zu bieten, ganz findige unter euch werden die Monitoring API zu schätzen wissen und diese vmtl. in Icinga2, Graphite, Kibana und anderen Lösungen integrieren wollen.
Dann bis demnächst 🙂

impress.js – Really impressed, I am

Im Alltag ist es immer wieder interessant zu sehen, dass alle sich über Powerpoint™ Präsentationen lustig machen, am Ende des Tages aber doch wieder auf das alte Hausmittel zurückgreifen. Es ist ja auch so schön einfach und eine echte Alternative schwer zu finden.
Aber mal Hand aufs Herz. Mal was anderes ausprobieren tut nicht weh und eventuell ist das neue Tool ja sogar besser.
So einen Vetreter seiner Zunft habe ich letzte Woche durch Zufall gefunden. Es heißt impress.js und basiert auf einem javascript Framework. Inspieriert wurde das ganze durch die bekannte online Lösung Prezi, die im Gegensatz zu impress.js jedoch kommerzielle Zwecke verfolgt und dabei sogar bei ein Paar features im Hintertreffen ist. Bei impress.js beherrscht man nämlich alle drei Dimensionen.
Wie so eine Präsentation aussehen kann, kann man im sich hier anschauen:

impress.js tutorial

impress.js tutorial


impress.js benötigt Serverseitig nicht viel da es sich um javascript handelt und clientseitig ausgeführt wird.
Auch bei der Erstellung wird dem Benutzer freie Hand gelassen. Die Präsentation wird durch eine einzige html Datei definiert und kann mit einem einfachen Texteditor erstellt werden.
Weitaus komfortabler geschiet dies allerding mit dem online Editor strut. Hier kann man sich seine Präsentation zusammenklicken, die Folien anordnen (stauchen, strecken, drehen usw.). Wenn man die Demo benutzt kann man die Präsentation mit Hilfe des Browsers (STRG+S) auf der Festplatte speichern und mitnehmen oder alternativ auf einen Webserver laden und online anschauen. Besonders die Overview und Preview am oberen rechten Rand sind zwar praktisch, werden aber auch leicht übersehen.
 

Christoph Niemann
Christoph Niemann
Senior Consultant

Christoph hat bei uns im Bereich Managed Service begonnen und sich dort intensiv mit dem internen Monitoring auseinandergesetzt. Seit 2011 ist er nun im Consulting aktiv und unterstützt unsere Kunden vor Ort bei größeren Monitoring-Projekten und PERL-Developer-Hells.

Einfache asynchrone Aufrufe in JavaScript mit Async.js

JavaScript ist eine Programmiersprache die als Non-Blocking bezeichnet wird: Wenn ein Funktionsaufruf längere Zeit in Anspruch nimmt, wie das z.B. bei AJAX oder Timeouts der Fall ist, wird der Thread des Codes nicht schlafen gelegt bis der Funktionsaufruf beendet ist, sondern läuft sofort weiter. Es ist nicht möglich auf die Auswirkungen des Aufrufs zu warten, außer man benutzt eine weitere Funktion die dann als Callback aufgerufen wird.
In den Anfangstagen von JavaScript hatte dieses Vorgehen durchaus seinen Sinn: Da die Sprache nur für einfache Animationen gedacht war und kein Multithreading unterstützt hat (was sie übrigens auch heute nur mithilfe von WebWorkern beherrscht), wären sonst bei jedem Timeout die Animationen der Website stehen geblieben. Heute wird JavaScript sehr oft verwendet um per AJAX Inhalte nachzuladen. Komplexere Funktionalität erfordern dann aber immer öfter mehrfach ineinander verschachtelte Callbacks, was den Code schnell schwer durschaubar werden lässt.
Als Beispiel verwende ich nur setTimeout(), man kann sich an dieser Stelle aber auch beispielsweise einen HTTP-GET per AJAX oder eine beliebige andere asynchrone Funktion vorstellen. Je mehr Funktionen dazu kommen, desto verwirrender wird der Code:

setTimeout(function(){
   alert("Du bist jetzt seit einer Sekunde auf dieser Seite");
   setTimeout(function(){
       alert("Seit der letzten Meldung sind 10 Sekunden vergangen");
       setTimeout(function(){
           alert("Eingeschlafen?");
       }, 3600*1000);
   }, 10000);
}, 1000)

Natürlich könnte man stattdessen auch einfach eine Funktion schreiben, die eine Liste an Funktionen als Argumente annimmt, und diese dann alle in Serie aufruft. Einfacher geht es allerdings mit Async.js:

async.series([
    function(callback) {
        setTimeout(function() {
           alert("Du bist seit einer Sekunde auf dieser Seite");
           callback();
        }, 1000);
    },
    function(callback) {
        setTimeout(function() {
            alert("Seit der letzten Meldung sind 10 Sekunden vergangen.");
            callback();
        }, 10000);
    },
    function(callback) {
        setTimeout(function(callback) {
            alert("Eingeschlafen?");
            callback();
        }, 1000*3600)
    }
]);

Die Funktion series führt alle Funktionen der Reihe nach aus. Mithilfe des Callbacks wird Async.js mitgeteilt wenn die Funktion beendet ist. Dieser Code ist zwar länger, aber dafür wesentlich lesbarer: Es ist auf einen Blick zu erkennen, wie lange die einzelnen Schritte dauern und welcher Code dann ausgeführt wird. Auch bei sehr vielen voneinander abhängigen Aufrufen bleibt die Zahl der Einrückungen übersichtlich.
Dieses Beispiel zeigt nur den einfachsten Anwendungsfall von Async.js. Es gibt neben series noch viele andere Strategien um Aufrufe zu synchronisieren. Mit parallel werden die Funktionen nicht seriell, sondern parallel gestartet. Ein Callback wird aufgerufen sobald alle Funktionen fertig abgearbeitet wurden. Außerdem gibt es noch viele funktionale Strategien wie map, reduce und filter, die benutzt werden können um eine Collection aus Daten einfach mit asynchronen Funktionen zu verändern.