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

Straightening Out AngularJS with Python by Jeff...

PyCon 2014
April 11, 2014
3
4.6k

Straightening Out AngularJS with Python by Jeff Schenck

PyCon 2014

April 11, 2014
Tweet

More Decks by PyCon 2014

See All by PyCon 2014
Postgres Performance for Humans by Craig Kerstiens
pycon2014
29
3.6k
Technical Onboarding, Training, and Mentoring by Kate Heddleston and Nicole Zuckerman
pycon2014
1
2.2k
"My big gay adventure. Making, releasing and selling an indie game made in python." by Luke Miller
pycon2014
2
1.5k
Farewell and Welcome Home, Python in Two Genders by Naomi_Ceder
pycon2014
1
710
Deliver Your Software in an Envelope by Augie Fackler and Nathaniel Manista
pycon2014
1
520
Hitchhikers Guide to Free and Open Source Participation by Elena Williams
pycon2014
6
1.2k
Localization Revisted (aka. Translations Evolved) by Ruchi Varshney
pycon2014
0
680
Smart Dumpster by Bradley E. Angell
pycon2014
0
490
Software Engineering for Hackers: Bridging the Two Solitudes by Tavish Armstrong
pycon2014
0
710

Featured

See All Featured
How to train your dragon (web standard)
notwaldorf
88
5.7k
Done Done
chrislema
181
16k
Bash Introduction
62gerente
608
210k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Navigating Team Friction
lara
183
14k
Documentation Writing (for coders)
carmenintech
65
4.4k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
It's Worth the Effort
3n
183
27k
Writing Fast Ruby
sferik
627
61k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k

Transcript

  1. Straightening Out AngularJS with Python

  2. Straightening Out AngularJS with Python 30-SECOND ANGULAR • JavaScript MV*

    framework

  3. Straightening Out AngularJS with Python 30-SECOND ANGULAR • JavaScript MV*

    framework • Extends HTML vocabulary

  4. Straightening Out AngularJS with Python 30-SECOND ANGULAR • JavaScript MV*

    framework • Extends HTML vocabulary • Getting kinda popular

  5. Straightening Out AngularJS with Python 30-SECOND PYTHON • Pretty honking

    great language

  6. Straightening Out AngularJS with Python 30-SECOND PYTHON • Pretty honking

    great language • Django, Pyramid, Flask, etc.

  7. Straightening Out AngularJS with Python 30-SECOND PYTHON • Pretty honking

    great language • Django, Pyramid, Flask, etc. • Server-side MV* frameworks

  8. Straightening Out AngularJS with Python 1. SERVE ANGULAR

  9. Straightening Out AngularJS with Python WHAT WE SERVE • Base

    HTML page

  10. Straightening Out AngularJS with Python BASE HTML <html ng-app="app">! <body

    ng-controller="HumanCtrl">! ! <input type="text" ng-model="humanName" placeholder="Name">! <p>Hi, {{ humanName }}!</p>! ! <script src="http://foo.com/angular.js"></script>! <script src="http://foo.com/app.js"></script>! </body>! </html>!

  11. Straightening Out AngularJS with Python BASE HTML <html ng-app="app">! <body

    ng-controller="HumanCtrl">! ! <input type="text" ng-model="humanName" placeholder="Name">! <p>Hi, {{ humanName }}!</p>! ! <script src="http://foo.com/angular.js"></script>! <script src="http://foo.com/app.js"></script>! </body>! </html>!

  12. Straightening Out AngularJS with Python BASE HTML <html ng-app="app">! <body

    ng-controller="HumanCtrl">! ! <input type="text" ng-model="humanName" placeholder="Name">! <p>Hi, {{ humanName }}!</p>! ! <script src="http://foo.com/angular.js"></script>! <script src="http://foo.com/app.js"></script>! </body>! </html>!

  13. Straightening Out AngularJS with Python BASE HTML <html ng-app="app">! <body

    ng-controller="HumanCtrl">! ! <input type="text" ng-model="humanName" placeholder="Name">! <p>Hi, {{ humanName }}!</p>! ! <script src="http://foo.com/angular.js"></script>! <script src="http://foo.com/app.js"></script>! </body>! </html>!

  14. Straightening Out AngularJS with Python BASE HTML <html ng-app="app">! <body

    ng-controller="HumanCtrl">! ! <input type="text" ng-model="humanName" placeholder="Name">! <p>Hi, {{ humanName }}!</p>! ! <script src="http://foo.com/angular.js"></script>! <script src="http://foo.com/app.js"></script>! </body>! </html>!

  15. Straightening Out AngularJS with Python BASE HTML from django.conf.urls import

    patterns, url! from django.views.generic import TemplateView! ! urlpatterns = patterns('',! url(r'^.*$', TemplateView.as_view(template_name='app.html')),! )!

  16. Straightening Out AngularJS with Python BASE HTML from django.conf.urls import

    patterns, url! from django.views.generic import TemplateView! ! urlpatterns = patterns('',! url(r'^.*$', TemplateView.as_view(template_name='app.html')),! )!

  17. Straightening Out AngularJS with Python WHAT WE SERVE • Base

    HTML page • Template partials

  18. Straightening Out AngularJS with Python TEMPLATE PARTIALS from django.conf.urls import

    patterns, url! from django.views.generic import TemplateView! ! urlpatterns = patterns('',! url(r'^rendered-partials/(?P<template_name>.*)$', ! 'render_partial'),! url(r'^.*$', TemplateView.as_view(template_name='app.html')),! )!

  19. Straightening Out AngularJS with Python TEMPLATE PARTIALS from django.shortcuts import

    render! ! def render_partial(request, template_name=None):! template_name = 'partials/{}'.format(template_name)! context = {! 'you-are-a-unique-snowflake': True,! }! return render(request, template_name, context)!

  20. Straightening Out AngularJS with Python TEMPLATE PARTIALS from django.shortcuts import

    render! ! def render_partial(request, template_name=None):! template_name = 'partials/{}'.format(template_name)! context = {! 'you-are-a-unique-snowflake': True,! }! return render(request, template_name, context)!

  21. Straightening Out AngularJS with Python TEMPLATE PARTIALS from django.shortcuts import

    render! ! def render_partial(request, template_name=None):! template_name = 'partials/{}'.format(template_name)! context = {! 'you-are-a-unique-snowflake': True,! }! return render(request, template_name, context)!

  22. Straightening Out AngularJS with Python TEMPLATE PARTIALS from django.shortcuts import

    render! ! def render_partial(request, template_name=None):! template_name = 'partials/{}'.format(template_name)! context = {! 'you-are-a-unique-snowflake': True,! }! return render(request, template_name, context)!

  23. Straightening Out AngularJS with Python WHAT WE SERVE • Base

    HTML page • Template partials • Application API

  24. Straightening Out AngularJS with Python 2. APPLICATION API

  25. Straightening Out AngularJS with Python OUR API • Clean, RESTful

    JSON API

  26. Straightening Out AngularJS with Python CLEAN API from rest_framework import

    viewsets! from human.models import Human! ! class HumanViewSet(viewsets.ModelViewSet):! model = Human!

  27. Straightening Out AngularJS with Python CLEAN API from rest_framework import

    viewsets! from human.models import Human! ! class HumanViewSet(viewsets.ModelViewSet):! model = Human!

  28. Straightening Out AngularJS with Python CLEAN API from rest_framework import

    viewsets! from human.models import Human! ! class HumanViewSet(viewsets.ModelViewSet):! model = Human!

  29. Straightening Out AngularJS with Python CLEAN API from django.conf.urls import

    patterns, include, url! from rest_framework import routers! ! router = routers.DefaultRouter()! router.register(r’humans', HumanViewSet)! urlpatterns = patterns('',! url(r'^', include(router.urls)),! )!

  30. Straightening Out AngularJS with Python CLEAN API from django.conf.urls import

    patterns, include, url! from rest_framework import routers! ! router = routers.DefaultRouter()! router.register(r'humans', HumanViewSet)! urlpatterns = patterns('',! url(r'^', include(router.urls)),! )!

  31. Straightening Out AngularJS with Python CLEAN API from django.conf.urls import

    patterns, include, url! from rest_framework import routers! ! router = routers.DefaultRouter()! router.register(r'humans', HumanViewSet)! urlpatterns = patterns('',! url(r'^', include(router.urls)),! )!

  32. Straightening Out AngularJS with Python OUR API • Clean, RESTful

    JSON API • And the other parts…

  33. Straightening Out AngularJS with Python CLEAN…ISH API

  34. Straightening Out AngularJS with Python CLEAN…ISH API • Oh you

    wanted auth?

  35. Straightening Out AngularJS with Python CLEAN…ISH AUTH class UserViewSet(viewsets.ModelViewSet):! @action()!

    def login(self, request):! username = request.POST['username']! password = request.POST['password']! user = authenticate(username=username, password=password)! if user is not None and user.is_active:! login(request, user)! serializer = self.serializer_class(user)! return Response(serializer.data)! return Response('Fail', status=status.HTTP_403_FORBIDDEN)!

  36. Straightening Out AngularJS with Python CLEAN…ISH AUTH class UserViewSet(viewsets.ModelViewSet):! @action()!

    def login(self, request):! username = request.POST['username']! password = request.POST['password']! user = authenticate(username=username, password=password)! if user is not None and user.is_active:! login(request, user)! serializer = self.serializer_class(user)! return Response(serializer.data)! return Response('Fail', status=status.HTTP_403_FORBIDDEN)!

  37. Straightening Out AngularJS with Python CLEAN…ISH AUTH class UserViewSet(viewsets.ModelViewSet):! @action()!

    def login(self, request):! username = request.POST['username']! password = request.POST['password']! user = authenticate(username=username, password=password)! if user is not None and user.is_active:! login(request, user)! serializer = self.serializer_class(user)! return Response(serializer.data)! return Response('Fail', status=status.HTTP_403_FORBIDDEN)!

  38. Straightening Out AngularJS with Python CLEAN…ISH AUTH class UserViewSet(viewsets.ModelViewSet):! @action()!

    def login(self, request):! username = request.POST['username']! password = request.POST['password']! user = authenticate(username=username, password=password)! if user is not None and user.is_active:! login(request, user)! serializer = self.serializer_class(user)! return Response(serializer.data)! return Response('Fail', status=status.HTTP_403_FORBIDDEN)!

  39. Straightening Out AngularJS with Python CLEAN…ISH API • Oh you

    wanted auth? • Oh you wanted permissions?

  40. Straightening Out AngularJS with Python CLEAN…ISH PERMISSIONS class AccountPermission(permissions.BasePermission):! def

    has_permission(self, request, view):! # Allow all access to admin users! if request.auth and request.auth.is_admin:! return True! ! # Allow global read/write permission where option is set! if getattr(view, 'global_full_permission', False):! return True! ! # Allow global read permission where option is set! read = getattr(view, 'global_read_permission', False)! if read and request.method in permissions.SAFE_METHODS:! return True!

  41. Straightening Out AngularJS with Python CLEAN…ISH PERMISSIONS class AccountPermission(permissions.BasePermission):! def

    has_permission(self, request, view):! # Allow all access to admin users! if request.auth and request.auth.is_admin:! return True! ! # Allow global read/write permission where option is set! if getattr(view, 'global_full_permission', False):! return True! ! # Allow global read permission where option is set! read = getattr(view, 'global_read_permission', False)! if read and request.method in permissions.SAFE_METHODS:! return True!

  42. Straightening Out AngularJS with Python CLEAN…ISH PERMISSIONS class AccountPermission(permissions.BasePermission):! def

    has_permission(self, request, view):! # Allow all access to admin users! if request.auth and request.auth.is_admin:! return True! ! # Allow global read/write permission where option is set! if getattr(view, 'global_full_permission', False):! return True! ! # Allow global read permission where option is set! read = getattr(view, 'global_read_permission', False)! if read and request.method in permissions.SAFE_METHODS:! return True!

  43. Straightening Out AngularJS with Python CLEAN…ISH PERMISSIONS class AccountPermission(permissions.BasePermission):! def

    has_permission(self, request, view):! # Allow all access to admin users! if request.auth and request.auth.is_admin:! return True! ! # Allow global read/write permission where option is set! if getattr(view, 'global_full_permission', False):! return True! ! # Allow global read permission where option is set! read = getattr(view, 'global_read_permission', False)! if read and request.method in permissions.SAFE_METHODS:! return True!

  44. Straightening Out AngularJS with Python CLEAN…ISH PERMISSIONS class AccountPermission(permissions.BasePermission):! def

    has_permission(self, request, view):! # Allow all access to admin users! if request.auth and request.auth.is_admin:! return True! ! # Allow global read/write permission where option is set! if getattr(view, 'global_full_permission', False):! return True! ! # Allow global read permission where option is set! read = getattr(view, 'global_read_permission', False)! if read and request.method in permissions.SAFE_METHODS:! return True!

  45. Straightening Out AngularJS with Python CLEAN…ISH API • Oh you

    wanted auth? • Oh you wanted permissions? • Oh you wanted filtering?

  46. Straightening Out AngularJS with Python CLEAN…ISH FILTERING class HumanFilterSet(django_filters.FilterSet):! created_lte

    = IsoDateTimeFilter(! name='created', ! lookup_type='lte',! input_formats=IsoDateTimeFilter.ISO_INPUT_FORMATS! )! ! class Meta:! model = Human! fields = ['created_lte',]!

  47. Straightening Out AngularJS with Python CLEAN…ISH FILTERING class HumanFilterSet(django_filters.FilterSet):! created_lte

    = IsoDateTimeFilter(! name='created', ! lookup_type='lte',! input_formats=IsoDateTimeFilter.ISO_INPUT_FORMATS! )! ! class Meta:! model = Human! fields = ['created_lte',]!

  48. Straightening Out AngularJS with Python CLEAN…ISH FILTERING class HumanFilterSet(django_filters.FilterSet):! created_lte

    = IsoDateTimeFilter(! name='created', ! lookup_type='lte',! input_formats=IsoDateTimeFilter.ISO_INPUT_FORMATS! )! ! class Meta:! model = Human! fields = ['created_lte',]!

  49. Straightening Out AngularJS with Python CLEAN…ISH FILTERING class HumanFilterSet(django_filters.FilterSet):! created_lte

    = IsoDateTimeFilter(! name='created', ! lookup_type='gte',! input_formats=IsoDateTimeFilter.ISO_INPUT_FORMATS! )! ! class Meta:! model = Human! fields = ['created_lte',]!

  50. Straightening Out AngularJS with Python 3. CURVEBALLS

  51. Straightening Out AngularJS with Python MMVV**? • Frontend MV* and

    backend MV*

  52. Straightening Out AngularJS with Python MMVV**? • Frontend MV* and

    backend MV* • Backend models mirrored in frontend

  53. Straightening Out AngularJS with Python MMVV**? • Frontend MV* and

    backend MV* • Backend models mirrored in frontend • Controller and view code in frontend

  54. Straightening Out AngularJS with Python MMVV**? • Frontend MV* and

    backend MV* • Backend models mirrored in frontend • Controller and view code in frontend • Backend background processing

  55. Straightening Out AngularJS with Python INTERPOLATION FIGHT! • “Wait —

    you were gonna use {{ var }}?”

  56. Straightening Out AngularJS with Python INTERPOLATION FIGHT! • “Wait —

    you were gonna use {{ var }}?” • “I thought I was gonna use {{ var }}”

  57. Straightening Out AngularJS with Python INTERPOLATION FIGHT! • “Wait —

    you were gonna use {{ var }}?” • “I thought I was gonna use {{ var }}” • Said Angular, Django and Jinja all at once

  58. Straightening Out AngularJS with Python INTERPOLATION FIGHT! module.config(function ($interpolateProvider) {!

    $interpolateProvider! .startSymbol('[[')! .endSymbol(']]');! });!

  59. Straightening Out AngularJS with Python INTERPOLATION FIGHT! module.config(function ($interpolateProvider) {!

    $interpolateProvider! .startSymbol('[[')! .endSymbol(']]');! });!

  60. Straightening Out AngularJS with Python OTHER GOTCHAS • CSRF wiring

  61. Straightening Out AngularJS with Python OTHER GOTCHAS • CSRF wiring

    • API pagination

  62. Straightening Out AngularJS with Python 4. ENJOY!

  63. Straightening Out AngularJS with Python Jeff Schenck CTO & Co-Founder

     stinky cheese  jeffschenck  www.chewse.com