DJANGO AND MVC JAVASCRIPT FRAMEWORKS 

Sean Creeley @screeley [email protected] 

WHAT WE BUILT 

What is JavaScript MVC? 

No content

Why Ember? 

Why JavaScript MVC? 

UP THE STACK 

No content

No content

BROWSERS GOT BETTER 

IE - 87.2% Firefox - 8.07% Safari: 3.2% Mozilla Suite - 0.52% Opera - 0.49% JULY 2005 

Chrome: 32.3 % IE: 22.2% Firefox: 18.5% Safari: 14.7% Opera: 2.3% JULY 2013 

XMLHttpRequest Web Standard jQuery Released Internet Explorer 7 2006 2007 iPhone Released 2008 Google Chrome 

APIS ARE KING 

USE THE GOOD PARTS 

EMBER INTRO 

APPLICATION window.Dolphin = Em.Application.create({ rootElement: $('#dolphin'), ready: function(){} }); 

ROUTER Dolphin.Router.map(function() { this.route('about'); this.resource('company', function(){ this.route('team'); }); }); / /about /company /company/team 

TEMPLATES

Welcome to Dolphin!

Helping Dolphins become the smartest species since 2013

application.handlebars index.handlebars 

MODELS Dolphin.CompanyTeamRoute = Em.Route.extend({ model: function(){ return {name: 'sean'} } }); company/team.handlebars 

MODELS Dolphin.CompanyTeamRoute = Em.Route.extend({ model: function(){ return [ {name: 'sean'}, {name: 'kawandeep'}, {name: 'andy'}] } });

{{#each controller}}
• {{name}}
{{/each}}



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}); } }); 

MODELS Dolphin.User = DS.Model.extend({ profile: DS.belongsTo('Dolphin.Profile'), first_name: DS.attr('string'), last_name: DS.attr('string'), username: DS.attr('string'), email: DS.attr('string') }); 

CONTROLLERS Dolphin.CompanyTeamController = Em.ArrayController.extend({ sortAscending: ['years_coding'], totalYears: function(){ return this.reduce(function(total, user) { return total + user.get('years_coding'); }, 0); }.property('@each.years_coding') }); 

VIEWS Dolphin.CompanyTeamView = Em.View.extend({ didInsertElement: function () { // fade images in. this.$().find('img').animate({ opacity: 1 }, 2000); } }); 

DJANGO DEVELOPMENT 

#1 SEPARATE FRONTEND AND BACKEND DEVELOPMENT 

USE GRUNT #2 

#3 ALLOW XSS HEADERS 

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 

#4 WRITE AN API YOURSELF 

urlpatterns = patterns('', url(r'^admin/', include(admin.site.urls)), url(r'^api/users(\/(?P\d+))?', UserView.as_view()), ) urls.py 

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 

users.js Dolphin.User = DS.Model.extend({ first_name: DS.attr('string'), last_name: DS.attr('string'), email: DS.attr('string') }); >> var user = Dolphin.User.find(1); >> user.get(‘first_name’) “sean” 

#5 MAKE THE FRONTEND DUMB 

#6 AUTHENTICATE 

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()) 

#7 MIX AND MATCH 

#8 USE RELATIONS 

class Author(models.Model): first_name = models.CharField() last_name = models.CharField() class Book(models.Model): author = models.ForeignKey(Author) title = models.CharField() models.py 

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 DON’T PASS BACK ALL FIELDS 

#10 JQUERY IS NOT THE ENEMY. 

App.CommentView = Em.View.extend({ template: Em.Handlebars.compile( '{{name}}

{{{body}}}

'), didInsertElement: function(){ this.$().find('p').animate({ opacity: 1 }, 1000); } }); 

#11 WORRY 

{ "blogs": [ { "id": 1, "name": "Embedly Blog" }, { "id": 1, "name": "Embedly Blog" }, .... ] } /api/blogs 

{"users": [ { "id": 1, "name": "Sean", "email": "[email protected]" }, { "id": 2, "name": "Kawandeep", "email": "[email protected]" }, .... ]} /api/users 

#12 DEPLOY STATIC 

#13 deferReadiness IS YOUR FRIEND 

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(); }); }); 

#11 IT’S PROBABLY NOT EMBER’S FAULT. 

QUESTIONS? @screeley @embedly