Tuesday, May 28, 2013 3:50 PM

Vortrag "JavaScript überall"

Author: matthias - Last modified: Thursday, November 14, 2013 9:36 AM

de javascript  javascript everywhere  talk  introduction  nodejs

Im vergangenen halben Jahr hat sich meine Arbeit mit JavaScript weiter intensiviert und zur Zeit arbeite ich parallel an verschiedenen JS-Projekten (node JS, Ext JS, express/Backbone). Zwischenzeitig habe ich einen Vortrag ausgearbeitet.

Vor zwei Wochen hielt ich im Rahmen der regelmässig organisierten Seminarvormittage in der Bürogemeinschaft "Freunde der Medien" einen Vortrag über Vergangenheit, Gegenwart und Zukunft der großen weiten Welt von JavaScript mit dem Titel "JavaScript überall".

Das primäre Ziel und letztlich die größte Herausforderung dabei war, ein relativ heterogenes Publikum aus Codern und _Überhauptnicht-Codern zu erreichen und für die zunehmende Bedeutung von JavaScript in der modernen, bunten und vernetzten "App-Welt" zu sensibilisieren. _

Erfreulich: Ein ausnahmslos gutes Feedback bestätigte mir, dass ich die ca. 18 Teilnehmer erfolgreich auf die kleine JS-Reise mitnehmen konnte.

JavaScript überall

* Interesse geweckt? *

Der Vortrag eignet sich als allgemeine Einführung in das Thema "JavaScript im modernen Web". Es betrachtet die Sprache und Wirkungsfelder aus unterschiedlichen Blickwinkeln und für einen Zielgruppen-Mix aus Projektverantwortlichen, Entscheidern und Programmierern. Weitab von Klischees, die vor allem aus den "Browser-Kindertagen" von JavaScript stammen, geht es um die Beantwortung der Frage, welche Möglichkeiten die Sprache, ihre professionelle Adaption auf Serverseite (NodeJS) und die Verwendung in diversen Frameworks und Software-Ökosystemen bietet – und in der zweiten Dekade des 21. Jahrhunderts voraussichtlich noch bieten wird.

Wenn Sie an diesem Vortrag oder einem ihrer Interessengruppe angepassten Event – in Talk- oder Seminar-Form – Interesse haben sollten, kontaktieren Sie mich gerne!

* ...aus dem Inhalt: *

# "JavaScript überall" - aus dem Inhalt:
var jsUeberall = {
  type: 'Talk',
  audience: 'Everyone',
  chapter: [
    'Dynamik im Browser + Historisches',
    'Server Side JavaScript: Node.js & Co',
    'Kommunikation ist alles - JSON',
    'Echtzeit-Anwendung am Beispiel Meteor JS',
    'Fragen & Antworten'
  ]
}
Comment / Share »
Thursday, October 18, 2012 9:05 PM

Get on your feed: Using node-rss with express and mongojs

Author: matthias - Last modified: Friday, June 21, 2013 2:41 PM

en node-rss  rss  nodejs express  mongojs

This post shows a code snippet as an example for setting up a rss feed by integrating node-rss with express using a mongodb/mongojs result array.

Note: I just were going to add this stuff as a Gist on Github which at the time of writing this experiences major disruptions. Well, I'll do better publishing it directly in my blog by now.

Situation

For my tiny blog (engine) based on node, express/connect and mongojs I needed a simple rss feed solution. I discovered and decided to go with the nice working npm module node-rss instead of writing xml myself.

What this code example does

Basically I create an get event on route /feed/rss, generate a node-rss object initialized with base values and add item elements to it while looping over a mongojs collection result array (holding my post items to be reflected). Finally I send a response with an appropriate content type header. My example is directly bound to an express get event callback for a simple static request path, but you may of course move it to route exports or whatever.

Notes

No big deal, but you might find this portion of code useful as a starting point when seeking for rss solutions.

Comment / Share »
Monday, October 8, 2012 11:22 PM

Meteor Web Plattform: Echtzeit ab Werk

Author: matthias - Last modified: Wednesday, December 23, 2015 12:02 AM

de meteor  nodejs javascript  platform  framework  realtime  startup

Seit einigen Monaten verfolge ich neugierig das Treiben der Meteor Development Group und die Fortschritte ihres quelloffenen Kernprojekts Meteor. Meteor ist eine konsequent auf JavaScript und node aufsetzende Web Application Platform. In diesem Post werde ich einen kleinen Überblick über die Hintergründe geben und ein paar Paradigmen anhand eines Beispiels erläutern.

Wer? Eine Handvoll Jungs aus Kalifornien. Mal wieder.

Das kleine ambitionierte Startup aus San Francisco hat sich mit ihrem Projekt nicht Geringeres auf die Fahne geschrieben, als einen gehörigen Anteil am Transformationsprozess und an den Basistechnologien der in den kommenden Jahren weiter massiv an Bedeutung gewinnenden Web-Applikationen bestreiten zu wollen. Wie im Valley bzw. der Bay Area bei solch vielversprechenden Ansätzen nicht unüblich, sind die Jungs (Geeks, Nerds) im Sommer 2012 von verschiedenen Investoren mit einer anständigen Summe an Kapital ausgestattet worden, so dass sie sich zumindest um die mittelfristige Weiterverfolgung ihrer Vision keine Sorgen zu machen brauchen.

Warum ich ausgerechnet bei Meteor genauer hinschaue

Meteor ist im Anfangsstadium, die API ändert sich noch häufig - allzu viel lässt sich über die Zukunft wirklich nicht voraussagen. Aber mir gefällt das "Mission statement" und die Vision der Gründer (ich mag Visionen und gehe deswegen nicht zum Arzt!). Sie liesse sich etwas flappsig in etwa wie folgt sinngemäss zusammenfassen:

Entwickle Web-Anwendungen extrem schnell und einfach, entwickle Back- und Frontend in einer einzigen Sprache, entwickle mit Leichtigkeit Echtzeitanwendungen und integriere Deine Lösung in andere Systeme und umgekehrt - tue dies alles im vollsten Vertrauen, dass Deine Anwendung jederzeit für eine beliebig große Anwenderzahl verfügbar ist, natürlich bei Traum-Antwortzeiten. Kümmere Dich nicht um Hardware oder etwaige Administrationsaufgaben wie ödes Tuning von SQL-Datenbanken!

Also genau das, wovon jeder Web-Entwickler schon lange träumt! Nun, vielleicht ist es an der Zeit, erstmal ein praktisches Beispiel zu betrachten.

Für die Hacker/Ungeduldigen: Das Beispiel "Leaderboard"

Zur Installation von Meteor inkl. aller Abhängigkeiten und Erstellung des Beispielprojekts "leaderboard" braucht man ein anständiges Betriebssystem, eine Shell und eine Prise Neugierde sowie Vertrauen:

$ (sudo) curl https://install.meteor.com | sh
$ meteor create --example leaderboard
$ cd leaderboard
$ meteor

Der Aufruf $ meteor startet die Anwendung lokal auf Port 3000. Öffnet man diese Anwendung nun in zwei unterschiedlichen Browserfenstern (http://localhost:3000), stellt diese nebeneinander und vergibt ein paar Punkte hier und da, sollte sich das Aha!-Erlebnis schnell einstellen.

Ein Deployment in der Meteor-Cloud ist auch gleich vorgesehen:

$ meteor deploy [my-fancy-leaderboard].meteor.com

Wobei [my-fancy-leaderboard] selbstverständlich durch einen individuellen Namen ersetzt werden sollte, den möglichst noch kein Zweiter benutzt. Hier residiert gerade (m)eine Standard-Installation des Leaderboard-Beispiels: http://ml-leaderboard.meteor.com/.

Ein paar Paradigmen und ein kurzer Blick unter die Haube

JS and Database Everywhere

Das Leaderboard-Beispiel besteht aus drei Dateien, welche die eigentliche Anwendung beschreiben: 47 Zeilen JavaScript, 35 Zeilen HTML (mit Handlebars-Templates) und 62 Zeilen CSS - unkomprimiert und mit Kommentaren. Ein Blick in die Datei leaderboard.js:

if (Meteor.is_client) {
  Template.leaderboard.players = function () {
    return Players.find({}, {sort: {score: -1, name: 1}});
  };
  ...
}
...
if (Meteor.is_server) {
  Meteor.startup(function () {
    if (Players.find().count() === 0) {
      var names = ["Ada Lovelace", "Grace Hopper", "Marie Curie",  ... ];
      for (var i = 0; i < names.length; i++)
        Players.insert({name: names[i], score: Math.floor(Math.random()*10)*5});
    }
  });
}

Die Prüfungen is_client sowie ìs_server lassen ein wesentliches Merkmal von Meteor erahnen: Nämlich die Grundannahme, dass wesentliche Objekte sinnvollerweise auf dem Server und im Client verfügbar gemacht werden sollten. Bemüht man im Browser die JavaScript-Console z.B. derart:

> Players;

so bekommt man ohne Umwege ein Objekt vom Typ Meteor.Collection zurückgeliefert, welches die Dokumente der Collection Players in der standardmässig verfügbaren MongoDB-Datenbank repräsentiert. Dies lässt schon so manches Programmiererherz höher schlagen.

Viele Entwickler werden bestätigen, dass es reichlich gute Gründe gibt, bestimmte Objekte und Funktionalität manchmal besser im Browser, machmal besser auf dem Server und oft am liebsten auf beiden Seiten verfügbar zu machen. Da wir hier ausschliesslich in JavaScript programmieren, ist der gewählte Ansatz naheliegend. Kein redundanter JS-Code muss extra geschrieben oder mittels irgendwelcher Compiler für den Browser erzeugt werden.

Data on the Wire, Realtime as default

Dies passt nun auch nahtlos zum von Meteor propagierten Prinzip Data on the Wire, nach welchem der Client niemals "fertig gerendertes" HTML erhalten soll, sondern lediglich die Nutzdaten selbst vom Sever übermittelt bekommt. HTML existiert in Form von Templates - natürlich bzw. gerade auch auf Client-Seite. Diese werden beim Aufruf der (Single Page) Applikation geladen. Die von Meteor generierten Objekt-Prototypen hierzu kann man sich wieder über die JS-Console anschauen:

> Template;

Nun kombiniere man dies mit dem nächsten Paradigma Realtime as Default und der Tatsache, dass Meteor standardmässig Web-Sockets bereithält. Das Ereignis "Veränderung in der Datenbank" könnte somit sofort und ohne Umwege in der View bzw. im View-Modell des Clients durchschlagen. Wer mag, gibt "Grace Hopper" der Players-Collection also mal satte 150 Punkte zusätzlich. Ach so, natürlich wieder direkt mittels der JS-Console des Browsers.

> Players.update(Players.findOne({name: 'Grace Hopper'}), {$inc: {score: 150}});  

Bang!

Es sind noch nicht alle Paradigmen wie z.B. die Latency Compensation erwähnt, aber als erster Überblick sollte es an dieser Stelle ausreichend sein.

Ein kleines Fazit. Bis hierher.

Allgemein betrachtet: Bei einer weiterhin kontinuierlich wachsenden Menge an Daten sowie ständig neuen Anforderungen an deren kurzfristige Evaluation, Aggregation, Integration in andere Dienste und Bereitstellung für sich dynamisch verändernde Nutzergruppen wird es technologische Antworten wie Meteor geben müssen. Und diese, so viel steht schon jetzt fest, müssen auf jeden Fall eine extrem agile und modulare Entwicklungsweise sowie eine unproblematische Bereitstellung in hochverfügbaren Cloud-Infrastrukturen ermöglichen. Das Ganze bei überschaubaren Kosten, versteht sich.

Ein spezifisches Projekt wie Meteor, das seine Einfachheit und Mächtigkeit mit Trommelwirbel propagiert (wie seinerzeit vielleicht Rails) und in Wirklichkeit erst in den Anfängen und jenseits der Produktionsreife steckt, muss nicht zwingend eine große Zukunft besitzen. Gleichwohl traue ich den Köpfen dahinter weit mehr als einen Achtungserfolg zu. Meteor ist mindestens ein wichtiger Trendindikator für die Frage nach dem "Quo vadis, Web?". Das Projekt zeigt schon in diesem frühen Stadium einen sehr eleganten Weg für die Entwicklung und Bereitstellung moderner Applikationen, die auf Web-Standards basieren und Echtzeit- sowie Kollaborations-Anforderungen von Haus aus bedienen.

Ich schaue jedenfalls weiterhin gespannt auf die Entwicklung dieses Projekts!

Anmerkung: An dieser Stelle sollte ich noch betonen, dass ich keine Diskussion um z.B. unternehmenskritische Prozesse, Datenintegrität und Transaktionssicherheit in sensiblen Systemumgebungen einbringen möchte. Das ist eine andere Betrachtungsweise und hier beschränke ich mich zunächst auf die Anwendungsfälle der "agilen Web-Applikationen für jedermann".

Comment / Share »
Thursday, September 27, 2012 5:47 PM

Hello, node! How I set up this blog.

Author: matthias - Last modified: Tuesday, October 9, 2012 8:35 AM

en blog  nodejs express  mongodb  twitter bootstrap  jade  nodejitsu

Hello, world - hello, node!

I just launched this new site and - though far from a perfect state - I'm quite happy with the results. About two weeks ago I had the idea to start this as a project aiming three goals:

  • Relaunching my personal homepage - the agile way
  • Getting in touch with and a better understanding for the world of node.js
  • Testing and evaluating some fancy JS plugins and cloud services (SaaS/PaaS)

It took me about a week studying various blogs, articles, docs and of course code for getting an idea and roundup of the current development state, packages, paradigms and concepts. In the end, it was definitive worth reading! Not only that I now know how to npm install something but that I now got a clearer understanding of e.g. what kind of loose coupling is the preferred node way and so on.

So, what software packages make up this site? Here we go:

express: Ready-to-roll on node

Starting from scratch, I decided to write a little blog engine on my own as a node/JS exercise. Currently there's likely no way around using the beautiful and simple mvc/mvr framework express which is basically comparable to Ruby Sinatra and other lightweight web DSLs/frameworks.

mongodb: No SQL? noSQL!

As a storage backend for the blog entries and user authentication a my decision was made in favour of the document-oriented database mongoDB. I utilized the node-mongodb-native driver and mongojs as a convenient wrapper around it. Well, using a noSQL database for the first time was fun to me (and less painful than many other learning curves), but haven't gone any deeper than storing, updating, finding and sorting at a starters' level by now.

Some tests with popular modules like mongoose, other key-value-stores and multi-db orm layers are on my todo list. Stay tuned for updates on my experiences with noSQL!

Twitter Bootstrap: Solid UI layout foundation - finally!

Hard to ignore: Twitter Bootstrap helped me out a lot building this blog. I' making use of a pure boostrap 2.1.1 CSS / JS, a slightly customized bootstrap-responsive and few additional inline styles. Though I'm planning to move the layout towards a more individual style, I'm happy with the current state as a solid starting point.

jade: Templating, the convenient way

Templating with express is a matter of choice again. I decided to go with jade. I've never been a big friend of HTML templating languages that forces you to learn yet another syntax, but - since jade seems currently to be the no.1 choice for node/express applications - it was time to give it a try. And, okay... now I know what I was missing.

nodejitsu: Good bye old servers - hello, cloud!

Last but not least: The node app running this site is just freshly installed and currently hosted on nodejitsu. The service is still in a public beta stadium but as far as I can tell it works great: Easy account setup and deployment, great toolkit and excellent response times. A basic mongodb instance is easy to install with the "jitsu" tool as well - although it will be installed in the cloud of nodejitsus partner mongoHQ. No problems here either so far - welcome to the cloud!

Next time I'll also go for a deployment on heroku. Let's see who's winning the "simple agile approach for quick results".

Next: Read my blog!

The upcoming days and weeks I'll frequently

$ jitsu deploy

my site, extend its functionality and add new modules. I'm going to share my individual experiences with the world of node, related projects and my progress in building a real-world application.

Stay tuned!

Comment / Share »