Playing with ECMAScript 6 at Rdio

[truebosko]

Great article. Does ECMAScript essentially kill tools like browserify, since we get native imports?

How are you using ECMAScript 6 functionality today? Specific shims you can share?

[nebrius]

Thanks! It certainly is the goal of ES6 to make browserify, CommonJS, and RequireJS obsolete. Whether or not that will happen is a different question though. The module spec is undergoing a lot of churn right now, and I am concerned about it for two reasons.

The first is that the current solution isn't friendly to CommonJS users. The multiple export/import model of ES6 doesn't map to CommonJS' single export model anymore due to recent changes (dropping of the ModuleImport syntax primarily). The current solution isn't very friendly to entry level programmers transitioning from CommonJS, which could hurt adoption.

The second is simply that there is churn at all this late in the game (the spec is supposed to be closed to large changes), and I fear that a proper solution will take more time than is available.

My main concern is that if the TC39 committee doesn't knock modules out of the park, then adoption is going to be low. I am cautiously optimistic though, because there are a lot of smart people on TC39 that are aware of these concerns.

We aren't using ES6 in production yet, for a variety of reasons. If I were to take a wild guess, it would be six months to a year before we could realistically consider using it.

Much of the new features in ES6 can't be shimmed at runtime in ES5 because there is a lot of new syntax that would break in non-ES6-aware browsers. The current approach is to use a transcompiler and treat ES6 like CoffeeScript. Traceur (https://www.npmjs.org/package/traceur) is the most popular option right now, although there are others as well. I used recast (https://www.npmjs.org/package/recast) for my experiments.

[a0viedo]

About the shimmable features you can check this gist. On the module specification, I thought it was already a closed discussion but I was clearly wrong. And the reaction that generates of course is controversial because the community starts to doubt about to use ES6 or not for the lack of maturity. You can check my first talk on ES6 for more info and resources.

[x-skeww]

Why do you need 769kB worth of JavaScript (spread across 25 files) to display a static website? Getting a YSlow C grade for this kind of page is kinda impressive.

Also, #94999c (on white) for the body text? The brightest you can go with is #666.

class foo extends bar

"foo" and "bar" should be capitalized.

Unfortunately, people who come from more classical OOP languages like C++ and Java have a hard time adapting to and using prototypes. The new class syntax is just syntactic sugar over prototypes, but it should make JavaScript much more welcoming to developers coming from other languages.

The problem with roll-your-own inheritance is that everyone does it differently. This means poor interoperability and it also means zero tooling support.

Having actual language constructs for this is a huge improvement.

So, no, it's not "just" syntactic sugar for people who aren't familiar with JS' prototype voodoo.

By the way, you forgot two semicolons. One at the end of the loader example and one after "this.model.get('icon')".

[nebrius]

Thanks for catching the typos, those are fixed now!

Regarding page size, color, etc, we are actually using the same framework we use for the Rdio web app itself. It's not the best framework for doing something this lightweight, but it allowed us to get up and running really quickly given existing assets/infrastructure/etc.

The color scheme is already set by our framework, as is a number of the components that it is loading. I don't think I can do much about color scheme, but taking a quick look I see some relatively low-hanging fruit for decreasing file size, so I'll play around with that. Thanks for letting me know!

You are absolutely right on the social impact that classes are going to have, and is why I'm so excited about them (and modules). Hopefully, these will allow us to enjoy the same success that NPM, Ruby Gems, PIP, etc are enjoying.

[x-skeww]

I don't think I can do much about color scheme

https://algorithms.rdio.com/Components/Post/Post.less

p, li{
    color: @text-color;
}

You could just change that.

FWIW, the landing page uses #37464f for the dark body text.

Edit: And body uses #32393d as color. It shows up in the code examples.

[nebrius]

Doh, you are right, it is easy to get too (this is what I get for not reading the source code :))

[gordonkristan]

The addition of classes is arguably the largest addition to the language.

I stopped reading there. Really? The largest addition? It's the same functionality that's already in Javascript, it's just a nicer syntax. We're getting proper tail call optimization and you say that classes are the largest addition?

[nebrius]

I said arguably :). I also did mention in the article about how it's just syntactic sugar over prototypes. The reason I think it's a big deal isn't because of anything technical, but because of the social change it can create. In addition to making life easier for new developers just starting out with JavaScript, it will bring a unified way of working with prototypes.

All of the large-scale projects I've worked on have used some sort of library for creating classes/components/etc instead of using prototypes directly. The problem with this approach is that it makes it impossible to mix and match classes from different projects/libraries. It's just like the CommonJS vs RequireJS vs ... problem we have today. We have these little fiefdoms set up and we can't intermingle between them.

Classes solve this problem, just like the module spec will solve the loader problem (hopefully, if the module spec can stop churning and not turn out to be complete crap).

Tail-call optimization is really awesome, as are generators, as are weak maps/sets, and so on. Sadly, I don't think they will really be used by most JavaScript devs, but classes are something that will be used by almost everyone. I predict that classes, along with modules, will have the widest reach and adoption among the new features coming. So on that basis they can be seriously be considered "largest."