Domain models in front end

Question

I have been reading about the Domain driven design lately but I rarely see it in the web applications(or I may have failed to google it), I think we now have enough complexity to deal with in web application too.

I need a way to keep my models and business logic clean and least coupled and framework/library agnostic. For example today I am using AngularJS and tomorrow I may switch the UI to ReactJS.

Having said that I am trying to learn this with a simple example. Suppose I am trying to create Quote application with the following features:

Given a Quote

1. Can be upvoted / downvoted.
2. Can be starred.
3. Can be created by User (Goes in the review Queue).
4. An user can share it via (Twitter, Facebook etc).

Given an User

When not logged:

5. Can see random quote.
6. Can upvote / downvote a quote.
7. Can search a Quote by Title or Author.

When logged in:

1. Can create a Quote.
2. Can star a quote.

I am interested in how the above requirements can be achieved in keeping UI and business logic clean and separate.

I am not an expert but at present I can come with these requirements which may well change in future.

Answer 1

You should implement MVC patterns both in the front-end and in the back-end(server side). For clean separation of responsibility and also team resources/expertise(api developers, UI developers), you can have the business logic exposed via REST APIs and the UI development using various client-side technologies (e.g angular, cordova, react, etc).

UI developers should be able to develop in isolation without the API. They will have to create their own Models, Views and Controllers (MVC). Similarly, API developers should be able to develop the business domain and expose the necessary operations (e.g CRUD) required by the business or the ubiquitous language. The API layer will have its own Models, Views and Controller.