frontend noted django
DESCRIPTION
Frontend Noted DjangoTRANSCRIPT
-
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
-
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
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
-
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
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
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
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 templateregister = template.Library()
def dashreplace(value, arg): return value.replace(arg, '-') register.filter('dashreplace', dashreplace)
-
CSS + JAVASCRIPT
-
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
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
-
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
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
JavaScript Namespacing
Namespace your JavaScript
Prevent conflicts
Easier to read and maintain
Dont have to use $(document).ready()
var someNamespace = (function() {
var animal = pony;
var greeting = function () { return Im a + animal; };
return {
foo : function() { // do stuff here }, bar : function() { // do stuff here } };
})();
-
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
JavaScript DontsDO NOT:
document.write('foo');
DO:
$('.link').click(function() { // do stuff });
-
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
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
-
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
Dont Start HTML from Scratch
HTML5 Boilerplatebase.html starting point
CSS Reset (normalize.css)
jQuery + Modernizr
-
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
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
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'});
-
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
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; }
-
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
Compass Integration
django-compass
PyScss
SASS Compiler for Python
Tip: Dont deploy Compass, put it in project root folder
-
DATA HANDLING
-
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
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
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
-
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
Lets 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");
-
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
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
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
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/
-
QUESTIONS?