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ázi Andráswebfejlesztő, infojunkie

Kapcsolat:mail: andras(beigli)barthazi(pont)hutwitter: @ba78

Blog:http://webakademia.hu


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


http://nodejs.org

http://nodejs.org

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

A Twitter real-time API-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 Twitter API 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 Stream API-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, Twitter API-nál gyorsabb, több információt adó kiszolgálásra


Kliens oldalMegpró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/


http://embeddedjs.com

http://embeddedjs.com

Kliens oldal

A Twitter ü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


http://remysharp.com/2010/08/24/dynamic-favicons/

http://remysharp.com/2010/08/24/dynamic-favicons/

Köszönöm!Kérdések?

Bártházi András

Kapcsolat:mail: andras(beigli)barthazi(pont)hutwitter: @ba78

Blog:http://webakademia.hu




susmus.hu - technológiák

Technology