Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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!

Przemek Lewandowski

May 15, 2013
Tweet

More Decks by Przemek Lewandowski

Other Decks in Programming

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