Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DJANGO AND MVC JAVASCRIPT FRAMEWORKS

Sean
August 16, 2013
370

DJANGO AND MVC JAVASCRIPT FRAMEWORKS

MVC JavaScript Frameworks are gaining momentum as a framework for building web apps. Backbone.js, AngularJS, and Ember.js all have significant followings as Open Source projects. Embedly recently rewrote their user app using Ember.js and learned a lot in the process.

This talk will focus on using Django to create a server backend for Ember.js. It will cover development, authentication, API endpoints and deployment.

Sean

August 16, 2013
Tweet

Transcript

  1. TEMPLATES <div class="row"> <div class="large-12 columns"> {{outlet}} </div> </div> <h1>Welcome

    to Dolphin!</h1> <p>Helping Dolphins become the smartest species since 2013</p> application.handlebars index.handlebars
  2. MODELS Dolphin.CompanyTeamRoute = Em.Route.extend({ model: function(){ return [ {name: 'sean'},

    {name: 'kawandeep'}, {name: 'andy'}] } }); <ul> {{#each controller}} <li>{{name}}</li> {{/each}} </ul>
  3. MODELS Dolphin.CompanyTeamRoute = Em.Route.extend({ model: function(){ return Dolphin.User.find({is_team: true}); }

    }); Dolphin.CompanyTeamRoute = Em.Route.extend({ model: function(){ return $.getJSON(‘/api/users’, {is_team :true}); } });
  4. VIEWS Dolphin.CompanyTeamView = Em.View.extend({ didInsertElement: function () { // fade

    images in. this.$().find('img').animate({ opacity: 1 }, 2000); } });
  5. XSS_ORIGINS = 'http://localhost.com:3501' XSS_METHODS = ['POST', 'GET', 'OPTIONS', 'PUT', 'DELETE']

    XSS_HEADERS = ['Content-Type', 'x-requested-with', '*'] XSS_CREDENTIALS = 'true' class XSSharing(object): def process_response(self, request, response): response['Access-Control-Allow-Origin'] = XSS_ORIGINS response['Access-Control-Allow-Methods'] \ = ",".join(XSS_METHODS) response['Access-Control-Allow-Headers'] \ = ",".join(XSS_HEADERS) response['Access-Control-Allow-Credentials'] \ = XSS_CREDENTIALS return response https://gist.github.com/426829
  6. from django.views.generic.base import View from django.http import HttpResponse from django.contrib.auth.models

    import User from django.forms.models import model_to_dict class UserView(View): def serialize(self, obj): return model_to_dict(obj, fields=['id', 'first_name', 'last_name', 'email']) def get(self, request, pk=None): if pk is not None: data = {'user': self.serialize(User.objects.get(pk=pk))} elif request.GET: data = {'users' : map(self.serialize, User.objects.filter(**request.GET))} else: data = {'users' : map(self.serialize, User.objects.all())} return HttpResponse(json.dumps(data), mimetype="application/json") views.py
  7. class UserAuth(auth.Auth): def can_access(self, request, obj): if request.user.id == obj.id:

    return True if request.user.is_superuser: return True return False class UserView(ember.View): ... def get(self, request, pk, **kwargs): obj = self.model.objects.get(pk=pk) if not self.auth.can_access(request, obj): raise ValueError('no auth specified') return self.serializer.one(obj) ember.register(User, UserSerializer, UserView, auth=UserAuth())
  8. Dolphin.Author = DS.Model.extend({ books: DS.hasMany('Dolphin.Book'), first_name: DS.attr('string'), last_name: DS.attr('string') });

    Dolphin.Book = DS.Model.extend({ author: DS.belongsTo('Dolphin.Author'), title: DS.attr('string'), }); models.js
  9. { "blogs": [ { "id": 1, "name": "Embedly Blog" },

    { "id": 1, "name": "Embedly Blog" }, .... ] } /api/blogs
  10. {"users": [ { "id": 1, "name": "Sean", "email": "[email protected]" },

    { "id": 2, "name": "Kawandeep", "email": "[email protected]" }, .... ]} /api/users
  11. App.deferReadiness(); // Wait for all the javascript files to load.

    $(document).ready(function(){ App.User.current(function(user, profile, organizations){ // Set everything else up. App.set('user', user); // Will start everything up. App.advanceReadiness(); }); });