Save 37% off PRO during our Black Friday Sale! »

Battle in the Bosphorus: Where Django Front-end and Back-end collide

D1fafc2a1501d489080c805e0cdda295?s=47 Cobey Potter
September 25, 2013

Battle in the Bosphorus: Where Django Front-end and Back-end collide

With the new front-end dev push to HTML, CSS, and Javascript pre-processors, we'll take a glimpse at the front-end designer's prospective on Django and how best to not step on each others toes when working on a Django-based project. Designers love that Django templates are simply a superset of regular HTML: we'll discuss how they work, how best to organize them, and when back-end development is needed to extend them.


Cobey Potter

September 25, 2013


  1. Battle in the Bosphorus: Where Django Front-end and Back-end Collide

    Cobey Potter Wellfire Interactive
  2. Cobey Potter @courcelan a wearer of many hats @Wellfire Interactive

  3. East Battles West Front-end Devs versus Back-end Devs Silence the

    Great Gnashing How to set up a Django project so you’ll both be happy Byzantium to Constantinople to Istanbul Preprocessors and a new look to old ideas Bridge the Gap Template Tags and Filters: Extending the Front-end through the Back-end What are we going to talk about?

  5. Who are we? ✤ FE-Devs and BE-Devs seem Front-Ender Back-Ender

    Dead Front-Ender
  6. None
  7. None
  8. Ooh you're the best friend that I ever had -

  9. FE-Devs & BE-Devs ✤ server-side & client-side ✤ live in

    our own silos ✤ sanity check ✤ CLI, VIM, WTF? ✤ no GUI, no way ✤ Media Queries, Responsive Images, DPI, Retina whatzit?
  10. FE-Devs & BE-Devs ✤ same target ✤ same client ✤

    same crazy expectations
  11. FE-Devs & BE-Devs ✤ we’re both smart ✤ we both

    love what we do ✤ we both hate scope change
  12. FE-Devs & BE-Devs ✤ let’s keep the channels open



  15. Project Caveats ✤ use a repo ✤ use DVCS :

    distributed version control system ✤ github, bitbucket, etc ✤ yeah, we’ll expect you to be the expert ✤ consider this a compliment
  16. Project Caveats ✤ great front-end PyPi modules ✤ django-typogrify ✤

    django-form-utils ✤ easy-thumbnails ✤ django-pure-pagination
  17. Project Caveats ✤ use unit testing? ✤ awesome, explain it

    to us ✤ starting to see unit testing in JS frameworks ✤ but not possible in HTML or CSS... or Photoshop
  18. Project Caveats ✤ deployment scripts ✤ use them, tell us

    about them, they are awesome ✤ Fabric ✤ continuous integration: Circle, Travis, etc ✤ even for deployment across SFTP
  19. File Structure ✤ we’re sharing code and sharing space ✤

    give us some room to play ✤ flatter is better
  20. Try this: /deployed_app /docs /wireframes /fe_dev

  21. Try this: /deployed_app /config ...etc... /individual_apps /static

  22. Try this: /docs ... sphinx-based documentation ... ✤ we probably

    won’t run Sphinx and will just read the files instead. ✤ also, it takes a while for FE-Devs to get BE-Dev documentation ✤ or lack thereof ✤ don’t worry... FE-Dev stuff is the same way
  23. Try this: /wireframes ... files for prototyping/basic browser tests outside

    of Django ...
  24. Try this: /fe_dev ... uncompiled preprocessor files ...


  26. Byzantium: The way the Web was... ✤ when a lot

    of us started out in the web, it was a simpler time: ✤ maybe a few tables, some images ✤ a sprinkle of <blink> and <marquee> tags ✤ a dash of PERL or <shudder> PHP ✤ starting out with any web technology, they’d make you think it was still the “good old days”
  27. Constantinople: The way the Web is... ✤ websites are constantly

    growing in functionality and size ✤ the not-so-basics are now basics ✤ each functional app has tons of views (oh CRUD) ✤ sanity checks ✤ preprocessors have taken flight
  28. Popular Preprocessors ✤ HTML ✤ Jade: ✤ Haml:

    ✤ Slim:
  29. Popular Preprocessors ✤ HTML ✤ Jade: ✤ Haml:

    ✤ Slim:
  30. Popular Preprocessors ✤ CSS ✤ Stylus: ✤ SASS:

    ✤ LESS: ✤ JS ✤ CoffeeScript:
  31. Popular Preprocessors ✤ JS Templating ✤ DustJS: ✤ EmbeddedJS: ✤ HandlebarsJS: ✤ Swig: - Tastes like DjT ✤ AngularJS has its own “templating” ✤ many, many JQuery templating instances out there
  32. Why would we want these? ✤ quick prototyping ✤ less

    writing ✤ modular includes and extends and a little bit of logic ✤ sounds like DjT ✤ they are much easier to mentally process
  33. Why would we want these? ✤ adoption rates have risen

    as the amount of code grows ✤ each is better than gobs of HTML, CSS, and JS ✤ Wellfire uses a stack of Jade, Stylus, CoffeeScript, Angular JS ✤ very Pythonic ✤ easy to read and parse
  34. How can we get Django involved? ✤ first preprocessors started

    as being run/compiled on client-side ✤ BAD PRACTICE! ✤ SASS/Haml native to Ruby; Jade/Stylus native to Node ✤ better, but still not good enough
  35. How can we get Django involved? ✤ Python doesn’t have

    any true preprocessors ✤ perhaps the smartest road, but whats available? ✤ aside from DjT: Jinja, Genshi, Mako, Cheetah ✤ not the same though ✤ in-roads have been made with PyHaml and PyJade
  36. How can we get Django involved? ✤ PyJade ✤ missing

    some of the fun parts of Jade ✤ relatively active development ✤ not a one-and-one replacement of DjT ✤ 2-step process: Jade -> DjT -> served pHTML ✤ SAME PROBLEMS
  37. to Istanbul: a future (sane) web ✤ Designers get dirty

    with the CLI ✤ to keep using a preprocessor, needs to precompile to HTML ✤ only marginally ahead of the game ✤ Use Yeoman, GruntJS,, or our favorite Roots ( ✤ watch functions FTW ✤ need a GUI: Codekit (Mac), Prepos (Win), :( (Linux)
  38. to Istanbul: a future (sane) web ✤ Still only half

    way ✤ introducing Djade ✤ one-to-one (or getting there) match to: ✤ DjT’s built-ins ✤ Django-CMS too ✤ FE-Devs can code in Jade just like normal ✤ currently still early in dev process (dog-fooding) ✤
  39. Popular Preprocessors ✤ HTML ✤ Jade: ✤ Haml:

    ✤ Slim:

  41. Whats in the box? ✤ Designers love Django and DjT

    ✤ comes with many built-in template tags and filters ✤ no one wants to code HTML directly in Python ✤ DEFINITELY NOT YOUR DESIGNER FRIENDS. ✤ breaks out flow and simple logic to template
  42. Whats in the box? {% regroup %} {% dicsort %}

    {% cycle %} {% extend %} {% include %}
  43. Whats in the box? ✤ template tags for working on:

    ✤ object collections (context groups) ✤ flow ✤ filters for: ✤ individual objects ✤ their object members ✤ save us from digging into view and model
  44. When should you create your own? ✤ ultimately, we use

    template tags and filters to: ✤ create reusable modules based off model with own logic ✤ handle view logic based on generic objects ✤ or combine 2 models for the front-end ✤ simplify front-end flow
  45. When should you create your own? ✤ when you are

    creating a front-end module ✤ use instead of just {% include %} and using base tags ✤ when continual repetition of certain modules ✤ form fields, navigation items, saving pages ✤ simplify the front-end flow ✤ wtf logic block am i in? too many if...else statements
  46. How? awesomeness/ templatetags/

  47. How? ✤ App that contains custom tags must: ✤ be

    in INSTALLED_APPS ✤ no need for a or ✤ template tags can be added to any existing application
  48. How? {% load bring_the_awesome %} {{ some_obj_value|my_awesome_filter:”presto-change-o” }} ... @register.filter

    def my_awesome_filter(filtered-object, extra-data...): ...code...
  49. How? {% load bring_the_awesome %} h1.picard {% make_it_so user.captains_nickname %}

    {# Make it so, Number One #} ... @register.simple_tag def make_it_so(passed_variables): ...code...
  50. How? {% load bring_the_awesome %} {% coffeeshop user.location %} ...

    @register.inclusion_tag(“map_of_istanbul.html”, takes_context=True) def coffeeshop(context, passed_variables...): ...code... return {local_context}
  51. How?


  53. Take aways ✤ simplify and flatten structure ✤ let FE-Devs

    have their place to play and work ✤ use Fabric, collectstatic, continuous integration tools
  54. Take aways: Preprocessors ✤ help parse the massive amount of

    code we write with the least amount of cognitive effort ✤ should be pre-compiled to take advantage of native rendering
  55. Take aways: Template Tags ✤ Extending ✤ ultimately simplifies front-end

    code ✤ creates reusable modules based off models with own logic ✤ alters output without touching or altering model
  56. We’re here to create something great.

  57. Thanks! Cobey Potter Wellfire Interactive @courcelan @wellfire