1 of 18

17-313:

SOFTWARE ARCHAEOLOGY

TA Nour Ali

2 of 18

Reminders

  • Team Survey due tonight
  • Project 2B:
    • Due on Sun 28/9
    • Presentation on Sun 28/9
  • Midterm 1
    • Wed Oct 08
    • Review on Sun Oct 05

3 of 18

Documentation - PLEASE

4 of 18

GOAL:

Figure out how a system works

To fix the system

To add features to the system

To build a similar system

To evaluate the system

5 of 18

Software constantly changes

Software is easy to change!

6 of 18

Software is a redundant mess

You can copy something and use it as a starting point

7 of 18

At a high level you want to …..

Develop a working model —an understanding of the components of a system and connections between them

8 of 18

Model–view–controller

  • Software design pattern commonly used for developing user interfaces that divides the related program logic into three interconnected elements.
  • This is done to separate internal representations of information from the ways information is presented to and accepted from the user.

directly manages the data, logic and rules of the application

representation of information

Accepts input and converts it to commands for the model or view

9 of 18

VISUALIZE

SEARCH

READ

How to approach a codebase:

DO

01

02

03

04

Modules, classes, function calls

Tutorials, documentation, readme

Keywords, grep, find

Build, run, change, run

Static Information Gathering

Dynamic Information Gathering

10 of 18

READ

  • README
    • Literally begging you
    • Installation process & dependencies
    • Basic use examples
  • Documentation
    • Most codebases should come with a documentation website
    • User docs → functionality
    • Developer docs → interface functions / implementation
    • Usually where the starting points are
  • Tutorials
    • Code is built on code
    • Understand underlying language / framework
  • Help/Man pages
    • <command> –-help

11 of 18

SEARCH

  • Find something big first (title of a page), then work down to what you want
  • Keywords
    • Object name
    • Function name
    • Element name (html)
  • Looking for MVC code separation
  • VSCode

find

Terminal command to search for files and directories

% find start whattolookfor

-name File name

-type Specify type, i.e. files/dirs

% find . -name index.html

% find ./src -name '*.html'

% find ./src -type f

grep

Terminal command to search for words in files

% grep 'word' filename

-i Case-insensitive

-r Recursive search

% grep 'meta' index.html

% grep -r --include='*.java' "hello" .

12 of 18

VISUALIZE

Modules

Classes

Function Call Graph

13 of 18

DO

  • Fork and clone the repo in the handout
    • https://github.com/CMU-17313Q/NodeBB-F25-R4
  • Check out this issue:
    • https://github.com/CMU-17313Q/NodeBB-F25-R4/issues/1
    • Reproduce the bug
  • Familiarize yourself with the codebase
    • Drawing diagrams help!
  • Locate code that relates to the bug
  • Fix the bug!
    • Add and commit your changes
    • Push the code to your forked repository.
    • Create a pull request that links the issue.

14 of 18

Hint #1

Every change you make: must rebuild and start → takes time!

Using Grunt: will automatically update instead of rebuilding for each change

15 of 18

Hint #2

Some problems throw hidden errors.

Go to setting → Developer tools → console

16 of 18

Hint #3

Where is a good place to start?

What should we search for?

grep -r "Username taken"

grep -r "username-taken"

grep -r "username-taken" --exclude-dir=language

17 of 18

Hint #4

We want to change the error message from 'Username taken' to 'Username taken. Maybe try ${currentUsername}suffix'.

This involves transforming a constant error message into a template error message.

How do we edit the error string based on the user’s input?

Has something similar been done somewhere in the code?

Look at other error messages!

18 of 18

THANK YOU!