ga-wdi-boston / js-objects-modeling

Other
1 stars 169 forks source link

General Assembly Logo

JS Objects Modeling

Prerequisites

Objectives

Preparation

  1. Fork and clone this repository.
  2. Create a new branch, training, for your work.
  3. Install dependencies with npm install.

Abstraction and Modeling

The world is full of complex systems. Take weather, for example.

Weather Forecast

There's a ton of information we could record about the weather. Yet when you read the weather report in the morning, all of that information is distilled down to a handful of numbers: 34 degrees fahrenheit, 20% chance of precipitation, 4 degree windchill...

Why do you think that might be?

When you take something complex and then hide that complexity under a more simple interface, you are using a technique called abstraction.

From wikipedia: In software engineering and computer science, abstraction is a technique for arranging complexity of computer systems. It works by establishing a level of complexity on which a person interacts with the system, suppressing the more complex details below the current level.

How might abstraction be relevant as software developers? Take a minute and discuss this with your squad. We can use abstraction to represent real-world entities when we write software. This allows us to hide complex systems underneath easy to grasp objects and models.


Think about the weather report that you are given by the weather lady. She gives you the temperature in your city, if it's going to rain or snow, level of precipitation, and the wind speed. This model of the weather system hides the complexity that is behind these measurements.

A model is a simplified or partial representation of the real thing. Models are based on a real entity, and are used to represent the real entity in a system. Modeling is great for planning, designing, discussing, and understanding a system.

Discussion

Let's take a look at a specific example: a Laptop. Suppose that we need to represent a laptop in an application. What attributes are most important to include in our model?

As it turns out, the answer to that question depends heavily on what the application will do and how it will be used. If the application is for selling laptops, we might pick attributes like sale price, brand, amount of RAM, disc space, and processor speed. However, if the application is for factories, e.g. tracking laptops as they're being manufactured, things like sale price are irrelevant; instead, we might want our model to include the production line where the laptop was assembled, or the laptop's current stage of completion.

In order to decide what attributes we need to model, we use user stories, which we'll talk about in more depth as we introduce the first project.

Lab: Brainstorm

In your squads, pick one of the following examples and individually brainstorm about abstractions and models you might use. Once you're done, discuss your answers as a squad.

Demo: Modeling in JavaScript

Let's think about how might we construct a model in JavaScript as part of an application. Models can be as simple as a single number -- for instance, a day's weather can be modeled as 'temperature' or 'inches of snow expected'. Other things, such as lists of similar items, are typically modeled by arrays; since the items are all similar, an index is sufficient to distinguish them.

Model of an array of crayons

Most of the time, though, what we want to model has multiple attributes, often of different types: for instance, a car might have a make (String), model (String), a release year (Number), and a mileage (Number). Because these attributes are different, we also probably want to refer to them using descriptive names. For this kind of use case, an Object is the best fit, since its properties are key-value pairs with String keys. Objects can also have properties that hold functions, called methods, and these can stand in neatly for any behaviors that we might want our model to have.

Suppose we needed to model a single crayon in JavaScript. We might come up with something like this:

Model a single crayon in JavaScript

As you can see, crayon has two ordinary traits, (which we call properties), (color and lengthInCM); these map to attributes of the crayon that (presumably) are relevant to our application. In addition, it also has a method called getUsedUp, which corresponds with a behavior that real crayons exhibit: getting shorter as they get used.

Back to our car example. We have a method, addMileage, which adjusts the mileage property of our car object. Instead of using the object's name in the dot notation, we can use a special keyword that helps us alter properties of an object:

Model a car object

more on this later

Code Along: Television

Now let's consider how we might model a TV. For this example, let's assume that we're only concerned with using the TV, not selling it or anything like that.

When we interact with a TV, there's a short list of things that we typically do:

In addition, there are a number of other features of the TV that might interest us:

How could we model this in JavaScript? In your squads, take ten minutes and write out a JavaScript object that represents all of the features and behaviors of a TV listed above.

Lab: Modeling in JavaScript

Say we are building a recipe website. Suppose that after careful research, we've determined that the following things must be true about the application.

A recipe must have:

An ingredient quantity must have:

An ingredient must have:

Additionally, as a bonus, the recipe should be able to:

1 cup of flour

2 tablespoons of butter

...

How could we actually implement this in JavaScript? In your squads, try to come up with a way to represent the abstractions given above using the tools we've learned about so far (basic types like numbers, strings, and booleans; reference types like arrays, objects, and functions). When you finish, we'll discuss our answers as a class.

Summary

Now you're thinking with abstraction!

Picking the right model(s) can make your problem much simpler; however, picking the wrong model(s) can send you down a rabbit hole, so be thoughtful in what you choose. Try running your models by someone else and see what they think!

License

  1. All content is licensed under a CC­BY­NC­SA 4.0 license.
  2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.