Susmus.hu - technológiák

Susmus.hu
{ ‘name’: ‘Bártházi András’,
‘company’: ‘Wish Internet Consulting’,
‘event’: ‘Budapest.JS’,
‘date’: Date(‘2010/10/25’) }
Friday, October 29, 2010

Az előadó
BártháziAndrás
webfejlesztő, infojunkie
Kapcsolat:
mail: andras(beigli)barthazi(pont)hu
twitter: @ba78
Blog:
http://webakademia.hu

Susmus.hu
http://susmus.hu/
legújabb “hobbi” projektem, me&yel céljaim:
egy 100% JavaScript webalkalmazás létrehozása, fejlesztése
igényeim szerinti “kommunikációs központ” kialakítása
nemzetközi projektben tapasztalatszerzés

Miről lesz ma szó?
felsorolok egy jó adag fü(vénytárat, amikről
beszélgethetünk :)
mitől 100% JavaScript egy webalkalmazás?
miket használok szerver oldalon, kliens oldalon?
miért lehet érdekes (majd) a projekt felhasználóként is
egy JavaScript fejlesztőnek?

100% JavaScript
Célom egy olyan webalkalmazás létrehozása, mely esetén
a szerver oldali backend, és a kliens oldali +ontend is
teljes egészében JavaScript nyelven készül el
Már csak a Twitterre beléptetés az, ami PHP-ben van
(historikus okokból), de ahogy időm engedi, ez is átírásra
kerül JavaScriptre

100% JavaScript
az architektúra:
szerver oldalon NGINX + Node.JS
kliens oldalon jQuery + rengeteg kis fü(vénykönyvtár

100% JavaScript
Előny, hogy a kliens oldalon megírt kódrészletet szerver
oldalon is használni tudom (és fordítva)
A terhelhetőség és a reszponzivitás miatt minél több
dolgot kliens oldalon érdemes megcsinálni, sok kódrészlet
ugrál fejlesztés közben a két oldal között

Szerver oldal
Node.JS: márciusban már beszéltem róla, azóta is nagy
rajongója vagyok
ATwitter real-timeAPI-ja miatt mindenképpen egy
event centrikus szerver oldali megoldást ke&ett
választanom, ezért esett rá a választásom

Szerver oldal
Felmerült a HTML5 WebSocket használata, melyre a
Node.JS kiválóan alkalmas is lenne (van több modulja
is), azonban az NGINX sajnos nem tudja proxy-zni
Végül a Cometre esett a választásom

Szerver oldal
Node.JS-ben egy proxy készült, mely a TwitterAPI felé
tudja proxy-zni a felhasználóAJAX-os kéréseit:AJAX
felől jön a GET vagy POST kérés, ezt továbbküldi
oAuth aláírással a Twitter felé

Szerver oldal
Ahogy a felhasználó authentikálja magát, a Node.JS
megnyitja a Twitter User StreamAPI-ját, és amíg
vannak comet kérések, fenntartja a kapcsolatot, s tölt egy
queue-t
A comet kérések ezt a queue-t olvassák, és szolgálják ki a
webalkalmazás felé

Szerver oldal
MongoDB - felhasználó adatok, hamarosan status-ok
tárolására, TwitterAPI-nál gyorsabb, több
információt adó kiszolgálásra

Kliens oldal
Megpróbáltam a Sammy.js-t használni, de...
a HTML template-ek renderelése csak az adott route alatti
“context” változóban működtethető :(
az alap információkat nehezen találtam meg, nagyon kevés
doksija van
“nagy”, ahhoz képest hogy hosszútávon faragni szeretnék majd
this.bind('home', function(context) {
context.render('templates/status.template',
{status: status},
function(rendered){}
});

Kliens oldal
hashchange-et használok a routinghoz
#!/user/ba78 lekezelésére:
http://benalman.com/projects/jquery-hashchange-plugin/

Kliens oldal
EJS-t használok a template-ezéshez:
http://embeddedjs.com/

Kliens oldal
ATwitter üzenetekkel együtt érkeznek az üzenetet író
felhasználó +iss adatai is, ezt egy egyszerű cache-ben
letárolom, és onnan tudom kiszolgálni: nem ke&
szerverkérést indítani

Kliens oldal
A +iss üzeneteket dinamikus faviconnal jelzem ki:
http://remysharp.com/2010/08/24/dynamic-favicons/
A trükk itt az, hogy egy 16x16-os canvas-ra lehet
rajzolni, s ezt beá&ítani faviconnak

Köszönöm!
Kérdések?
BártháziAndrás
Kapcsolat:
mail: andras(beigli)barthazi(pont)hu
twitter: @ba78
Blog:
http://webakademia.hu

Susmus.hu - technológiák

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Susmus.hu - technológiák