Angular JS 1.5 Directives

Thursday, February 11th 2016

What are directives? Directives are markers on a DOM element (such as an element, class, type) that tell AngularJS's HTML compiler, to attach a specific behavior to that DOM element or its children. Angular uses directives to help guide the behavior of the website through either native or custom made directives (native directives will always start with 'ng-'). NOTE: You are able to change native directives. When AngularJS boots up, the HTML compiler matching directives with their respective DOM element, as with any other DOM element marker.

References:
https://docs.angularjs.org/guide/directive

AngularJS Structure

Wednesday, February 10th 2016

AngularJS structure: 
So why is angular structured the way it is? Well we have our models (factories) and our views (controllers). The angularJS models store data, useful info, properties and methods while controllers deal with the logic/behavior of the website. So the views are pulling references (data, functions, etc) from the models (factories) and mixing them together in different patterns make the website behave in a certain way. The W in MVW stands for 'whatever', which means that developers have control over how they structure angular, depending on their needs. (Which is smart because most developers choose MVC's based on their needs anyways, so giving them even more flexibility with MV + 'W' makes it more appealing).

References:
https://angularjs.org/
http://www.w3schools.com/angular/angular_intro.asp

AngularJS

Tuesday, February 9th 2016

AngularJS:
What is angularJS? AngularJS is a MVW framework developed by google and the open source community in an attempt to create one framework to rule them all....Just kidding. Really they wanted to make it so that you could do HTML and JS and CSS all in one code. In fact, some have suggested that JS really should have just been Angular, because of how it interacts with the outline, behavior and looks of the website all at once. AngularJS is pretty much an industry standard framework that many companies use because it is opensource and because it is supported by Google...and because it offers all of these awesome features.

References:
http://www.w3schools.com/angular/angular_intro.asp
https://docs.angularjs.org/guide/forms
https://docs.angularjs.org/guide/concepts

Compiler Theory

Monday, February 6th 2016

Compiler Theory
This theory is basically just a reference to compiler construction, which is the underlying mechanics of how a programming language operates. For JS, there are 3 main processes that the code goes through before executing:

1. Tokenizing/Lexing: The engine first breaks the code into parts/chunks, and not the way you would think it would. For example, var a = 2 is broken up into 2 parts. The first part is 'var a' (LHS) and the second part is '= 2' (RHS). 
2. Parsing: The parts of code are then converted into a tree like structure (Abstract Syntax Tree) that is grammatically representative of the structure of the overall code. 
3. Turns the AST into executable code, which is dependent on the platform

The thing about JS that leads people to think it's mainly dynamic language, when it is in fact it is in its roots a complied language, is that the code is not compiled in advance to executing. That is, it's compiled right before its executed, which apparently make it less optimal than other languages, though I guess this depends on the author's source code.

References:
http://stackoverflow.com/questions/tagged/compiler-theory
http://www.cse.msu.edu/rgroups/sens/Software/Telelogic-3.5/locale/english/help/htmlhlp/comptheory.html
http://www.diku.dk/~torbenm/Basics/basics_lulu2.pdf

Function Bind

Thursday, February 4th 2016

Function.prototype.bind(): 
The method 'bind' of the function class 'binds' the 'this' variable of a function to a particular object. The idea of the 'bind' method is that you can refer to methods that are dependent on contexts that the 'this' keyword simply cannot access, or you could but you would have to create a new file path from the method invocation every time. It essentially fixes variable access to a defined, fixed point in the stack flow state.

this.x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX(); // 9, because in this case, "this" refers to the global object

// Create a new function with 'this' bound to module
//New programmers (like myself) might confuse the global var getX with module's property getX
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81

In the example above sourced from MDN, we can see that the boundGetX context is bound to the getX method within the module, thereby referring to the x within module rather than in the global scope. For more, see 'Closure'.

References:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
http://javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/
https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/