Web-development – Django – separation from the frontend (Templates)

If you look at the Model-Template-View triads, each distinct component and any intermediary component in between can be tested separately. Say you have a Foo model and need to add controllers for CRUD behavior in a simple and straightforward manner:

1. You unit test the Foo model to assert that the business logic is implemented.
2. You unit test FooForm to assert form.is_valid() is returning expected results for the inputs your tests supply directly.
3. You only need to assert that the class-based CRUD views are working with the Foo model and FooForm respectively.

In general, there's no extensive frontend testing happening in Django projects, especially those that utilize class-based views and unit test the views directly, you won't see any assertContains/assertNotContains tests at all, although the LiveServerTestCase is going to change that a bit, at least when it comes to asserting behavior for project's that aren't already writing JavaScript tests in one of the testing frameworks.

It's as if you have your backend hat on when your writing unit tests. If you want to add a success message to the CUD views, you'd assert that a success-level message has been added to the list of user's messages after a successful request, but you won't care whether that message is a part of the response or not. Similarly, we test that the context is populated with the correct Foo objects for a request, but we don't care if and how they're displayed.

And this is where Lettuce comes into play, especially if you want to test your application's behavior from a user's perspective. It's appropriate to work with the content of a response object and to ignore the underlying implementations that produced the response. Here you won't care whether or not there is a success-level message associated with a user, you'll just want to make sure it's there in the response and you won't care whether the appropriate Foo objects are in the context, you'll want to assert that their content is present in the response.

Quit thinking in terms of MVC. MVC alone only describes the interactions well if everything happens on the server-side. You need to think at a higher level of abstraction. For example, Data Layer (ex database), API layer (ex server-side), Client Layer (Webapp, IOS app, Android App).

A basic SPA works on the premise that the whole site runs on one big HTML file. Reloads don't require a round-trip to the server because you're basically showing/hiding different sections of code.

In practice that's not necessarily true because the framework (ex Angular) can pull template partials and data from URLs in the background. It sounds like you understand this much but can't figure out how concerns should be separated between server/client.

For templating, do it the same as you would in Django. Except, instead of loading the files from a local directory you fetch the partials from the server.

For generating views that include data you'll need to make a controller that can fetch the data and use it in the view partial. There are many ways to go about this but the most common is to simply create an API on the server-side that accepts data requests and responds with the results in JSON.

In MVC terms. The server and client will both still use models, views, and controllers:

On the server (ie the Data API). The models are the database/storage access classes. Instead of generating raw HTML the views will be used to format/serialize data for transfer. The controllers work out the messy details between the models and views.

On the client (ie the WebApp client). The models are the functions that handle fetching and deserializing data requests. The views are your html partials that get parsed into static HTML. The controllers /directives manage combining the two.

Can you still do HTML generation on the server-side? Of course. How much work you decide to do in the client vs server depends on your goals.

Then what's the benefit of client-side frameworks? If your goal is to create a SPA, then frameworks like Angular are a much more robust option than the alternitives which would consist of firing off a bunch of AJAX requests, then plugging it into the DOM using something like jQuery.

What's so special about client-side frameworks? Nothing really, they push the responsibility of HTML generation into the client. Instead of splitting HTML templating and dynamic manipulation between the client and server you can now do both in the client. It provides a cleaner separation of concerns and reduces load on the server.

If you need a data layer that can be accesses by multiple platforms (ex IOS, website, Android) then you've likely isolated the data requests into their own API already. If you have that done already, pushing the client-side code to the client makes sense since you're already doing that for the other platforms.

Simplifying the server to just a data layer makes life a simpler for those who develop on multiple platforms. Client-side frameworks made the process of fetching data and generating HTML dynamically on the client much easier. If your goal is to build a SPA, using a framework will provide a good scaffold to build on.

The major downside of client-side HTML generation is that it relies on JavaScript and most search engine webcrawlers are too dumb to use JavaScript. That means, if you have a content-heavy site you're going to have a bad time trying to get search engines to index your content. There are hybrid approaches to conditionally load content generated from the server to webcrawlers but they add another additional layer of complexity so the tradeoffs likely outweigh the benefits.