Djangocon: web components in django - Xavier Dutreilh¶

Tags: djangocon, django

(One of the summaries of a talk at 2014 djangocon.eu)

Xavier Dutreilh talks about web development. You probably use libraries like jquery and backbone. And css frameworks like bootrap. And tools like bower, grunt, yeoman and jshint.

One of the things you should care about is performance. Especially for mobile devices, you don’t want to send over too much css/js. You don’t want too exotic and hard technologies, as you as a web developer probably will lack the specialized knowledge. Accessibility is important. Cross-browser functionality, too.

But… we often disregard the wishes we enumerated above and simply look for ready-to-use framework and pile them on top of each other. And we hope everything works as we hope and expect. Which it doesn’t and we spend lots of time debugging. We inherit technical dept by piling everything up like this.

What can we do? Well, we first have to stop making such a mess in the first place and have to start looking at the requirements we figured out. The best tip is to think about individual elements.

We could also try to do it lean and mean: custom code. Start by looking at a web page. What does it consist of? Several elements, like a dropdown for a set of choices. For each element, we can write custom css, html and javascript code. But after a number of elements, we again end up with a mess.

There are standards emerging, though, for many common page elements like accordions. Web components. You add a <template id="accordion-template"> tag with some style information. Or create your own html tags like <accordion>. The technique used is called shadow DOM, which means you’ve got an isolated subtree with an isolated javascript API.

Importing can happen via <link rel='import" href="accordion-template.html"> special import links.

Several browser vendors are starting to implement it. Not all of them, though. It is not there, yet. We can rely on “polyfills”, though: polymer and x-tag.

In the end, we need to package it properly. We should at all costs make sure we don’t need to use static files bundled with a django app. Use bower to package/distribute it. When using such a package manager, watch out that you don’t pull in too many external libraries (as it is so easy to do).

A note on tools like bower (and jshint and so): they require you to have node.js installed. So that has to become a part of our development environment.

A big tip: keep your web components and your django apps separate. Let them talk via a REST API. Don’t bundle them together.

Pay attention to security. Don’t send over data in plain text. Use CSRF and CORS protection (like provided by django). Use authentication otherwise you don’t know who sends/asks you something.

Some random tips:

• Do yourself a favour (as django programmer) and try front-end development.

• Review your web applications and improve your front-ends. Actually fix those “I will fix this later” things. Make everything more generic. Clean it up.

• Share your knowledge and skills with the front-end community. As a django programmer, you have a lot to give that they’re lacking in that community. (And vice versa, probably). We can help build tools for them instead of waiting for them to build the perfect tool.

• Hire people to build your front-ends.