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
700
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
Bash Introduction
62gerente
608
210k
Designing for humans not robots
tammielis
249
25k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Typedesign – Prime Four
hannesfritz
39
2.4k
How STYLIGHT went responsive
nonsquared
95
5.2k
A better future with KSS
kneath
238
17k
For a Future-Friendly Web
brad_frost
175
9.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
2k

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