Susmus.hu - technológiák
-
Upload
andras-barthazi -
Category
Technology
-
view
1.554 -
download
0
description
Transcript of 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
Friday, October 29, 2010
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
Friday, October 29, 2010
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?
Friday, October 29, 2010
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
Friday, October 29, 2010
100% JavaScript
az architektúra:
szerver oldalon NGINX + Node.JS
kliens oldalon jQuery + rengeteg kis fü(vénykönyvtár
Friday, October 29, 2010
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
Friday, October 29, 2010
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
Friday, October 29, 2010
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
Friday, October 29, 2010
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é
Friday, October 29, 2010
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é
Friday, October 29, 2010
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
Friday, October 29, 2010
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){}});
Friday, October 29, 2010
Kliens oldal
hashchange-et használok a routinghoz#!/user/ba78 lekezelésére:
http://benalman.com/projects/jquery-hashchange-plugin/
Friday, October 29, 2010
Kliens oldal
EJS-t használok a template-ezéshez:http://embeddedjs.com/
Friday, October 29, 2010
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
Friday, October 29, 2010
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
Friday, October 29, 2010
Köszönöm!Kérdések?
Bártházi András
Kapcsolat:mail: andras(beigli)barthazi(pont)hutwitter: @ba78
Blog:http://webakademia.hu
Friday, October 29, 2010