Making Django sites more

responsive with REST and

AngularJS
August 27th, 2014

Hi, Im Hannes.
@hanneshapke
hanneshapke.github.io

A regular Django site

Github: https://github.com/hanneshapke/fruitloop_django

A Django site using REST and AngularJS

Github: https://github.com/hanneshapke/fruitloop_angular

Sync vs. Async

 is synchronous.

The Python heroes are

working on a fix
PEP 3156
!

http://python-notes.curiousefficiency.org/en/latest/pep_ideas/async_programming.html

But what is the solution

in the mean time?

{}

http://www.airpair.com/js/javascript-framework-comparison

Dont change your project

because it is hip

Creates new and larger code base, time consuming

Requires a different eco system

Do it if your Django site should become

responsive and more user-friendly

If you still think its a good

idea, here are the steps.

Step #1
Create an API endpoint
to your Django model

REST

Representational state transfer

Django REST Framework, tasty-pie

PyDannys Choosing an API Framework for Django

Django REST Framework with GIS support

Django REST Framework 3 Kickstarter: 32,650

What to do?

`pip install djangorestframework`

Add to your settings.py

Create a REST serializers for your models

Create API views for your serializers

Update your urls.py

Image: http://4gbloggingcrew.global2.vic.edu.au/files/2014/07/boom-2gjd45e.jpg

Thats it with Django.

Hey Django,
meet AngularJS.

Step #2
Set up your js environment
and install AngularJS

What?
A new eco system!
Based on node.js?

Bower.io

Package manager for front-end js

Works like pip, but its pip, can be configured

Install it with `npm install -g bower`

Run `bower init`

Install packages:
`bower install [package] --save`

What to do?

Created a .bowerrc file to point at the js assets

folder of the django project
12

{!

3
4 }!

"directory": "fruitloop_angular/assets/js/",!
"json": "bower.json"!

Installed the angular core package with

`bower install angular --save`

Bower creates a bower.json file similar to your

requirements.txt from pip

Step #3
Create a
static AngularJS site

30 second Intro to AngularJS

Angular offers
Controllers - Changes site behaviour
Services - Provides data access (e.g. REST)
Directives - Create your own DOM elements

Angular offers DOM attributes: ng-show, ngrepeat, ng-click, etc.

1 <tr ng-repeat="item in items">!
2
<td> {{ item.name }} - {{ item.price | currency }} </td>!
3 </tr>!

What to do?

Set up the settings path for your js assets

Created a 'static' html site and serve with Djangos

TemplateView

Create a sample js array to test your Angular setup

Created a controller to serve 'static' data

Arhhh, it doest work!

Step #4
Use {% verbatim %}

{{ isnt {{

Django and AngularJS use the same variable tag

Django > 1.4: Use {% verbatim %} environment

Django < 1.5: Use code here

1
2
3
4
5
6
7
8
9

// use {$ variable $} in your template!

// from http://django-angular.readthedocs.org/en/latest/integration.!
html!
!
var my_app = angular.module('MyApp').config(function(!
$interpolateProvider) {!
$interpolateProvider.startSymbol('{$');!
$interpolateProvider.endSymbol('$}');!
});!

Step #5
Make AngularJS talk
to your API

What to do?

Install angular-resource with

`bower install angular-resource --save`

Create the AngularJS in services.js and configure

your API endpoints (if needed)

Make the Angular controller load the data

use query() for lists, use get() for single objects

Display the list in the html page

Sample code
1 var fruitServices = angular.module('fruitServices', ['ngResource']);!
2 fruitServices.factory('FruitLocationService', ['$resource',!
3
function($resource){!
4
return $resource('api\\/', {}, {!
5
query: {method:'GET', params:{}, isArray: true}!
6
});!
7
}!
8 ]);!

ngResource loaded, $resource becomes available

Notice `$resource (api\\/, {}, {});`

Configure more API methods here, e.g. PUT,

DELETE, etc., if needed

Step #6
Take full advantage of the
Django REST Framework

Thoughts

Use DRF Authentication methods

Use Object Persmissions

Use the serializer to the full extend

e.g. serializers.RelatedField(source=fruit_type)

Step #7
Use $promise,
but dont promise too much

Example

Thoughts

Encapsulate data-related code with $promise

Code will be executed when data is returned from

the API
1 FruitLocationService.query().$promise.then(!
2
function (response) {!
3
response.forEach(function(location){!
4
$scope.markers.push({!
5
lat: location.latitude,!
6
lng: location.longitude!
7
});!
8
});!
9
console.log($scope.markers);!
10
}!
11 );!

Step #8
Make your form
talk to your API

What to do?

Bind your form data with Angulars ng-model

Check your API service config and see if the

trailing slash doesnt get eliminated

Set up your authentication classes for the Django

REST framework
1 # Required for POST/PUT requests by the Django REST Framework!
2 REST_FRAMEWORK = {!
3
'DEFAULT_AUTHENTICATION_CLASSES': []!
4 }!

Step #9
Clean up your settings.py

What to do?

Make Django lightweight

Remove unnecessary middleware and packages

Check if you still need i18n and l18n support

Turn it off if you can

Step #10
Document your API

What to do?

Once you project is running, try to document the API

Django REST Swagger is an option

Small Hints

Use AngularJS
Constants
1 angular.module('myApp')!
2
.constant('settings', {!
3
// mimic the Django STATIC_URL variable!
4
STATIC_URL: '/static/'!
5
});!

Decide!
urls.py vs. ng-route

What about
site performance?

Then why using

Django?

Is that the end of

Django?

Vielen Dank.
hannes.hapke@gmail.com
@hanneshapke
hanneshapke.github.io

Resources

PyDanny comments on JS and Django: https://pydanny-event-notes.readthedocs.org/en/

latest/DjangoConEurope2013/javascript_django.html

Lightweight Django:
http://shop.oreilly.com/product/0636920032502.do#

Using Tasty-pie:
http://glynjackson.org/weblog/entry/django-angular.html

Django, Angular and Authentication: http://richardtier.com/2014/03/15/authenticateusing-django-rest-framework-endpoint-and-angularjs/

How the Django REST framework changed my life: http://www.ngenworks.com/blog/howdjango-rest-framework-changed-my-life