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.

Transcript

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?
4. EAST MEETS WEST
5. Who are we? ✤ FE-Devs and BE-Devs seem Front-Ender Back-Ender Dead Front-Ender
8. Ooh you're the best friend that I ever had - Queen
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
13. FEEL GOOD? AWESOME. NOW ONWARD TO THE TECHNICALS
14. SILENCE THE GNASHING
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 DeployHQ.com 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 settings.py urls.py ...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 ...
25. BYZANTIUM TO CONSTANTINOPLE TO ISTANBUL
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: jade-lang.com ✤ Haml: haml.info ✤ Slim: slim-lang.com
29. Popular Preprocessors ✤ HTML ✤ Jade: jade-lang.com ✤ Haml: haml.info ✤ Slim: slim-lang.com
30. Popular Preprocessors ✤ CSS ✤ Stylus: learnboost.github.io/stylus ✤ SASS: sass-lang.com ✤ LESS: lesscss.org ✤ JS ✤ CoffeeScript: coffeescript.org
31. Popular Preprocessors ✤ JS Templating ✤ DustJS: akdubya.github.io/dustjs ✤ EmbeddedJS: embeddedjs.org ✤ HandlebarsJS: handlebarsjs.com ✤ Swig: paularmstrong.github.io/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, Brunch.io, or our favorite Roots (roots.cx) ✤ 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) ✤ github.com/courcelan/djade
39. Popular Preprocessors ✤ HTML ✤ Jade: jade-lang.com ✤ Haml: haml.info ✤ Slim: slim-lang.com
40. BRIDGE THE GAP
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/ __init__.py bring_the_awesome.py __init__.py
47. How? ✤ App that contains custom tags must: ✤ be in INSTALLED_APPS ✤ no need for a view.py or model.py ✤ 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? docs.djangoproject.com/en/1.5/howto/custom-template-tags/
52. SUN SETS IN THE WEST, RISES IN THE EAST
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 cobey@wellfire.co