Best Practices for Front-End Django Developers

Talk at DjangoCon 2011.

Transcript

1. BEST PRACTICES FOR FRONT-END DJANGO DEVELOPERS Presentation by Christine Cheung
2. 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
3. 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.
4. TEMPLATING
5. 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
6. 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" %}
7. 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)
8. CSS + JAVASCRIPT
9. 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 .ads Content header h2 Dark grey (text): #333333 Dark Blue (headings, links) #000066
10. 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.
11. 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 } }; })();
12. 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 });
13. 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
14. TOOLS FOR RAPID DEVELOPMENT
15. Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011 Don’t Start HTML from Scratch HTML5 Boilerplate base.html starting point CSS Reset (normalize.css) jQuery + Modernizr
16. 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
17. 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' });
18. Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011 Compass Framework CSS Authoring Framework + Utilities SASS - nested rules, variables, mixins Image 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; }
19. 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
20. DATA HANDLING
21. 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
22. 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
23. TESTING AND PERFORMANCE
24. Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011 Let’s Test! CSSLint JSLint 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");
25. 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
26. 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
27. Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011 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/
28. QUESTIONS?