superheroic ponies: angular & Django
David sanders
- Freelance Developer
- @rapilabs
Colin Rolfe
- Developer at Datamaxx Services (we're hiring!)
- @colin_rolfe
what is covered in This talk
- A brief (brief!) overview of Angular
- Why should I care about Angular?
- Two Approaches:
-
Yeoman: 100% JavaScript frontend
- Djangular: Integration with existing Django views
Angular in 30 seconds
- Single page apps
- MV-whatever Framework
- 2 way data binding (awesome)
- DRY code with directives and services
- Designed with testing in mind
- Dependency injection
why angular?
- Excellent documentation
- Framework, not a library
- Many parallels to Django
- Easy to write testable code
- Corporate acceptance (hi .NET/Java developers!)
- Large and diverse community
django integration
how is angular like django?
- Angular "module" ~= Django "app"
-
Break down into files by function
- Emphasis on DRY
-
Dumb templates
-
In-built/custom filters
-
Angular is boring
avoiding Gotchas
Set-and-forget CSRF token settings:
Use django-cors-headers to make cross-origin requests
serving options:
- Static files
- Angular code in Django templates (caution: {{ }} collisions)
- Serve Angular's app skeleton (index.html) in TemplateView
- If logging in over XHR, force CSRF token:
The 100% Angular frontend
THE 100% ANGULAR FRONTEND pt. 2
The 100% angular frontend pt. 3
angular + existing django views
- Have existing view code that can't/won't/don't need to replace
- Django handles CRUD operations quite well, thanks
- Legacy browser support :
- Not guaranteed with Django, but no Angular 1.3 for IE 8
Anatomy of a djangular app
<django_app_name>/
index.html
app.js
controllers/*.js
directives/*.js
services/*.js
filters/*.js
Project structure
- djangular is your friend!
- <app_name>/app/{js, css, partials}
- startangularapp (django app + Angular seed)
- plays nicely with django-pipeline
- static/<app_name>/{js, css, partials}
- serve Angular app skeleton in a TemplateView
- django-braces's LoginRequiredMixin == super handy
Case Study: Gateway
Requirements:
- schedule a program w/ multiple sessions, multiple attendees
- for each session, view each attendee's clashes
- resolve clashes before saving
Case Study cont.
- Difficult to solve this problem in a request/response cycle
- Could use SessionWizardView, but this always feels slow
- Enter Angular!
- Ultimately went with a form wizard built around ui-router
- Transitioning between states is fast
- Django Rest Framework serializers validate data just like forms do
- Seamless integration with rest of the site
- First step towards 100% SPA?
Questions???
Angular
By Colin Rolfe
