How do you create a class diagram for a SPA and a REST API?

Question

Context

I have created a SPA (Single Page Application) along with a REST API. Backbone.js was used to develop the SPA and Codeigniter was used for the server side implementation of the REST API.

Question

For a MVC application we could draw a single class diagram as usual. But how do you create a class diagram for a system that has a SPA and a REST API? Do you create two separate class diagrams for each of the applications or a single class diagram for both? If there is one diagram, what relationships/associations can be used to connect the SPA and REST API?

Answer 1

How class diagrams for server and client could be organized

1. The common class diagram is senseless if the components have no common classes.
2. It is very probably that you have some common classes, because client and server work with the same objects of the real world and appropriate classes should be the same. And every such class should have only one code realization, too. As these common classes will belong to the domain area (methods, usual for your theme), you could separate them all into the yet another package. So, you will have two intersecting components but three non-intersecting packages. You can draw that primitive package diagram, too.
3. If the class diagrams of the components are large, always make two (or more) of them, marking the common classes in some special way. (blue for classes common with component A, red for classes common with component B...).
4. Class diagrams are not intended to model the behaviour, such as calling the components and things. It would be a bad style. If you still want to write about the behavioral details important for understanding, do that in comments.
5. For modelling behavioral connections of the components, use communication or sequence diagrams.