DevLeague Module Style Guide (OOP)

DevLeague-Module-Style-Guide-OOP.md

Object Oriented Programming

Pre-Requisites

This material should come after revealing module pattern and definitely before MVC. Students should already be familiar with requiring external modules and exporting modules.

Class Format / Time to Allow for Subject

This material usually takes 1 full day to introduce and up to a week's worth of exercises and reinforcement.

Topics & Expected Outcomes

Levels of Understanding

Students will have one of three levels of understanding about each topic upon completion of this module.

• grok: fully understand the topic in order to replicate code, communicate, and explain concepts without referring to any notes.
• explain: understand enough about the topic to describe concepts without referring to notes.
• know about: understand enough to look up further documentation when asked about the subject.

---

Defining Classes

• Students should fully grok "Defining Classes."
• Students should know how to define Classes in ES5.
• Students should know how to define Classes in ES6.

Instantiating Objects

• Students should fully grok "Instantiating Objects."
• Students should know how to instantiate objects from classes in ES5.
• Students should know about properties and methods.
• Students should know how to define properties on Classes in ES5:
  • Students can demonstrate that they are able to identify properties
  • Students can explain the difference between properties and variables
• Students should know how to define methods on Classes in ES5:
  • Students can demonstrate that they are able to identify methods
  • Students can explain the difference between methods and functions
• Students should know how to define static properties on Classes in ES5:
  • Students can demonstrate identifying static properties
  • Students can differntiate static vs.instance properties
  • Students can explain the difference between static properties and instance properties
• Students should know how to define static methods on Classes in ES5:
  • Students can demonstrate identifying static methods
  • Students can differntiate static vs.instance methods
  • Students can explain the difference between static methods and instance methods
• Students should know how to define properties on Classes in ES6:
  • Students can demonstrate identifying properties
  • Students can explain the difference between properties and variables
• Students should know how to define methods on Classes in ES6:
  • Students can demonstrate identifying methods
  • Students can explain the difference between methods and functions
• Students should know how to define static methods on Classes in ES6:
  • Students can demonstrate identifying static methods
  • Students can differentiate static vs.instance methods -Students can explain the difference between static methods and instance methods

Class Inheritence

• Students should fully grok "Class Inheritence".
• Students should know how to define Classes in ES6.
• Students should know how to instantiate objects from classes in ES6.
• Students should know how to properly extend Classes with Subclass definitions.
• Students should know that Subclasses inherit methods from it's Superclass.
• Students should know that Subclasses inherit properties from it's Superclass when the super constructor is invoked.
• A student should be able to whiteboard a diagram of Class relationships including UML notation for properties and methods.

Encapsulation

• Students should be able to explain "Encapsulation."
• Recommend: Whiteboard Example to explain "Encapsulation."

Access Modifiers

• Students should be able to explain "Access Modifiers."
• Recommend: Whiteboard Example to explain "Access Modifiers."

Accessors

• Students should be able to explain "Accessors."
• Recommend: Whiteboard Example to explain "Accessors."

Interfaces

• Students should be able to explain "Interfaces."
• Recommend: Whiteboard Example to explain "Interfaces."

Polymorphism

• Students should know about "Polymorphism."
• Recommend: Whiteboard Example to explain "Polymorphism."

Multiple Inheritence

• Students should know about "Multiple Inheritence."
• Recommend: Whiteboard Example to explain "Multiple Inheritence."

OOP Patterns

• Students should be able to explain advantages of adopting an Object Oriented pattern.
• Students should be able to determine when Object Oriented patterns are suitable.

Suggested Format for Delivery

The following format is meant to be a guideline for effective delivery. Instructors can present material in another way if it is more effective for the students.

1. Introduce OOP (whiteboard a diagram)
   1. Start with the fundamentals of classes and instances.
      • Recommend: Whiteboard an example of a blueprint of a house and an actual house.
   2. Focus on class definition and object instantiation.
   3. Create clear distinction between functions vs. methods, and properties vs. variables.
   4. Demonstrate real-world "OOP" examples.
   5. Introduce inheritance using real-world whiteboard examples.
      • Recommend: Whiteboard an "Animal Kingdom" example.
2. Present ES6 OOP Slideshow: http://slides.com/theremix/es6-oop
3. Assign Kingdom of OOP: https://github.com/devleague/Kingdom-of-OOP
4. Present Prototypes in Javascript: http://slides.com/jasonsewell/prototypes-in-javascript @Jon - this was added in.
5. Assign JS Constructors: https://github.com/DevLeague/js-constructors
6. Assign JS Zombies: https://github.com/DevLeague/js-zombies
7. Check in with students and their understanding of Constructors, Inheritence, and Super calls (talk)
8. Verify that students have met the minimum required understanding before moving on.

Slides & Examples

ES6 OOP

• Link: http://slides.com/theremix/es6-oop
• Time Needed to Present: < 30 minutes
• Type: Slideshow

Prototypes in Javascript

• Link: http://slides.com/jasonsewell/prototypes-in-javascript
• Time Needed to Present: < 30 minutes
• Type: Slideshow
• Concepts Covered: prototypes
• Notes: this goes with the JS Constructors exercise.

Exercises & Projects

The following exercises and projects state an average time alotted. A session is about 3 hours. There are 3 sessions in a day: (1) After the morning challenge up to lunch, (2) after lunch up to dinner, (3) after dinner until the end of class.

Kingdom of OOP

• Repository: https://github.com/DevLeague/Kingdom-of-OOP
• Average Time Alotted: 2 sessions
• Individual or Group: Individual Exercise
• Completed Example: http://TODO
• Concepts Practiced: ES6 Constructors, ES6 Instance Properties, Inheritance, ES6 Super Call, Constructor Arguments, and Exporting and Importing Modules

JS Constructors

• Repository: https://github.com/DevLeague/js-constructors
• Average Time Alotted: 3 sessions
• Individual or Group: Pair Exercise
• Completed Example: http://TODO
• Concepts Practiced: Defining ES5 Classes, Prototypical Inheritance, ES5 Instance Properties, and ES5 Instance Methods

JS Zombies

• Repository: https://github.com/DevLeague/js-zombies
• Average Time Alotted: 2 sessions
• Individual or Group: Individual Exercise
• Completed Example: http://TODO
• Concepts Practiced: Defining ES5 Classes, Prototypical Inheritance, ES5 Instance Properties, and ES5 Instance Methods

Additional Resources

OOP in Javascript

• Link: http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/
• Concepts: something, something, and something
• Notes: Write why this resource is included.

Eloquent Javascript

• Link: http://eloquentjavascript.net/1st_edition/chapter8.html
• Concepts: something, something, and something
• Notes: Write why this resource is included.

OOP

• Link: http://javascript.info/tutorial/oop
• Concepts: something, something, and something
• Notes: Write why this resource is included.

ES5

• Link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
• Concepts: something, something, and something
• Notes: Write why this resource is included.

ES6

• Link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
• Concepts: something, something, and something
• Notes: Write why this resource is included.

Inheritance

• Link: http://www.crockford.com/javascript/inheritance.html
• Concepts: classical inheritance
• Notes: Write why this resource is included.

Instructor Notes would go here as comments, as a reflection of teaching the topic.

Notes:

• https://github.com/DevLeague/slides-Intro-to-OOP/ - removed this; it does not exist.
• JS Zombies is listed in Exercises, though it isn't listed as being used in the Suggested Delivery. So where does it go?

To clean this up:

• all times and concepts are fake. need an instructor to make it accurate, so it helps future instructors.
• need whiteboard photo where whiteboard is used.
• weed OUT stuff that is irrelevant
• google docs should be hosted in a permanent server
• slides should be hosted by a devleague account

These have not been included in the module yet. Weed through these and add to the docs above if they are relevant.

Exercises & Projects:

100 Specs

• Repository: https://github.com/devleague/100-Specs
• https://github.com/devleague/100-Specs/blob/master/public/js/class-definitions.js
• Dependencies: After OOP
• Concepts: very brief explanation of LiveReload, very brief explanation of Gulp

Technophile

• Repository: https://github.com/devleague/Technophile

Behavior-Driven Shopping List

• Link: https://github.com/devleague/Behavior-Driven-Shopping-List
• Concepts: basic OOP, BDD

Be Positive

• Link: http://class.sandbox.devleague.com/Be-Positive.zip
• Concepts: objects, basic logic
• Note: Saturday Fun Activity Instruct students to whiteboard the solution first, then work on the programmed solution.

Mixins

• Repository: https://github.com/devleague/Sir-Mix-Alot
• Concepts: multiple inheritance, mixins, static methods

Slides & Examples:

Multiple Inheritance & TypeScript Interfaces

• Link: http://slides.com/jasonsewell/multiple-inheritance#/
• Type: Slideshow
• Note: Show mixins for ES5 and interfaces in ES6

Additional Resources:

Principles of Object-Oriented Programming in JavaScript

• Link: https://drive.google.com/file/d/0BwiCLdmS_GE8U0tPQzA1WmZrbVE/view
• Type: PDF (Book)
• Concepts isPrototypeOf, hasOwnProperty, propertyIsEnumerable

WarriorJS

• Link: https://github.com/olistic/warriorjs
• Concepts: ES6 Constructors

ES6 Fiddle

• Link: http://www.es6fiddle.net/
• Concepts: ES6 Constructors

ES6

• Link: http://www.2ality.com/2015/02/es6-classes-final.html
• Time needed to complete: takes several hours
• Notes: first dive into es6, use --harmony

Object Playground

• Link: http://www.objectplayground.com/
• Concepts: OOP