Definition of model in frontend JS context

Question

I usually work backend development, where a model is defined as an in-memory representation of either some database query operation or internal, pre-initialized data fields. It is processed by controller or service methods and passed to the view for the user.

I'm also very familiar with jQuery, but have been struggling with callback hell and managing event bindings. This has led to some major code bloat and other issues.

I'm looking to use Backbone for a project to resolve the issues with jQuery. However, in a front end web development context, what exactly is a model?

Answer 1

A model in front end is a group of html elements which are bind to data. For eg: An album container can be seen as a model based on the friend's profile you visit. A list of elements can be bind two way (model to data and data to model) without any explicit call to change the behavior of the html elements. Usage of javascript frameworks would avoid these explicit calls. For eg: if an html element (say a div which has photos and videos section) depends on the user profile you select. Then we can model all these photos and videos section as a single model bind to a user-name and load them into container accordingly.

Answer 2

Well, a model can be anything, but all of them will be stored in the memory for the life-time of your JS application (end when users close the tabs/browser or reload it)

However, there are different kinds of model. One that represents the the data entity of the backend, and one that represent the data entity of the front-end only

For example, in backend you have User model, then in front-end, you will want to have User model as well and map to your backend through APIs (REST for instance). Then, in your front-end, you have something else that can be linked to User but should not be stored in the database such as user setting for the current session (although you can store it in db, it is better to store it in the client using local storage or other mean of client-side storage including cookies

To sum up, Model concept in front-end is pretty similar to that of backend, you can still apply your design patterns and various techniques in front-end