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.
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" %}
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)
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.
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 } }; })();
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
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
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
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");
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
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
xtine
kkamegawa
toru_kubota
masahirokawahara
harishpillay
ysknsid25
onk
coconala_engineer
nulabinc
emiki
ma3tk
tomu28
bobtani
notwaldorf
denniskardys
schacon
hatefulcrawdad
brettharned
chriscoyier
addyosmani
aki_iinuma
hursman
holman
yeseniaperezcruz
