best practices for front-end django developers

BEST PRACTICES FOR FRONT-END DJANGO

DEVELOPERS

Presentation by Christine Cheung

Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011

About the Presenter

Front End Developer at RED Interactive Agency

PyLadies board member

http://www.xtine.net

@webdevgirl


Presentation is Important

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

It may “scale” ...

But bloated markup and JavaScript will slow performance

The implementation of the design is what the user notices.

TEMPLATING


Start Organized

Structure the hierarchy of static and template files.

Folders for each app in templates


Starting Templates

Start with base.html

Extend from there - index/about/contact.html etc

Blocks for common elements {% block title %} {% endblock title %}

Include template files {% include "foo.html" %}


Template Tags and Filters

The template system is meant to express presentation, not logic

Presentation and iteration over data, NOT manipulation

Make your own template tag

Example from django import template

register = template.Library()

def dashreplace(value, arg): return value.replace(arg, '-') register.filter('dashreplace', dashreplace)

CSS + JAVASCRIPT


Cascading Style Sheets

Define a Style Guide

Consistent Variable Naming

Camel Case vs Dashes

Organize into separate files

+ Header / #header

+ Content / #content - Left column / #leftcolumn - Right column / #rightcolumn - Sidebar / #sidebar - Search / #search

+ Footer / #footer

Advertisements .adsContent header h2

Dark grey (text): #333333Dark Blue (headings, links) #000066


Using a JavaScript Library

Use only one library (jQuery) and stick to it!

Avoid plug-in overkill, no more than 3-4

Reduce performance hits and code conflicts.

Analyze if you can write your own.


JavaScript Namespacing

Namespace your JavaScript

Prevent conflicts

Easier to read and maintain

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

var someNamespace = (function() {

var animal = “pony”;

var greeting = function () { return “I’m a ” + animal; };

return {

foo : function() { // do stuff here }, bar : function() { // do stuff here } };

})();


JavaScript Don’ts

DO NOT:

document.write('foo');

<a onclick="myClickFunction()" href="http://foo.com"></a>

<a href="javascript:doSomething()"></a>

DO:<a class="link" href="http://foo.com"></a>

$('.link').click(function() { // do stuff });

http://foo.com

http://foo.com

http://foo.com

http://foo.com


Heavy Usage of JavaScript

For front-end heavy websites, check out Backbone.js

Hook up with RESTful interfaces (TastyPie)

Underscore.js for more utility functions

object and data manipulation

TOOLS FOR RAPID DEVELOPMENT


Don’t Start HTML from Scratch

HTML5 Boilerplatebase.html starting point

CSS Reset (normalize.css)

jQuery + Modernizr


Modernizr

JavaScript library to detect HTML5 + CSS3 technologies

Detect the features, NOT the browser

HTML5 elements for IE


Modernizr Examples

.no-cssgradients { background: url("images/glossybutton.png");}

.cssgradients { background-image: linear-gradient(top, #555, #333);}

Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js'});


Compass FrameworkCSS Authoring Framework + Utilities

SASS - nested rules, variables, mixinsImage Spriting

$blue = #010db5;

#navbar { width: 80%; height: 23px;

ul { list-style-type: none; } li { float: left; a { font-weight: bold; } &:last-child { color: $blue; } }}

@include border-radius(4px, 4px);

-webkit-border-radius: 4px 4px; -moz-border-radius: 4px / 4px; -o-border-radius: 4px / 4px; -ms-border-radius: 4px / 4px; -khtml-border-radius: 4px / 4px; border-radius: 4px / 4px; }


Compass Integration

django-compass

PyScss

SASS Compiler for Python

Tip: Don’t deploy Compass, put it in project root folder

DATA HANDLING


All About the Data

Leverage the power of both the front and back end

Share the work between them

Class Based Views for quick prototyping

Beware of Caching


Define Your Data Types

Before any coding happens:

Write out the API - evaluate the design

Know when to make a View vs API

Context Processors

TESTING AND PERFORMANCE


Let’s Test!CSSLintJSLint

warning: will make you cry

Google Closure Compiler

function hello(name) {

alert('Hello, ' + name);

}

hello('New user');

function hello(a){alert("Hello, "+a)}hello("New user");


Performance Tips

Build script(s) to minify and gzip files

TEMPLATE_DEBUG

settings flag to toggle between flat/compiled static files

Asynchronous / lazy loading JavaScript


Wrap Up

Consistent folder structures and document style guides

Use a JavaScript library and modern authoring techniques

Leverage data loading between the front and the back ends

Use HTML Boilerplate + CSS/JS tools to your advantage

Think about testing and performance of front-end code


ResourcesCSS Style Guide: http://coding.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/

Front-End Development Guidelines: http://taitems.github.com/Front-End-Development-Guidelines/

Outdated JavaScript: http://davidbcalhoun.com/2011/how-to-spot-outdated-javascript

Namespaces in JavaScript: http://blog.stannard.net.au/2011/01/14/creating-namespaces-in-javascript/

HTML5 Boilerplate: http://html5boilerplate.com/

Compass Framework: http://compass-lang.com/

SASS: http://sass-lang.com/

http://coding.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/




http://taitems.github.com/Front-End-Development-Guidelines/




http://davidbcalhoun.com/2011/how-to-spot-outdated-javascript

http://davidbcalhoun.com/2011/how-to-spot-outdated-javascript

http://blog.stannard.net.au/2011/01/14/creating-namespaces-in-javascript/




http://html5boilerplate.com/

http://html5boilerplate.com/

http://compass-lang.com/




QUESTIONS?

best practices for front-end django developers

Technology

christine cheung djangocon

importantpolished frontend

modernizrbest practices

templatesbest practices

template files

template tags

javascript dontsdo

javascript libraryuse