The document discusses best practices for writing better front-end code when building applications with Django. It recommends grouping the front-end code together, using tools like Bower, Sass, Grunt, and NPM to help structure the code. It also suggests using a full-stack JavaScript framework like Ember on the front-end to communicate with the Django backend through a REST API. Proper project organization and front-end tooling are emphasized to develop the front-end as its own coherent project.

1. True beauty is on the inside
...but your users are shallow.
Loek van Gent
2 June 2015
Writing better front-end code

2. PHP (Zend)many, many years
Django/Python
3 yearsMe #afk

4. Listen up guys,
we've got a cool idea...
Multi-tenant & white label site

5. The big refactor

6. Sorry, we could not display the entire diff because too many files (1,805) changed.

9. WOW!
I REALLY love that new design!!!

10. True beauty is on the inside
...but your product manager is shallow.

11. So, what's all this fuzz about
front-end?

17. So, how can we write
better front-end code?

18. $ django-admin createproject true_beauty
$ django-admin startapp heart
$ django-admin startapp spirit

19. Typical Django Project Layout
├── true_beauty
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
│
├── manage.py
│
├── spirit
│ ├── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
│
└── heart
├── __init__.py
├── models.py
├── tests.py
└── views.py

20. ├── true_beauty
│
├── heart
│ ├── models.py
│ ├── tests.py
│ ├── views.py
│ ├── templates
│ │ └── heart
│ └── static
│ ├── css
│ └── js
│
└── spirit
├── models.py
├── tests.py
├── views.py
├── templates
│ └── spirit
└── static
├── css
└── js
Typical Django Project Layout

21. Group your front-end!
since 1.8

22. Django Project Layout
├── true_beauty
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ ├── wsgi.py
│ │
│ ├── templates
│ └── static
│
├── manage.py
│
├── spirit
│ ├── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
│
└── heart
├── __init__.py
├── models.py
├── tests.py
└── views.py
you are
here

23. Django Project Layout
├── true_beauty
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ ├── wsgi.py
│ │
│ ├── templates
│ └── static
│
├── manage.py
│
├── spirit
│ ├── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
│
└── heart
├── __init__.py
├── models.py
├── tests.py
└── views.py
you are
here
front-end
guys

24. Ok.
Let's look at some front-end tools.

25. JS requirements: Bower
{
"name": "true_beauty",
"description": "True beauty",
"dependencies": {
"jquery-ui": "~1.11.4",
"jquery": "1.8.3",
"moment": "2.9.0",
}
}

26. Structured CSS: Sass
.item {
width: $container-width;
color: $first-color;
.col-4 {
width: $container-width / 4;
}
&:hover {...}
}

27. Building your front-end: Grunt

28. Installing these and other tools: NPM

29. This is starting to look like an
entire project
within my
Django project

30. Now you're getting it!

31. Front-endBack-end

32. Django Server to provide data
Django Rest Framework

33. Full-stack Javascript Framework
for front-end
Ember, Angular, React...

34. Back-end Front-end

35. TestingBack-end

36. Front-end
Mock
Api

37. Ember CLI

38. $ ember new good_looks
$ cd good_looks
$ ember generate route eyes
$ ember generate route smile

39. Typical Ember Project Layout
app/
├── app.js
├── index.html
├── routes
├── models
├── views
├── controllers
├── components
│ ├── eyes.js
│ └── smile.js
└── templates
├── application.hbs
├── eyes.hbs
└── smile.hbs

40. $ ember serve --proxy
http://localhost:8000

41. Summing it up...

42. Love your front-end
It's the only thing your users get to see

43. Group your front-end

44. Use tools to help
structure your front-end code

45. Start using Ember*
It is the future!
AngularReact
No! Forget
about Backbone

46. Suggestions?
Questions?
That's all for now.
@loek1pc gannetson