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