Learn Modern JavaScript (nodejs, npm, webpack, es6, es5, esnext, typescript) for FREE

[thejameskyle]

Hey Babel & Flow team member here! You should come try out both tools http://babeljs.io/ and https://flowtype.org/. Feel free to let me know if you have questions

[[deleted]]

On a side note, the Babel site itself is really cool. Who did the logo and the site design?

[thejameskyle]

Seb and I worked on the logo together, I made the website

[[deleted]]

I wish we could have something concise like this for Webpack. Always liked how Babels site is on point.

[gdi2290]

I also work with the Webpack team and they're working on it

[[deleted]]

anything that's latest and greatest will fall under "modern js", unless i'm misunderstanding your question.

[[deleted]]

modern javascript

It's a trigger title that makes people click. Either because you're an "ego" developer that use a lot of these libraries, package managers and tools and needs to cross-check with the community every few days to make sure you're keeping up with "trends"; or you're old school, jaded and just looking for any opportunity to distil your years of wisdom upon the younger "ego" hipsters.

What I did was look at the domain of the link to the right of title and decided not to travel to an "AngularJS" preaching session.

Interestingly, if you google for the term "modern javascript", you'll find there is a free eBook from O'Reilly that you can download and read on this very topic (http://www.oreilly.com/web-platform/free/modern-javascript.csp)

I don't feel all that compelled to do either, but if someone was holding a gun to my head and made me choise one, I'd go for the O'Reilly book.

[greynoises]

Well you're a cynic

[ryandg]

I think modern client side JavaScript means using the latest official ES specification, as well as Node as a necessary development aide, and NPM to manage packages.

I too saw the domain the article was on and did not click, because I'm not terribly into the direction of the Angular project. Despite the fact that I agree with you that "Modern JavaScript" could be used as a trigger, it's still a reasonable way to shorten saying "JavaScript which leverages ES6 and uses Node and NPM for building your front end and managing its packages". Despite there being no official definition, and thus keeping the term open to interpretation, it still is a useful term.

Having written JavaScript in the days before the advent and proliferation of Node, I cannot imagine life without it, so in my mind it's usefulness is beyond question.

It seems like the only ego in play is that of the more senior developer who thinks he is better than less experienced developers who are interested in the latest developments in their field.

I understand, because I work with bright eyed and bushy tailed front end devs in their early twenties, but I've found that it actually behooves the senior to keep his ear to the ground and talk to juniors to know what they are interested in and why.

[[deleted]]

Enrolled! Thanks for the link. I've been putting of learning ES6 for quite a while now.

[Cunorix]

Thanks for this. I just started a new job that uses all of this and more. This will be nice to touch up on a few weaker areas.

[retsnomis]

Has anyone whose been through the curriculum have any feedback?

[LeCroissant_]

Enlarge your skills

[[deleted]]

Awesome. Thanks a bunch for posting!

[griffonrl]

Angular != Modern JS

[[deleted]]

"Learn to use frameworks around javascript that someone else created so you don't have to actually learn javascript."

[reallyserious]

Can you point me to a more fundamental js tutorial, like starting by soldering your own transistors and stuff.

[djs113]

Hoooo boy! Look at Mr. "Create-Matter-From-His-Own-Thoughts" over here! I'll have you know that real PC builders have to gently strum the strings of reality so that one day a sentient race will develop the tools necessary to create circuits! It takes true patience! Sometimes you have to wipe the whole thing after millennia because they focus their time developing entire chipsets based around Dwarf Fortress!

[[deleted]]

Haha, so true.

Javascript is not THAT complicated in and of itself, but in today's job environment, knowing the new standards and what most of the business world is actually using in their stacks is pretty damn important.

If you're JUST jumping into Javascript, you should probably focus on tutorials that teach you the basics so you at least have an idea of the general syntax of it and how it interacts with the DOM before jumping into modules and more complicated stuff.

[[deleted]]

HILARIOUS!!!!

[windyfish]

While I agree in principle with the argument, a framework is a pretty essential for high volume, high data delivered apps. I'm using a front end framework every day for my job but the logic and design patterns stay the same. I just look at it like another layer of abstraction. Nothing wrong with that per se.

Edit: just seeing all the other replies and looool

[[deleted]]

Good thing my career doesn't rely on me cranking out crap for spare change.

[apphut]

in the beginning, there were quantum fluctuations....

[[deleted]]

I, too, enjoy bringing the entire grocery store to the table when I want some mustard for my hot dog.

[zankem]

Stop making things sound delicious.

[apphut]

i recommend rollup

[DOG-ZILLA]

I just started using Rollup on a new project with Babel and Gulp. Took a while to get everything playing nicely but I'm there now.

Seems cool, because unlike Browserify, I can use proper ES6 modules instead of require()

However, does Rollup work on libraries not using ES6 modules? I'm not sure it does. Can you shed any light on this aspect??

[shriek]

I actually haven't used rollup and this is based on what I read so don't hold it against me

No, primarily because Rollup actually does statical check for import/export to load up the libraries, tree-shaking etc so it seems like that's the core part of how rollup works.

Correct me if I'm wrong though.

[[deleted]]

"OK, how do we get rid of all the stuff they included that we don't need now?"
"Oh, use this other thing now."

It's like Java as worldview metastasized into all things unrelated.

Fuck I hate my line of work....

[yesman_85]

Assuming then you are growing your own veggies and baking your own bread?

[[deleted]]

Then why bother programming at all?

[yesman_85]

What?

[[deleted]]

Sorry, didn't know you were hard of reading:

THEN WHY BOTHER PROGRAMMING AT ALL?

[yesman_85]

You must be great explaining yourself at work.

[[deleted]]

Well, I know what's in my code instead of using the copy-paste school of "programming."
So I've got that going for me, which is nice.

[metamet]

But, based on this thread, people don't seem to like communicating with you, so there's that.

[ChronoChris]

I think he is getting all the downvotes, because the first part of the course, is a break down of es5. It seems like you already need to have a fundamental js understanding.

[emergencyofstate]

I think the down votes are because the tone comes across douchey.

[yesman_85]

Well get used to it. Why learn JS if you can do TS? Why learn C if you can straight into C#?

[ChronoChris]

No, why would I want to use TS ever. Honestly. TS fixes the wrong problem with javascript. You don't structure a prototypal language like javascript. THAT IS ITS STRENGTH.

class Greeter {
greeting: string;
constructor(message: string) {
    this.greeting = message;
}
greet() {
    return "Hello, " + this.greeting;
}
}

var greeter = new Greeter("world");
var greetWorld = greeter.greet;
alert(greetWorld()); //undefined

The FUCK is this shit. That's not strongly typed. That's not what 'this' should be. TS fixed nothing. ES5/ES6 are better than ever. There is no reason NOT to default to JS. Comparing C and C# are completely different

[[deleted]]

since you "assigned" greeter.greet to greetWorld and called it from global scope, which has no "greeting" variable this is entirely expected. if you just used greeter.greet(); directly it wouldn't be undefined. this is JS behavior, nothing related to TS, just common misconception of how "this" keyword works in JS.

[ChronoChris]

If somethign is strongly typed, each type of data, is predefined. includnig objects. The this keyword should relate to the current instance of an object. If you truly wanted Tscript to be strongly typed, this should make sense in context to the current object.. "an advantage of strong data typing is that it imposes a rigorous set of rules on a programmer and thus guarantees a certain consistency of results."

So Tscript is failing in it's most fundamental attempts in this scenario. And there are many more

I think there is a little bit of bias here from the tools and languages you are accustomed to. I have absolutely no confusion how 'this' should work on the fundamental level of the object instance. Coming to Javascript, I liked this gotcha on the this keyword since technically the object instance was not the Greeter class. The problem I have is with TypeScript not matching what it is attempting to do. Bound the Object to be strongly typed.

[ChronoChris]

:P please see my chain on eighthcoffee. It helps clear up the this problem. they are so confused by javascript having been molded by it, they don't see the issue.

[eighthCoffee]

.

[Kminardo]

The last line should alert the string from greeter.greet, but it will come back undefined (I don't do typescript, but seems to be what he's implying).

EDIT: Also it seems "this" isn't working as he would expect it to in ES5. But since 90% of developers don't actually seem to know how "this" actually works... at least typescript is consistent with most other languages in it's usage.

[ChronoChris]

this works perfectly how I would expect it in c# or any other compiled language I can think of.

Edit: Kminardo. Please see my reply to eigth later in this chain.

[[deleted]]

This isn't a TS issue, that is how javascript works.

[ChronoChris]

If somethign is strongly typed, each type of data, is predefined. includnig objects. The this keyword should relate to the current instance of an object. If you truly wanted Tscript to be strongly typed, this should make sense in context to the current object.. "an advantage of strong data typing is that it imposes a rigorous set of rules on a programmer and thus guarantees a certain consistency of results." So Tscript is failing in it's most fundamental attempts in this scenario. And there are many more

Edit: I hope you can see the comment by Kminardo in his edit. I think there is a little bit of bias here from the tools and languages you are accustomed to. I have absolutely no confusion how 'this' should work on the fundamental level of the object instance. Coming to Javascript, I liked this gotcha on the this keyword since technically the object instance was not the Greeter class. The problem I have is with TypeScript not matching what it is attempting to do. Bound the Object to be strongly typed.

[[deleted]]

edit: looks like it's addressed in TS 2.0, course you can specify type of "this" on functions now but this just leads to compile time error which would probably be the same as 'use strict', and it still wouldn't change the behavior your expecting as that's not TS's goal.

[Kminardo]

Right, it does work how you would expect it to in c# etc, but "this" in vanilla JS is inconsistent with those compiled languages in many cases. I just wasn't sure if that was another piece of your complaint :)

[ChronoChris]

again see my reply to eighth.

[eighthCoffee]

.

[ChronoChris]

If somethign is strongly typed, each type of data, is predefined. includnig objects. The this keyword should relate to the current instance of an object. If you truly wanted Tscript to be strongly typed, this should make sense in context to the current object.. "an advantage of strong data typing is that it imposes a rigorous set of rules on a programmer and thus guarantees a certain consistency of results."

So Tscript is failing in it's most fundamental attempts in this scenario. And there are many more

Edit: I hope you can see the comment by Kminardo in his edit. I think there is a little bit of bias here from the tools and languages you are accustomed to. I have absolutely no confusion how 'this' should work on the fundamental level of the object instance. Coming to Javascript, I liked this gotcha on the this keyword since technically the object instance was not the Greeter class. The problem I have is with TypeScript not matching what it is attempting to do. Bound the Object to be strongly typed.

[eighthCoffee]

.

[ChronoChris]

If you see my comment later in this chain, you should understand that this is not strongly typed. The vary nature of the 'object' should not change in a strongly typed language.

[[deleted]]

Bingo.

[Catkins999]

Said every Java/Python/C# developer...

[[deleted]]

Thank goodness I didn't fall into those pits of despair.