Modularity

Goal

By the end of today, you should:

1. understand why modularity is useful

2. write code that can be used in different applications (write once, use many times)

Modularity

One of the big ideas that we have revisited several times this semester is the concept of modularity. Modularity is important for many reasons. Today we will focus on the following aspects of it:

• Modularity allows teams or even large organizations to accomplish an enormous task by breaking it into pieces that can be accomplished by one person
• The pieces have to fit together correctly. This often involves standardization.

  The early railroads suffered from incompatibility because different rail lines used different widths between the rails, so passengers would have to get off one train and board another in order to continue their journey.

  Consider what life would be like if every maker of electrical appliances used a different plug?

  With software, pieces fit together when the inputs to a function are right (the proper datatypes, etc) and the output is correct.

• Ideally, the parts can be generic and reuseable. While it's common to have custom parts, it's also nice to reuse generic parts with other equipment, like borrowing someone's cell phone charger, even a different manufacturer! Similarly, in software, if a function is general, it can be used in other software applications.

  In the real world, it's nice when parts are generic and reusable, everything from batteries (a D-cell or a AA), nuts and bolts, power cords, and so forth.

  Furthermore, this means that the manufacturer can't always anticipate how something will be used.

  I often find that students will balk at being asked to implement a function because they don't know how it will be used. They want to know about its context. Who will be calling it? Why? While those are fine questions, sometimes the answer is you don't need to know that, any more than the shopkeeper needs to know what device you are putting those D-cells into.

• All this standardization and such doesn't have to inhibit creativity. The Eiffel tower is built from generic parts like girders and bolts, but the result is unique.

Quiz Question Nr. 1

Which of the following is NOT related to the concept of modularity:

1. keeping HTML, CSS, and Javacript in separate files

2. writing functions with parameters and return values

3. using global variables

4. using using prompt() to get user input

Quiz Question Nr. 2

We should use modularity...

1. When we're part of a big tech company providing an API

2. When we're part of a team of programmers

3. When we're working alone

4. all of the above

Quiz Question Nr. 3

A "module" is:

1. A package of simple, neat, clean code that can easily be edited.

2. an internal style sheet that allows style changes to be easily made

3. HTML code that can be easily copied and edited.

4. distinct, separable code that can be used more than once.

Quiz Question Nr. 4

Two people are defining functions that will depend on each other (e.g, each function invokes the other). Which of the following is TRUE?

1. The two people need to agree on the names of the functions and the names of the parameters

2. The two people need to agree on the names of the functions but not the names of the parameters

3. The two people need to agree on the names of the parameters but not the names of the functions

4. The two people do not need to agree on either the names of the functions or the parameters

The Modularity Challenge

Prof. Ellen Hildreth created a cool way to experience modularity in the CS110 course. There are two applications that use a set of six JavaScript functions

Instructions

Activity instructions

Summary

We hope that after these activities:

• understand the concept of modularity and its benefits
• can compose a program of parts written by many people and have it work in different ways

Solutions

Will be posted later, visit again after .

1. D
2. D
3. D
4. B

// ================================================================
// file randomColor.js 

function randomColor() {
    var color = randomInt(5);
    
    if(color == 0) {
        return "red";
    } else if(color == 1) {
        return "magenta";
    } else if(color == 2) {
        return "green";
    } else if(color == 3) {
        return "cyan";
    } else if(color == 4) {
        return "yellow";
    }
}

// ================================================================
// file changeColor.js 

function changeColor(row, column, color) {
    var cellid = "#cell" + row + column;
    $(cellid).css('backgroundColor', color);
}

// ================================================================
// file moveLeft.js 

function moveLeft(row, column, color1, color2) {
    changeColor(row,column, color1);
    column --;
    if(column < 0) {
        column = 9;
    }
    changeColor(row,column, color2);
    return column;
}

// ================================================================
// file moveRight.js 

function moveRight(row, column, color1, color2) {
    changeColor(row,column,color1);
    column ++;
    if(column == 10){
        column = 0;
    }
    changeColor(row,column,color2);
    return column;
}

// ================================================================
// file moveUp.js 

function moveUp(row,col,color1,color2) {
    changeColor(row,col,color1);
    row --;
    if (row<0) {
        row = 9;
    }
    changeColor(row,col,color2);
    return row;
}

// ================================================================
// file moveDown.js 

function moveDown (row, col, color1, color2) {
    changeColor (row, col, color1);
    row ++;
    if (row == 10) {
        row = 0;
    }
    changeColor (row, col, color2);
    return row;
}