Recently I was writing up a lesson plan to teach a small group about data display in Gatsby. My goal was to break down the topics and have an answer to all of the low level questions that participants might ask. In the process of doing this I noticed that the ecosystem of javascript has a ton of layers! Figuring out what technology is in charge of each feature is incredibly helpful for debugging and growing your knowledge. So without further ado, I give you the layers of javascript!

Javascript...or is that ECMAScript? ES6? What's going on?!?!

Javascript is your base language. However, it's based on ECMAScript which is a standard for scripting languages. ECMAScript has versions, just like programming languages. Understanding what happens when the ECMAScript specification changes is important.

In a way, ECMAScript is there to tell you what Javascript could do. What it actually does is up to the Javascript engine that's interpreting it. Javascript engines exist in browsers. Browsers need to support the standard in order for you to use the new features.

At present, the ECMAScript version that is widely supported is ES6. ES6 marked major changes in the standard, introducing concepts like let and const.

character.map(function ( [first, last] ) {
    return first + last
});

Destructuring assignment is one of the things introduced in ES6

Understanding ECMAScript's place in the Javascript ecosystem is especially helpful if you're looking to use newly introduced features.

Node -v is my Javascript version, isn't it?

One of the more confusing aspects of front end development has to do with Node. When you're developing locally you likely have a version of Node your computer points to. Node is actually bundled to include two different things. Node.js runtime and npm package manager. As a result, you may be using one, both, or neither.

You can use npm to install external project dependencies. That does not necessarily mean you're using Node.js runtime.

As mentioned before, Javascript is interpreted by the browser. Node.js runtime is a combination of an interpreter and environment that allows you to use Javascript as a general purpose programming language, i.e. outside of the browser. It's actually based on the Javascript interpreter Chrome uses. However, that means if you're building something like a React application, Node.js runtime is not having any affect. What you're really interested in is how different browsers are able to interpret your code.

JSX

So there are layers to the way your code is interpreted and what features are supported. However, that's just one of the ways the actual syntax of your code can be influenced. One of the complexities of modern Javascript is that core frameworks are in use. React is a particularly popular framework. Within React you have the ability to use JSX. JSX is a Javascript syntax which allows you to use HTML tags directly in your React components. This means you're using a combination of the Javascript language and the markup you'd expect to see with an HTML file.

const IndexPage = () => (
    <Layout>
        <div>Your code is going to go here!</div>
    </Layout>
)

JSX has different syntax rules and features than the Javascript language. Expectations about function scope parentheses vs. brackets may seem unfamiliar. Recognizing that this is a rule that JSX enforces will help remind you why it's clashing with your Javascript knowledge.

Frameworks

Another layer of your Javascript are features that are available specifically because of the framework you're using. For example, in React you may deal with passing props. Props is a concept of the framework.

function Introduction(props) {
  return <h1>Welcome, {props.name}</h1>
}

Frameworks...on frameworks?!?!

One of the complexities of modern Javascript is that core frameworks are in use...sound familiar? That means that you have frameworks, like Gatsby, that are based on React. Understanding what Gatsby is doing versus features provided by React can be a challenge. While this is unlikely to affect your syntax it will affect your behavior in various situations. For example, Gatsby passes the result of a GraphQL query directly to your component props. Try doing that in React and you'll wonder where you went wrong.

Wow

Writing a Javascript application can be amazingly easy to set up with all the tools out there. However, when you get into more sophisticated features and dig into the code a bit more it's easy to get lost. Knowing what layer of the stack is giving you problems, or may provide an easier solution, is incredibly helpful.