Challenge: Solution Review

This lesson will explain the solution to the problem from the last coding challenge.

We'll cover the following

Solution #

Press + to interact
class Applications{
    constructor(name, type){
        this.name = name
        this.type = type
    }
    display(){}
    displayMode(){}
}
class Mode{
    constructor(app){
        this.app = app
        this.lightMode = function(){
            this.app.setLightMode()
        }
        this.darkMode = function(){
            this.app.setDarkMode()
        }
    }
}
class Facebook extends Applications{
    constructor(name,type){
        super(name,type)
        this.mode = "light"
        this.setLightMode = function(){
            this.mode = "light"
        }
        this.setDarkMode = function(){
            this.mode = "dark"
        }
    }
    display(){
        console.log(`Welcome to Facebook for ${this.type}.`)
    }
    displayMode(){
        console.log(`You are using facebook in ${this.mode} mode.`)
    }
}
class WhatsApp extends Applications{
    constructor(name,type){
        super(name,type)
          this.setLightMode = function(){
            this.mode = "light"
        }
        this.setDarkMode = function(){
            this.mode = "dark"
        }
    }
    display(){
        console.log(`Welcome to Whatsapp for ${this.type}.`)
    }
    displayMode(){
        console.log(`You are using whatsapp in ${this.mode} mode.`)
    }    
}
const fb = new Facebook("Facebook", "Social Networking")
const mode = new Mode(fb)
mode.darkMode()
fb.displayMode() 
  
const whatsapp = new WhatsApp("Whatsapp", "Chatting")
const mode2  = new Mode(whatsapp)
mode2.lightMode()
whatsapp.displayMode()

Explanation #

Let’s start by looking at the code we had originally:

Press + to interact
class Applications{
    constructor(name, type){
        this.name = name
        this.type = type
    }
    display(){}
    displayMode(){}
}
class FacebookLightMode extends Applications{
    constructor(name,type){
        super(name,type)
    }
    display(){
        console.log(`Welcome to Facebook for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using facebook in light mode.")
    }
}
class FacebookDarkMode extends Applications{
    constructor(name,type){
        super(name,type)
    }
    display(){
        console.log(`Welcome to Facebook for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using facebook in dark mode.")
    }
}
class WhatsAppLightMode extends Applications{
    constructor(name,type){
        super(name,type)
    }
    display(){
        console.log(`Welcome to Whatsapp for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using whatsapp in light mode.")
    }    
}
class WhatsAppDarkMode extends Applications{
    constructor(name,type){
        super(name,type)
    }
    display(){
        console.log(`Welcome to Whatsapp for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using whatsapp in dark mode.")
    }    
}
const fbLight = new FacebookLightMode("Facebook", "Social Networking")
const whatsappDark = new WhatsAppDarkMode("Whatsapp", "Chatting")
fbLight.display()
fbLight.displayMode()
whatsappDark.display()
whatsappDark.displayMode()

As you can see, there is a parent class Applications. It has four child classes:

  • FacebookLightMode

  • FacebookDarkMode

  • WhatsAppLightMode

  • WhatsAppDarkMode

The definitions of these classes are simple. Apart from initializing the application name and type, each class also defines the following functions:

  • display

  • displayMode

Press + to interact
class FacebookLightMode extends Applications{
    //code..
    display(){
        console.log(`Welcome to Facebook for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using facebook in light mode.")
    }
}
class FacebookDarkMode extends Applications{
    //code...
    display(){
        console.log(`Welcome to Facebook for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using facebook in dark mode.")
    }
}
class WhatsAppLightMode extends Applications{
    //code..
    display(){
        console.log(`Welcome to Whatsapp for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using whatsapp in light mode.")
    }    
}
class WhatsAppDarkMode extends Applications{
    //code...
    display(){
        console.log(`Welcome to Whatsapp for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using whatsapp in dark mode.")
    }    
}

Each class has its definition of both these functions. display shows the type of application, and displayMode shows the mode.

So why should we apply the bridge pattern? In the code above, we had to make a different class for each mode, dark and light. Now imagine doing this for 1000 other applications. It would be better to have a separate interface for the modes of application. Here’s what we want to do:

Let’s check out its coding implementation so you can see the improvement in the code.

We start by creating a Mode class.

class Mode{
    constructor(app){
        this.app = app
        this.lightMode = function(){
            this.app.setLightMode()
        }
        this.darkMode = function(){
            this.app.setDarkMode()
        }
    }
}

You can pass an app object to this class and call the lightMode and darkMode on it. lightMode takes the app and calls the setLightMode function on it. darkModetakes the app and calls the setDarkMode function on it.

In our example, we are considering two applications whose modes we can set: Facebook and Whatsapp. Previously, we had two classes for each, one for dark mode and one for light mode. Since the Mode class is available to set the mode, we don’t need the separate classes.

In the modified version, we have a single Facebook and Whatsapp class.

class Facebook extends Applications{
  //code...
}

class WhatsApp extends Applications{
  //code...
}

These classes initialize a mode variable in their constructors. By default, the mode of the app is set to light.

class Facebook extends Applications{
  //code...
  this.mode = "light"
}

class WhatsApp extends Applications{
  //code...
  this.mode = "light"
}

Both apps contain additional methods:

  • setLightMode

    this.setLightMode = function(){
  this.mode = "light"
}

    Sets the mode to light.

  • setDarkMode

    this.setDarkMode = function(){
  this.mode = "dark"
}

    Sets the mode to dark.

When an app calls these methods, the mode of the app is set accordingly.

The display method is the same as before. The displayMode method has a minute modification:

displayMode(){
   console.log(`You are using whatsapp in ${this.mode} mode.`)
}

Instead of explicitly writing dark mode or light mode in the message as before, we use ${this.mode} to display the mode.

Now, setting the mode of an app is simple. We create an application, pass it to the Mode class, and call the required mode on it.

const fb = new Facebook("Facebook", "Social Networking")
const mode = new Mode(fb)
mode.darkMode()

Let’s discuss the composite pattern in the next lesson.