Front End Developer (AngularJS)

MVC stands for Model View Controller. MVCs typically organise web applications into a well-structured pattern, making code easier to maintain. The term is well-known by developers and some famous examples of MVCs include Backbone.js and AngularJS. What makes this question interesting is not whether the interviewee has used a MVC, but what his or her preferences and experience reveal. Candidates who are able to articulate why they use one MVC over another, show that they are engaged in what they do, care about the technology they use, and have considered different options. You want to be able to trust your front end developer to keep up to date with new relevant technologies and have a clear idea of when and what should be used.

You can add a new method to a javascript class using prototype:

function Person(name) {

this.name = name;

}

Person.prototype.walk = function() {

console.debug(this.name + " is walking.");

}

// Calling the new method

var person = new Person("Hussain");

person.walk(); // "Hussain is walking."

It's worth mentioning that adding methods via prototype is the most inexpensive way in terms of performance since the method is tied to the prototype of the class. It means, for every new instance of class Person, you will have access to the prototype's walk() method. Now, if you declare walk() method inside the Person class, you will end up recreating the method for every new instance of Person.

As the UI gets more and more complex we need some good ways to keep it more and more maintainable and reusable, and Some MVC frameworks for javascript have been widely adopted lately and it's a good plus if you have already used before and knows what's the benefits of them. The most famous MVC frameworks are backbone.js and angular.js, it's hard to not hear about them.

There are many advantages in using these frameworks, I can point out some of them:

☛ Organization: Forces your webapp to follow a well structured pattern;

☛ Maintainable: With organization comes an easy to maintain code;

☛ UI Binding: Some frameworks allow you to do that. So everytime your model changes, the view reflects it and vice-versa;

☛ Decoupled client: MVC frameworks like backbone.js incentivise you to use REST API's though their urlRoot attribute in their Models;

☛ Reusable components: Create reusable visual components;

☛ Single-page apps: Build single-page apps with Ajax requests;

☛ Friendly URL's: Native support for client-side url mapping;

Every web project starts with everything neat, all CSS is organized in blocks or different CSS files and you know where everything is, right?

Right, until your project gets bigger, deadlines get tight, more developers come on board and someday you notice a strange behavior in some elements of the page. When you inspect their styles you spot lots of css overrides coming from everywhere. This is the moment you realize how messy CSS can be.

Sass is the modern way of doing CSS and can save many lines of code in your stylesheets. This is possible because Sass works with variables, nested syntax and mathematical operations.

In my opinion one of the nicest features of sass is the possibility to write a selector just once and put all styles for that inside it. Do you need a more specific selector under an existing one? Just nest the specifics into the generic one.

Check out the example below taken from their official website. It's awesome how it can "neatify" your code.

/* .sass */

table.hl

margin: 2em 0

td.ln

text-align: right

li

font:

family: serif

weight: bold

size: 1.2em

/* .css */

table.hl {

margin: 2em 0;

}

table.hl td.ln {

text-align: right;

}

li {

font-family: serif;

font-weight: bold;

font-size: 1.2em;

}

In javascript there's no classes like in Java, what we actually call a class is in reality a function simulating a class behaviour. For being so flexible, there are many ways to create a class in javascript, below you'll find 3 ways of doing that.

Class using function as a constructor:

function Person(name) {

this.name = name;

}

// Creating an object

var person = new Person("Hussain");

person.name; // "Hussain"

It's very important to notice that you have to use the keyword new when creating a new instance of that class otherwise you will have logical problems regarding the this will reference window object.

Class Literal notation:

var person = {

name: "",

setName: function(name) {

this.name = name;

}

}

person.setName("Hussain");

person.name; // "Hussain"

In this example we don't use a function to define our class, we are creating a singleton object person with one attribute and one method. You can use that object straightaway, no instantiation in this case.

That notation is useful when you don't need to create instances of that class or you'll use it just once in your application.

Singleton through a function:

var person = new function() {

this.setName = function(name) {

this.name = name;

}

this.sayHi = function() {

return "Hi, my name is " + this.name;

}

}

person.setName("Hussain");

alert(person.sayHi()); // Hi, my name is Hussain

As you can see in the code snippet above, we have a function like the first example and besides we also have the new keyword before the function declaration. It means that we are creating one instance of that class at the same time we are declaring it.