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

Slide 1

Slide 1 text

Battle in the Bosphorus: Where Django Front-end and Back-end Collide Cobey Potter Wellﬁre Interactive

Slide 2

Slide 2 text

Cobey Potter @courcelan a wearer of many hats @Wellﬁre Interactive

Slide 3

Slide 3 text

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?

Slide 4

Slide 4 text

EAST MEETS WEST

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Ooh you're the best friend that I ever had - Queen

Slide 9

Slide 9 text

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?

Slide 10

Slide 10 text

FE-Devs & BE-Devs ✤ same target ✤ same client ✤ same crazy expectations

Slide 11

Slide 11 text

FE-Devs & BE-Devs ✤ we’re both smart ✤ we both love what we do ✤ we both hate scope change

Slide 12

Slide 12 text

FE-Devs & BE-Devs ✤ let’s keep the channels open

Slide 13

Slide 13 text

FEEL GOOD? AWESOME. NOW ONWARD TO THE TECHNICALS

Slide 14

Slide 14 text

SILENCE THE GNASHING

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Project Caveats ✤ great front-end PyPi modules ✤ django-typogrify ✤ django-form-utils ✤ easy-thumbnails ✤ django-pure-pagination

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

File Structure ✤ we’re sharing code and sharing space ✤ give us some room to play ✤ flatter is better

Slide 20

Slide 20 text

Try this: /deployed_app /docs /wireframes /fe_dev

Slide 21

Slide 21 text

Try this: /deployed_app /config settings.py urls.py ...etc... /individual_apps /static

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Try this: /wireframes ... files for prototyping/basic browser tests outside of Django ...

Slide 24

Slide 24 text

Try this: /fe_dev ... uncompiled preprocessor files ...

Slide 25

Slide 25 text

BYZANTIUM TO CONSTANTINOPLE TO ISTANBUL

Slide 26

Slide 26 text

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 and tags ✤ a dash of PERL or PHP ✤ starting out with any web technology, they’d make you think it was still the “good old days”

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Popular Preprocessors ✤ HTML ✤ Jade: jade-lang.com ✤ Haml: haml.info ✤ Slim: slim-lang.com

Slide 29

Slide 29 text

Popular Preprocessors ✤ HTML ✤ Jade: jade-lang.com ✤ Haml: haml.info ✤ Slim: slim-lang.com

Slide 30

Slide 30 text

Popular Preprocessors ✤ CSS ✤ Stylus: learnboost.github.io/stylus ✤ SASS: sass-lang.com ✤ LESS: lesscss.org ✤ JS ✤ CoffeeScript: coffeescript.org

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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)

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Popular Preprocessors ✤ HTML ✤ Jade: jade-lang.com ✤ Haml: haml.info ✤ Slim: slim-lang.com

Slide 40

Slide 40 text

BRIDGE THE GAP

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Whats in the box? {% regroup %} {% dicsort %} {% cycle %} {% extend %} {% include %}

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

How? awesomeness/ templatetags/ __init__.py bring_the_awesome.py __init__.py

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

How? {% load bring_the_awesome %} {% coﬀeeshop user.location %} ... @register.inclusion_tag(“map_of_istanbul.html”, takes_context=True) def coﬀeeshop(context, passed_variables...): ...code... return {local_context}

Slide 51

Slide 51 text

How? docs.djangoproject.com/en/1.5/howto/custom-template-tags/

Slide 52

Slide 52 text

SUN SETS IN THE WEST, RISES IN THE EAST

Slide 53

Slide 53 text

Take aways ✤ simplify and flatten structure ✤ let FE-Devs have their place to play and work ✤ use Fabric, collectstatic, continuous integration tools

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

We’re here to create something great.

Slide 57

Slide 57 text

Thanks! Cobey Potter Wellfire Interactive @courcelan @wellfire cobey@wellfire.co