Source

DjangoCon 2011 Notes / docs / best_practices_for_frontend_django_developers.rst

Best Practices For Frontend Django Developers

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

Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.