The Role of Python in SPAs (Single-Page Applications)
0 likes1,838 views
The document discusses using Python to build single-page applications (SPAs). It introduces SPAs and how they work by loading a single HTML page and dynamically updating content via JavaScript. The speaker then outlines a Python-based SPA architecture using a Django REST API and frontend code. As an example, a movie application is presented that separates the API from the AngularJS frontend. The API uses the Django REST framework and is tested programmatically.
![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](https://image.slidesharecdn.com/theroleofpythoninspassingle-pageapplications-180715214849/85/The-Role-of-Python-in-SPAs-Single-Page-Applications-28-320.jpg)
![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.](https://image.slidesharecdn.com/theroleofpythoninspassingle-pageapplications-180715214849/85/The-Role-of-Python-in-SPAs-Single-Page-Applications-29-320.jpg)
The Role of Python in SPAs (Single-Page Applications)
- 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). [email protected] 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
- 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/
- 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
- 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', '[email protected]', '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