JavaScript Framework Explosion

“Studies show that a todo list is the most complex JavaScript app you can build before a newer, better framework is invented.” -Allen Pike

Allen Pike published a great piece about the state of JavaScript frameworks.

It’s an exciting time to be in the JavaScript world. The language is getting more attention and tools daily. Companies and projects pick up and use new technologies in key roles before they hit fully stable, 1.0 releases. There has been an explosion in the number of frameworks for doing anything JavaScript, both on the client and the server.

JavaScript’s popularity has grown dramatically because it is the language of the browser. Only through JS can you make things happen in the browser. Developers use the language due to that privileged role and the widespread use of the internet (the fastest, widest distribution platform ever made). JS is THE choice if you’re developing client-side. Companies require many developers to use JS. Browsers are constantly changing, and leading developers to experiment more and more.

“…large, feature-rich JavaScript frameworks [make] slow, lumbering prey. A horde of young, nimble microframeworks swarm them, take them down, and fight over the meal. Modularity and componentization reigns.” -Allen Pike

The countless tiny frameworks make it hard for newcomers to the language to know what to use. It can have many negative consequences. Am I choosing the right framework to solve my problems, or are these 10 others a better choice? Will learning this framework provide lasting value, or will it be abandoned for others in a few months?

Developer attention on a framework contributes to its value. That’s what makes certain tools so great- developers using them and creating tools for them or directly improving them.

The tradeoffs of which framework to learn or use can be hard to navigate. It’s essential to identify which problems you’re solving, and which tradeoffs make sense for the project. Like most software engineering problems, it’s critical to know your needs.

It’s not clear if or when the JavaScript community will produce a clearly dominant frameworks. Angular is the current most likely contender. Perhaps a framework we haven’t heard of yet will surpass it, or one we know- React and React Native have been on people’s minds lately. Time will tell, and many more cleint-side JavaScript frameworks are certainly on the way. Hopefully each one solves a real problem, and learns about what works and doesn’t from the many recent frameworks that have been created.

http://www.allenpike.com/2015/javascript-framework-fatigue/

‘This’, AKA The Context in JavaScript

What is ‘This’?

The creators of JavaScript incorporated the identifier ‘this’ to allow object oriented features. It can be confusing or unclear what the keyword refers to at any given time, so this post will give some helpful guidelines. I’ll explain what ‘this’ is, and then how to figure out what it refers to in your code.

IF YOU ONLY REMEMBER ONE THING, REMEMBER THIS:
In JavaScript, ‘this’, the context, is bound AT CALL TIME. 90% of the time ‘this’ refers to the object on the left of the dot at call time.

The keyword ‘this’ relates to the context, which means what variables are accessible and what their values are. It’s helpful to think of ‘this’ as a hidden variable automatically passed into any function when it is run. ‘This’ can be accessed anywhere within a function, much like the arguments object (which allows access to all the arguments passed into a function).

It’s worth noting that ‘this’ inside a function doesn’t necessarily refer to the function it appears within. ‘This’ is bound at call time, and some techniques such as bind, call or apply allow for explicitly setting the context by passing it in as an argument. These tools are useful when using JavaScript, for instance when using setTimeout.

To figure out what the keyword refers to, always look for the function body the code is enclosed within. In your debugger, find where that function was invoked by looking one level down in the call stack.

The 5 Rules of This

There are 5 rules for understanding what ‘this’ refers to, each related to a specific rule. If you figure out which pattern is in effect, you can identify what the keyword refers to.

1. Global Reference:’This’ Isn’t In A Function

When floating around in the wild, such as the simple program below, the binding target is the global object. In a browser, this is usually the ‘window’ object.

console.log(this); //this refers to the the global object

You might be asking why this is useful. This allows ‘this’ to be accessible from every part of your program, but otherwise doesn’t help much.

2. Free Function Invocation

When a function is invoked, and isn’t a method of an object, we call it free function invocation. Like before, ‘this’ refers to the global object, and isn’t particularly useful.

var func = function(){console.log(“Such wow”)};
func(); // ‘this’ inside func refers to the global object

3. Using .call or .apply

Here and below is where ‘this’ is really useful. The first argument passed into .call or .apply at call time will be what ‘this’ refers to inside the function. This allows us to do the following:

func.call(obj); // inside func, ‘this’ refers to obj

Now within func, ‘this’ refers to obj. Now the following is possible, and powerful- you can pass in any object to a method, executing it as if it were a method of the passed in object! You can also pass in ‘this’ (eg func.call(this)) to preserve the context.

setTimeout(secondFunc.bind(this), 1000); // the context of setTimeout is bound to secondFunc with bind

Bind allows you to create a function with a context you explicitly pass into it. The callbackfunction that consists of the function you pass in with the context you pass in, in this case secondFunc with ‘this’ at setTimeout’s call time. Without using bind to pass in a context, secondFunc’s context would have been the global object (often the window object). 1000 milliseconds later, we might get unwanted results (for instance, we would get an error if secondFunc depends on values inaccessible in global scope). When the callback returned from bind is executed in 1000 milliseconds, ‘this’ inside secondFunc refers to the context we passed into bind, so everything runs as planned.

4. Invoking A Method

‘This’ refers to the object on the left of the dot AT CALL TIME. The method doesn’t have a different context than its parent object: it just inherits its parent context.

obj.method();

When invoking a method, ‘this’ refers to the object housing that method. Methods run in the context of the object to which they’re bound. They can easily access the values of the objects they are housed on, making methods more useful. You will see this pattern all the time when using JavaScript.

5. Construction Mode

The last pattern to know about ‘this’ is when an object is created using a constructor aka making an instance of a class. These are usually designated with an uppercase ClassName and have the word ‘new’ before it (like below). A new context is created for each invocation, and the value of ‘this’ is the new object.

var instanceOfClass = new ClassConstructor(parameters);

Now, anytime within instanceOfClass, ‘this’ will refer to itself. This is useful for assigning properties, which is done by passing in arguments (values) to the ClassConstructor. Constructors now operate on the instance they are creating, and it’s easy to create instances and assign them properties.

When ‘this’ appears in working JavaScript code, one of the above patterns will be present. Figure out which is happening, and you’ll know what you can expect ‘this’ to refer to. 90% of the time ‘this’ refers to the object to the left of the dot at call time.

Happy coding!