The cost of transpiling ES2015 in 2016
github.com
github.com
Many things that ES2015 provides are nice of course and the code looks a bit cleaner, but apart from a few real innovations most changes seem to be syntactic sugar.
Also, I found that each step in my build chain made it more complicated to build and maintain my code, especially for other developers. I eventually even abandoned Gulp (which in my opinion tries to reinvent Unix pipes but does it all wrong) in favor of a simple Makefile that chains a few build commands and uses inotifywait to watch the filesystem for changes in order to automatically rebuild the code during development.
Another thing I do which may shock many JS people is to actually check in the build directory of my setup into version control, because this makes deployment much easier and ensures that I will always have a working version of the code in the repository, even if some external dependencies should change in the future. This also eliminates installing extensive tooling on my production servers, which itself is a large burden and creates many security issues (for a simple setup consisting of rabel, react, require.js and a few support libraries, node.js downloads about 350 MB of source files onto the machine).
With a slightly more clever and more concise definition of `createElement`, I also have no need for JSX.
tag("div.widget.fancy", {}, [
tag("h1#title", {}, "Hello, world!")
])
I'm fine with that. My editor understands the indentation.And... such an enormous benefit... there is no compilation step.
Right now at work, our code base takes 20 seconds to compile with Babel. Enough said.
The feeling, after being used to all this transpilation business, of writing code that's just already ready to serve, is very nice. I can even work on it with nothing but a text editor and a web browser.
Unfortunately everyone thinks I am crazy for preferring this.
https://blog.fastmail.com/2012/02/20/building-the-new-ajax-m...
I too am fond of that approach.
The dream that designers, being comfortable with HTML, would be able to mess around with JSX is, as far as I can tell, unrealistic anyway, because it's always full of React-specific weird stuff that the designer doesn't understand and doesn't want to mess with.
[0] https://medium.com/@dan_abramov/smart-and-dumb-components-7c...
But ES2015 is just a bunch of syntax sugar. Nice syntax sugar, but still. Okay, async/await is significantly useful... but you still have to understand how the promises work under the hood... and I can live with raw promise coding.
But have you found sensible ways to test without them?
Why would you ever bother merging a build artifact? Those files should always be rebuilt fresh before committing. Just quickly do whatever to clear it from the conflict queue, merge the source as necessary, then rebuild. Commit the rebuilt version.
If the solution to the perceived complexity of the build is to just commit the built artefacts to source control, it's possible that's a warning sign that the build process itself needs to be better organised and simplified, and make better use of the build tools so they help rather than hinder a developer coming to the project for the first time. That's what they're there for.
Anyway, I've recently experimented with checking the build directory in only in production/staging branches to avoid constant merge conflicts and the repository bloat. My approach is to have those build-excluding lines in .gitignore file present in development branches and to comment them out in production/staging branches. So far it works well, but it's sometimes quite confusing to other people on the team.
Edit: Never mind, I'm apparently wrong.
> rm test.txt && java -version
rm: cannot unlink entry "test.txt": The system cannot find the file specified.
This can be avoided by adding "npm rebuild" to your deployment.
It does feel like a code smell, but it'd make deployment easier.
Our frontend is Javascript, wherein there's no worry about native modules.
Our backend is Python running Pypy, so there's no native code there either.
Do you ever run into merge conflicts in the build directory?
Those files should always be rebuilt fresh before committing. Just quickly do whatever to clear it from the conflict queue -- probably some version of "take mine" or "take theirs". Merge the actual source files as necessary, then rebuild. Commit and just blindly clobber whatever existed in the build directory, because you just rebuilt it and you know it's the correct version.
Kudos. I can't remember how many 'open/source/Free' git repo that I cloned can't compile or have problems compiling. Personally I think it is NOT open source unless the user can compile and get an exact copy of the software that is in the app store.
In our apps, when you request /app.js or /app.css or whatever, it goes through the tools (Browserify and SASS in our case) and delivers the transpiled versions on the fly.
We use a little NPM package called Staticr [1] to declare the pipelines so that the on-the-fly version used during development is identical to the production-time one. In production, we simply run Staticr against the pipelines, which produces the necessary minified files.
I do use ES2015 in CLI apps though. Just make sure to lock the Node.js engine at version 4 in the manifest file.
Example:
Can you post an example of one of your makefiles?
https://github.com/adewes/gitboard/blob/master/Makefile
This one is rather simple but includes steps for building and optimizing JS and CSS. It also has support for different build environments (Gitboard has a Chrome version and a web version).
One great thing about npm scripts is that every time you run a command Node.js will export the binaries path to your $PATH so you don't have to manually add absolute paths.
[1] https://github.com/tastejs/todomvc/tree/master/examples/vani...
It was discussed recently here: https://news.ycombinator.com/item?id=11021271
But I did work with Sam on this project and I think it's quite worthwhile!
Fun fact, I was just about to migrate all of my js to es6.. Might have to investigate further what transpiler to chose instead of blindly do what the mass seems to do.
It produces smaller code than minifiers such as Uglify, even though we're not using its coding conventions (Closure is designed to optimize code written in a certain way that allows it to eliminate dead code paths).
I used to minify with Closure as well (through r.js) and it would take forever.
Edit: I see, Rollup is a competitor to Browserify. Looks nice, if somewhat immature. Maybe we'll be able to use it.
Plus uglification/minification is a thing that reduces production js file sizes, therefore bandwidth. So we'll probably keep doing that.
I think we should probably stop calling it transpiling and just accept that javascript is a compiled language now.
Unless you start serving up different builds based on user agent...
Figure out which browsers to support on which features: https://kangax.github.io/compat-table/es6/
Have an alternate .babelrc with a transpile blacklist that points to a separate dest
Build a regex to match those browsers in your CDN (I use Fastly). Vary on the value you create.
Point said browsers asking for the normal JS payload to the alternate dest.
Tons of startups and services target the consumer and could not care less about enterprise users.
Well no, about 10% of our traffic is from people sitting on those two browsers at work. Some of those people are even still running Windows XP, forcing us to use SAN instead of SNI certs.
There's a few traffic spikes in the day. Pre-8am, when people check the site before work. 12pm when people are fiddling around at work, then post 5pm when people are home from work, then 10pm before people sleep.
We even have a web app, but nope, people prefer to use the desktop version even at work.
This depends on many things. If your 90% brings enough profit, then this 10% perhaps could be dismissed, as it might not be worth the developers costs and time to keep support them (that needs an "opportunity cost" calculation).
There's also the fact that that 10% is only gonna go down, never up again.
It wasn't cool for Microsoft to push JScript in the 90s, why is it cool now for it to push TypeScript? And allied with Google, no less!
1. JScript added conditional compilation directly in the browser which was IE-only (extend, extinguish). TypeScript compiles to cross-browser JavaScript (which does none of the above)
2. TC39 is supposed to be working in a "pave the cowpaths" (1) mode. Before new features get integrated into EcmaScript, TC39 looks into what the community is already doing (existing cowpaths), then integrates that into the language. Not only that but TC39 can learn from the mistakes of TS and Flowtype when they add type system support in EcmaScript. We are in dire need of one - and thanks to Microsoft's and Facebook's explorations, we now know what kind of type system would work for JS.
(1) For example, we got arrow functions in ES2015 thanks to CoffeeScript.
I don't use it but I appreciate that the JS is being explored and expanded by projects like it and many others.
Also, could you elaborate "web breaking" w.r.t. compile-to-JS languages?
More importantly the things ES6 solves are kind of rudimentary (modules, classes, => syntax, actual collections), stuff after that is nice to have but provide diminishing value
I wouldn't let anyone interested in trying out JSPM be jaded by these numbers just yet. JSPM v0.17beta-6 hasn't reached fully stable yet and that's what's being used to generate these #s
In terms of using JSPM to create builds for production, it seems significantly easier to setup than the equivalent using gulp, browserify, webpack.
Edit: s/good/support/
[1] e.g. write foo.bar instead of foo['bar'], so Closure compiler can do name mangling and dead code elimination.
edit since i currently sit at zero points: my point being that you can't dead-code eliminate your dependencies, which is the whole point of using closure compiler instead of whatever other toolchain.
Browserify is for package-management. For people who want to do node.js style requires in their browser.
Closure Compiler is for optimization, it is to get rid of dead code.
Browserify is not optimized for performance. Why is this post surprising ?
What's the problem?
Getting all the Lego pieces of JS webdev scattered on the floor straight in one's head is sometimes a pain when one's job only has one venturing into the front end every couple months, thus having to relearn all the acronyms and such.
To be fair, in my experience that holds true for any technology you only touch once every couple months (especially when you then quickly move on to other things again).
Will there ever be an alternative language that can allow me to just: write, compile, run in browser?
Batteries included and ready to go.
Here's a link where you can see the module boilerplate "compile away" http://goo.gl/fR3BjQ (Choose Advanced Mode)
So, developers are stuck programming for some ancient godawful version of Internet Explorer that barely even supports ES5.
Only Internet Explorer lags behind, but I'm not opposed to putting a warning when somebody visits with Internet Explorer when its my own little app.
Either way I can relate to the confusion!
For mere mortals, ES2015 (or ES6) is the latest version of https://en.wikipedia.org/wiki/ECMAScript, a Javascript specification.
(now I am expecting a lot of down flags, just because of my tone. Perhaps deserved. You judge).