New to JavaScript

#1

I’d rather use JavaScript than CoffeeScript for Atom development right now. I know that’s an issue that’s been discussed to death, so I’m not looking for flames. I’m looking for documentation, tutorials and examples for Atom development in JavaScript.

When I learned CSS, I wrote in CSS until I was comfortable enough with it to start to use Sass and/or LESS. It would have been awkward learning Sass without having first learned CSS. And the same seems to apply here - I need to get up to speed in JavaScript before tackling CoffeeScript.

So, pointers for JavaScript newbies wanting to create things for Atom?

#2

Most (if not all) examples in the docs are written in CoffeeScript right now. You could copy-paste them on the coffee-script website when you click the “try coffeescript” button at the top of the page - it translates into JavaScript on the right side - to get a rough idea of what’s happening.

#3

Perhaps @bolinfest has some suggestions since he wrote the ES6 support for the most part? Also, @thomasjo just got done converting at least one of his packages to ES6.

#4

I use a nice chrome extension that converts both ways between CS and JS. It is called Try Coffeescript Enhanced.

#5

I’ve also just converted one package to es6 from coffeescript, but to me, the experience was “Just write JS instead of CS”. Not very helpful to someone wanting to learn either :wink:

#6

Yeah, or you could use one of the million atom packages that does it for you :wink:

#7

Whatever you do, do not use the transpiled JS from e.g. coffee-script. You should hand-roll your JS. I highly recommend taking advantage of the Babel transpiler which is supported in Atom out of the box. Just begin your JS files with "use babel"; and then check out https://babeljs.io/docs/learn-es6/.

I quite recently converted my LaTeX package from CS to JS. You can check out the work I did here if you’re interested: https://github.com/thomasjo/atom-latex/pull/76.

#8

I prefer coffeescript over JS simply to avoid the orgy of dollar signs and anonymous functions with brackets. It’s just nicer to read.

#9

@samis I agree that CoffeeScript is “nicer” to read and simpler to type than JavaScript, but as a newbie to JavaScript, I would rather learn that and later expand to CoffeeScript. Atom using CoffeeScript by default means I’m looking for tutorials and examples in JavaScript while I learn JavaScript and programming to Atom’s API. Hence this thread.

#10

I wasn’t addressing you directly. It was more of a general comment.

#11

It is very easy to convert JS to CS. You can convert JS examples to CS and learn in a completely CS environment.

I use a chrome browser extension called try coffeescript extended. One click, a paste, and you can see the CS.

#12

My hope is to find tutorials and examples for Atom development written in JavaScript. I don’t want to learn CoffeeScript right now, or maybe never.

#13

I think the best examples you’re going to find right now are the packages mentioned above.

#14

I believe my package (linked further up) is a decent example of idiomatic ES6/ES7 code. Some non-trivial bits in there as well. Let us know if/when you have concrete problems or questions.

#15

Thanks, guys. I got my one-step-beyond-trivial package converted to JavaScript and JSON after having built it from CoffeeScript and CSON example code. This post helped, too:

So now it’s time to learn more JavaScript and then try a more ambitious package.

#16

Indeed it is. And I agree with your premise that Atom would be better off if development were primary in JavaScript (ES6, preferably) in place of CoffeeScript.

#17

We have been extremely happy and productive using Babel for Nuclide. I would spend some quality time on http://es6-features.org/ to get up to speed on all of the features of JavaScript that are available to you in ES6 that weren’t available to you in ES5.

Further, I would also get comfortable with async/await. I’m hoping to make time to write my own tutorial, as I haven’t found an external one that I’m really happy with yet. It boils down to a handful of rules:

  • The await keyword can be used only in a function that is declared async.
  • An async function always returns a Promise (no matter what you might think).
  • await takes an expression that evaluates to a Promise and returns the value that the Promise resolves to. (This means that it gives up the event loop while it is waiting for the Promise to be determined.)
  • An ordinary try/catch can be used to wrap an await expression to catch a rejected Promise.

If you aren’t up to speed on Promises, I recommend http://www.html5rocks.com/en/tutorials/es6/promises/.

#18

I’ve found an awesome book series on javascript. Truly worth the read! (though it might take a week, or 2). It goes through about everything there is to know about the language (not just “the good parts”) at an easy pace :smile:. And best of all, it’s free and open source! (but printed copies also for sale)

#19

Here’s some more of the best JavaScript books & tutorials.

#20

hey
how to convert the alphabets into numbers in javascript (eg: a=1,b=2,…,h=8…etc)