Saturday, 24 May 2014

Build a Strong AngularJS Foundation


A Whistle-Stop Tour of Angular


This video series gives a much friendlier introduction to AngularJS than the documentation available on the AngularJS website and includes examples and exercises to clarify your understanding. It manages to cover a lot but the coverage is very cursory and the short, sharp videos make it feel a bit rushed.

When I started watching this series I found myself constantly checking if a video had really ended or if there was a playback problem. They end very suddenly and most unexpectedly. Often many topics are promised at the beginning but only the most crucial are really explained and most videos end with one feeling there should’ve been more.

The promise of the title is kept and all fundamental aspects of AngularJS are  explained as well as being clarified with examples and exercises. Views, Controllers, Services, Directives and Testing are covered with an added bonus section on Animation. I enjoyed the succinctness of the demonstrations, often books and video series blur the concepts with elaborate examples. 

The series divides into seven sections with each section covering a core aspect of AngularJS. The sections can be viewed in any order as the examples and exercises are fairly independent though they do build upon previous learnings.

If you already have a fair grasp of Javascript development and are starting-out with AngularJS this is a good way to rapidly get a foundation.

Rating: 4 / 5

Saturday, 26 October 2013

Javascript Fundamentals Part 1

This is the first in a series of posts aimed at understanding the fundamentals of JavaScript which I will place here. The source code for this series of blog posts can be found here

Passing parameters to functions

Is it by reference or by value?

Whether a parameter is passed to a function by value or by reference is the question most natural to programmers from other languages. To answer this question consider that all primitives (undefined, null, boolean, numbers and strings) are immutable whereas objects are mutable. So from the latter it would seem primitives are passed by value and objects by reference. Lets see.

Passing objects around

So let's look at the following code example.
 function loadEmployees() {
        var employees = EmployeeService.getEmployees();
        if (!employees 
           || !Array.isArray(employees)
           || employees.length <= 0) return employees;
       
       var index = 0;
       for(index in employees) {
            var employee = employees[index];
            formatEmployeeDisplayText(employee) ;
       }
       return employees;
    }
    
    function formatEmployeeDisplayText(employee) {
        if (!employee
            || !employee instanceof jsFundementals.staff.Employee ) {
            throw new Error("Record presented is not an instance of jsFundementals.staff.Employee");
        }
        employee.displayText = (employee.title || " ") +  " " +
                                            (employee.firstName || " [first name]") +  " " +
                                            (employee.lastName || " [lastname]");
    }
Each employee record is passed to the formatEmployeeDisplayText function and it's displayText property is set. Objects are mutable so the displayText property remains set after returning from the formatting function.

Passing primitives around

The following code passes a string to a function expecting any changes to it to persist when that function returns:
/*
This will not work because strings are immutable.
*/
function() {
 var warnings = "";
 var employees = loadEmployees(warnings);
 if (warnings) {
   console.log(warnings); //This will never execute.
 }
 return employees;
}

function loadEmployees(warnings) {
         var employees =[];
        try {
        employees = EmployeeService.getEmployees();
        if (!employees
                || !Array.isArray(employees)
                || employees.length <= 0)
            return employees;

        var index = 0;
        for (index in employees) {
            var employee = employees[index];
            formatEmployeeDisplayText(employee);
        }
        } catch(e) {
            warnings += e.message  + " was encountered during employee loading.";
        }
        return employees;
    }
This kind of mistake is easy to make. The warning may be set in the function but does not persist when it returns.

Can we set an object to a new instance?

So, if we pass in a parameter that is an instance of an object can the function change it to point to a new object instance.
 //...
if (!nextEmployee || !nextEmployee.displayText) {
                               nextEmployee = new jsFundementals.staff.Employee();
                               makeDefaultEmployee(nextEmployee);//Will not alter the nextEmployee.
}
//...
/*
Does not work because you can not change the object the value points to.
*/
function makeDefaultEmployee(employee) {
 employee = new jsFundementals.staff.Employee("[title]", "[firstName]", "[lastName]");
}
This is what one would expect. Objects are mutable but parameter values can not be changed to point to new object instances.