First steps with Sammy.js

By YopY on Monday 13 June 2011 13:18 - Comments (13)
Category: -, Views: 6.561

Sammy.js is a small, modular front-end Javascript web frontend which helps structure your rich internet applications. In a blogpost I wrote on Xebia NeXt, I share my experiences in using Sammy to create a front-end to my screwing-around project Norum, a forum / message board written in NodeJS. It's also compared to another web application front-end library I've used in a previous project, Backbone.

I'm afraid I can't copy / paste the whole article to this blog - too much formatting involved, I would have to spend an hour or so converting HTML and Gist snippets over to BBCode. So please, if you're interested, go to the source to read the full article. If you're just slightly curious about Sammy, here's the code snippet we develop in the article:


JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function($) {
  var app = $.sammy('#main', function() {
    this.use('Template');
    this.get('#/', function(context) {
      this.load('thread')
        .then( function(threads) {
          $.each(threads, function(i, thread) {
            context.render('templates/thread.template', {thread : thread})
              .appendTo(context.$element());
          });
        });
    });
  });
  $( function() {
    app.run('#/');
  });
})(jQuery);



About Xebia NeXt

Xebia NeXt is a program within Xebia that offers promising and talented post-graduates a year-long apprenticeship, where they get to spend their time exploring new technologies, participating as apprentices in projects, and gain experience in the real world, far beyond the scope often found in internships. We are currently looking for new apprentices, so if you're interested or wondering what it's all about, send me a Direct Message. No strings attached.

Volgende: Strangeloop 2011 09-'11 Strangeloop 2011
Volgende: Running Selenium tests with multiple WebRunners 05-'11 Running Selenium tests with multiple WebRunners

Comments


By Tweakers user Precision, Monday 13 June 2011 15:40

Heb je een demo? :Y)
Ik weet ik kan 't zelf runnen zo moeilijk is het niet, maar heb nog kleine 2 weken geen tijd om vmware op te zetten en te kijken hoe ver je staat met je forum. Het lijkt me in elk geval veel belovend. Ik was van plan om ook iets gelijkaardigs te proberen, om het te leren.

By Tweakers user YopY, Monday 13 June 2011 20:54

Ah nee, helaas, nog niet :/. Is wel een goeie trouwens, ik moet eens ergens hosting zien te regelen.

En ver ben ik nog niet hoor, ;p. Je kunt draadjes aanmaken en bekijken, meer niet. Op het moment geloof ik ook niet dat het veel meer zal worden dan een proof of concept / testprojectje.

By Tweakers user i-chat, Monday 13 June 2011 21:12

YopY wrote on Monday 13 June 2011 @ 20:54:
Ah nee, helaas, nog niet :/. Is wel een goeie trouwens, ik moet eens ergens hosting zien te regelen.

En ver ben ik nog niet hoor, ;p. Je kunt draadjes aanmaken en bekijken, meer niet. Op het moment geloof ik ook niet dat het veel meer zal worden dan een proof of concept / testprojectje.
- heb ik je een dm over gestuurd...

By Tweakers user Precision, Monday 13 June 2011 21:26

Als ik het goed begrijp krijg je nu deze pagina terug:
https://github.com/Cthulh.../master/public/index.html
zonder te testen :) ik heb gewoon eens je code doorlopen. Waarom heb je eigenlijk public en views? Je gebruikt die views (nog) niet?
Btw wat is nu eigenlijk het grote voordeel van nodejs tov bvb apache httpd, lighthttpd, nginx of cherokee? Dat het event based is en niet thread based, dus goed schaalbaar. Maar de 4 "standaard" web servers, loggen alles (errors, access) terwijl nodejs mij dit niet lijkt te doen.

[Comment edited on Monday 13 June 2011 21:55]


By Tweakers user Gamebuster, Monday 13 June 2011 23:00

NodeJS logt idd uit zichzelf niets, zal je zelf moeten programmeren.

By Tweakers user YopY, Tuesday 14 June 2011 09:46

Precision wrote on Monday 13 June 2011 @ 21:26:
Als ik het goed begrijp krijg je nu deze pagina terug:
https://github.com/Cthulh.../master/public/index.html
zonder te testen :) ik heb gewoon eens je code doorlopen. Waarom heb je eigenlijk public en views? Je gebruikt die views (nog) niet?
Je hebt gelijk, ik heb ze net verwijderd in een onderhoudsronde. Het is / blijft een beetje een aanprutsen / onderzoeksprojectje, dus dat soort slordigheidjes zullen er wel in blijven zitten. Veel dingen heb ik ook nog geen flauw idee van.

En idd, 'nog' niet, ;p. In de toekomst (als ik er ooit aan toe kom) zal ik het zodanig maken dat als het een gewone gebruiker is, de templates op de clientside gerenderd worden, en als het een crawler is dat de templates op de server gegenereerd worden. In theorie moet dat heel leuk kunnen met extensies. Ik moet het nog consistent maken, maar je kunt het maken als volgt:

site.com/thread/titel-123.json - haalt de thread met titel thread-123 op als .json
site.com/thread/titel-123.html - haalt de thread met titel thread-123 op als (gerenderde) json.

Het zal veel uitzoeken zijn om het consistent werkend te krijgen zonder al teveel code te moeten copy / pasten, echter. Ik hoop dat iemand zoiets al eens eerder gedaan heeft, anders zal ik of veel moeten uitzoeken en in elkaar moeten prutsen, of volledig serverside gaan met bepaalde features aan de clientside. Maar da's nog toekomstmuziek.
Btw wat is nu eigenlijk het grote voordeel van nodejs tov bvb apache httpd, lighthttpd, nginx of cherokee? Dat het event based is en niet thread based, dus goed schaalbaar. Maar de 4 "standaard" web servers, loggen alles (errors, access) terwijl nodejs mij dit niet lijkt te doen.
Als je alleen kijkt naar het webserverperspectief zijn er idd weinig voordelen ten opzichte van ngnix en dergelijke, als je kijkt naar throughput alleen (alhoewel ik in een benchmark wel gezien heb dat node moeite heeft met grotere responses, had volgens mij te maken met het geheugenbeheer van V8 oid).

Ik denk ook dat je voorbij het webservergedeelte moet kijken. Ik moet, voor de grap, eens proberen om Node te promoten om zo de daadwerkelijke voordelen eruit te halen ten opzichte van andere ontwikkelomgevingen. In theorie (:+) is Node een goede keuze voor concurrent applicaties. Plurk, bijvoorbeeld, kan 100,000 gelijktijdige verbindingen afhandelen dmv Node. Ik geloof zo dat de gebruikte technologie daar belangrijk in was, aangezien klassieke webservers (en programmeertalen / omgevingen die daaraan hangen, o.a. php, java, etc) er al op een klein percentage daarvan mee zouden kappen.

In theorie, natuurlijk, ik heb daar geen praktijkervaring mee. Zoals gezegd, ik moet eens een verkooppraatje voor node zien te maken.

By Tweakers user Precision, Tuesday 14 June 2011 11:12

Ik zal nodejs eens onderzoeken met een statistiekenscript :) Eens de realtime functie uittesten, ik heb alleen nog geen idee over de databank. Ik heb geen ervaring met mongodb, mariadb is een fork van mysql. Heb je ervaring met ruby (on rails) of sinatra? Er zijn zoveel libraries op de markt dat ik niet meer weet waar te beginnen :P

By Tweakers user YopY, Tuesday 14 June 2011 13:13

MongoDB is eigenlijk best wel makkelijk en snel op te zetten, volgens mij is het met twee commando's ook wel gezegd. Zie bijvoorbeeld de quickstart.

Kwestie van:


code:
1
2
3
4
5
curl http://downloads.mongodb.org/linux/mongodb-linux-x86_64-1.6.4.tgz > mongo.tgz
tar xzf mongo.tgz
sudo mkdir -p /data/db/
sudo chown `id -u` /data/db
./mongodb-xxxxxxx/bin/mongod



en klaar :+. Waar ikzelf tegenaan loop / liep is hoe je het beste je data kunt structureren in Mongo, in vergelijking met een relationele database. Denormaliseren is heel normaal in Mongo, bijvoorbeeld, :+.

Ik heb een beetje ervaring (van jaren terug) met RoR, en verder niet met Sinatra zelf, echter er zijn een aantal frameworks (voor Node en Scala en vast nog wel meer) die erop gebaseerd zijn.

By Tweakers user Precision, Wednesday 15 June 2011 20:26

YopY wrote on Tuesday 14 June 2011 @ 09:46:
In de toekomst (als ik er ooit aan toe kom) zal ik het zodanig maken dat als het een gewone gebruiker is, de templates op de clientside gerenderd worden, en als het een crawler is dat de templates op de server gegenereerd worden. In theorie moet dat heel leuk kunnen met extensies. Ik moet het nog consistent maken, maar je kunt het maken als volgt:

site.com/thread/titel-123.json - haalt de thread met titel thread-123 op als .json
site.com/thread/titel-123.html - haalt de thread met titel thread-123 op als (gerenderde) json.
De eerste pagina die gevraagd wordt aan de server dus html gewoon altijd gerendert teruggeven aan de client, volledig alles ingevuld dus. Die ankerlinks vragen toch niets aan de server zelf, maar ik vermoed ben vrij zeker dat google gewoon de http://site.tld/#/news/de-nieuwstitel.html zal opvragen. Je kunt misschien de links zonder # opbouwen en telkens iemand er op klikt jquery/sammy er # laten voorzetten. Je kunt volledige url's plaatsen maar als javascript aanstaat ze niet verwerken. Op die manier krijgen mensen zonder javascript enabled/zoekrobots altijd een volledig gerenderde pagina? De rest die hij opvraagt doormiddel van json door iets als mustache laten afhandelen? 1 model die de gegevens opvraagt en in je controller een verschillende afhandeling? renderen als html pagina/aanbieden als json?
Edit: heb er dit van gemaakt: http://pastebin.com/eA6W0K0u

JavaScript:
1
2
3
4
5
6
jQuery(document).ready(function($) {
  $("a").click(function(event) {                         
    event.preventDefault();
    window.location.hash = $(this).attr('href').split('#')[1];
  });
});


En dan gewoon je url's opbouwen als http://www.website.tld/#/test
Misschien dat er iemand anders een betere oplossing heeft?

[Comment edited on Thursday 16 June 2011 15:37]


By Tweakers user YopY, Thursday 16 June 2011 19:34

Zoiets zou idd kunnen. Maar Google heeft zelf ook instructies online gezet over hoe je je Ajax applicatie bekrupbaar kunt maken (zie hier. Zal ik nog eens goed naar kijken en evt. een artikel over schrijven, lijkt me wel interresant.

By Tweakers user Precision, Thursday 16 June 2011 21:45

Dat is ook een handige manier, maar als je gebruik maakt van javascript/ajax dan zijn je pagina's bij default niet meer te bezoeken voor mensen zonder javascript. Oké het is maar een klein aantal, maar ik hou ze er liever bij :)

By Tweakers user YopY, Thursday 16 June 2011 23:21

Da's een afweging die je per project - en het liefst pas op een bepaald moment - moet maken. Zelf ga ik het eerst bouwen voor de gebruikers, en dan pas bijwerken voor zoekmachines en non-JS gebruikers. Prioriteiten stellen enzo. Heel erg agile, :+.

By Tweakers user Precision, Friday 17 June 2011 21:56

Lol blijkbaar heb ik iets over 't hoofd gezien, alles na # wordt niet naar de server gestuurd, dus veel zin om te splitsen heeft het niet tenzij je iets anders kiest om op te splitsen.

Comments are closed