Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
BEST PRACTICES FORFRONT-END DJANGO   DEVELOPERS    Presentation by Christine Cheung
About the PresenterFront End Developer at RED Interactive AgencyPyLadies board memberhttp://www.xtine.net@webdevgirl     B...
Presentation is ImportantPolished front-end is as important as the back-end  It may “scale” ...  But bloated markup and Ja...
TEMPLATING
Start OrganizedStructure the hierarchy of static and template files.  Folders for each app in templates      Best Practice...
Starting TemplatesStart with base.html  Extend from there - index/about/contact.html etcBlocks for common elements {%     ...
Template Tags and FiltersThe template system is meant to express presentation, not logic  Presentation and iteration over ...
CSS + JAVASCRIPT
Cascading Style Sheets                                                   + Header / #headerDefine a Style Guide           ...
Using a JavaScript LibraryUse only one library (jQuery) and stick to it!  Avoid plug-in overkill, no more than 3-4     Red...
JavaScript Namespacing                                                          var someNamespace = (function() {Namespace...
JavaScript Don’tsDO NOT: document.write(foo);	  	   <a	  onclick="myClickFunction()"	  href="http://foo.com"></a>	  	   <a...
Heavy Usage of JavaScriptFor front-end heavy websites, check out Backbone.js  Hook up with RESTful interfaces (TastyPie)Un...
TOOLS FOR RAPID DEVELOPMENT
Don’t Start HTML from        Scratch        HTML5 Boilerplate           base.html starting point           CSS Reset (norm...
ModernizrJavaScript library to detect HTML5 + CSS3 technologiesDetect the features, NOT the browserHTML5 elements for IE  ...
Modernizr Examples.no-cssgradients {                                            Modernizr.load({    background: url("image...
Compass FrameworkCSS Authoring Framework + Utilities  SASS - nested rules, variables, mixins  Image Spriting              ...
Compass Integrationdjango-compassPyScss  SASS Compiler for PythonTip: Don’t deploy Compass, put it in project root folder ...
DATA HANDLING
All About the DataLeverage the power of both the front and back end Share the work between them Class Based Views for quic...
Define Your Data TypesBefore any coding happens:  Write out the API - evaluate the design  Know when to make a View vs API...
TESTING ANDPERFORMANCE
Let’s Test!          CSSLint          JSLint              warning: will make you cry          Google Closure Compilerfunct...
Performance TipsBuild script(s) to minify and gzip files  TEMPLATE_DEBUG    settings flag to toggle between flat/compiled ...
Wrap UpConsistent folder structures and document style guidesUse a JavaScript library and modern authoring techniquesLever...
ResourcesCSS Style Guide: http://coding.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/Fr...
QUESTIONS?
Nächste SlideShare
Wird geladen in …5
×

Best Practices for Front-End Django Developers

42.666 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Sex in your area is here: ♥♥♥ http://bit.ly/2u6xbL5 ♥♥♥
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2u6xbL5 ❶❶❶
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • @samwork2 Hello. Would you care to substantiate your claim? It could be useful for other web dev newbies, perhaps. Thank you.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • This was written by a true web dev newbie obviously. Total waste of time and many contradicting statements.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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?

×