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

Straightening Out AngularJS with Python by Jeff Schenck

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.5k
Technical Onboarding, Training, and Mentoring by Kate Heddleston and Nicole Zuckerman
pycon2014
1
2.1k
"My big gay adventure. Making, releasing and selling an indie game made in python." by Luke Miller
pycon2014
2
1.4k
Farewell and Welcome Home, Python in Two Genders by Naomi_Ceder
pycon2014
1
680
Deliver Your Software in an Envelope by Augie Fackler and Nathaniel Manista
pycon2014
1
510
Hitchhikers Guide to Free and Open Source Participation by Elena Williams
pycon2014
6
1.1k
Localization Revisted (aka. Translations Evolved) by Ruchi Varshney
pycon2014
0
640
Smart Dumpster by Bradley E. Angell
pycon2014
0
450
Software Engineering for Hackers: Bridging the Two Solitudes by Tavish Armstrong
pycon2014
0
680

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
What's new in Ruby 2.0
geeforr
337
31k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
What's in a price? How to price your products and services
michaelherold
237
11k
Embracing the Ebb and Flow
colly
80
4.1k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
YesSQL, Process and Tooling at Scale
rocio
164
13k
The Invisible Customer
myddelton
114
12k
RailsConf 2023
tenderlove
4
540
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
It's Worth the Effort
3n
180
27k
A better future with KSS
kneath
231
16k

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