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

    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