How to combine JavaScript & Django in a smart way - DjangoCon Europe 2013

Have you been using JavaScript more and more when building your web applications? Are you implementing REST API frequently? If so, you have probably realised that server-side generated content is no longer enough to provide cutting edge user experience.

I would like to show you how to avoid jQuery callback hell and how to gain more flexibility using MVC on the client side. I will introduce tools for managing modules in JavaScript and will teach you how to become more productive with CoffeeScript. I will share my experience of integrating Django and sophisticated JavaScript stack from two points of view: RESTful API and static files management. Let the trip begin!

Transcript

1. Przemek Lewandowski @haxoza DjangoCon Europe 2013 How to combine JavaScript & Django in a smart way
2. Table of content 1. Basic approach 2. Advanced approach 3. Trip through the Django world
3. About me • PyWaw co-organiser • co-founder at SUNSCRAPERS, software house based in Warsaw • technology enthusiast • sports lover
4. Really hard!
5. Django is a JavaScript agnostic web framework
6. Basic approach
7. • illegible code • distributed logic • callback hell Possible problems • decreasing productivity • code is not testable
8. How to solve these problems? Don't reinvent the wheel
9. Use frameworks! http://www.flickr.com/photos/create_joy/4291306755/
10. JavaScript frameworks • application structure • testable code • productivity
11. Advanced approach • communication with server ◦ REST API, Websockets • application building ◦ combining and minimizing files • static files management ◦ handling static files servers and caches • JavaScript improvements ◦ frameworks, AMD, CoffeeScript
12. Overall architecture for JavaScript & Django
13. Let's get a tour in the Django World! How do we roll things at SUNSCRAPERS?
14. Define requirements • powerful JS framework • CoffeeScript • testable code • JS code minimization • avoiding caches by fingerprints • rapid REST API development
15. Why CoffeeScript? • adds "syntactic sugar" • helps to write less code faster • performs as well as JavaScript • avoids some JavaScript traps like "=="
16. Choose your JavaScript tools http://www.flickr. com/photos/npj/2623800058/
17. JavaScript frameworks • Backbone • Backbone & Marionette • Angular • Ember • ...
18. Why not Backbone? • lack of bindings mechanism • there are no reusable views • models are poor
19. JavaScript frameworks • Backbone • Backbone & Marionette • Angular • Ember • ...
20. RequireJS with CS plugin Ok, but how to use it with CoffeeScript?
21. RequireJS gives us • CoffeeScript painless integration • modular code • builder • uglifier
22. Example Ember controller implementation in CoffeeScript
23. How to play with RequireJS & Django? http://www.flickr.com/photos/ppks-net/6779170304/
24. Tools for building JS apps • django-compressor • django-pipeline • django-require • ...
25. Tools for building JS apps • django-compressor • django-pipeline • django-require • ...
26. Create REST API http://www.flickr.com/photos/29388462@N06/5685049236/
27. • django-rest-framework • django-tastypie • django-piston • ... Django & APIs for JS apps
28. • django-rest-framework • django-tastypie • django-piston • ... Django & APIs for JS apps
29. Django REST Framework example
30. Manage your static files http://www.flickr.com/photos/saltygal/1289079855/
31. Static files management • django.contrib.staticfiles • django-storages • django-cumulus • django-require • ...
32. Optimized JS code with a fingerprint in the filename
33. Stack summary • Angular or Ember • RequireJS • django-require • django-rest-framework • django-storages
34. What's more • package manager, i.e. Bower • support for SEO
35. Never stop trying new solutions
36. Thank you! Questions? Follow me on Twitter @haxoza