[et_pb_section bb_built=”1″][et_pb_row][et_pb_column type=”4_4″][et_pb_text _builder_version=”3.0.67″ background_layout=”light” text_orientation=”left” border_style=”solid”]
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:
- 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.
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)
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.
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
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];
What is a Transpiler?
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.
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?
Here is how it works:
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?
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:
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
If you don’t have pluralsight, I recommend checking it out, it is a great learning tool.
Happy Coding 🙂