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.

Transcript

1. DJANGO AND MVC JAVASCRIPT FRAMEWORKS
2. Sean Creeley @screeley sean@embed.ly
3. WHAT WE BUILT
4. What is JavaScript MVC?
6. Why Ember?
7. Why JavaScript MVC?
8. UP THE STACK
11. BROWSERS GOT BETTER
12. IE - 87.2% Firefox - 8.07% Safari: 3.2% Mozilla Suite - 0.52% Opera - 0.49% JULY 2005
13. Chrome: 32.3 % IE: 22.2% Firefox: 18.5% Safari: 14.7% Opera: 2.3% JULY 2013
14. XMLHttpRequest Web Standard jQuery Released Internet Explorer 7 2006 2007 iPhone Released 2008 Google Chrome
15. APIS ARE KING
16. USE THE GOOD PARTS
17. EMBER INTRO
18. APPLICATION window.Dolphin = Em.Application.create({ rootElement: $('#dolphin'), ready: function(){} });
19. ROUTER Dolphin.Router.map(function() { this.route('about'); this.resource('company', function(){ this.route('team'); }); }); / /about /company /company/team
20. 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
21. MODELS Dolphin.CompanyTeamRoute = Em.Route.extend({ model: function(){ return {name: 'sean'} } }); <div> <h1>{{name}}</h1> </div> company/team.handlebars
22. MODELS Dolphin.CompanyTeamRoute = Em.Route.extend({ model: function(){ return [ {name: 'sean'}, {name: 'kawandeep'}, {name: 'andy'}] } }); <ul> {{#each controller}} <li>{{name}}</li> {{/each}} </ul>
23. 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}); } });
24. 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') });
25. 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') });
26. VIEWS Dolphin.CompanyTeamView = Em.View.extend({ didInsertElement: function () { // fade images in. this.$().find('img').animate({ opacity: 1 }, 2000); } });
27. DJANGO DEVELOPMENT
28. #1 SEPARATE FRONTEND AND BACKEND DEVELOPMENT
29. USE GRUNT #2
30. #3 ALLOW XSS HEADERS
31. 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
32. #4 WRITE AN API YOURSELF
33. urlpatterns = patterns('', url(r'^admin/', include(admin.site.urls)), url(r'^api/users(\/(?P<pk>\d+))?', UserView.as_view()), ) urls.py
34. 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
35. 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”
36. #5 MAKE THE FRONTEND DUMB
37. #6 AUTHENTICATE
38. 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())
39. #7 MIX AND MATCH
40. #8 USE RELATIONS
41. 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
42. 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
43. #9 DON’T PASS BACK ALL FIELDS
44. #10 JQUERY IS NOT THE ENEMY.
45. App.CommentView = Em.View.extend({ template: Em.Handlebars.compile( '<b>{{name}}</b><p>{{{body}}}</p>'), didInsertElement: function(){ this.$().find('p').animate({ opacity: 1 }, 1000); } });
46. #11 WORRY
47. { "blogs": [ { "id": 1, "name": "Embedly Blog" }, { "id": 1, "name": "Embedly Blog" }, .... ] } /api/blogs
48. {"users": [ { "id": 1, "name": "Sean", "email": "sean@embed.ly" }, { "id": 2, "name": "Kawandeep", "email": "kawandeep@embed.ly" }, .... ]} /api/users
49. #12 DEPLOY STATIC
50. #13 deferReadiness IS YOUR FRIEND
51. 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(); }); });
52. #11 IT’S PROBABLY NOT EMBER’S FAULT.
53. QUESTIONS? @screeley @embedly