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
   

   View Slide

2. Table of content
   1. Basic approach
   2. Advanced approach
   3. Trip through the Django world
   

   View Slide

3. About me
   ● PyWaw co-organiser
   ● co-founder at SUNSCRAPERS,
   software house based in Warsaw
   ● technology enthusiast
   ● sports lover
   

   View Slide

4. Really hard!
   

   View Slide

5. Django is a JavaScript
   agnostic web framework
   

   View Slide

6. Basic approach
   

   View Slide

7. ● illegible code
   ● distributed logic
   ● callback hell
   Possible problems
   ● decreasing productivity
   ● code is not testable
   

   View Slide

8. How to solve
   these problems?
   Don't reinvent the wheel
   

   View Slide

9. Use frameworks!
   http://www.flickr.com/photos/create_joy/4291306755/
   

   View Slide

10. JavaScript frameworks
    ● application structure
    ● testable code
    ● productivity
    

    View Slide

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
    

    View Slide

12. Overall architecture for JavaScript & Django
    

    View Slide

13. Let's get a tour
    in the Django World!
    How do we roll things at SUNSCRAPERS?
    

    View Slide

14. Define requirements
    ● powerful JS framework
    ● CoffeeScript
    ● testable code
    ● JS code minimization
    ● avoiding caches by fingerprints
    ● rapid REST API development
    

    View Slide

15. Why CoffeeScript?
    ● adds "syntactic sugar"
    ● helps to write less code faster
    ● performs as well as JavaScript
    ● avoids some JavaScript traps like "=="
    

    View Slide

16. Choose your JavaScript tools
    http://www.flickr.
    com/photos/npj/2623800058/
    

    View Slide

17. JavaScript frameworks
    ● Backbone
    ● Backbone & Marionette
    ● Angular
    ● Ember
    ● ...
    

    View Slide

18. Why not Backbone?
    ● lack of bindings mechanism
    ● there are no reusable views
    ● models are poor
    

    View Slide

19. JavaScript frameworks
    ● Backbone
    ● Backbone & Marionette
    ● Angular
    ● Ember
    ● ...
    

    View Slide

20. RequireJS with CS plugin
    Ok, but how to use
    it with CoffeeScript?
    

    View Slide

21. RequireJS gives us
    ● CoffeeScript painless integration
    ● modular code
    ● builder
    ● uglifier
    

    View Slide

22. Example Ember controller implementation in CoffeeScript
    

    View Slide

23. How to play with RequireJS & Django?
    http://www.flickr.com/photos/ppks-net/6779170304/
    

    View Slide

24. Tools for building JS apps
    ● django-compressor
    ● django-pipeline
    ● django-require
    ● ...
    

    View Slide

25. Tools for building JS apps
    ● django-compressor
    ● django-pipeline
    ● django-require
    ● ...
    

    View Slide

26. Create REST API
    http://www.flickr.com/photos/29388462@N06/5685049236/
    

    View Slide

27. ● django-rest-framework
    ● django-tastypie
    ● django-piston
    ● ...
    Django & APIs for JS apps
    

    View Slide

28. ● django-rest-framework
    ● django-tastypie
    ● django-piston
    ● ...
    Django & APIs for JS apps
    

    View Slide

29. Django REST Framework example
    

    View Slide

30. Manage your static files
    http://www.flickr.com/photos/saltygal/1289079855/
    

    View Slide

31. Static files management
    ● django.contrib.staticfiles
    ● django-storages
    ● django-cumulus
    ● django-require
    ● ...
    

    View Slide

32. Optimized JS code with a fingerprint in the filename
    

    View Slide

33. Stack summary
    ● Angular or Ember
    ● RequireJS
    ● django-require
    ● django-rest-framework
    ● django-storages
    

    View Slide

34. What's more
    ● package manager, i.e. Bower
    ● support for SEO
    

    View Slide

35. Never stop trying
    new solutions
    

    View Slide

36. Thank you!
    Questions?
    Follow me on Twitter
    @haxoza
    

    View Slide