Susmus.hu - technológiák

1,479 views
1,415 views

Published on

Susmus.hu - technológiák
2010. október 25.
Budapest.JS

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,479
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Susmus.hu - technológiák

  1. 1. Susmus.hu { ‘name’: ‘Bártházi András’, ‘company’: ‘Wish Internet Consulting’, ‘event’: ‘Budapest.JS’, ‘date’: Date(‘2010/10/25’) } Friday, October 29, 2010
  2. 2. Az előadó BártháziAndrás webfejlesztő, infojunkie Kapcsolat: mail: andras(beigli)barthazi(pont)hu twitter: @ba78 Blog: http://webakademia.hu Friday, October 29, 2010
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 100% JavaScript az architektúra: szerver oldalon NGINX + Node.JS kliens oldalon jQuery + rengeteg kis fü(vénykönyvtár Friday, October 29, 2010
  7. 7. 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
  8. 8. 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 Friday, October 29, 2010
  9. 9. 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
  10. 10. 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é Friday, October 29, 2010
  11. 11. 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é Friday, October 29, 2010
  12. 12. 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 Friday, October 29, 2010
  13. 13. 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){} }); Friday, October 29, 2010
  14. 14. Kliens oldal hashchange-et használok a routinghoz #!/user/ba78 lekezelésére: http://benalman.com/projects/jquery-hashchange-plugin/ Friday, October 29, 2010
  15. 15. Kliens oldal EJS-t használok a template-ezéshez: http://embeddedjs.com/ Friday, October 29, 2010
  16. 16. 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 Friday, October 29, 2010
  17. 17. 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
  18. 18. Köszönöm! Kérdések? BártháziAndrás Kapcsolat: mail: andras(beigli)barthazi(pont)hu twitter: @ba78 Blog: http://webakademia.hu Friday, October 29, 2010

×