The following front-end JavaScript framework makes it easier to use the REST API:

  • Reaction. js: Facebook released for building HTML, iOS and Android apps.
  • Angular.js: A Google release that can be used to create single-page applications. The Django community has a lot of space.
  • Backbone.js: Based on the underscope.js library.
  • JQuery.

Learn how to debug the client

Client-side debugging is more than just writing console.log() and console.dir(). But most testing tools are framework specific, and once you choose a tool, it’s worth taking the time to learn how to write tests in depth.

Consider using the JavaScript version of the static content preprocessor

Python has always been used to do things like JavaScript and CSS compression, but now the tools in the JavaScript community are much more professional and effective. The most commonly used tool in this area is Gulp, which is similar to automation tools such as Fabric and Invoke in Python.

Enables content to be indexed by search engines

Refer to the search engine documentation

  • google ajax crawling
  • Search Engine Optimization Best Practices for AJAX URLs

Create a sitemap. XML

Because the Ajax view is not concrete 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()

Here is a simple sitempa. XML:

<? The XML version = "1.0" encoding = "utf-8"? > < urlset XMLNS = "http://www.sitemaps.org/schemas/sitemap/0.9" > {# "on 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>

Use services to make your site indexable

In addition to creating your own sitempa. XML, you can also use services like brombone.com to process your angular. js, backbone. js, etc., to create a Google Preview HTML version of the page.

Real Time and Delay

It’s a law of physics that even the best optimized Web site can cause noticeable delays from a trip halfway around the world. Therefore, you need to deal with the issue of latency.

Approach 1: Use animation to override delayed actions to distract the user

Approach two: Pretend the interaction was successful on the client side, and then handle it on the back end

Approach 3: Deploy multiple servers based on the user’s geographic location

Method four: restrict the geographic location of users

Avoid the anti-pattern approach

Single page applications are not used when multi-page applications can be used

Multi-page applications are easier to create.

Be sure to write tests

Learn about the memory management of each JavaScript framework to avoid memory leaks

When you use jQuery, you store your data in the DOM, and when you use other frameworks, you refer to their data management methods

AJAX and CSRF

JQuery and CSRF

With jQuery, you can create a csrf.js file and then include it on all pages that update their data with Ajax.

// 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) $/. The test (method)); } $.ajaxSetup({ beforeSend: function(xhr, settings) { if (! csrfSafeMethod(settings.type) && ! this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); }}});

After that, include the code 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

The CSRF identity is usually placed in the 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 }}';
}]);

Improve your JavaScript skills

  • Assess skill level: 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 Django: Best Practices for Django 1.8