Talk at Python Ireland meetup July 2018

1. The Role of Python in SPAs
(Single-Page Applications)
David Gibbons
Python Ireland Meetup
July 2018

2. Software engineer at OpenApp.
Working with Python for over six years, previously with Cylon and Ammeon.
Server and client-side Web development - Linux, Postgres, Python, JavaScript, CSS, HTML.
Based on customer requirements, create bespoke Web applications.
About Me
2
@davgibbs
@davgibbs

3. About OpenApp
Founded in 2002, currently employ 40 staff.
Web applications using Python for Healthcare industry.
Main areas:
● Patient Registries
● Clinical Patient Management Systems - European Reference Network
● Geo Spatial Analytics
● Health Data Analytics
Always interested in interesting CVs (developers, PMs, QA and test automation, etc).
hr@openapp.ie
3

4. About Talk
Python on the Web
Introduction to SPAs
Python SPA Architecture
“Movie Gallery” Application
API Design for SPA
Demo
4

5. Python on the Web
5

6. Python on the Web
Simplicity and Scalability.
Much built-in functionality and extension frameworks.
Many Web companies including:
6
https://stackshare.io/

7. Python Developer Survey October 2017
9,500 respondents in 150 countries.
50% said also use JavaScript and 49% also use HTML/CSS.
The primary type of development done by Python developers:
7

8. Introduction to SPAs
8

9. What is a SPA?
9
SPAs (Single-Page Applications) are Web applications that load a single HTML page and
dynamically update that page as the user interacts with the application.

10. SPA in a nutshell
No Browser refreshes
- Views are portions of the DOM (Document Object Model) that make up screen.
Presentation logic in the client
- Combining HTML template and data is done in the client.
Server transactions
- Only data is sent and received during transactions after initial load.
10

11. 11

12. 12

13. SPA Advantages
User experience - no full page reload means faster page load after the initial page load. Less
‘flicker’ during transitions.
Decoupled presentation layer - allows client-side and server-side code to be maintained and tested
separately.
13

14. SPA Advantages and Disadvantages
User experience - no full page reload means faster page load after the initial page load. Less
‘flicker’ during transitions
Decoupled presentation layer - allows client-side and server-side code to be maintained and tested
separately
SEO - Web crawlers, used by search engines, have more difficulty analysing pages created
dynamically.
JavaScript dependency - needs to be enabled.
14

15. Screen Views
15
Views are swapped in and out of HTML container div. For example “Home” and “About” content.

16. Screen Regions
16
Divide the screen into regions with associated an associated view.

17. Screen Regions - Gmail
17
Header region
Content
region
Sidebar
region

18. AJAX - Core of SPAs
Asynchronous JavaScript and XML
It is a set of Web development techniques involving a means of unobtrusively requesting data
from the server, combined with JavaScript’s power to update the HTML DOM.
Makes use of XMLHttpRequest (XHR) API transfers data between web browser and server.
Term Ajax first publicly used in 2005 based on techniques in Google pages.*
18
*http://adaptivepath.org/ideas/ajax-new-approach-web-applications/

19. Python SPA Architecture
19

20. Set up a Python API which can be queried by client-side JavaScript code.
Python Frameworks: handle database integration, session management and template generation.
Help organise code.
SPA Application Programming Interface (API)
20
Client Server
API
JSON
AJAX

21. ● RESTful API creation (Django REST framework)
● Sending Email
● CSV creation
● PDF creation (Reportlab)
● Asynchronous tasks (Celery)
● WebSockets (Channels)
● Complex computation (NumPy)
Server-side tasks
21

22. “Movie Gallery” Application
22

23. “Movie Gallery” Application
Built to demonstrate SPA concepts.
Movie information stored along with an image and rating.
Can search and paginate through list of movies.
Login to add, edit and delete movies. If not authenticated, then view-only movies.
Python (Django) on the server-side and JavaScript (AngularJS) on client-side.
23

24. 24

25. 25
Screen Regions
“Header” and “Footer” regions stay the same, while “Content” region is updated:

26. API Design for SPA
26

27. 27

28. movies/models.py
from django.core.validators import MaxValueValidator
from django.db import models
from django.contrib.auth.models import User
class MovieGenre(models.Model):
name = models.CharField(max_length=100, unique=True)
class Movie(models.Model):
title = models.CharField(max_length=100, unique=True)
summary = models.TextField(max_length=400, blank=True, default='')
release_year = models.PositiveIntegerField(default=2016)
director = models.CharField(max_length=100, blank=True, default='')
genre = models.ForeignKey(MovieGenre, related_name='movie_genre', default=1)
image = models.ImageField(upload_to='movies/', default='movies/Movie.jpg')
rating = models.PositiveIntegerField(validators=[MaxValueValidator(5)], default=3)
created_date = models.DateTimeField(auto_now_add=True)
user = models.ForeignKey(User, on_delete=models.CASCADE, default=1)
28

29. spa_movies/urls.py
from django.conf import settings
from django.conf.urls import url, include, static
from django.contrib import admin
from django.views.generic import TemplateView
from movies.urls import router
urlpatterns = [
url(r'^$', TemplateView.as_view(template_name='movies/index.html')),
url(r'^api/', include(router.urls)),
url(r'^rest-auth/', include('rest_auth.urls')),
url(r'^admin/', admin.site.urls)
] + static.static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
29
Define the root URLs for the application - example.com will direct to movies/index.html.

30. RESTful API
In order to create a testable and maintainable API, a RESTful API was setup for the JavaScript
client to query.
REST (REpresentational State Transfer) is an architecture style. URLs built around each resource
(movies, etc).
An architecture that uses a 4 main HTTP actions: GET, POST, PUT, DELETE.
Django REST framework used - browsable API, good documentation.
To handle the authentication, django-rest-auth library is used - default Session Authentication.
30

31. URL HTTP Verb Result
1 /api/movies GET Returns all movies
2 /api/movies POST Create a new movie
3 /api/movies/:id GET Returns single movie
4 /api/movies/:id PUT Updates an existing movie
5 /api/movies/:id DELETE Deletes an existing movie
6 /api/movie-genres GET Returns all movie genres
7 /api/user-status/ GET Returns true if user logged-in
8 /rest-auth/login/ POST Empty or error message
9 /rest-auth/user/ GET Returns user info
10 /rest-auth/logout/ POST Logs user out 31

32. movies/serializers.py
from rest_framework import serializers
from .models import MovieGenre, Movie
class MovieGenreSerializer(serializers.ModelSerializer):
class Meta:
model = MovieGenre
fields = ('id', 'name')
class MovieSerializer(serializers.ModelSerializer):
genre_obj = MovieGenreSerializer(source='genre', read_only=True)
user_obj = UserSerializer(source='user', read_only=True)
class Meta:
model = Movie
fields = ('id', 'title', 'summary', 'release_year', 'director', 'genre',
'genre_obj', 'image', 'rating', 'user', 'user_obj')
32
“ModelSerializer” will generate a set of fields and validators based on the model:

33. movies/views.py
“ModelViewSet” combines the logic for a set of related views in a single class for models
from rest_framework import viewsets, permissions
from rest_framework.decorators import permission_classes
from .permissions import IsOwnerOrReadOnly, IsReadOnly
from .serializers import MovieGenreSerializer, MovieSerializer
from .models import Movie, MovieGenre
class MovieGenreViewSet(viewsets.ModelViewSet):
permission_classes = (IsReadOnly, )
queryset = MovieGenre.objects.all().order_by('name')
serializer_class = MovieGenreSerializer
class MovieViewSet(viewsets.ModelViewSet):
permission_classes = (permissions.IsAuthenticatedOrReadOnly, IsOwnerOrReadOnly)
queryset = Movie.objects.all().order_by('title')
serializer_class = MovieSerializer
33

34. movies/urls.py
The “DefaultRouter” class is imported and used to create standard APIs.
Get and CRUD (CReate, Update and Delete) URLs for movies and movies genre models set up:
from rest_framework.routers import DefaultRouter
from . import views
router = DefaultRouter(trailing_slash=False)
router.register(r'movies-genres', views.MovieGenreViewSet)
router.register(r'movies', views.MovieViewSet)
34

35. Demo
35

36. 36
Testing
“Code without tests is broken by design”
- Jacob Kaplan-Moss, one of original Django developers

37. 37
Testing
“Code without tests is broken by design”
- Jacob Kaplan-Moss, one of original Django developers
Automated testing allows easier code maintenance.
Use the Django REST framework “APIClient” class to create client used to run tests.
Run code coverage tool at same time to test Python code coverage:
coverage3 run --source='./apps' --omit='*migrations*' apps/manage.py test movies

38. movies/tests.py
from django.test import TestCase
from rest_framework.test import APIClient
from movies.models import Movie
class MovieTestCase(TestCase):
def test_add_movie(self):
self.assertEqual(len(Movie.objects.all()), 0)
user = User.objects.create_user('admin', 'myemail@test.com', 'password123')
client = APIClient()
client.login(username='admin', password='password123')
response = client.post('/api/movies', {'title': 'Lion King',
'summary': 'Lion Movie',
'release_year': '1994',
'rating': 5,
'director': 'Roger Allers'})
self.assertEqual(response.status_code, 201)
self.assertEqual(len(Movie.objects.all()), 1)
38

39. Summary
Python on the Web
Introduction to SPAs, dividing screen into regions and views, use of AJAX.
Python SPA architecture and server-side tasks.
“Movie Gallery” application with Python API to demo SPA.
Built a powerful and testable API with very few lines of code.
SPA JavaScript code still needed.
Complete code available at https://github.com/davgibbs/movies-spa
39

40. References
1. SPA Design and Architecture. Understanding single-page
web applications by Emmit A. Scott, Jr.:
www.manning.com/books/spa-design-and-architecture
2. Sitepoint: Creating a CRUD App in Minutes with
Angular’s $resource:
ww.sitepoint.com/creating-crud-app-minutes-angulars-reso
urce/
3. Single-Page Applications: Build Modern, Responsive Web
Apps with ASP.NET:
https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
4. Python Developers Survey 2017 Results:
https://www.jetbrains.com/research/python-developers-sur
vey-2017/
40

41. Thank you!
41