Best Practices for Front-End Django Developers

38,252 views

Published on

Published in: Technology
2 Comments
62 Likes
Statistics
Notes
No Downloads
Views
Total views
38,252
On SlideShare
0
From Embeds
0
Number of Embeds
835
Actions
Shares
0
Downloads
498
Comments
2
Likes
62
Embeds 0
No embeds

No notes for slide

Best Practices for Front-End Django Developers

  1. 1. BEST PRACTICES FORFRONT-END DJANGO DEVELOPERS Presentation by Christine Cheung
  2. 2. About the PresenterFront End Developer at RED Interactive AgencyPyLadies board memberhttp://www.xtine.net@webdevgirl Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
  3. 3. Presentation is ImportantPolished front-end is as important as the back-end It may “scale” ... But bloated markup and JavaScript will slow performanceThe implementation of the design is what the user notices. Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
  4. 4. TEMPLATING
  5. 5. Start OrganizedStructure 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. 6. Starting TemplatesStart with base.html Extend from there - index/about/contact.html etcBlocks 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. 7. Template Tags and FiltersThe template system is meant to express presentation, not logic Presentation and iteration over data, NOT manipulationMake 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
  8. 8. CSS + JAVASCRIPT
  9. 9. Cascading Style Sheets + Header / #headerDefine a Style Guide + Content / #content - Left column / #leftcolumnConsistent Variable Naming - Right column / #rightcolumn - Sidebar / #sidebar - Search / #search Camel Case vs Dashes + Footer / #footer Advertisements .adsOrganize 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. 10. Using a JavaScript LibraryUse 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. 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. 12. JavaScript Don’tsDO 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. 13. Heavy Usage of JavaScriptFor 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
  14. 14. TOOLS FOR RAPID DEVELOPMENT
  15. 15. Don’t Start HTML from Scratch HTML5 Boilerplate base.html starting point CSS Reset (normalize.css) jQuery + ModernizrBest Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
  16. 16. ModernizrJavaScript library to detect HTML5 + CSS3 technologiesDetect the features, NOT the browserHTML5 elements for IE Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
  17. 17. Modernizr Examples.no-cssgradients { Modernizr.load({ background: url("images/glossybutton.png"); test: Modernizr.geolocation,} yep : geo.js,.cssgradients { nope: geo-polyfill.js background-image: linear-gradient(top, #555, #333); });} Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
  18. 18. Compass FrameworkCSS Authoring Framework + Utilities SASS - nested rules, variables, mixins Image Spriting $blue = #010db5; @include border-radius(4px, 4px); #navbar { width: 80%; -webkit-border-radius: 4px 4px; height: 23px; -moz-border-radius: 4px / 4px; ul { list-style-type: none; } -o-border-radius: 4px / 4px; li { -ms-border-radius: 4px / 4px; float: left; -khtml-border-radius: 4px / 4px; a { font-weight: bold; } border-radius: 4px / 4px; } &:last-child { color: $blue; } } } Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
  19. 19. Compass Integrationdjango-compassPyScss SASS Compiler for PythonTip: Don’t deploy Compass, put it in project root folder Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
  20. 20. DATA HANDLING
  21. 21. All About the DataLeverage the power of both the front and back end Share the work between them Class Based Views for quick prototypingBeware of Caching Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
  22. 22. Define Your Data TypesBefore any coding happens: Write out the API - evaluate the design Know when to make a View vs API Context ProcessorsBest Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
  23. 23. TESTING ANDPERFORMANCE
  24. 24. Let’s Test! CSSLint JSLint warning: will make you cry Google Closure Compilerfunction 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. 25. Performance TipsBuild script(s) to minify and gzip files TEMPLATE_DEBUG settings flag to toggle between flat/compiled static filesAsynchronous / lazy loading JavaScript Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
  26. 26. Wrap UpConsistent folder structures and document style guidesUse a JavaScript library and modern authoring techniquesLeverage data loading between the front and the back endsUse HTML Boilerplate + CSS/JS tools to your advantageThink about testing and performance of front-end code Best Practices for Front-End Django Developers by Christine Cheung - DjangoCon 2011
  27. 27. 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-javascriptNamespaces 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
  28. 28. QUESTIONS?

×