Giters

bermarte / encapsulation

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Encapsulation

"Encapsulation is one of the fundamentals of OOP (object-oriented programming). It refers to the bundling of data with the methods that operate on that data. "

Encapsulation is the idea of grouping together your data with the functions that use it. That's it! (for now :) There are many ways to achieve this, but the end result is code that is easier to understand and nicer work with.

Heads up! In this module you'll be encountering some of the most important (and most challenging!) aspects of the JavaScript language this, inheritance & classes. These are all features of JS that allow you to encapsulate functions & data for readable, reusable code.

Along the way you will get your first introduction to one of the main programming paradigms in JS: object oriented. At their simplest level, programming paradigms are just different answers to the same question "How will I group my data and my functions?".

Contents

Getting Started

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

  1. Install or update the study-lenses package globally
    • npm install -g study-lenses (if you do not have it already)
    • npm update -g study-lenses (if you already have it installed)
  2. Clone this repository:
    • git clone git@github.com:HackYourFutureBelgium/encapsulation.git (SSH) (recommended)
    • git clone https://github.com/HackYourFutureBelgium/encapsulation.git (HTTPS)
    • gh repo clone HackYourFutureBelgium/encapsulation (GH CLI)
  3. cd into the repository
    • cd state
  4. Run the study command from your CLI
    • study
  5. 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 ; )


TOP

Learning Objectives

open/close

Vocabulary

  • Encapsulation
  • Object Oriented Programming
  • Inheritance
  • Code Reuse (DRY)
  • Data-first development
    • Understanding applications as Data + User Interactions
    • Developing from the "inside" out: Writing the core object before the user interface
  • Organizing your projects into modules
  • Object Oriented TDD
    • Using tests to define and verify OOP programs

Hard Skills

  • Use the keyword this
    • Be able to refactor functions into methods
    • Be able to refactor methods into functions
    • Plan and implement objects based on User Stories
  • Use getters and setters
    • Be able to refactor between properties, methods and getters/setters
  • Using import & export to organize your codebase
  • Understand prototypical inheritance
  • Use ES6 Classes to organize your code
    • Be able to refactor between constructor functions & classes
    • Use classes to create simple programs
  • binding handlers to this
  • function () {} vs. () => {}
    • How does each one treat this differently?
  • Closure 101:
    • Using () => {} handlers to avoid binding

TOP

About the Projects

Projects in this module will have all the same concerns as projects in the last module, they'll just be organized a little differently. In the last module every function was a free-floating function written in a separate file and required separately into your .html files.

In this module you'll learn how to:

  • Encapsulate your application's data with the functions that operate on it using object oriented programming.
  • Reuse your methods with inheritance and ES6 classes

TOP

Suggested Study

links to help with this module.

open/close

Helpful Links

Binding

Prototypes & Delegation

ES6 Modules

Exercises

Code to Study

OOP TDD


TOP

Week 1

Learn to use function () {} functions and this to encapsulate your data, logic and views.

open/close

Before Class

During Class

Before Break

  • Isolate
    • Functions to Methods
    • Getters & Setters

After Break

  • ./refactors/cycler (example)
    1. 2-encapsulated
  • Integrate (exercise)
    • 01-app-objects/exercises/average

After Class

No project this week.

Spend your time getting familiar with this and following the Practical JavaScript Tutorial (best tutorial ever). It will be a great review of what we've covered at HYF. Take a moment to appreciate how much you've learned!

Looking for a little challenge? Try refactoring the tutorial's final code into this Practical JavaScript starter repo


TOP

Week 2

Learn to:

  • inspect prototype chains in the debugger
  • tell the difference between static and instance methods
  • use Object.create for code reuse
open/close

Before Class

During Class

Before Break

  • Isolate: 7. Prototype Delegation

After Break

  • Isolate: 8. Object.create
  • Integrate: 3. Object.create

After Class

group or individual, your choice

List Manager! Following up on the tutorial from last week, you will build a web page that allows users to create as many lists as they want, each with a different title. You will need to refactor the todo list from WatchAndCode into a prototype object that can be used to create new list instances with Object.create. There is a starter repository with the basics to get you started. Enjoy!

Checklist

Individual Checklist:

- [ ] [repo](https://github.com/_/_) with a complete README
- [ ] [live demo](https://_.github.io/_)
- [ ] [project-planning](_https://github.com/_/_/tree/master/project-planning)

Group Checklist:

- [ ] [repo](https://github.com/_/_) with a complete README
- [ ] [live demo](https://_.github.io/_)
- [ ] [project-planning](_https://github.com/_/_/tree/master/project-planning)
- [ ] [A project board](https://github.com/_/_/projects/X)
- [ ] [One issue per task](https://github.com/_/_/issues) (with labels and milestones)
- [ ] [One branch per issue](https://github.com/_/_/network)
- [ ] [One reviewed PR per completed issue](https://github.com/_/__/pulls?q=is%3Apr+is%3Aclosed)

check out past classes for inspiration - 9-10


TOP

Week 3

Learn to use Classes for a reusable code base.

open/close

Before Class

During Class

Before Break

After Break

After Class

after class

Impress yourselves! Using this starter repository, plan and scope a project of your choosing. This can be a totally new idea or a reworking of a previous project.

If your group decides to continue last week's project, there's no need to move to a new repository. Just try refactoring your project from prototypes to classes.

Checklist

coming soon

TOP

Class Recordings

Coaches, when sending your PR's with links please ...

  • Indicate which class you were teaching
  • Which week it was
  • Give your name
  • and a helpful description

Class 7 & 8

Anthony, Bram

  1. week 1:
  2. week 2:

Class-9-10

Anthony, Unmesh, Nawang

  1. Week 1:
  2. Week 2:
  3. Week 3:

Class-11-12

Yash, Unmesh, Thibault

  1. Week 1:
  2. Week 2:

About

License:MIT License

Languages

Language:JavaScript 59.3%Language:HTML 39.8%Language:CSS 0.9%