"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."
- Getting Started
- Study Tips
- Learning Objectives
- About the Projects
- Suggested Study
- Break-Down
- Class Recordings
- Curriculum (external)
- HYF Home (external)
How to study the code in this repo.
expand/collapse
You will need NPM and nvm on your computer to study this material
Using a browser with good DevTools will make your life easier: Chromium, FireFox, Edge, Chrome
- Install or update the
study-lensespackage globallynpm install -g study-lenses(if you do not have it already)npm update -g study-lenses(if you already have it installed)
- Clone this repository:
git clone git@github.com:HackYourFutureBelgium/state.git(SSH) (recommended)git clone https://github.com/HackYourFutureBelgium/state.git(HTTPS)gh repo clone HackYourFutureBelgium/state(GH CLI)
cdinto the repositorycd state
- Run the
studycommand from your CLIstudy
- The material will open in your default browser, you're good to go!
If you have a windows computer and get this error:
... /study.ps1 cannot be loaded because running scripts ...follow the instructions in this StackOverflow answer, that should take care of it ; )
- Don't rush, understand! Programming is hard.
- The examples and exercises will still be there to study later.
- It's better to fail tests slowly and learn from your mistakes than to pass tests quickly and not understand why.
- Don't skip the examples! Understanding and experimenting with working code is a very effective way to learn programming.
- Practice Pair Programming: two people, one computer./
Not all assignments are created equal. These 3 emoji's will help you figure out how to spend your study time as effectively as possible.
- 🥚
:egg:- these assignments are required, they cover the base skills you'll need to move on. - 🐣
:hatching_chick:- do your best to start these exercises. you don't need to finish or master them (yet) but getting the main idea will be helpful in coming weeks - 🐥
:hatched_chick:- Have you finished all the 🥚's and started all the 🐣's? push yourself with these challenges!
expand/collapse
State, Log and Render are not words that come from JS or Web Development. They are general programming concepts. Any software that stores data has state. Any software that keeps track of user interactions for debugging uses logging. Any software with a user interface renders data for the user.
- State
- Information that is useful for the User of the program
- One can use any data structure or data type to store this information (objects/arrays/numbers/...)
- Log
- It is like a diary/journal. A person logs an activity, a program logs an action/location/variables etc.
- Note that developers can also decide to log the state of the program.
- Also note the name of console.log() function is purposeful! It prints(logs) on the console.
- It is also possible to print(log) to a file instead of console, which is a more common practice.
- Want to see file logging in real life?
- open this repo with
study - watch the console output in your terminal
- those are server logs! a record of every request and response sent by the
study-lenses
- open this repo with
- Render
- The term comes from the Computer Graphics.
- Rendering simply means drawing something on the computer screen.
- Rendering can also mean making something visual or preparing a component for your data.
- 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
- Defining State
- Determining what data is important for a user
- Choosing the correct JS data structure for you state
- Separating important data from local variables
- Logging
- Capture and store a log of all user interactions & state changes
- Use this log to reconstruct user actions and debug your projects
- Dynamically update the DOM to represent the current state
- Render data into DOM elements
- Re-render portions of the DOM for a reactive experience
- Using a backlog to set priorities
- Writing acceptance criteria to describe user stories
- Creating a user-story dependency chart to plan your development schedule
- Breaking user stories into code-able tasks
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. That's nice but it misses the big picture.
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.
A good way to understand applications is to think of their data and the interactions a user can have with that data. You will explore the connection between state, UI and UX by learning to write Components. Components are functions that return parts of your UI by rendering state into something the user can see and interact with.
In this module's projects you will want to focus on the data in your web page, how users can interact with it, how it changes over time, and how it is rendered to the UI.
Helpful links, examples and exercises.
expand/collapse
- What is state and why should we care about it?
- Code in this Repo
- 🥚 function-roles: Learn about components, functions that render data into DOM elements
- 🥚 stepped (examples): single-file projects that have been built one step at a time
- 🥚 refactors (examples): study refactored code from a single JS file to separated JS projects
- 🐣 separated (examples): projects to study that are separated into many folders and files.
- 🐣 rendering-data (exercises): write functions that turn JS data into DOM elements, practice inspecting elements in the DOM and debugger to check your work.
- 🐥 testing-components (exercises): learn how to read and pass tests for component functions(tests in this directory must be run in Node.js, they will not work in the browser)
- More Practice
- Working with the DOM
- Traversy DOM Crash Course - it's long, no need to finish it before Sunday
- JS Dom Tutorials: Accessing The DOM
- DOM Tree (js.info)
- Walking the DOM (js.info)
- getElement & querySelector (js.info)
- DOM Elements: Attributes vs. Properties
- javascript.info
- FullstackTraning (article)
- WebTunings (video)
- StackOverflow: the difference, when to use which
- Nodes vs. Elements
- What is Logging?
- What is project scope, and how to plan it
- What about Project Scope Management?
- Requirements Gathering
- Scope Creep
- Scope Statement Statement
- Learn to plan applications around your data
- Learn to render your application's data into a user interface
expand/collapse
- What is state and why should we care about it?
- stepped: take a look through these incremental example projects
All Together:
- What is State? Why is it important?
- Applications are data + user interactions
- User stories tell how a user can interact with the data
- ./function-roles
- Components render state for the user
- What is a component function?
- How can they be tested?
In Small Groups:
- Study the separated examples together:
- What can a user do with this program?
- What is the program's data?
- How does each user interaction use state?
- Do the logs help understand the program?
Planning with State and Components:
- User stories
- What can a user do with your application?
- Program data
- What data do you need for these use cases?
- Wireframe
- How is the data represented in the UI?
- Component Tree
- What are the relationships between components, which components are used inside other components?
- Presentational Components: Components that display data but don't do anything (no event listeners). In a todo list, this might be the component that shows a checkbox or the text.
- Container Components: Components for layout and interactivity. In a todo list, this might be a component that contains all the presentational list items. This component will have layout styling and a bubbling event listener.
- Build and test the components (outside of the main app!)
- Start by developing the components at the bottom of the tree
- Work your way up.
after class
Continue working on the project your group began last module. This week you should:
- refactor all of your data into a single
stateobject - refactor your app to include at least one component
expand/collapse
before class
after class
Screen recordings of class. Coaches, when sending your PR's with links please ...
- Add a link to your video in the correct module's section
- Indicate which class you were teaching
- Which week it was
- Give your name
- and a helpful description
- Week 1
- Week 2
- Week 1:
- Week 2:
- Week 1: State & Components