susmus.hu - technológiák
DESCRIPTION
Susmus.hu - technológiák2010. október 25.Budapest.JSTRANSCRIPT
![Page 1: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/1.jpg)
Susmus.hu{ ‘name’: ‘Bártházi András’, ‘company’: ‘Wish Internet Consulting’, ‘event’: ‘Budapest.JS’, ‘date’: Date(‘2010/10/25’) }
Friday, October 29, 2010
![Page 2: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/2.jpg)
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
![Page 3: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/3.jpg)
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
![Page 4: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/4.jpg)
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
![Page 5: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/5.jpg)
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
![Page 6: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/6.jpg)
100% JavaScript
az architektúra:
szerver oldalon NGINX + Node.JS
kliens oldalon jQuery + rengeteg kis fü(vénykönyvtár
Friday, October 29, 2010
![Page 7: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/7.jpg)
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
![Page 8: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/8.jpg)
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
![Page 9: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/9.jpg)
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
![Page 10: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/10.jpg)
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
![Page 11: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/11.jpg)
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
![Page 12: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/12.jpg)
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
![Page 13: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/13.jpg)
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
![Page 14: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/14.jpg)
Kliens oldal
hashchange-et használok a routinghoz#!/user/ba78 lekezelésére:
http://benalman.com/projects/jquery-hashchange-plugin/
Friday, October 29, 2010
![Page 15: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/15.jpg)
Kliens oldal
EJS-t használok a template-ezéshez:http://embeddedjs.com/
Friday, October 29, 2010
![Page 16: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/16.jpg)
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
![Page 17: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/17.jpg)
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
![Page 18: Susmus.hu - technológiák](https://reader033.vdocuments.net/reader033/viewer/2022061201/5479db13b37959652b8b485d/html5/thumbnails/18.jpg)
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