2. About the Presenter
Front End Developer at RED Interactive Agency
PyLadies board member
http://www.xtine.net
@webdevgirl
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
3. 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.
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
5. Start Organized
Structure the hierarchy of static and template files.
Folders for each app in templates
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
6. 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" %}
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
7. 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
from django import template
Example
register = template.Library()
def dashreplace(value, arg):
return value.replace(arg, '-')
register.filter('dashreplace', dashreplace)
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
9. Cascading Style Sheets
+ Header / #header
Define a Style Guide
+ Content / #content
- Left column / #leftcolumn
Consistent Variable Naming - Right column / #rightcolumn
- Sidebar / #sidebar
- Search / #search
Camel Case vs Dashes + Footer / #footer
Advertisements .ads
Organize into separate files Content header h2
Dark grey (text): #333333
Dark Blue (headings, links) #000066
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
10. 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.
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
11. JavaScript Namespacing
var someNamespace = (function() {
Namespace your JavaScript
var animal = “pony”;
Prevent conflicts var greeting = function () {
return “I’m a ” + animal;
};
Easier to read and maintain return {
foo : function() {
Don’t have to use $(document).ready()
},
// do stuff here
bar : function() {
// do stuff here
}
};
})();
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
12. 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 });
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
13. 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
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
15. Don’t Start HTML from
Scratch
HTML5 Boilerplate
base.html starting point
CSS Reset (normalize.css)
jQuery + Modernizr
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
16. Modernizr
JavaScript library to detect HTML5 + CSS3 technologies
Detect the features, NOT the browser
HTML5 elements for IE
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
19. Compass Integration
django-compass
PyScss
SASS Compiler for Python
Tip: Don’t deploy Compass, put it in project root folder
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
21. 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
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
22. 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
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
24. Let’s Test!
CSSLint
JSLint
warning: will make you cry
Google Closure Compiler
function hello(name) {
alert('Hello, ' + name); function hello(a){alert("Hello,
} "+a)}hello("New user");
hello('New user');
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
25. 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
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
26. 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
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
27. Resources
CSS 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/
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011