frontend_notes.md

Frontend Footnotes

Contents:

• Installing NodeJS
• Installing Ruby
• Frontend Stuff
• Javascript Overview
• What the **** is angular and why everybody is going bananas about it

Installing NodeJS

The recommended installation method is using NVM (Node Version Manager). Using a version manager reduces the problem of upgrading Node and switching versions to a couple of console commands.

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.6/install.sh | bash

This will install NVM on your home dir under ~/.nvm. Ensure NVM loads each time you open a terminal by putting this lines on your ~/.bashrc:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

Then you should have the command nvm available on the terminal.

# List available versions of Node and install the latest:
$ nvm ls-remote
# ...
         v6.1.0  
         v6.2.0  
         v6.2.1  
         v6.2.2  
         v6.3.0  
         v6.3.1  
         v6.4.0
$ nvm install v6.3.1

Installing Ruby

Ruby is required to compile SASS into CSS for the frontend. There's a SASS compiler for NodeJS but the current frontends don't use it. You can either use the ruby package that comes with most distros of Ubuntu, or use a ruby version manager like rbenv. For the purpose we are giving to ruby it is a little of an overkill to use a version manager. But for more seriuos use I recommend using the version manager.

Install ruby either by getting the system package:

$ sudo apt-get install ruby

... or with rbenv

$ git clone https://github.com/rbenv/rbenv.git ~/.rbenv
# Ensure rbenv loads on shell startup
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
# and we will also need this rbenv plugin to install rubies
$ git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
# reload your shell and list available ruby versions
$ rbenv install --list
# Install latest version (ignore jruby, rbx, or other prefixes, they are flavored versions of ruby)
$ rbenv install 2.3.1
# Set this version as global, if no version is selected rbenv will fallback to the system installed ruby, if present
$ rbenv global 2.3.1

Once we have rubies, install the compass gem, the library that compiles SASS:

$ gem install compass

Frontend Stuff

Almundo frontends consists of simple scripts that compile and serve static assets for the browser (CSS, JS, images, fonts, etc). They also have code that interact with the internal APIs. Nowadays, the frontend technology stack looks like this:

• Express. A minimalistic web server.
• Gulp. A task manager that is tipically used to do stuff like compiling SASS, transpiling Typescript or ES6 into ES5, copy images, and more. Similar but quite like ruby's rake, or C's make, but with the characteristic that the JS community built a world of plugins on top of it to solve frontend tasks. Alternatives: Brunch, WebPack, Grunt.
• Bower or npm packages (hopefully). Most frontends actually just have source files downloaded front the homepage of the library toss into the repo. This is comparable to download the source of your language's packages instead of using a package manager. *Avoid This, use npm, or if not possible bower, to install frontend dependencies.

Javascript Overview

Javascript is a functional and object oriented language that promotes an asynchronous style of programming. Everyday coding patterns (when design patterns are used ..) revolve around using Promises -and/or Observables if you go fancy-, command objects, higher order functions.

Js objects are basically maps that also have a prototype. This are all object literals:

var o1 = {}:
var o2 = {asdf: 2, qwer: 3}
var o3 = {
  asdf: function(x) { return x * :; }
}

o3.asdf // returns the function
o3.asdf()

The language features protypical inheritance. Examples:

var o1 = {asdf: 3, qwer: function(x) { return x * 2; } }
var o2 = {asdf: 4, uiop: 5}
o2.__proto__ = o1

console.log(o2.asdf)
console.log(o2.qwer(100)) // objects will look up in it's proto chain if a property is not found within them

You can also can have constructor functions:

// a ES5 class, supported by all browsers
function Dog(opts) { // the constructor
  this.color = opts.color;
  this.name = opts.name;
}

// instance methods
Dog.prototype.bark = function() {
  console.log("I am a dog and my name is " + this.name);
};

// "static" methods
Dog.kill = function(dog) { console.log("Die " + dog.name); }

var robert = new Dog({name: "Robert"});
robert.bark();
Dog.kill(robert);

ES6 brings a lot of features to javascript that make it a little more pleasant to work with, like class syntax, ´const´ and ´let´ variable declarations, destructuring and spreading operators and more. The downside is that it needs it cannot run in all browsers unless transpiled with Babel (it is fairly simple to do though). You can use it freely on server side depending on the version on your nodejs interpreter.

class Dog {
  constructor(opts) {
    this.color = opts.color;
    this.name = opts.name;
  }
  
  static kill(dog) { console.log("Die " + dog.name); }

  bark() { console.log("I am a dog and my name is " + this.name); };
  
  // example of object desctructirng in function arguments
  // and string interpolation using template strings.
  bite({thing}) { console.log(`Yum yum, My name is ${this.name} and I like to chum on this ${thing}`); }
}

const dog = new Dog({name: "Marcos Rojo"});
dog.bite({thing: "Shoe"});

What the !"#$" is angular and why everybody is going bananas about it

Angular is frontend framework that aims to bring a common, centralized pattern to developing graphical interfaces in the web and is better used to develop SPA's (single page applicatiosn). It also provides tools to build reusable components. And most importantly, it implements data-binding. It was not the first framework to try to do it, but it earned a place in the communinity and has a bunch of "plugins".

Data-binding allows to write declarative code, in contrast with procedural/imperative scripts that add behavior to elements.

Consider this JQuery code:

<input type="text" id="name-input"/>
<span id="name-display"/>

var nameInput = $("input#name-input");
var nameDisplay =  $("name-display");

nameInput.change(function() {
  nameDisplay.text(nameInput.val());
});

Let's rewrite this with angular.

<div ng-app>
  <input ng-model="name"/>
  {{ name }}
</div>

We can observe 2 things here:

1.- The data layer is not tied anymore to the markup. You don't have to ask $("input#name-input"); to get the value of a variable name. The data is encapsulated in it's own layer and isn't tied to an element. 2.- It's declarative. In this case there's no need for javascript to make this code work, but even if there was, only looking at the html you get a hint of what the code does and what is happening.

Checkout some other examples:

• HelloWorld
• TodoList
• ngModel and filters usage