Tweet
Tweet

Slide 1

Slide 1 text

Przemek Lewandowski @haxoza DjangoCon Europe 2013 How to combine JavaScript & Django in a smart way

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Really hard!

Slide 5

Slide 5 text

Django is a JavaScript agnostic web framework

Slide 6

Slide 6 text

Basic approach

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

JavaScript frameworks ● application structure ● testable code ● productivity

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Overall architecture for JavaScript & Django

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Example Ember controller implementation in CoffeeScript

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Django REST Framework example

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Optimized JS code with a fingerprint in the filename

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Never stop trying new solutions

Slide 36

Slide 36 text

Thank you! Questions? Follow me on Twitter @haxoza