So I want to become a front-end guru. I’ve been a .NET guy for the last 6 years or so. I used to be proud of that. Then I moved out to San Francisco.

Telling people you’re a .NET developer out here is like telling them you’re a Flash, COBOL, or punch card developer. You get those, “oh, well, you’re useless” stares.

That’s not the only reason, though. I actually believe that the majority of application software will be (if not already) written for the client-side web. Which means javascript. Even the server-side can be written in javascript now with node.js.

Fortunately, learning a new programming language is not like learning a new spoken language. Once you get a hold of a few new concepts, syntaxes, patterns, and processes, you’re well on your way to building just about anything.

The best one-stop resource for learning javascript I found was Mozilla’s Learn Javascript.

Here’s a short list of stuff I’ve learned to get started with my front-end gurudom:

Concepts

• Javascript is ridiculously flexible (dangerously so).
• There are just six basic types: numbers, strings, booleans, objects, functions, and undefined.
• Arrays are objects, but with a special “length” property and a number of useful methods.
• You can append an item to an array by simply assigning it to the end of the array, i.e. you don’t have to declare the size of the array.
• Functions can be called without passing the parameters it expects, or with more than it expects.
• Functions can be anonymous.
• Functions can be nested inside other functions, which helps structure logic and block scope variables.
• Functions can be passed as parameters to other functions.
• Any function can be used as an object class if called with “new”.
• The manner in which you call an object determines what “this” refers to inside that object. With dot or bracket-notation, it’s the current object, without, it’s the global object.
• You can add a property or method to all instances of an object with “prototype” during runtime.
• A closure is the combination of a function and the scope object in which it was created. Allows you to create an object that stores the value that was passed to it when the object was created.
• Singletons are objects that can only be one instance. Useful as a namespace provider which isolate implementation code from the global namespace so as to provide a single point of access for functions.

Syntax

The && and || operators use short-circuit logic (not boolean), which means whether they will execute their second operand is dependent on the first.

var name = o && o.getName();

JavaScript has a ternary operator for conditional expressions:

var allowed = (age > 18) ? “yes” : “no”;

The double-equals operator performs type coercion if you give it different types:

1 == true
> true

To avoid type coercion, use the triple-equals operator:

1 === true
> false

More efficient for loop:

for (var i = 0, len = a.length; i < len; i++) {…

Patterns

This is a much larger topic, one that I’m still studying. In my next post on my experiences with Ember.js, I’ll dive a little more deeply into the MVC design pattern.

In the meantime, read the MVC section of Learning Javascript Design Patterns.

Development Processes

Perhaps the most irritating part of front-end development is the runtime environment: your browser. Since all the debugging happens there, you’re constantly switching between your IDE and your browser, then monkeying around in the development tools (Inspector in Chrome, Firebug in Firefox, or Developer Tools in IE).

I’m becoming more proficient with this process. The inspector in Chrome has what you need: watch lists, breakpoints, callstack, etc. So it’s just a matter of swallowing the extra clicks/keystrokes required to constantly jump around.

I discovered my new favorite IDE, Sublime Text 2. Thanks Rob Dodson for the tip. It has as number of cool features, among them a package manager, smart syntax highlighting and autocompletion, split views, and a mini-map (shows you where you are in the entire document… super useful).

Packages for Git and SFTP make it easy enough to move my projects to and from the cloud.

That’s it?

This is such a very small slice of what’s required to become a full-fledged Javascript guru.

But it’s a start. Start early, start often.

Or as Mr. S. N. Goenka likes to say, “staaaart agaaaiin.”