Best Practices for Front-End Django Developers

by Christine Cheung

  • One of the co-founders of Pyladies

  • Works for Red Interactive Agency

  • Does front end development

    • Also does a lot of backend stuff
    • Quickly mastered CBVs so she has serious chops
  • @webdevgirl on http://twitter.com/webdevgirl

  • http://xtine.net

Presentation is important

  • Polixh front-end is as important as the front end

    • It may “scale”
    • But bloated markup and JavaScript will slow things
  • The implementation really matters

Start Organized

  • Structure the templates

  • Template Tags should express presentation, not logic

    • Presentation and iteration over data, NOT manipulation

Note

I wish people remembered this bullet about template tags and logic

Cascading Style Sheets

  • Define a style guide. Write it down!!!

  • Consistent Variable naming

    • Camel case
    • dashes
    • underscores
  • Keep your css files small. Combine it in deployments

JavaScript

  • Use a framework!

  • Pick one and stick to it:

    • JQuery

    • Don’t mix in other things like Dojo

    • Avoid plug-in overkill. No more than 3-4

      • Reduce performance hits and code conflicts
      • Analyze if you can write your own
  • Namespace your Javascript

    • TODO - get sample code from Christine
  • DON’Ts:

   <script type="javascript">
       document.write('foo'');
   </script>
   <a onclick="blarg();">Stuff</a>

* Lots of JavaScript? Use backbone.js

Don’t do HTML from scratch: Use html5boilerplate

  • Comes with a layout via 960

  • JQuery

  • Modernizr

    • You can do wicked class tricks with this tool. Wow
    • Need to really look at the slides cause she did this better than the docs

Sass/Compass instead of CSS

All about the data

  • Leverage the power of both the front and back end

    • Share the work between the front and back side of things
    • Generic Class Based Views for quick prototyping

Define you datatypes

  • Make an API
  • Share the models between back and front end

Tests

  • CSSLint

  • JSLint

    • Warning

      it will make you cry

  • Google closure compiler

Performance

  • Minify
  • Control this via a settings.py value

Documentation

  • Consistent folder structures and document style guides
  • Does Sphinx autodoc doesn’t work with docstrings in JavaScript or CSS?
  • Use a JavaScript library and modern authoring techniques

Wrap Up

  • Leverage data loading between front and back ends
  • Use HTML Boilerplate + CSS/JS tools to your advantage
  • Test and performance check the front end!