Babel for those who have never used NodeJS

5

Maybe because I have a much better experience with PHP, I've never been a fan of JavaScript.

I've always found the language syntax confusing and complicated, and I've often used jQuery to do simple things that many would do with their feet on their backs.

However, in recent days I've been looking for a simple and elegant way to at least simulate the OOP basics that you have with PHP in JavaScript, the main, but not exclusively, inheritance.

It was when I accidentally stumbled upon the ES2015 and the syntax it proposed pleased me a lot because it was just what I wanted, something straightforward and straightforward and with a greater object-oriented power.

But, as always with my adventures with JavaScript, there was one: The 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 , which even has a cool online editor that transpires automatically.

The problem is that I do not have the slightest idea how to get started with it because I've never used that NodeJS, which I've heard of but never gave much thought for not liking JavaScript, and apparently it's one of the requirements.

I swear I tried to search for something more palpable to those who are completely alienated to language, but every article I read was more technical than the other, mentioning even more things that I have never used as a Grunt, Gulp, Karma or worse , always focused on Linux environment which is and always was very difficult for me and, in the end, no article knew how to make it clear what exactly to do.

I know that this goes a long way towards community standards, but I decided to take a risk because back there, when SOPT started, it was common enough silly questions like that to get complete and well written answers (often answered by the authors themselves) leverage punctuation - which I think is wrong) as content aggregation.

I kind of predict a shower of negative votes, especially by people who do not like to read and even close the question as being too broad (though not to be), but if possible a direction would be extremely useful to me and perhaps for others who are afraid to take that first step publicly.

    
asked by anonymous 04.01.2017 / 14:44

1 answer

3

I'll 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 publisher you referred directly to 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 news from yesterday and less used today.

Nowadays there is talk of developmental fatigue, and it refers to your problem exactly. To make a "hello world" you have to install a lot that you never heard about ...

Suggested steps to create a working project:

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'll need some.

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

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

To install plugins uses npm install nomeDoPlugin to join -s it is written to package.json . You can read more about it here .

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

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

  • install Github

This is not essential, but it helps a lot because you can install sample projects with ease. If you do not want to install you can always go to a project page and download .zip .

  • Read about babblers, webpack, browserify, and others

The webpack and browserify convert and copy code to be consumed. During the process you can run the babel internally, but you can also have the babel run alone. I gave an example in another answer about it .

  • Read about importing plugins into the code.

I answered about it here , but basically the files that will be transpiled 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 installing a boilerplate which is a turnkey project. There are many in Github, I found this one that looks useful: link

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

And then?

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

Good luck!

    
04.01.2017 / 15:27