Best Practices For Frontend Django Developers

Presented by Christine Cheung

Polished front-end is as important as back-end.

It may scale, but bloated markup and JS will slow performance.

The implementation of the design is what the user notices.

Start Organized

Structure the hierarchy of static and template files.

Templatetags and Filters

Template system is meant to express presentation, not logic.

CSS & Javascript

Avoid plugin overkill. No more than 3-4.

Namespace your Javascript.

• Prevents conflicts
• Easier to read & maintain

Don’t use $(document).ready()

Do Not:

• document.write
• Inline Javascript
• Backbone with Tastypie

Tools For Rapid Development

• HTML5 Boilerplate

  Note

  I disagree, but not important.

• Modernizr

• Compass Framework

  • CSS authoring framework & set of utilities
  • SASS
  • Image spriting
  • django-compass

Data Handling

• Leverage the power of both back and frontends
• Share the work between them
• Class-based views for quick prototyping

Define your datatypes

• Write out the API, evaluate its design.
• Know when to make a view vs API
• Contex Processors (API keys, etc)

Testing and Performance

• CSSLint
• JSLint
• Google Closure Compiler (turns simple functions into closures)
• Use a build script to minify and gzip files.

Note

I’d recommend combining files too.

• Have a TEMPLATE_DEBUG-triggered switcher for flat/compiled static files
• Async/lazy-load JS

Note

Or media: images, video, etc