Organized Code

and

Application Structure

Objectives

  • Gain an appreciation for the extreme scale of industrial software projects.
  • Define the term "Design Pattern"
  • Define the components of the "MVC" design pattern:
    • Model
    • View
    • Controller
  • Design an application structure using "MVC"

Q1 Projects:

  • Was it harder to make small changes?
     
  • Did you ever realize you had made a bad decision that you had to fix?
     
  • How did your code style affect your ability to add new features?
     
  • How did the size of the project affect your coding process?
    • Contrast this with the shorter assignments you've been used to.

Real Projects Are Huge

Word Press (legitimate huge company):

    32,000+ commits

    20+ active branches

    500,000 lines of php

 

iLoveOpenSource (small open source project):

    255+ commits

    2 active branches

    26,000 lines of code

   

Real Projects Are Huge

Kuma, the project powering MDN:

    10,000+ commits

    30+ active branches

    500,000 lines of python, HTML, CSS & JS

   

Enterprise FizzBuzz, a parody of architecture gone wrong:

  2000 lines of Java code to complete fizz-buzz

Managing Complexity

As projects grow adding features becomes harder.

  • In order to keep developer efficiency high the structure must of a code base must also be managed.

 

  • Projects are typically "refactored" when the complexity starts to seriously hamper developer effectiveness.

 

  • The decay of code over time is often called "Technical Debt" and should be paid off regularly.

 

 

Managing Complexity

  • Developers also create mental models, and design patterns to manage complexity.

     
  • Many web frameworks (rails, django) force adherence to a specific design pattern

     
  • Design Patterns, even when not strictly enforced, make it easier for developers to find specific pieces of code

Some Simple "Rules"

KISS: Keep It Simple, Stupid!

When you write a feature, ask yourself it could be done more simply.

 

DRY: Don't Repeat Yourself

If you see the same block of code more than 2 places, put it into a function and reuse it instead.

 

YAGNI: You Ain't Gonna Need It

If you think you might need something in the future, but you don't need it right now... You ain't gonna need it.

Design Pattern:

"a design pattern is a general repeatable solution to a commonly occurring problem in software design. A design pattern isn't a finished design that can be transformed directly into code. It is a description or template for how to solve a problem that can be used in many different situations."

Design Pattern:

A design pattern is kind of like a cookie cutter. Any kind of delicious cookie can be cut into the same shape, but remain uniquely flavored.

 

"classes" and "instances" are such a popular design pattern that they've been built into many programming languages.

Design Pattern:

There are THOUSANDS of design patterns. Do some reading, common patterns for additional research are:

 

The Factory Pattern

The Singleton Pattern

Continuation Passing Style

Recursion :)

 

But these are all tabled for later.

Model View Controller

Possibly the most well known web server design pattern

View

Controller

Model

Model View Controller

The Data Model

 

  • Defines the application data and it's structure

 

  • Database tables are typically the 'source of truth' for the model

 

View

Controller

Model

Model View Controller

The View

 

  • Represents anything seen by the user

 

  • HTML files are an example of views

 

  • Users might interact with the views

 

View

Controller

Model

Model View Controller

The Controller

 

  • Handles all communication between the model and the view

 

  • Routing is an example of a "controller" task.

 

View

Controller

Model

Model View Controller

Layered Cake Analogy

 

MVC applications are like a layered cake. All three layers must be assembled before the cake is complete, and for a bite of cake to be optimally satisfying, all three layers should be eaten at once.

 

So, why might this be good?

View

Controller

Model

How Do We Apply This?

  • MVC applies to how we organize our code.
  • We separate the code controlling each layer so that navigating through large code-bases is easier
  • We separate the code so that changes to one aspect of the code don't have to cause cascading changes through the whole application
  • It's better to actually have "layered cupcakes"

Introspection Time

Think about the booklist application you built over the weekend.

 

Without writing any code, identify the components of this application as they fit into our three categories:

Model

View

Controller

 

Take 5 minutes to look at your own code and decide

Pairing Time

Think about the booklist application you built over the weekend.

 

Take 5 minutes to discuss with your neighbor what features of your application belong in which categories. Where do you agree and disagree?

Sharing Time

Think about the booklist application you built over the weekend.

 

Alright everyone, what do you think?

Planning Time

Think about the booklist application you built over the weekend.

 

We've identified some features. Lets design an application structure together that makes sense for the booklist in an MVC pattern.

Eating Time

Lunch rules. We're going to focus on an Express tool that helps us control our controllers after lunch, and refactor our booklists to use this tool.

 

if you want a preview, google: "Express Router"

Made with Slides.com