TodoMVC watch and code premium - Notes

video from Gordon Zhu's course

Notes

  1. Reading other applications code is an essential skill to learning to program. Similar to musicians or any other profession or hobby.
  2. Method chaining having the method return this, so that you can call another.
function
    .on('something')
    .on('something else');

Tips to Reading Source Code

Why it's important:

  1. Most of your time will be spent reading, not writing.
  2. Simulates working at a company or open source project.
  3. Fastest way to learn.
  4. Reading makes you a better writer (just like English)
  5. Learn how to ignore large parts of codebase get a piece-by-piece understanding

Before you start

  1. Read the docs (if the exist).
  2. Run the code.
  3. Play with the app to see what the code is supposed to do.
  4. Think about how the code might be implemented.
  5. Get the code into an editor

The process

  1. Look at the file structure.
  2. Get a sense for the vocabulary
  3. Keep a note of unfamiliar concepts that you will need to research later.
  4. Do a quick read-through without diving into the concepts
  5. Test one feature with the debugger
  6. Document and add comments to confusing areas
  7. Research items in #3 only if required
  8. Repeat

Next level

  1. Replicate parts of the app by hand (in the console)
  2. Make small changes and see what happens
  3. Add a new feature

Handlebars

handlebars

You can pass in the actual array instead of object and then change todos to simple 'this'

Phillip Roberts: What the heck is the event loop anyway? | JSConf EU 2014

Arindam Paul - JavaScript VM Internals, EventLoop, Async and ScopeChains

IIFEs

Immediately invoked function expressions or "IFFEs" for short
original function -

function helloThere() {
    console.log('hello');
}

IIFE funtion -

(function helloThere() {
    console.log('hello');
})()

Random

  1. Functions can always remember the variables that they could see at creation

Library System

One global variable period.

  1. Create: librarySystem('libraryName', function() { /* return library */});
  2. Use: librarySystem('libraryName');
(function() {
    
    var libraryStorage = {}
    
    function librarySystem(libraryName, callback) {
        if (arguments.length > 1) {
            // Creating a libary
            libraryStorage[libraryName] = callback();
        } else {
            return libraryStorage[libraryName];
        }
    }
    window.librarySystem = librarySystem;
})();

Prototype

  1. Definition: "the original or model on which something is based or formed"

  2. Two main things with Javascript prototypes

Object.create(dog);
Object.getPrototypeOf(myDog);
  1. Whenever you create an object in javascript, it automatically sets the default object prototype

Constructors

  1. Javascript constructor functions only difference is that it is called with the new operator

  2. Rules:

    • Capitalize your constructors
    • Constructors automatically set 'this' to a fresh new object.
    • Constructors automatically return the object at the end
  3. To add a method to a prototype, simply:

Dog.prototype.fetch = function() { console.log('fetch'); }
TodoMVC watch and code premium - Notes
Share this