Here are the additional resources referenced in the lesson:
Single Page Application (SPA) Architecture
00:00 In the previous lesson, I showed you how to add actions to ViewSets. In the next two lessons, I’m going to run through a single-page application and how you could use the DRF to help you build one.
00:13 Single-page applications have become a popular way of building things on the web, and REST is a common protocol to be used with these SPAs. Single-page applications are split into a frontend and backend. Django can be used for traditional web or as the backend for an SPA. Your Python code on the server side includes managing any sort of business logic, and then you can use the Django ORM and database for storage. On the frontend side, there are plenty of frameworks out there to help you build SPAs. Vue, React, and Angular are some of the more popular ones.
01:01 The first will be a traditional web one that just lists a series of schedules, and then the second will be a wholly-contained timeline editor, which allows you to edit the timelines associated with those schedules.
django-bstrap-modals is a series of modal dialogs in Bootstrap and includes REST-specific dialog boxes. This one’s also available up on GitHub, but unlike
django-awl, this has only ever been used for prototypes.
Entry contains a description and a time length. There’s another Django app that’s responsible for the REST API. Inside of it, you’ll see
serializers.py, containing a serializer for each
views.py file containing a ViewSet for each
Entry, and then additionally, another view called
Entry object inherits from
This is what specifies the order of the entry inside of the timeline.
RankedModel has logic inside of it that ensures the ranks are consistent if one of them changes. This logic is done in an overridden
Unfortunately, the DRF’s update methods don’t actually call an object’s
.save(), so the side effects that are done as part of
RankedModel.save() method will not get called if you make a change to the rank through the REST API. So as a result, I’ve written a additional view called
change_rank(), which specifically calls the
Entry.save() method to ensure that the rank reordering happens properly.
04:45 That template contains HTML as well as the Vue.js components. The Vue.js components initialize, and then as part of the initialization, the view component will make a REST call to fetch the timeline that’s being edited.
05:33 Inside of the client application, there are a few things you can do. The first would be to add a new entry. When that is triggered, Vue.js calls a method on a form. That form is a Bootstrap modal form.
The method is
.show_create() takes a REST API URL—in this case, the one for
entries/—and some data for the entry that is to be created. The ID of the timeline and the rank are set by default, the ID of the timeline is the parent timeline for this page, and the rank is set by default to one more than the highest ranking item on the page at the moment.
The same form is used, but this time it calls a method called
.show_patch() takes two parameters: the URL of the object being edited—this would be the entry object inside of Vue.js that’s actually being edited and its
.url attribute—and then the data from the actual entry object.
.show_patch() shows the same form pre-populated with the data from the entry object.
The user can then make changes. When they save the form,
bsmodals makes a REST call. That REST call is to the entries object with the given ID, sending up the fields from the form and patching them on the server.
07:27 The REST call returns the resulting changed data and Vue.js is populated with the change and the change is reflected on the screen. The other possibility is one entry is dragged around on the screen, changing its order.
This is done through a library called Vue.Draggable. Vue.Draggable has a hook on it for the
onMove event. The function that is called in the
onMove event figures out what entry has been changed and calls through REST the
change_rank() call. This passes in the ID of the entry being changed and the new rank. That calls the specialty view that ensures that the
Entry.save() method gets called, which makes sure that all the ranks are set correctly.
And in this case, because multiple ranks may change, the
change_rank() view returns all of the entries for the timeline. Vue.js then updates its copy of it based on the JSON returned and then updates the screen.
08:30 I hope this gives you a little bit of a glimpse of how these things work and how you can quickly slap together some items with very little code on the server simply by using something like the REST APIs you’ve seen in this course.
Become a Member to join the conversation.