The following JavaScript framework so that the front end using the REST API easier:

React.js : Facebook released, can be used to build HTML, iOS and Android applications.
Angular.js : Google released can be used to create a single-page application, more Django community land.
Backbone.js : Based underscope.js library.
jQuery。

Learn how to debug client

Client-side debugging is not just writing console.log () and console.dir () . But most of the tools are tested against the frame, once the tool selection, worth our time to learn how to write in-depth testing.

Consider using JavaScript version of the static content pre-processor

Before Python has been used to complete the JavaScript and CSS compression, etc., but now the JavaScript community tools more professional, better. The areas most commonly used tools of the Gulp , which is similar in Python Fabric, Invoke and other automated tools.

The content can be indexed by search engines

Reference document search engine

Create a sitemap.xml

Baidu and other guidance documents not indexed, create appropriate for these engines sitemap.xml , because the view is not specific AJAX HTML, you need to create a custom view:

from __future__ import absolute_import

from django.views.generic import TemplateView

from .flavors.models import Flavor

class SiteMapView(TemplateView):
    template_name = "sitemap.xml"

    def flavors(self):
        return Flavor.objects.all()

The following is a simple sitempa.xml :

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    {# Snip the home page, contact, etc #}
    {% for flavor in view.flavors %}
        <url>
            <loc>{{ site.domain }}/app/#{{ flavor.slug }}</loc>
            <lastmod>{{ flavor.modified }}</lastmod>
            <changefreq>monthly</changefreq>
            <priority>0.8</priority>
        </url>
    {% endfor %}
</urlset>

To make your site be indexed by service

In addition to own sitempa.xml , we can also handle your Angular.js, Backbone.js and other sites by brombone.com other services to generate a preview of the HTML version of the Google page.

Real-time and delayed

The best website optimization, latency round trip halfway around the world produced or perceived, this is the laws of physics. Therefore, the need to address the issue of delay.

Method a: using animation to cover the delay operation, so distracting

Method 2: In a client pretending to interact successfully, then the back-end processing

Method three: deploy multiple servers based on user location

Method four: to limit the user's location

Avoid the use of an anti-pattern method

Not a single-page applications can when using multi-page applications

Multi-page applications easier to create.

Must write the test

Understanding Memory management of JavaScript framework, to avoid memory leaks

When using the data stored in jQuery DOM, with reference to the use of other data management framework

AJAX and CSRF

jQuery and CSRF

When using jQuery, you can create a csrf.js file, then include the file on all pages using AJAX to update data.

// Place at /static/js/csrf.js
// CSRF helper functions taken directly from Django docs
function getCookie(name) {
var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
    }
    return cookieValue;
}

var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/ˆ(GET|HEAD|OPTIONS|TRACE)$/.test(method));
} 

$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

After that, the code contained in the page:

{% extends "base.html" %}
{% load static %}

{% block title %}Ice Cream Shopping Cart{% endblock %}

{% block content %}
    <h1>Ice Cream Shopping Cart</h1>
    <div class="shopping-cart"></div>
{% endblock %}

{% block javascript %}
    {{ block.super }}
    <script type="text/javascript"
        src="{% static "js/csrf.js" %}"></script>
    <script type="text/javascript"
        src="{% static "js/shopping_cart.js" %}"></script>
{% endblock %}

Backbone.js and CSRF


// Place at /static/models.js
var newSync = Backbone.sync;
Backbone.sync = function(method, model, options){
    options.beforeSend = function(xhr){
        xhr.setRequestHeader('X-CSRFToken', CSRF_TOKEN);
    };
    return newSync(method, model, options);
};

AngularJS and CSRF

CSRF typically identified in a HTTP header:

var app = angular.module('icecreamlandia.app');
app.config(['$httpProvider', function($httpProvider) {
    // The next two lines should just be one, but we had to break it
    // up in order to preserve book formatting.
    var common = $httpProvider.defaults.headers.common;
    common['X-CSRFToken'] = '{{ csrf_token|escapejs }}';
}]);

JavaScript improve skills

Assessment of skill levels: JS-Assessment
Lightweight Django
Using Django Tastypie And Backbone.js To Create RESTful APIs
Getting Started with Django Rest Framework and AngularJS

References: Two Scoops of the Django: Best Practices for the Django 1.8

Django using the REST API