best practices for front-end django developers
DESCRIPTION
TRANSCRIPT
![Page 1: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/1.jpg)
BEST PRACTICES FOR FRONT-END DJANGO
DEVELOPERS
Presentation by Christine Cheung
![Page 2: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/2.jpg)
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
![Page 3: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/3.jpg)
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.
![Page 4: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/4.jpg)
TEMPLATING
![Page 5: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/5.jpg)
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
![Page 6: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/6.jpg)
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" %}
![Page 7: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/7.jpg)
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 template
register = template.Library()
def dashreplace(value, arg): return value.replace(arg, '-') register.filter('dashreplace', dashreplace)
![Page 8: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/8.jpg)
CSS + JAVASCRIPT
![Page 9: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/9.jpg)
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
![Page 10: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/10.jpg)
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.
![Page 11: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/11.jpg)
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
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 } };
})();
![Page 12: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/12.jpg)
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
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 });
![Page 13: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/13.jpg)
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
![Page 14: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/14.jpg)
TOOLS FOR RAPID DEVELOPMENT
![Page 15: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/15.jpg)
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
Don’t Start HTML from Scratch
HTML5 Boilerplatebase.html starting point
CSS Reset (normalize.css)
jQuery + Modernizr
![Page 16: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/16.jpg)
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
![Page 17: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/17.jpg)
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'});
![Page 18: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/18.jpg)
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; }
![Page 19: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/19.jpg)
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
Compass Integration
django-compass
PyScss
SASS Compiler for Python
Tip: Don’t deploy Compass, put it in project root folder
![Page 20: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/20.jpg)
DATA HANDLING
![Page 21: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/21.jpg)
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
![Page 22: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/22.jpg)
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
![Page 23: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/23.jpg)
TESTING AND PERFORMANCE
![Page 24: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/24.jpg)
Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
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");
![Page 25: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/25.jpg)
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
![Page 26: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/26.jpg)
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
![Page 27: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/27.jpg)
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/
![Page 28: Best Practices for Front-End Django Developers](https://reader033.vdocuments.site/reader033/viewer/2022050816/54c7c0504a795931208b46a3/html5/thumbnails/28.jpg)
QUESTIONS?