Module 3: State

"In information technology and computer science, a system is described as stateful if it is designed to remember preceding events or user interactions; the remembered information is called the state of the system."

Wikipedia

Overview

Module Summary

In the previous module you learned to decompose & plan projects, organize your code, and use HTML/CSS/JS to implement simple websites that process user input. All well and good but there was something missing. Your projects never "remembered" anything!

Enter: State. This is a fancy programming term to talk about the data stored by your web pages. Nearly every app you use has state -> message histories, images, profile details, weather reports, ... you name it! Data is the core of any application. Just like you learned to write tests to describe your functions and show that they do what they should, you will learn how to use schemas and validation to prove that your program data in fact what you say it is.

Your new projects will be more interesting, but they will also be a lot more complicated. The logic will be more challenging, and the data saved in your page will change over time leading to bugs you could never have imagined! To help you deal with the added complexity this module will dive deeply into debugging techniques, problem solving strategies, and your browser's developer tools.

TOP

Learning Objectives

Programming Skills

Documenting your projects with ...
- READMEs for why your project exists and how to run it
- wireframes to describe the user interface (html & css)
- user stories to define the interactions a user can have (handlers & listeners)
- tests & specs to describe the logic in your program (logic)
Logging
- Capture and store a log of all user interactions & state changes
- Use this log to reconstruct user actions and debug your projects
Data-first development
- Understanding applications as Data + User Interactions
- Developing from the "inside" out: planning the data & logic of your app without a user interface
Debugging:
- Bugs are when you don't understand what your code is doing, not when your code doesn't understand what you want it to do! The computer is always right :)
- Stepping through your programs with the Browser and Node.js debuggers
- Using the debugger, console.assert, assert (in Node) and breakpoints for native debugging
- Refactoring & testing segments of code you don't understand / are not working
Understand Behavior vs. Implementation
- Behavior: The test cases that a function does and doesn't pass. What the function does.
- Implementation: The actual lines of code written. How memory is manipulated so that the behavior happens.
Testing
- Learn to predict what will happen instead of describing what did happen
- Testing each step of your project before moving on
- Using the native Node.js module assert
- Writing & using popular testing libraries (jasmine & mocha)

Isolating JavaScript (study JS outside of applications)

Operators:
- Understand order of operators
- Be able to rewrite complex expressions as a sequence of single operations
- Understand that implicit coercion is a learnable (but confusing) set of well-defined rules
Statements vs. Expressions
- Understand the difference between the two
- Explain if a line of code produces an intermediary result, updates memory, and/or redirects flow
- Use the debugger to step step through complex expressions
- Refactor between ternary operators and conditional statements
Reference vs. Value:
- Understand & explain the different ways JS stores data in memory
- Explain how arguments are passed into functions by reference or value
- Use different strategies to avoid side-effects
- Direct vs. Indirect keys: correctly apply dots & brackets for Array & Object access
Data Structures: Arrays & Objects
- Use Object.methods to iterate over objects
- Use non-mutating array methods to process data
Array & Object Methods
- Arrays: .map, .reduce, .filter, ...
- Objects: Object.keys(), Object.values(), Object.entries()
- Refactor loops into array methods
Control Flow
- Correctly apply different types of JS loops

Integrating JavaScript (JS embedded in applications)

Organizing your code based on it's role in your program
1. Setup: lay out the boilerplate for your app
2. DOM: define the structure of your user interface
3. Styles: define the display of your user interface
4. Data: the information your users are interacting with
5. Log: keep a record of every user interaction
6. User Stories: how can users interact with your data?
DOM Manipulation
- Dynamically update the DOM
- Represent changes in state with the user interface

TOP

About the Projects

In this module you'll be flipping everything upside down! In previous modules you learned to develop your projects from the user interface backwards, beginning by planning what a user will see on the screen and how they will in interact with this. Starting now you will learn to do things from the inside out:

What can a user do on your web site? Write user stories to describe the user's possible interactions with your site
What data is necessary for these user stories? Write a schema to describe & validate your project's data.
What must a user be able to do to this dtat? Write & test the logic to enable these interactions.
How does the UI display state and possible interactions? Write a wireframe to describe the user interface.

Separating your Concerns

A working project is not enough! For projects in this module we will expect you to turn in code that is well organized & documented according to it's role. Your projects should have these directories:

/data: contains your schema, initial state, and a helpful README (including a description of your data)
/logic: contains any functions and tests, and a README describing what is in each file
/handlers: contains the handlers for your app, one per user story. and a helpful README
/listeners: contains the listeners for your app, generally one per user story, and a helpful README
style.css: contains the CSS for your web page and any helpful comments
index.html: contains the initial DOM for your user interface & requires all scripts
init.js: contains the code to render your initial UI and log the initial state
log.js: contains the initial empty log for your project. For now, just an empty array
README.md: describes what your project does & how to use it.
development-strategy.md: a file containing a table of your user stories in order, with one column for each folder.

Your project may contain one more directory called /dependencies if you are beginning from a fork, but there is nothing for you to write in here. This folder will contain testing and validation scripts provided by us.

Development Strategy

The development-strategy.md for this module will be less detailed than in the last module. As your applications grows in complexity it will become impractical to capture all the details on one table. Each of your folders will contain detailed documentation of the code in that folder, your main development-strategy.md will just have a list of user stories and what you added to implement that story.

Good luck!

TOP

dfdeagle47 / state