Babel for those who have never used Nodejs

Question

Maybe because I have a much greater experience with PHP I’ve never been a fan of Javascript.

I always found the syntax of language confusing and complicated and often resorted to jQuery to do simple things that many would do with their feet on their back.

However, in the last few days I was looking for a simple and elegant way to at least simulate the basics of OOP that one has with PHP in Javascript, main, but not exclusively, heritage.

It was when I accidentally tripped on ES2015 and the syntax proposed by him pleased me a lot because it was well what I wanted, something simple and direct and with a greater power of Object Orientation.

But, as always with my Javascript adventures, there was one problem: ES2015 is not well supported by browsers. Even Chrome seems to need a certain experimental option to be enabled for these features to work.

Then again, I stumbled upon something called Babel, that even has a nice online editor that transcomplates automatically.

The problem is that I have no idea how to even begin to use it because I never used the Nodejs thing, which I heard about but I never really cared about because I didn’t like Javascript, and which, apparently, is one of the requirements.

I swear I tried to research something more tangible for someone who is completely alienated from language, but every article I read was more technical than the other, mentioning even more things I never used as such a Grunt, Gulp, Karma or worse, always focused on Linux environment what is and always was very difficult for me and, in the end, no article was able to make clear exactly what to do.

I know this is a lot out of community standards, but I decided to take a risk because back there, when SOPT started, it was quite common for silly questions like this to receive complete and well written answers (often answered by the authors themselves in order to leverage score - which I find wrong) as content aggregation.

I kind of foresee a rain of negative votes, mostly by people who don’t like to read and even the closure of the issue as being too broad (though not)but if direction is possible it would be extremely useful to me and perhaps to others who are afraid to take this first step publicly.

Answer 1

I will try to give pointers. Things to read and general concepts.

To test future Javascript you can use jsFiddle with the language "Babel" (example here) or codepen (example here), and there are others like the editor you mentioned directly at Babel.

To create a project you need to make some decisions regarding technologies. Javascript is developing very fast now, relatively recent technologies like Gulp and Grunt are yesterday’s news and less used today.

Today, there is talk of developmental fatigue, and it refers exactly to your problem. To make a "hello world" you need to install a lot of things you’ve never heard of...

Suggested steps to create a working project:

• install the Node.js (download here)

Node.js is Javascript on the server. You can read more here. With it comes the NPM which is a repository of packages/plugins/programs. Babel has several plugins, you will need some.

The latest versions of Node already run ES6, so you can write and test ES6 code with it.

The package.json is the application configuration file where you store dependency information, so that everything can be re-installed on another machine with a simple npm install.

To install plugins uses npm install nomeDoPlugin if you join -s he is recorded in the package.json. You can read more about it here.

To export modules so you have separate code in different files you can read here.

To read about versioning in package.json you can read here.

• installs the Github

This is not essential, but it helps a lot as you can easily install sample projects. If you don’t want to install you can always go to a project page and download the .zip.

• Read about transpilators: Babel, webpack, Browserify, among others

The webpack and Browserify convert and copy code to be consumed. During the process you can run Abel internally, but you can also have Abel run alone. I gave an example on another answer on that.

• Read about importing plugins into code.

I replied about this here, but basically in the files that will be transposed to ES5 (to be used in the browser) you can do:

var plugin = require('plugin'); // neste caso é uma bliblioteca que tens instalada
var plugin = require('./plugin'); // neste caso é um ficheiro de nome `plugin.js` na mesma diretoria que será importado

• test an application

I suggest you install a "Boilerplate" which is a "turnkey" project. There are many on Github, I found this that seems useful: https://github.com/developit/express-es6-rest-api

This project uses ES6, Express (which is a library for "server finability").

And then?

Read the suggestions / links I suggested. After that, when questions arise put here on the site, isolated, one by one in each question and we will help to solve.

Good luck!