Observer Pattern & Debouncing

Overview

MantoMan app uses observer pattern and text field debouncing to enable fast real-time translation. We will discuss how we decided to use these patterns and techniques and what problems they solved.

Download on the App Store

Problems Encountered

1. Slow Translation Speed

• Since the real-time translation API was called every time the user entered a letter, there were inevitably too many requests to handle. This led to slow and interrupted translations.

2. Previous Results Were Ignored

• The system would disregard previous results, as users would want to translate the final sentence once they had finished typing. This meant that API calls were made unnecessarily.

Solutions

→ Observer Pattern + Text Field Debouncing

To solve these problems, we used the observer pattern and debouncing technique.

By applying the observer pattern and debouncing technique to a text field, we can observe changes in the text field (observer pattern) and only process changes that occur after a certain amount of time has elapsed during continuous input (debouncing).

This allows the system to reduce the burden on the user during sentence input and only perform translation work after the user has finished inputting.

What is the Observer Pattern?

The observer pattern is a design pattern that provides a way to notify other objects when the state of a particular object changes.

This pattern consists of two main components: “Subject” and “Observer”.

• “Subject” is an object that manages state. The subject plays the role of notifying the observer of state changes.
• “Observer” is an object that observes changes in the subject’s state. When the state of the subject changes, the observer performs the corresponding task.

To put it simply, the observer pattern is like a news notification system.

When a news agency (subject) publishes news, people who subscribe to it (observer) are notified. Similarly, in a program, the object (subject) that manages state notifies other objects (observer) of state changes.

What is Text Field Debouncing?

Debouncing is a technique that processes only the latest event among many events for a certain period of time. This is particularly useful when processing user input.

With debouncing, only changes that occur after a certain period of time has elapsed are processed.

For example, if a user enters ‘Hello’, an event (typing) occurs every time a letter is entered. By performing debouncing at intervals (e.g. every 10 seconds), you can reduce the number of queries sent to the API and ensure stability.

Debouncing is like adjusting too frequent news notifications.

For example, imagine a news agency publishing news every minute. Receiving all of these can be burdensome to subscribers.

By applying debouncing, you can selectively receive only the most important news among the news that comes every minute for a certain period of time (e.g. 10 minutes).

This is the actual code applied in the app in which the debounced text in ViewModel is initialized:

init() {
    $text
        .debounce(for: .seconds(0.1), scheduler: DispatchQueue.main)
        .sink(receiveValue: { [weak self] t in
            self?.debouncedText = t
        } )
        .store(in: &cancellable)
}