Model–view–controller (MVC) is a software design pattern commonly used for developing user interfaces. It is used to separate internal representations of information from the ways information is presented to and accepted from the user.
Model is where the application’s data objects are stored. The model doesn’t know anything about views and controllers.
View is what's presented to the users and how users interact with the app. The view is made with HTML, CSS, JavaScript and often templates.
The controller is the decision maker and the glue between the model and view. The controller updates the view when the model changes. It also adds event listeners to the view and updates the model when the user manipulates the view.
Server side MVC vs Client side MVC
For most of the history of browsers, server side mvc has been used . The HTML is built on the server and sent to the browser. In client side mvc the server only needs to handle api calls from the client. Very similar to the way a native client would make api calls to back end. client side mvc frameworks like angular create SPAs where a single html document is served to the client which is then can dynamically rewritten on the client browser based on data received from the server via api calls.
client side MVC frameworks like angular have become popular because
- improved javascripts framewroks make coding in javascript easy
- mobile devices have become more powerful with better cpu and memory and hence mobile can take on more work !
Advantages of client side MVC frameworks
- Potential improvment of server side performance as the server does not need to create the page. It will only serve static files and respond to api calls
- Front-end is (almost) completely decoupled from the back-end. With client side rendering, browser is an API consumer similar to the way native Android, iPhone or desktop applications are
Disadvantages of client side MVC frameworks
- Potentially slower page rendering as more dom manupulations are involved.
- Increased load on client becuase of page rendering and watching for data changes.
- SEO issues . Web crawlers hav issues dealing with SPAs how ever this can be handled by pre rendering. Read more here https://medium.com/dvt-engineering/angular-universal-server-side-rendering-and-pre-rendering-for-angular-9-applications-f311e8f545bb.