[Design Pattern] What is MVVM?

MVVM stands for Model-View-ViewModel. It is a design pattern that facilitates the separation of concerns in user interface development. MVVM is particularly prevalent in frameworks like Angular, Vue.js, and Knockout.js.

• Model: Represents the data and business logic of the application.

• View: Represents the user interface elements.

• ViewModel: Acts as an intermediary between the Model and the View. It exposes data from the Model to the View and contains the presentation logic.

---

How to use MVVM Pattern in Front-End?

// Model.jsx
class BookModel {
  constructor () {
    this.books = [
      {
        name: "Web Crawler Learning with Python",
        author: "Park"
      }, {
        name: "Building servers and clients with JavaScript",
        author: "Yu"
      }, {
        name: "Blockchain project",
        author: "Kim"
      }
    ]
  }

  add (book) {
    this.books.push(book)
  }

  remove (idx) {
    let temp = this.books[idx]

    this.books[idx] = this.books[this.books.length-1]
    this.books[this.books.length-1] = temp

    return this.books.pop()
  }

  update (idx, book) {
    this.books[idx] = book
  }

  get (idx) {
    return this.books[idx]
  }

  getAll () {
    return this.books
  }
}

export default BookModel

// ViewModel.jsx
class BookViewModel {
  constructor (model) {
    this.model = model
  }

  getAll () {
    return this.model.getAll()
  }

  get (idx) {
    return this.model.get(idx)
  }

  remove (idx) {
    return this.model.remove(idx)
  }
}

export default BookViewModel

// App.jsx (View)
import BookViewModel from './ViewModel'
import BookModel from './Model'

function BookView (props) {
  let books = props.viewModel.getAll()

  return (
    <>
      <div className="form">
        <input type="text" placeholder="Search"/>
        <button className="search">Search</button>
        <button className="create">Create</button>
      </div>

      <div className="list">
        <ul>
          {books.map((book, idx) => (
            <li key={idx}>
              <span>{book.author}-[{book.name}]</span>
              <button 
                onClick={() => props.viewModel.remove(idx)}
                style={{color: 'red'}}
              >
                Delete
              </button>
            </li>
          ))}
        </ul>
      </div>
    </>    
  );
}

function App() {
  const bookModel = new BookModel()
  const bookViewModel = new BookViewModel(bookModel)

  return (
    <>
      <BookView 
        viewModel={bookViewModel}
      />
    </>
  )
}

export default App;

---

Pros and Cons of using MVVM Pattern

• Pros

1. Separation of Concerns: MVVM promotes a clear separation between the presentation logic(ViewModel) and the user interface(View), enhancing code maintainability.

2. Testability: With MVVM, the ViewModel can be easily tested in isolation from the View, facilitating unit testing.

3. Reusability: ViewModels can be reused across different Views, promoting code reusability.

4. Enhanced Developer Experience: MVVM encourages a structured approach to front-end development, making it easier for developers to collaborate and maintain codebases.

• Cons

1. Learning Curve: Adopting MVVM may require a learning curve for developers who are unfamiliar with the pattern.

2. Overhead: Implementing MVVM may introduce additional overhead, especially in small or simple projects, leading to unnecessary complexity.