moderni webapp - frontend

596 views

Published on

http://www.ffdigital.cz

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

  • Be the first to like this

No Downloads
Views
Total views
596
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

moderni webapp - frontend

  1. 1. Moderní webové aplikace1.část: FRONTEND<br />Tomas Hodbod<br />
  2. 2. KLASICKÝ MODEL WEBOVÉ APLIKACE<br />SERVER<br />CLIENT<br />business logika<br />data<br />(get, validate, create, …)<br />šablony<br />vrací velký objem dat<br />odešle dotaz<br />vypíše odpověď<br />× velký počet klientů<br />× 1<br />
  3. 3. CO JE ŠPATNĚ?<br />server pracuje víc než musí<br />obrovský traffic<br />vysoké výdaje za provoz<br />nevhodné pro masivní aplikace<br />
  4. 4. CLOUD VŠUDE KOLEM NÁS<br />moderní webové aplikace<br />
  5. 5. MODERNÍ MODEL WEBOVÉ APLIKACE<br />SERVER<br />CLIENT<br />správa DB (validace)<br />vrací jen data (JSON, XML)<br />odešle dotaz<br />načte šablony<br />načte data<br />zprocesuje business logiku<br />validuje data<br />vykreslí elementy<br />
  6. 6. V ČEM JE TO DOBRÉ?<br />server zpracovává jen nezbytné (DB)<br />minimalní traffic<br />zátěž přebírá počítač klienta<br />minimalizace nákladů na provoz<br />
  7. 7. jQuery<br />
  8. 8. CO TO JE?<br />javascriptový framework stejně jako:<br /> Prototype<br />YUI<br />Dojo<br />mooTools<br />odladěný a optimalizovaný<br />crossbrowser<br />
  9. 9. VZESTUP JQUERY<br />
  10. 10. FILOZOFIE<br />Najdi element<br />a něco s ním udělej.<br />
  11. 11. SELEKTORY<br />
  12. 12. SETTER/GETTER<br />jedna funkce, mnoho způsobů použití<br />
  13. 13. EVENTY<br />
  14. 14. CHAINING<br />
  15. 15. AJAX<br />
  16. 16. CO JEŠTĚ?<br />animace<br />pluginy<br />sablony<br />jQuery UI<br />jQuery Mobile<br />
  17. 17. BACKBONE.js<br />
  18. 18. CO JE BACKBONE.JS?<br />jednoduchý MVC framework pro masivní JS APP<br />malý < 7kb<br />důraz na OO (také sémantika)<br />vlastní eventy<br />REST JSON<br />trasování url<br />spolupracuje s Underscore.js a jQuery<br />SproutCore, Cappuccino<br />
  19. 19. CO NENÍ BACKBONE.JS?<br />DOM (jQuery, Zepto)<br />animace<br />balík „vše v jednom“<br />
  20. 20. MODEL<br />
  21. 21. MODEL<br />
  22. 22. MODEL<br />
  23. 23. COLLECTION<br />
  24. 24. VIEWS<br />
  25. 25. CONTROLERS<br />
  26. 26. PŘÍŠTĚ<br />server side – App Engine<br />funkční aplikace<br />
  27. 27. Díky<br />Tomas Hodbod<br />@yomash<br />http://www.ffdigital.cz<br />http://i-w-s.eu<br />

×