Ajaxujme přátelé

660 views

Published on

Ligthtalk o jednoduché implementaci Ajaxových dotazů ve frameworku Django, prezentovaný 30.3.2011 na django-cs meetup #2 v Praze.

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
660
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ajaxujme přátelé

  1. 1. Ajaxujme přáteléMichal Valoušek 30.března 2011@msgre
  2. 2. Ligthtalk o jednoduchéimplementaci Ajaxových dotazů ve frameworku Django pro pražské sdružení nenáročných matematiků
  3. 3. Ligthtalk o jednoduchéimplementaci Ajaxových dotazů ve frameworku Django pro pražské sdružení nenáročných matematiků
  4. 4. Dynamické změny na stránce
  5. 5. Dynamické změny na stránce
  6. 6. Dynamické změny na stránce
  7. 7. Proč?
  8. 8. Proč?• Rychlost ➞ lepší UX
  9. 9. Proč?• Rychlost ➞ lepší UX• Méně přenášených dat
  10. 10. Proč?• Rychlost ➞ lepší UX• Méně přenášených dat• Méně práce pro prohlížeč
  11. 11. Implementace
  12. 12. Implementace hodně naivní
  13. 13. Implementace• Pověsíme se na odkaz
  14. 14. Implementace• Pověsíme se na odkaz $(‘a.next’).click(function(){ $(‘#left’).load(URL); return false; });
  15. 15. Implementace• Pověsíme se na odkaz $(‘a.next’).click(function(){ $(‘#left’).load(URL); return false; });• Napíšeme view a šablonu v Djangu
  16. 16. Realita
  17. 17. Mění se více než jen jeden blok
  18. 18. Mění se více než jen jeden blok
  19. 19. Mění se více než jen jeden blok
  20. 20. Mění se více než jen jeden blok
  21. 21. Realita• Mění se více než jen jeden blok
  22. 22. Realita• Mění se více než jen jeden blok• Složitost kódu roste
  23. 23. Realita• Mění se více než jen jeden blok• Složitost kódu roste• Začínáme nepříjemně vlhnout *
  24. 24. Realita• Mění se více než jen jeden blok• Složitost kódu roste• Začínáme nepříjemně vlhnout ** Rozumíme si že? Jakože stále častěji se porušuje princip DRY...
  25. 25. Co s tím
  26. 26. Co s tím• jQuery Taconite
  27. 27. Co s tím• jQuery Taconite• Zachovat view, ale pro Ajax dotazy použít jinou šablonu
  28. 28. Co s tím• jQuery Taconite• Zachovat view, ale pro Ajax dotazy použít jinou šablonu• nebo…
  29. 29. Využít sílu{% extends %}
  30. 30. bone.html<html> <head> … </head> <body> … </body></html> Třívrstvá architektura šablon
  31. 31. bone.html<html> <head> base.html … </head> <body> {% extends “bone.html”%} … </body> {% block navigation %}</html> … {% endblock %} Třívrstvá architektura šablon
  32. 32. bone.html<html> <head> base.html … </head> <body> catalogue.html {% extends “bone.html”%} … </body> {% block navigation %}</html> … {% extends “base.html”%} {% endblock %} {% block content %} … {% endblock %} Třívrstvá architektura šablon
  33. 33. Využít sílu{% extends %}
  34. 34. Jak?
  35. 35. Třemi trpasličími změnami
  36. 36. Třemi trpasličími změnami šablony + view + javascript
  37. 37. bone.html<html> <head> base.html … </head> <body> catalogue.html {% extends “bone.html”%} … </body> {% block navigation %}</html> … {% extends “base.html”%} {% endblock %} {% block content %} … {% endblock %} 1. Drobná úprava šablon
  38. 38. json.html{% jsonblock %} base.html {% jsonitem "content" %} {% block content %} {% endblock %} catalogue.html {% extends “bone.html”%} {% endjsonitem %} {% block navigation %}{% endjsonblock %} … {% extends “base.html”%} {% endblock %} {% block content %} … {% endblock %} 1. Drobná úprava šablon
  39. 39. json.html{% jsonblock %} base.html {% jsonitem "content" %} {% block content %} {% endblock %} catalogue.html {% extends “bone.html”%} {% endjsonitem %} {% block navigation %}{% endjsonblock %} … {% extends “base.html”%} {% endblock %} {% block content %} … {% endblock %} 1. Drobná úprava šablon
  40. 40. json.html{% jsonblock %} base.html {% jsonitem "content" %} {% block content %} {% endblock %} catalogue.html {% extends bone_tmpl %} {% endjsonitem %} {% block navigation %}{% endjsonblock %} … {% extends “base.html”%} {% endblock %} {% block content %} … {% endblock %} 1. Drobná úprava šablon
  41. 41. 2. µ-změna viewdef catalogue(request): … context_dict = { … ‘bone_tmpl’: ‘json.html‘ if request.is_ajax() else ‘bone.html’ } … return render_to_response( catalogue.html, context_dict, context_instance = RequestContext(request), mimetype = ‘application/json’ if request.is_ajax() else ‘text/html’ )
  42. 42. 3. Javascripteček• Na sledované odkazy pověsíme vlastní obsluhu… $(#regions a).live(click, function() { return ajax_content_handler( $(this).attr(href), [categories] ); }
  43. 43. 3. Javascriptečekfunction ajax_content_handler(url, exclude) { $.getJSON(url, function(data) { var cufonize_it = false; // navigace 1st level -- kategorie if ($.inArray(categories, exclude) == -1) { $(#categories).replaceWith(data.categories); cufonize_it = true; } // <title>...</title> $(title).empty().append(data.title) // udrzba... if (cufonize_it) do_cufonize(); } return false;}
  44. 44. Výsledek
  45. 45. Po kliknutí na odkaz...
  46. 46. ...získáváme namísto HTML...
  47. 47. … JSON strukturu!
  48. 48. Změny v šablonách se opravují na jediném místě!
  49. 49. Bonus
  50. 50. json.html{% jsonblock %} {% jsonitem "categories" %} {% block categories %}{% endblock %} {% endjsonitem %} … {% jsonitem "content" %} {% block content %}{% endblock %} {% endjsonitem %}{% endjsonblock %}
  51. 51. json.html{% jsonblock %} {% jsonitem "categories" %} {% block categories %}{% endblock %} {% endjsonitem %} … {% jsonitem "content" %} {% block content %}{% endblock %} {% endjsonitem %}{% endjsonblock %}
  52. 52. json.html{% jsonblock %} {% jsonitem "categories" %} {% block categories %}{% endblock %} {% endjsonitem %} … {% jsonitem "content" %} {% block content %}{% endblock %} {% endjsonitem %}{% endjsonblock %}
  53. 53. Dýky!

×