2/7

2/21

2/28

3/27

5/22

Team Selection

Client Presentations

Project Proposal

Revised Project Proposal

Final Project Documentation

No class

No class

No class

Project Presentations

5/04

No class

3.5 months

Implementation / Testing / Deployment

102 Days

Kristen Laird

Wednesday 2/12

Product Management / Team Work

Design: Architecture

Example: Building a Simple Calculator

that adds 2 numbers

Requirements

Design

Implementation

Verification

Maintenance

Testing and Deployment

What?

How?

Build

More Testing / Evaluate

Bugs / New Features

- allows input of 2 numbers

- calculates the sum and displays it

- HTML/CSS for UI

- JavaScript for logic

- write JS code

- comment code

- write unit tests

- deploy on github pages

- does the UI show the sum?

- do users understand the UI?

- what if numbers are too long?

- subtract? multiply?

- fix bugs, create future plan

First Part: WHAT

Project Proposal

Requirements

Specifications

Non-Technical!

Second Part: HOW

Technical!

Understandable by Non-Computer Scientists

Third Part: HOW IN DETAIL

Design

But not too detailed!

Implementation Details!

Input fields for two numbers that then are added.

Web-based form for client-side calculations.

HTML/CSS for UI and JavaScript for Logic. 2 Classes with attributes...

Features

- allows input of 2 numbers

- calculates the sum and displays it

- web-based

- client-side calculations

- HTML/CSS for UI

- JavaScript for logic

Let's code!

We don't want to use the console to call add()!

What about decimals?

What about a dark background?

Fix the bug!

What about subtraction?

What about multiplication?

What about division?

What about dynamic numbers?

What about night mode on/off?

What about customizable themes?

What about three numbers?

What about combining addition/subtraction/multiplication?

Not part of the project proposal!

Re-factor

Re-factor

Re-factor

Optimize

Delete

Re-write

Extend

Re-factor

Not worth it!

What is the mistake?

Architecture

Features

Chapter 2

Behavior of software

Structure of software

vs.

Some programmers think that implementing requirements and fixing bugs is their main job

That's wrong!

Features can be

easily developed

easily modified

easily extended

That's better!

Architecture is more important than features!

The MVC Pattern

Model

View

Controller

Logic and calculations separate from any data storage or user interface

User interface

Data access / Data storage

Equation = function() {
  
  this.numbers = [];
  this.operators = [];

}

Equation.prototype.toString = function() {
  
  var output = "";
  for (var o in this.operators) {
    var n = this.numbers[o];
    output += n + this.operators[o];
  }
  output += this.numbers[this.numbers.length-1];

  return output;

};
var eq = new Equation();
eq.numbers = [22, 33.4, 55];
eq.operators = ['+', '-'];

Object Oriented JavaScript

We want a command line interface

But we have a client-side web-based application with HTML/CSS/JS!

and a web-based interface

and multi-user support!

Model

View

Controller

Equation = function() {
  
  this.numbers = [];
  this.operators = [];

}

Equation.prototype.toString = function() {
  
  var output = "";
  for (var o in this.operators) {
    var n = this.numbers[o];
    output += n + this.operators[o];
  }
  output += this.numbers[this.numbers.length-1];

  return output;

};

Server

Clients

Equation = function() {
  
  this.numbers = [];
  this.operators = [];

}

Equation.prototype.toString = function() {
  
  var output = "";
  for (var o in this.operators) {
    var n = this.numbers[o];
    output += n + this.operators[o];
  }
  output += this.numbers[this.numbers.length-1];

  return output;

};

HTML/CSS

Hands-on

Day!

Part IV