Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Prochain SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Chargement dans…3
×
1 sur 43

Lipstick on a Magical Pony: dynamic web pages without Javascript

1

Partager

Télécharger pour lire hors ligne

Talk given at MelbDjango on 2018-03-15

Abstract: Intercooler (http://intercoolerjs.org/) is a Javascript library that allows you to make dynamic web pages without writing any Javascript yourself. This talk demonstrates how to use Intercooler with a Django app, including using Django forms and CSRF protection with Intercooler. It will also cover a number of apps that make using Intercooler with Django even easier.

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

Lipstick on a Magical Pony: dynamic web pages without Javascript

  1. 1. Lipstick on a Magical Pony:* dynamic web pages without JS   + Tim Bell timothybell@gmail.com @timb07 *Title borrowed from Alaa’s talk last month
  2. 2. Problem Your magical pony looks a bit plain. 2 / 21
  3. 3. Problem Your magical pony looks a bit plain. 2 / 21
  4. 4. Problem Your magical pony looks a bit plain. doing whole page loads is so last decade 2 / 21
  5. 5. Problem Your magical pony looks a bit plain. doing whole page loads is so last decade but you don't like Javascript 2 / 21
  6. 6. Problem Your magical pony looks a bit plain. doing whole page loads is so last decade but you don't like Javascript What to do??? 2 / 21
  7. 7. Solution Lipstick! 3 / 21
  8. 8. Solution Lipstick! 3 / 21
  9. 9. Solution Lipstick! Intercooler.js! 4 / 21
  10. 10. Solution Lipstick! Intercooler.js! HTTP requests via AJAX in response to events Response replaces contents of element Specified by HTTP element attributes, not Javascript 4 / 21
  11. 11. Solution Lipstick! Intercooler.js! HTTP requests via AJAX in response to events Response replaces contents of element Specified by HTTP element attributes, not Javascript Example: <a ic-post-to="/button_click">Click Me!</a> 4 / 21
  12. 12. Issues Intercooler is backend-agnostic 5 / 21
  13. 13. Issues Intercooler is backend-agnostic … but Django has certain expectations 5 / 21
  14. 14. Issues Intercooler is backend-agnostic … but Django has certain expectations URLs end in '/' (matters for POST requests) CSRF protection for POST requests 5 / 21
  15. 15. Issues Intercooler is backend-agnostic … but Django has certain expectations URLs end in '/' (matters for POST requests) CSRF protection for POST requests Better example: <a ic-get-from="/button_click/">Click Me!</a> 5 / 21
  16. 16. Issues Intercooler is backend-agnostic … but Django has certain expectations URLs end in '/' (matters for POST requests) CSRF protection for POST requests Better example: <a ic-get-from="/button_click/">Click Me!</a> Or (using Django template): <a ic-get-from="{% url 'button-click' %}">Click Me!</a> 5 / 21
  17. 17. Django backend urls.py: from django.urls import path from . import views urlpatterns = [ path('button_click/', views.button_click_view, name='button-click'), ] views.py: from django.http import HttpResponse def button_click_view(request): return HttpResponse('You Clicked Me!') 6 / 21
  18. 18. Django backend urls.py: from django.urls import path from . import views urlpatterns = [ path('button_click/', views.button_click_view, name='button-click'), ] views.py: from django.http import HttpResponse def button_click_view(request): return HttpResponse('You Clicked Me!') Result: <a ic-get-from="/button_click/">You Clicked Me!</a> 6 / 21
  19. 19. WOW!!!!!! 7 / 21
  20. 20. WOW!!!!!! I thought you promised lipstick… 7 / 21
  21. 21. WOW!!!!!! I thought you promised lipstick… Trivial example is trivial 7 / 21
  22. 22. WOW!!!!!! I thought you promised lipstick… Trivial example is trivial What about… Request inputs (form data, etc.)? Response handling? DOM and styling changes? Data dependencies? 7 / 21
  23. 23. Intercooler features 8 / 21
  24. 24. Intercooler features HTTP verbs: ic-get-from, ic-post-to ic-delete-from, ic-patch-to, ic-put-to Variants: ic-append-from, ic-prepend-from 8 / 21
  25. 25. Intercooler features HTTP verbs: ic-get-from, ic-post-to ic-delete-from, ic-patch-to, ic-put-to Variants: ic-append-from, ic-prepend-from Target selection: ic-target, ic-replace-target 8 / 21
  26. 26. Intercooler features HTTP verbs: ic-get-from, ic-post-to ic-delete-from, ic-patch-to, ic-put-to Variants: ic-append-from, ic-prepend-from Target selection: ic-target, ic-replace-target DOM manipulation: ic-add-class, ic-remove-class, ic-remove-after 8 / 21
  27. 27. Intercooler features HTTP verbs: ic-get-from, ic-post-to ic-delete-from, ic-patch-to, ic-put-to Variants: ic-append-from, ic-prepend-from Target selection: ic-target, ic-replace-target DOM manipulation: ic-add-class, ic-remove-class, ic-remove-after Dependencies: ic-deps, ic-src, implied dependencies 8 / 21
  28. 28. Intercooler features HTTP verbs: ic-get-from, ic-post-to ic-delete-from, ic-patch-to, ic-put-to Variants: ic-append-from, ic-prepend-from Target selection: ic-target, ic-replace-target DOM manipulation: ic-add-class, ic-remove-class, ic-remove-after Dependencies: ic-deps, ic-src, implied dependencies And more! 8 / 21
  29. 29. Triggering Intercooler requests Intercooler uses the "natural" event for an element to trigger a request: For form elements, issue the request on the submit event. For input elements except buttons, issue the request on the change event. For all other elements, including buttons, issue the request on the click event. 9 / 21
  30. 30. Triggering Intercooler requests Intercooler uses the "natural" event for an element to trigger a request: For form elements, issue the request on the submit event. For input elements except buttons, issue the request on the change event. For all other elements, including buttons, issue the request on the click event. Other triggers can be specified using ic-trigger-from or ic-trigger-on. 9 / 21
  31. 31. Example: form eld validation Validate an email address when it changes 10 / 21
  32. 32. Example: form eld validation Invalid email address 11 / 21
  33. 33. Example: form eld validation Email address already used 12 / 21
  34. 34. Example: form eld validation Success! 13 / 21
  35. 35. Example: form eld validation template: inlinevalidation.html <form> {% csrf_token %} {% include 'examples/email_address_form_group.html' %} <button class="btn btn-default">Submit</button> </form> 14 / 21
  36. 36. Example: form eld validation template: email_address_form_group.html <div class="form-group {{ form_group_class }}"> <label class="control-label"> Email Address </label> <input class="form-control" name="email" ic-post-to="{% url 'contact-email' %}" ic-target="closest div" ic-replace-target="true" value="{{ email }}" > {% if error_message %} <span class="help-block text-error">{{ error_message }}</span> {% endif %} </div> 15 / 21
  37. 37. Example: form eld validation view: from django.core.validators import validate_email, ValidationError def contact_email_view(request): email = request.POST['email'] context = {'email': email} try: validate_email(email) except ValidationError: context['error_message'] = "Please enter a valid email address" else: if email != "test@test.com": context['error_message'] = "That email is already taken. Please enter another email." else: context['form_group_class'] = "has-success" if 'error_message' in context: context['form_group_class'] = "has-error" return render(request, 'examples/email_address_form_group.html', context=context) 16 / 21
  38. 38. 17 / 21
  39. 39. Philosophy It can be easy for some developers to dismiss intercooler as overly simple and an archaic way of building web applications. This is intellectually lazy. Intercooler is a tool for returning to the original network architecture of the web. Using HTML as the data transport in communication with a server is what enables HATEOAS, the core distinguishing feature of that network architecture. Intercooler goes with the grain of the web, rather than forcing a more traditional thick-client model onto it, thereby avoiding the complexity and security issues that come along with that model. Yes, intercooler is simple, but it is a deceptive simplicity, very much like the early web. http://intercoolerjs.org/docs.html#philosophy 18 / 21
  40. 40. On Churn Many javascript projects are updated at a dizzying pace. Intercooler is not. This is not because it is dead, but rather because it is (mostly) right: the basic idea is right, and the implementation at least right enough. This means there will not be constant activity and churn on the project, but rather a stewardship relationship: the main goal now is to not screw it up. The documentation will be improved, tests will be added, small new delarative features will be added around the edges, but there will be no massive rewrite or constant updating. This is in contrast with the software industry in general and the front end world in particular, which has comical levels of churn. Intercooler is a sturdy, reliable tool for web development. http://intercoolerjs.org/docs.html#philosophy 19 / 21
  41. 41. Finally… Your magical pony looks more magical. 20 / 21
  42. 42. Finally… Your magical pony looks more magical. 20 / 21
  43. 43. Thanks! http://intercoolerjs.org/ https://petercuret.com/add-ajax-to-django-without-writing-javascript/ 21 / 21

×