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

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
6. None
7. None

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