How to Make sense of JavaScript Universe!
Recently I gave a talk at Department of Technology about JavaScript, to clarify what are all these JavaScript acronyms and frameworks.
The target audience was managers, supervisors, and those old timers that started coding 20 years ago and heard of JS or even wrote a couple of functions but never could understand what’s going on in JavaScript. They all have heard of Node.js, AngularJs, TypeScript, lint, and even Karma, but what do they mean, if they are somehow JavaScript, then why there are so many names?
If you have similar questions, then keep reading, this article will try to clarify this.
After reading this article, you can answer the following questions:
- How JavaScript fit into programming languages?
- What is ES5, ES6, ECMAScript, ES 2015?
- What is Transpiler?
- What is polyfill?
- What is Node.js?
- what are NPM and yarn?
Please note this a complete overview aka intro article.
What is JavaScript?
Despite the mention of the “Script” word in JavaScript, JavaScript is an independent language. On the surface, it has a familiar semantics as Java, but it is also familiar if you are coming from C# and PHP, but being a functional language it is totally different syntax as Scheme, or Haskel, or Scala!
Why am I mentioning these languages?
Well, All the bazillion Programming languages can be categorized into only two categories. (Yes, you can argue that there is more and go super philosophical about it, more deets on Wikipedia: https://en.wikipedia.org/wiki/Programming_paradigm, but in my opinion, the following two categories would be a great start for organizing languages especially if you are new to this)
1- Imperative
2- Functional
C#, and Java will go into the first category (Imperative) think about them as English with different accents or vocabulary base, Writings of Shakespeare is in English, and so is Think and Grow rich, yet they are so different.
JavaScript, Scala, Haskel, Scheme, and LISP, are part of the 2nd category (Functional).
out of the functional languages mentioned above, JavaScript has the most familiar syntax for imperative languages and even is trying to imitate Class, and Object-Oriented Design, especially with the introduction of ES6.
Although a JavaScript Class might look like C# Class, under the hood, they are totally different,
anyways, as I mentioned earlier I’m just trying to provide an overview, and digging deeper into the nuances and design specs for each language is not part of the scope and nor I do have all the expertise and knowledge.
What is ES6? (ECMAScript)
ES6 is referring to ECMAScript 2015 (the 6th edition of ECMAScript). You can read about it in more details at Wikipedia, or the official website: ecma-international.org.
Complete specifications of ES6 aka ES 2015 can be read at http://www.ecma-international.org/ecma-262/6.0/
Wikipedia Article: https://en.wikipedia.org/wiki/ECMAScript
Basically, with the new specs, JavaScript will get new features, It is a similar concept for C# 3 to C# 7. Or .Net Framework versions. There are features in the newer language specs that did not exist in the previous version.
Here is one of my favorites, Spread operator:
Assume we have an array of numbers and we want to find the maximum between these numbers:
var numbers = [361,9,95,19];
We could just use IF this was not an array:
var max = Math.max(361,9,95,19);
With the new spread operator, we can do it like this:
var max = Math.max(…numbers);
That’s it! One of the greatest benefits of the spread operator is inserting an item in Front of an array. inserting something at the end of an array is very easy, we just do a push. Assume we have an array called “array” and we want to insert a “newItem” in front of it:
var array = [newItem, …array];
Unfortunately not all the features and operators that are proposed in the ES6 are implemented universally, it is up to each JavaScript engine provider to provide these new features.
What is a Transpiler?
So if you are writing javascript for Chrome Browser, it uses Google’s V8 engine, which has 97% of the ES6 features. But, if you also want to support IE11, it only supports 11% of these new features. oops! that’s a problem.
before I go to how the community is trying to solve this problem, I wanted to mention a valuable resource on the compatibility. There is a project called Kangax, It is really awesome! you can see all the browsers, polyfills, and servers and see how many of these features they are implementing.
The website is located at https://kangax.github.io/compat-table/es6/
My favorite part of the site is the left side. All the features of ES6 are listed, and there is a little arrow on the right side of that box. if you click on that, all the different aspects of that feature are listed and also there is a sample test code on how to evaluate that. This is one of the best learning tools.
ok, now to solve this incompatibility, one of the approaches is that you write your javascript in ES6 style, and then use a Transpiler (kind of Compiler-ish) to convert (Transpile) your ES6 code to the ES5 code which has a much more compatibility.
Babel, for example, is one the popular transpilers in this regards.
Basically, you write the code in ES6, and use Babel, to convert it to ES5, and then run your code. The process can be automated at development time, that your code gets transpiled, minified and stored in “build” folder, which then you can reference it in the browser.
Or it is possible to include the transpiler in the webpage, this way your code will be transpiled at runtime. this approach might be acceptable for desktop browsers, but definitely not a good idea for mobile and tablet.
What is TypeScript?
Another side effect of this Transpilation (if that’s not a word, it should be 😉 is the invention of a new Typed language called TypeScript, it is similar to the “classic” JavaScript but also has its own features. From the official website of typescript: http://www.typescriptlang.org/
TypeScript starts from the same syntax and semantics that millions of JavaScript developers know today. Use existing JavaScript code, incorporate popular JavaScript libraries, and call TypeScript code from JavaScript.TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any JavaScript engine that supports ECMAScript 3 (or newer).
Here is how it works:
After writing your code in typescript, you will use typescript compiler to compile the TypeScript to the “classic” JavaScript.
There is a great playground on the typescript website that you can see how this transpilation works, and also you can experiment with it without installing anything on your machine.
Here is the address: http://www.typescriptlang.org/play/index.html
TypeScript is created by Microsoft and is now one of the Official supported languages at Google. Google has an elaborate process to internally adopt a language, (usually takes 2 years).
How Node.js fits into this whole story?
Up until a couple of years ago, the main presence of JavaScript was in the browser world. It is also worth mentioning that the document object, that is extensively used in web development ONLY exist in browsers. so TypeScript and pure JavaScript has no notion of the document object or window object; so commands like document.getElementById(“demo”); Window object and in general the whole HTML DOM object only make sense in a browser.
Node.js uses Google’s V8 JavaScript Engine, and makes it possible to write javascript that runs on the server! So now all the web developers that already knew javascript, could also write server-side code. JavaScript in both Client and Server makes total sense!
As I mentioned this is just an overview, but if you would like similar articles but more in-depth, or you want to have a workshop or presentation for your company, just drop me a line or comment on this post, and I’ll do my best to provide that.
You can learn more Node.js at Wikipedia or Official Node.js website
Official Website: https://nodejs.org/en/
What is npm?
As the community around Node.js grew, they started creating packages (modules) that everyone could use, like a package for converting numbers to Roman Numerals, or creating WebApi, or sending emails, and thousands more. The most common way of managing these was by using a small but awesome utility called npm: Node Package Management. or Node Package Manager. Recently there is also a new kid in the block called yarn, that in essence does the same thing. These tools can also be referred to as Dependency Management tools.
Again, since this is just an overview, we won’t dig deep into these, but if you want to start a new Node.js application, first download and install Node.js, then you can do:
npm init
and answer a couple of questions. Now you have a npm ready application. you can create index.js file and make it a Node.js application, or you can add some other libraries and make it React or Angular application.
Assuming we want a Node.js app, you have to create an index.js file, this would be the point of entry for your application.
If we want to add logging, there is a package called winston, we can just install it like:
npm install winston –save
and then in our index.js file we can use it:
var winston = require(“winston”);
winston.log(‘info’, ‘Hello distributed log files!’);
winston.info(‘Hello again distributed logs’);
You can run your node.js app by typing
node index
In Part two of this “how to make sense” article, I’ll try to do a brief overview of JavaScript testing, (Jasmine, Karma, Mocha, Chai ….) and Linting, and mention some other popular libraries, like Lodash, jQuery, Breeze, …
I hope this will give you a good overview of JavaScript world so that you can see how these different components fit together.
If you don’t have pluralsight, I recommend checking it out, it is a great learning tool.
Learning Tools:
Happy Coding 🙂