Lipstick on a Magical Pony: dynamic web pages without Javascript

Lipstick on a Magical Pony:*
dynamic web pages without JS
+
Tim Bell
timothybell@gmail.com
@timb07
*Title borrowed from Alaa’s talk last month

Problem
Your magical pony looks a bit plain.
2 / 21

Problem
doing whole page loads is so last decade
2 / 21

Problem
but you don't like Javascript
2 / 21

Problem
but you don't like Javascript
What to do??? 2 / 21

Solution
Lipstick!
Intercooler.js!
4 / 21

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

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

Issues
Intercooler is backend-agnostic
5 / 21

Issues
… but Django has certain expectations
5 / 21

Issues
URLs end in '/' (matters for POST requests)
CSRF protection for POST requests
5 / 21

Issues
Better example:
<a ic-get-from="/button_click/">Click Me!</a>
5 / 21

Issues
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

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

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

WOW!!!!!!
I thought you promised lipstick…
7 / 21

WOW!!!!!!
Trivial example is trivial
7 / 21

WOW!!!!!!
Trivial example is trivial
What about…
Request inputs (form data, etc.)?
Response handling?
DOM and styling changes?
Data dependencies?
7 / 21

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

HTTP verbs:
Target selection:
ic-target, ic-replace-target
8 / 21

HTTP verbs:
Target selection:
DOM manipulation:
ic-add-class, ic-remove-class, ic-remove-after
8 / 21

HTTP verbs:
Target selection:
DOM manipulation:
Dependencies:
ic-deps, ic-src, implied dependencies
8 / 21

HTTP verbs:
Target selection:
DOM manipulation:
Dependencies:
ic-deps, ic-src, implied dependencies
And more!
8 / 21

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

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

Example: form eld validation
Validate an email address when it changes
10 / 21

Invalid email address
11 / 21

Email address already used
12 / 21

Success!
13 / 21

template: inlinevalidation.html
<form>
{% csrf_token %}
{% include 'examples/email_address_form_group.html' %}
<button class="btn btn-default">Submit</button>
</form>
14 / 21

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

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

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

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

Finally…
Your magical pony looks more magical.
20 / 21

Thanks!
http://intercoolerjs.org/
https://petercuret.com/add-ajax-to-django-without-writing-javascript/
21 / 21

Lipstick on a Magical Pony: dynamic web pages without Javascript

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (11)

Similar a Lipstick on a Magical Pony: dynamic web pages without Javascript

Similar a Lipstick on a Magical Pony: dynamic web pages without Javascript (20)

Último

Último (20)

Lipstick on a Magical Pony: dynamic web pages without Javascript