SlideShare a Scribd company logo
Making Django sites more
responsive with REST and
AngularJS
August 27th, 2014
Hi, I’m Hannes.
@hanneshapke

hanneshapke.github.io
Create responsive websites with Django, REST and AngularJS
A regular Django site
Github: https://github.com/hanneshapke/fruitloop_django
A Django site using REST and AngularJS
Github: https://github.com/hanneshapke/fruitloop_angular
Sync vs. Async
… is synchronous.
The Python heroes are 

working on a fix
PEP 3156
!
http://python-notes.curiousefficiency.org/en/latest/pep_ideas/async_programming.html
But what is the solution
in the mean time?
{ }+ +
…
http://www.airpair.com/js/javascript-framework-comparison
Don’t change your project …
• … because it is hip
• Creates new and larger code base, time consuming
• Requires a different eco system
• Do it if your Django site should become
responsive and more user-friendly
If you still think it’s a good
idea, here are the steps.
Step #1
Create an API endpoint
to your Django model
REST
• Representational state transfer
• Django REST Framework, tasty-pie

PyDanny’s Choosing an API Framework for Django
• Django REST Framework with GIS support
• Django REST Framework 3 Kickstarter: £32,650
What to do?
• `pip install djangorestframework`
• Add to your settings.py
• Create a REST serializers for your models
• Create API views for your serializers
• Update your urls.py
Image: http://4gbloggingcrew.global2.vic.edu.au/files/2014/07/boom-2gjd45e.jpg
That’s it with Django.
Hey Django,

meet AngularJS.
Step #2
Set up your js environment
and install AngularJS
What?
A new eco system!

Based on node.js?
Bower.io
• Package manager for front-end js
• Works like pip, but it’s pip, can be configured
• Install it with `npm install -g bower`
• Run `bower init`
• Install packages: 

`bower install [package] --save`
What to do?
• Created a .bowerrc file to point at the js assets
folder of the django project



• Installed the angular core package with 

`bower install angular --save`
• Bower creates a bower.json file similar to your
requirements.txt from pip
1 {!
2 "directory": "fruitloop_angular/assets/js/",!
3 "json": "bower.json"!
4 }!
Step #3
Create a 

static AngularJS site
30 second Intro to AngularJS
• Angular offers

Controllers - Changes site behaviour

Services - Provides data access (e.g. REST)

Directives - Create your own DOM elements
• Angular offers DOM attributes: ng-show, ng-
repeat, ng-click, etc.
1 <tr ng-repeat="item in items">!
2 <td> {{ item.name }} - {{ item.price | currency }} </td>!
3 </tr>!
What to do?
• Set up the settings path for your js assets
• Created a 'static' html site and serve with Django’s

TemplateView
• Create a sample js array to test your Angular setup
• Created a controller to serve 'static' data
Arhhh, it does’t work!
Step #4
Use {% verbatim %}
{{ isn’t {{
• Django and AngularJS use the same variable tag
• Django > 1.4: Use {% verbatim %} environment
• Django < 1.5: Use code here
1 // use {$ variable $} in your template!
2 // from http://django-angular.readthedocs.org/en/latest/integration.!
3 html!
4 !
5 var my_app = angular.module('MyApp').config(function(!
6 $interpolateProvider) {!
7 $interpolateProvider.startSymbol('{$');!
8 $interpolateProvider.endSymbol('$}');!
9 });!
Step #5
Make AngularJS talk 

to your API
What to do?
• Install angular-resource with 

`bower install angular-resource --save`
• Create the AngularJS in services.js and configure
your API endpoints (if needed)
• Make the Angular controller load the data

use query() for lists, use get() for single objects
• Display the list in the html page
Sample code
1 var fruitServices = angular.module('fruitServices', ['ngResource']);!
2 fruitServices.factory('FruitLocationService', ['$resource',!
3 function($resource){!
4 return $resource('api/', {}, {!
5 query: {method:'GET', params:{}, isArray: true}!
6 });!
7 }!
8 ]);!
• ngResource loaded, $resource becomes available
• Notice `$resource (‘api/’, {}, {…});`
• Configure more API methods here, e.g. PUT,
DELETE, etc., if needed
Step #6
Take full advantage of the
Django REST Framework
Thoughts
• Use DRF Authentication methods
• Use Object Persmissions
• Use the serializer to the full extend

e.g. serializers.RelatedField(source=‘fruit_type’)
Step #7
Use $promise,

but don’t promise too much
Example
Thoughts
• Encapsulate data-related code with $promise
• Code will be executed when data is returned from
the API
1 FruitLocationService.query().$promise.then(!
2 function (response) {!
3 response.forEach(function(location){!
4 $scope.markers.push({!
5 lat: location.latitude,!
6 lng: location.longitude!
7 });!
8 });!
9 console.log($scope.markers);!
10 }!
11 );!
Step #8
Make your form 

talk to your API
What to do?
• Bind your form data with Angular’s ng-model
• Check your API service config and see if the
trailing slash doesn’t get eliminated
• Set up your authentication classes for the Django
REST framework
1 # Required for POST/PUT requests by the Django REST Framework!
2 REST_FRAMEWORK = {!
3 'DEFAULT_AUTHENTICATION_CLASSES': []!
4 }!
Step #9
Clean up your settings.py
What to do?
• Make Django lightweight
• Remove unnecessary middleware and packages
• Check if you still need i18n and l18n support

Turn it off if you can
Step #10
Document your API
What to do?
• Once you project is running, try to document the API
• Django REST Swagger is an option
Small Hints
Use AngularJS
Constants …
1 angular.module('myApp')!
2 .constant('settings', {!
3 // mimic the Django STATIC_URL variable!
4 STATIC_URL: '/static/'!
5 });!
Decide!
urls.py vs. ng-route
What about 

site performance?
Then why using
Django?
Is that the end of
Django?
Vielen Dank.
hannes.hapke@gmail.com
@hanneshapke

hanneshapke.github.io
Resources
• PyDanny comments on JS and Django: https://pydanny-event-notes.readthedocs.org/en/
latest/DjangoConEurope2013/javascript_django.html
• Lightweight Django: 

http://shop.oreilly.com/product/0636920032502.do#
• Using Tasty-pie: 

http://glynjackson.org/weblog/entry/django-angular.html
• Django, Angular and Authentication: http://richardtier.com/2014/03/15/authenticate-
using-django-rest-framework-endpoint-and-angularjs/
• How the Django REST framework changed my life: http://www.ngenworks.com/blog/how-
django-rest-framework-changed-my-life

More Related Content

What's hot

High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
Julien Lecomte
 
Django
DjangoDjango
Django
Kangjin Jun
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
Marc Grabanski
 
Djangocon 2014 angular + django
Djangocon 2014 angular + djangoDjangocon 2014 angular + django
Djangocon 2014 angular + django
Nina Zakharenko
 
django Forms in a Web API World
django Forms in a Web API Worlddjango Forms in a Web API World
django Forms in a Web API World
Tareque Hossain
 
Django for Beginners
Django for BeginnersDjango for Beginners
Django for Beginners
Jason Davies
 
Django Heresies
Django HeresiesDjango Heresies
Django Heresies
Simon Willison
 
HTML 5 & CSS 3
HTML 5 & CSS 3HTML 5 & CSS 3
HTML 5 & CSS 3
Kevin van Dijk
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
Ronald Huereca
 
API Design & Security in django
API Design & Security in djangoAPI Design & Security in django
API Design & Security in django
Tareque Hossain
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
osa_ora
 
Django REST Framework
Django REST FrameworkDjango REST Framework
Django REST Framework
Load Impact
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
dynamis
 
Geotalk presentation
Geotalk presentationGeotalk presentation
Geotalk presentation
Eric Palakovich Carr
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
 
Aligning Ember.js with Web Standards
Aligning Ember.js with Web StandardsAligning Ember.js with Web Standards
Aligning Ember.js with Web Standards
Matthew Beale
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Pablo Godel
 
Django
DjangoDjango
Writing Pluggable Software
Writing Pluggable SoftwareWriting Pluggable Software
Writing Pluggable Software
Tatsuhiko Miyagawa
 
Django Architecture Introduction
Django Architecture IntroductionDjango Architecture Introduction
Django Architecture Introduction
Haiqi Chen
 

What's hot (20)

High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
Django
DjangoDjango
Django
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Djangocon 2014 angular + django
Djangocon 2014 angular + djangoDjangocon 2014 angular + django
Djangocon 2014 angular + django
 
django Forms in a Web API World
django Forms in a Web API Worlddjango Forms in a Web API World
django Forms in a Web API World
 
Django for Beginners
Django for BeginnersDjango for Beginners
Django for Beginners
 
Django Heresies
Django HeresiesDjango Heresies
Django Heresies
 
HTML 5 & CSS 3
HTML 5 & CSS 3HTML 5 & CSS 3
HTML 5 & CSS 3
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
 
API Design & Security in django
API Design & Security in djangoAPI Design & Security in django
API Design & Security in django
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
 
Django REST Framework
Django REST FrameworkDjango REST Framework
Django REST Framework
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
 
Geotalk presentation
Geotalk presentationGeotalk presentation
Geotalk presentation
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
Aligning Ember.js with Web Standards
Aligning Ember.js with Web StandardsAligning Ember.js with Web Standards
Aligning Ember.js with Web Standards
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
 
Django
DjangoDjango
Django
 
Writing Pluggable Software
Writing Pluggable SoftwareWriting Pluggable Software
Writing Pluggable Software
 
Django Architecture Introduction
Django Architecture IntroductionDjango Architecture Introduction
Django Architecture Introduction
 

Similar to Create responsive websites with Django, REST and AngularJS

Angularjs
AngularjsAngularjs
Angularjs
Ynon Perek
 
End to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJSEnd to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJS
Gil Fink
 
I18n of java script
I18n of java scriptI18n of java script
I18n of java script
Junichi Shinohara
 
AngularJS One Day Workshop
AngularJS One Day WorkshopAngularJS One Day Workshop
AngularJS One Day Workshop
Shyam Seshadri
 
Play Framework workshop: full stack java web app
Play Framework workshop: full stack java web appPlay Framework workshop: full stack java web app
Play Framework workshop: full stack java web app
Andrew Skiba
 
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure FunctionsEuropean Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
Sébastien Levert
 
Untangling spring week11
Untangling spring week11Untangling spring week11
Untangling spring week11
Derek Jacoby
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
Jussi Pohjolainen
 
SharePoint Framework, Angular and Azure Functions
SharePoint Framework, Angular and Azure FunctionsSharePoint Framework, Angular and Azure Functions
SharePoint Framework, Angular and Azure Functions
Sébastien Levert
 
SharePoint Fest Seattle - SharePoint Framework, Angular & Azure Functions
SharePoint Fest Seattle - SharePoint Framework, Angular & Azure FunctionsSharePoint Fest Seattle - SharePoint Framework, Angular & Azure Functions
SharePoint Fest Seattle - SharePoint Framework, Angular & Azure Functions
Sébastien Levert
 
Django Girls Tutorial
Django Girls TutorialDjango Girls Tutorial
Django Girls Tutorial
Kishimi Ibrahim Ishaq
 
Building a Single Page Application with VueJS
Building a Single Page Application with VueJSBuilding a Single Page Application with VueJS
Building a Single Page Application with VueJS
danpastori
 
Akash rajguru project report sem v
Akash rajguru project report sem vAkash rajguru project report sem v
Akash rajguru project report sem v
Akash Rajguru
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Matt Raible
 
Angular js
Angular jsAngular js
Angular js
Mauro Servienti
 
Untangling - fall2017 - week 9
Untangling - fall2017 - week 9Untangling - fall2017 - week 9
Untangling - fall2017 - week 9
Derek Jacoby
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and Gaelyk
Guillaume Laforge
 
SharePoint Saturday New York 2017 - SharePoint Framework, Angular and Azure F...
SharePoint Saturday New York 2017 - SharePoint Framework, Angular and Azure F...SharePoint Saturday New York 2017 - SharePoint Framework, Angular and Azure F...
SharePoint Saturday New York 2017 - SharePoint Framework, Angular and Azure F...
Sébastien Levert
 
REST Easy with Django-Rest-Framework
REST Easy with Django-Rest-FrameworkREST Easy with Django-Rest-Framework
REST Easy with Django-Rest-Framework
Marcel Chastain
 
AngularJs presentation
AngularJs presentation AngularJs presentation
AngularJs presentation
Phan Tuan
 

Similar to Create responsive websites with Django, REST and AngularJS (20)

Angularjs
AngularjsAngularjs
Angularjs
 
End to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJSEnd to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJS
 
I18n of java script
I18n of java scriptI18n of java script
I18n of java script
 
AngularJS One Day Workshop
AngularJS One Day WorkshopAngularJS One Day Workshop
AngularJS One Day Workshop
 
Play Framework workshop: full stack java web app
Play Framework workshop: full stack java web appPlay Framework workshop: full stack java web app
Play Framework workshop: full stack java web app
 
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure FunctionsEuropean Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
 
Untangling spring week11
Untangling spring week11Untangling spring week11
Untangling spring week11
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
SharePoint Framework, Angular and Azure Functions
SharePoint Framework, Angular and Azure FunctionsSharePoint Framework, Angular and Azure Functions
SharePoint Framework, Angular and Azure Functions
 
SharePoint Fest Seattle - SharePoint Framework, Angular & Azure Functions
SharePoint Fest Seattle - SharePoint Framework, Angular & Azure FunctionsSharePoint Fest Seattle - SharePoint Framework, Angular & Azure Functions
SharePoint Fest Seattle - SharePoint Framework, Angular & Azure Functions
 
Django Girls Tutorial
Django Girls TutorialDjango Girls Tutorial
Django Girls Tutorial
 
Building a Single Page Application with VueJS
Building a Single Page Application with VueJSBuilding a Single Page Application with VueJS
Building a Single Page Application with VueJS
 
Akash rajguru project report sem v
Akash rajguru project report sem vAkash rajguru project report sem v
Akash rajguru project report sem v
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
Angular js
Angular jsAngular js
Angular js
 
Untangling - fall2017 - week 9
Untangling - fall2017 - week 9Untangling - fall2017 - week 9
Untangling - fall2017 - week 9
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and Gaelyk
 
SharePoint Saturday New York 2017 - SharePoint Framework, Angular and Azure F...
SharePoint Saturday New York 2017 - SharePoint Framework, Angular and Azure F...SharePoint Saturday New York 2017 - SharePoint Framework, Angular and Azure F...
SharePoint Saturday New York 2017 - SharePoint Framework, Angular and Azure F...
 
REST Easy with Django-Rest-Framework
REST Easy with Django-Rest-FrameworkREST Easy with Django-Rest-Framework
REST Easy with Django-Rest-Framework
 
AngularJs presentation
AngularJs presentation AngularJs presentation
AngularJs presentation
 

More from Hannes Hapke

PDXPortland - Dockerize Django
PDXPortland - Dockerize DjangoPDXPortland - Dockerize Django
PDXPortland - Dockerize Django
Hannes Hapke
 
Introduction to Convolutional Neural Networks
Introduction to Convolutional Neural NetworksIntroduction to Convolutional Neural Networks
Introduction to Convolutional Neural Networks
Hannes Hapke
 
Introduction to Neural Networks - Perceptron
Introduction to Neural Networks - PerceptronIntroduction to Neural Networks - Perceptron
Introduction to Neural Networks - Perceptron
Hannes Hapke
 
PyDX Presentation about Python, GeoData and Maps
PyDX Presentation about Python, GeoData and MapsPyDX Presentation about Python, GeoData and Maps
PyDX Presentation about Python, GeoData and Maps
Hannes Hapke
 
Share your code with the Python world by
 creating pip packages
Share your code with the Python world by
 creating pip packagesShare your code with the Python world by
 creating pip packages
Share your code with the Python world by
 creating pip packages
Hannes Hapke
 
Python Ecosystem for Beginners - PyCon Uruguay 2013
Python Ecosystem for Beginners - PyCon Uruguay 2013Python Ecosystem for Beginners - PyCon Uruguay 2013
Python Ecosystem for Beginners - PyCon Uruguay 2013
Hannes Hapke
 

More from Hannes Hapke (6)

PDXPortland - Dockerize Django
PDXPortland - Dockerize DjangoPDXPortland - Dockerize Django
PDXPortland - Dockerize Django
 
Introduction to Convolutional Neural Networks
Introduction to Convolutional Neural NetworksIntroduction to Convolutional Neural Networks
Introduction to Convolutional Neural Networks
 
Introduction to Neural Networks - Perceptron
Introduction to Neural Networks - PerceptronIntroduction to Neural Networks - Perceptron
Introduction to Neural Networks - Perceptron
 
PyDX Presentation about Python, GeoData and Maps
PyDX Presentation about Python, GeoData and MapsPyDX Presentation about Python, GeoData and Maps
PyDX Presentation about Python, GeoData and Maps
 
Share your code with the Python world by
 creating pip packages
Share your code with the Python world by
 creating pip packagesShare your code with the Python world by
 creating pip packages
Share your code with the Python world by
 creating pip packages
 
Python Ecosystem for Beginners - PyCon Uruguay 2013
Python Ecosystem for Beginners - PyCon Uruguay 2013Python Ecosystem for Beginners - PyCon Uruguay 2013
Python Ecosystem for Beginners - PyCon Uruguay 2013
 

Recently uploaded

BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
Priyanka Aash
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
Baishakhi Ray
 
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
Priyanka Aash
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
SubhamMandal40
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024
Toru Wonyoung Choi
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
David Wilson
 

Recently uploaded (20)

BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
 
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
 

Create responsive websites with Django, REST and AngularJS

  • 1. Making Django sites more responsive with REST and AngularJS August 27th, 2014
  • 4. A regular Django site Github: https://github.com/hanneshapke/fruitloop_django
  • 5. A Django site using REST and AngularJS Github: https://github.com/hanneshapke/fruitloop_angular
  • 8. The Python heroes are 
 working on a fix PEP 3156 ! http://python-notes.curiousefficiency.org/en/latest/pep_ideas/async_programming.html
  • 9. But what is the solution in the mean time?
  • 11. Don’t change your project … • … because it is hip • Creates new and larger code base, time consuming • Requires a different eco system • Do it if your Django site should become responsive and more user-friendly
  • 12. If you still think it’s a good idea, here are the steps.
  • 13. Step #1 Create an API endpoint to your Django model
  • 14. REST • Representational state transfer • Django REST Framework, tasty-pie
 PyDanny’s Choosing an API Framework for Django • Django REST Framework with GIS support • Django REST Framework 3 Kickstarter: £32,650
  • 15. What to do? • `pip install djangorestframework` • Add to your settings.py • Create a REST serializers for your models • Create API views for your serializers • Update your urls.py
  • 17. That’s it with Django.
  • 19. Step #2 Set up your js environment and install AngularJS
  • 20. What? A new eco system!
 Based on node.js?
  • 21. Bower.io • Package manager for front-end js • Works like pip, but it’s pip, can be configured • Install it with `npm install -g bower` • Run `bower init` • Install packages: 
 `bower install [package] --save`
  • 22. What to do? • Created a .bowerrc file to point at the js assets folder of the django project
 
 • Installed the angular core package with 
 `bower install angular --save` • Bower creates a bower.json file similar to your requirements.txt from pip 1 {! 2 "directory": "fruitloop_angular/assets/js/",! 3 "json": "bower.json"! 4 }!
  • 23. Step #3 Create a 
 static AngularJS site
  • 24. 30 second Intro to AngularJS • Angular offers
 Controllers - Changes site behaviour
 Services - Provides data access (e.g. REST)
 Directives - Create your own DOM elements • Angular offers DOM attributes: ng-show, ng- repeat, ng-click, etc. 1 <tr ng-repeat="item in items">! 2 <td> {{ item.name }} - {{ item.price | currency }} </td>! 3 </tr>!
  • 25. What to do? • Set up the settings path for your js assets • Created a 'static' html site and serve with Django’s
 TemplateView • Create a sample js array to test your Angular setup • Created a controller to serve 'static' data
  • 27. Step #4 Use {% verbatim %}
  • 28. {{ isn’t {{ • Django and AngularJS use the same variable tag • Django > 1.4: Use {% verbatim %} environment • Django < 1.5: Use code here 1 // use {$ variable $} in your template! 2 // from http://django-angular.readthedocs.org/en/latest/integration.! 3 html! 4 ! 5 var my_app = angular.module('MyApp').config(function(! 6 $interpolateProvider) {! 7 $interpolateProvider.startSymbol('{$');! 8 $interpolateProvider.endSymbol('$}');! 9 });!
  • 29. Step #5 Make AngularJS talk 
 to your API
  • 30. What to do? • Install angular-resource with 
 `bower install angular-resource --save` • Create the AngularJS in services.js and configure your API endpoints (if needed) • Make the Angular controller load the data
 use query() for lists, use get() for single objects • Display the list in the html page
  • 31. Sample code 1 var fruitServices = angular.module('fruitServices', ['ngResource']);! 2 fruitServices.factory('FruitLocationService', ['$resource',! 3 function($resource){! 4 return $resource('api/', {}, {! 5 query: {method:'GET', params:{}, isArray: true}! 6 });! 7 }! 8 ]);! • ngResource loaded, $resource becomes available • Notice `$resource (‘api/’, {}, {…});` • Configure more API methods here, e.g. PUT, DELETE, etc., if needed
  • 32. Step #6 Take full advantage of the Django REST Framework
  • 33. Thoughts • Use DRF Authentication methods • Use Object Persmissions • Use the serializer to the full extend
 e.g. serializers.RelatedField(source=‘fruit_type’)
  • 34. Step #7 Use $promise,
 but don’t promise too much
  • 36. Thoughts • Encapsulate data-related code with $promise • Code will be executed when data is returned from the API 1 FruitLocationService.query().$promise.then(! 2 function (response) {! 3 response.forEach(function(location){! 4 $scope.markers.push({! 5 lat: location.latitude,! 6 lng: location.longitude! 7 });! 8 });! 9 console.log($scope.markers);! 10 }! 11 );!
  • 37. Step #8 Make your form 
 talk to your API
  • 38. What to do? • Bind your form data with Angular’s ng-model • Check your API service config and see if the trailing slash doesn’t get eliminated • Set up your authentication classes for the Django REST framework 1 # Required for POST/PUT requests by the Django REST Framework! 2 REST_FRAMEWORK = {! 3 'DEFAULT_AUTHENTICATION_CLASSES': []! 4 }!
  • 39. Step #9 Clean up your settings.py
  • 40. What to do? • Make Django lightweight • Remove unnecessary middleware and packages • Check if you still need i18n and l18n support
 Turn it off if you can
  • 42. What to do? • Once you project is running, try to document the API • Django REST Swagger is an option
  • 44. Use AngularJS Constants … 1 angular.module('myApp')! 2 .constant('settings', {! 3 // mimic the Django STATIC_URL variable! 4 STATIC_URL: '/static/'! 5 });!
  • 46. What about 
 site performance?
  • 48. Is that the end of Django?
  • 50. Resources • PyDanny comments on JS and Django: https://pydanny-event-notes.readthedocs.org/en/ latest/DjangoConEurope2013/javascript_django.html • Lightweight Django: 
 http://shop.oreilly.com/product/0636920032502.do# • Using Tasty-pie: 
 http://glynjackson.org/weblog/entry/django-angular.html • Django, Angular and Authentication: http://richardtier.com/2014/03/15/authenticate- using-django-rest-framework-endpoint-and-angularjs/ • How the Django REST framework changed my life: http://www.ngenworks.com/blog/how- django-rest-framework-changed-my-life