How to structure an App one back-end & Multiples front-end

Question

I have a big challenge to solve where I have some ideas but I don't know what would be the best solution.

Basically I have to develop an application where I have to develop a back-end(web service) and Multiples front-end. The core for all the applications is going to be the same, same requests and functionality.

What is going to change is the css, some wording and display in some cases different data(but not that different)

so far I have been thinking in do a main application for the front-end(ex. using bootstrap) where adding a css file to change the style and a js file with rules to display different data and for the different wording.

But how I can really do it? how can I prevent extra work in the future to do changes in each website(front-end), how can I include the rules properly. Also I dont want to create 1 front-end and add conditions(it's a bad practice and I'll have a lot of problem in the future)

Note: I'll use c# for the web service and angular 2 for the front-end (the technologies are mandatory because my company no way to change it). Probably angular 2 provide me a good way to do what I am thinking.

Answer 1

If you're working on one platform that containing one backend and multiple front-end, I think that's easy using RESTful.

For example, if the first front-end application is for ADMINS and second front-end application is for simple USERS, you can differentiate by (login function for example):

front-end 1 call : /admins/login

front-end 2 call : /users/login

Each end point'll call a controller that can treate each case

Answer 2

The language doesn't matter, its how you organize the code. It doesn't even need to be two different languages or even written as a web service if the multiple frontends are hosted on the same web root.

What matters is a clear distinction between roles between the data models and the views models. For example, you need to build the frontend and backend for user registration and login. You would have the following:

• Data Model (with sql):
  • User
• Controller:
  • User Controller with functions for loginForm(), loginPost(), registerForm(), registerPost(), etc
• View Model:
  • Login Form
  • Registration Form
• Template files:
  • default
    • login.html
    • register.html
  • atlanta
    • login.html
    • register.html

All of the logic to load and manage a user is handled by the User Model, and the User Controller. Any task to render anything related to the user is delegated to the View Models, with the html template files generating most of the HTML with the exception of variable data (which is provided by the View Model).

Notice that there are two "themes" of template files... the "default" and the "altanta" theme. You base View Model will look for the current theme template file and if it cannot locate it, then it should fall back to the "default" file. This would allow you to customize ONLY the files required for the specific theme (such as any CSS, menus, headers, etc).

In this example there is clear distinction between the components, and this is called MVC.