11 ms·
Bublé: a fast, batteries-included ES2015 transpiler
- thejaredhooper 11y agoCan someone explain to me the use of a transpiler like this? I'm a novice and I can't think of any personal use cases
- nothrabannosir 11y agoyou mean transpilers like this, and Babel, in general? You want to write ES6 code today, but your clients (= browsers) don't support it yet. So you use the transpiler: write ES6, compile to ES5, serve that. It's the opposite of what Python did with the 2to3 tool, where you wrote Python 2, and converted it to Python 3 before running. Why do you want to write ES6? Well, hopefully, every change ES6 introduces to ES5 is an improvement. I'd hope. So every different thing between them, you'd want to use, sort of by definition. That's the idea, at least :)
- tracker1 11y agoFor me, the biggest changes are the syntax sugar... rest, spread, fat-arrow syntax, destructured assignment, etc. The vnext bits I'm most using are async/await, and some of the class/property extensions, and more rest/spread/destructuring extensions. A lot of the other stuff is of less interest to me in writing code, but I can see how they would appeal to others. Not every piece has to be useful to everyone.
- draw_down 11y agoExecuting ES6 code today on an ES5 runtime.
- alfanick 11y agoi was hoping to see something compiling ES to native code, not another transpiler...
- dang 11y agoOk, we'll s/com/trans/ the title.
- n72 11y ago"Avoid gratuitous negativity."
- deleted 11y ago[deleted]
- phpnode 11y agoHere's something a bit like that, it turns TypeScript into JS, WASM and C, very early but interesting - https://github.com/evanw/thinscript https://github.com/evanw/thinscript
- phpnode 11y agoReplying to myself because it is too late to edit: thinscript isn't exactly typescript, it has some extra features and doesn't attempt full js compatibility, but they are very similar.
- pgz 11y ago> Rather than manipulating the AST, Bublé manipulates the source code directly, using the AST as a guide – so there's no costly code generation step at the end. Is that really good idea when looking at the possibility of introducing bugs in the transpiler?
- rtpg 11y agoit sounds like they're still generating an AST, but replacing AST nodes directly through the code string. It's definitely trickier but I think it's possible to do this in a clean way if the changes are just "replace this AST node with this other AST node". You know the text boundaries, and the output is context free so...
- rich_harris 11y ago> Is that really good idea when looking at the possibility of introducing bugs in the transpiler? That's what a test suite is for :)
- aspiringuser 11y agoSurely the AST is still produced? Acorn is the parser I assume?
- rich_harris 11y agoCorrect – Acorn is a truly wonderful library
- Touche 11y agoHey Rich, I wish some time you would write more about magic-string and what makes it special. You say "no costly code generation step", but what makes codegen costly compared to what you're doing in magic-string?
- rich_harris 11y ago
- cprecioso 11y agoI've already used this for a couple of projects, and works exactly like advertised: blazing fast. Also, it's from the guy behind Rollup, Ractive, Gobble, all tools that I use and love.
- JasonSage 11y ago> Also, it's from the guy behind Rollup That and your positive experience just sealed the deal for me. Thanks for sharing.
- yamafaktory 11y agoI've just created a starter project to provide a simple boilerplate to get started with React bundled as an ES2015 module via Rollup, compiled by Bublé https://github.com/yamafaktory/buble-react-rollup-starter https://github.com/yamafaktory/buble-react-rollup-starter .So far so good!
- untog 11y agoAgreed. I do love Babel, but the move from 5 -> 6 was annoying, given the number of dependencies and configuration files I now have to deal with. I understand why they did it, but Bublé is still the sweet spot for me.
- rashthedude 11y agonot yet another transpiler/compiler for Js
- tjelen 11y agoThis look really great, thanks! Any ideas how to connect it with JSX code? Is it possible to use it with the JSXTransform from React v0.13 or is there any other alternative (and preferably lightweight) JSX transformer that is not Babel?
- TheAceOfHearts 11y agoI haven't used it, but another option might be TypeScript with the "jsx" flag. Or use babel, but only with the react preset.
- JasonSage 11y agoIt appears somebody has made a standalone JSX transform that will operate directly on files if you desire, and output to string. https://github.com/alexmingoia/jsx-transform/ https://github.com/alexmingoia/jsx-transform/ I think it would not be too much work to wrap it in a script to let you pipe into/out of other build steps.
- rich_harris 11y agoThere's an issue open for JSX: https://gitlab.com/Rich-Harris/buble/issues/26 https://gitlab.com/Rich-Harris/buble/issues/26. The short answer is it's definitely on the TODO list, either as a separate preprocessing step that uses the same techniques (buble-jsx), or in the tool itself. Just haven't got round to it yet :)
- aspiringuser 11y agoI continue to use babel 5.x which is much easier to use than babel 6.x which cannot be globally installed. Babel 5.x supports jsx by default. Would be great if buble would have feature parity with babel 5.x to ease the switch over.
- oelmekki 11y agoI don't see any mention about async functions, are they supported? It's the single most important reason why I prefer to go with transpiling from es7 rather than es6. Or maybe it's now part of ES2016? I get quite lost in those sliding features...
- liadmat 11y agoI don't think async is currently in the official spec. Last time I checked it was stage 3.
- oelmekki 11y agoYou're right: https://github.com/tc39/proposals#active-proposals https://github.com/tc39/proposals#active-proposals It certainly takes its time :) Well, Bublé sound cool for projects where feature stability over time is critical (like huge codebases), but I will still prefer to go with babel to select which stage I want. EDIT : just to be clear, I won't advice any sized team to go with staged features. It works for me because I do a lot a small sized project working alone on them and I'm ok refactoring their codebase if a feature implementation change.
- exception_e 11y agoI didn't know it was still in progress... really hope async/await makes it in. I'm betting on that pattern to make JavaScript much more pleasant to write!
- tracker1 11y agoIt'll probably make it into ES2017, given that Edge, Chrome and maybe FF will have it in their browsers by the end of next year, official spec or not. It's a popular feature, and with Promises and generators in place, easy enough to support. It really does cleanup a lot of code, but getting people to understand that an Async function returns a promise isn't always the easiest thing to convey until after it's been used. I resisted Promises for a while, once it became a part of ES6, and with async/await in Babel, I started using it... the cleaner code is worth the minor bit of overhead.
- moretti 11y agohttps://twitter.com/domenic/status/721796970197684224 https://twitter.com/domenic/status/721796970197684224
- dchest 11y ago"Bublé is so funny. Remember Babel started out as "Traceur output is too complex!" Over time they learned that being spec-compliant matters." — Domenic Denicola (@dominic, Editor of the @htmlstandard and @streamstandard. Works on @googlechrome.)
- sp332 11y ago(Continued) "Now the cycle begins anew, with a "lightweight" ES transpiler that generates output with oversimplified, wrong semantics."
- Dylan16807 11y agoThat seems like a biased description. Being lightweight doesn't seem to be a goal. The goal is having a very clear function with no configuration, and being simpler is just for brownie points.
- Touche 11y agoWait, so JSX is part of the ES spec? Oh, it's not. I really wish people called it BabelScript. It's annoying to constantly have to fight the (incorrect) assumption that "it works in Babel" === it's ES.
- spicyj 11y agoBabel 6 doesn't support JSX (or really, anything) by default; you need a plugin. The es2015 preset is what's in ES2015.
- Touche 11y agoThen it's worthless to say "Babel is spec compliant" when it is just compiler infrastructure and not a compiler. It can be as spec compliant (or not) as you want.
- spraak 11y agoThe in -> out example for Classes (transforms.classes) helps me understand how ES6 classes work, as I was really confused I'm still unsure what they offer over a simple object with property key values.
- girvo 11y ago> I'm still unsure what they offer over a simple object with property key values. They offer a particular abstraction, that gives a certain automatic conceptual clarity for free. Personally, I'm a massive fan of prototype-based object systems, but having the class syntax sugar on top of it has made certain patterns clearer to express even if it's semantically equivalent. My main issue with ES2015 classes, is that I've seen some projects use it for everything including things that it's really not required for; really putting the _Java_ back in Javascript, so to speak. But that can be said for a lot of language features, really.
- Ronsenshi 11y agoThere are several technical differences between classes (or functions) and simple objects. Namely - presence of "constructor", ability to have static and non-static methods and overall the fact that class can be instantiated. It is easy to reason about. I'm sure there could be listed some additional features, but those are first things that pop into my mind. However, I'd say one of the primary reasons for existence of classes would be familiarity. A lot of developers would have experience with classes in other languages so it is useful to have similar entity in JS.
- tracker1 11y agoMost of the time simple objects/collections work... separating data from utility is often cleaner and easier to reason about. That said, when you need encapsulation and instance isolation classes provide a nice sugar around prototyping. They tend to work very well for components that have visual interactions/events that are tethered to instance/scope state. I tend to prefer the React+Redux model myself, but there are times when you need more than render-only components, and in those cases the class syntax means cleaner source code imho. These cases are also very limited imho, and about the only place I use class syntax.
- exception_e 11y agoReally cool project. I haven't had the opportunity to use things like Buble or Babel on a project yet but would certainly like to. I don't quite follow why plugins are discouraged in your FAQ section. I was looking at this Gulp plugin (it's very new, but looks straightforward/is idiomatic gulp): https://github.com/TrySound/gulp-buble https://github.com/TrySound/gulp-buble -- I'm not following why that would be an anti-pattern.
- rich_harris 11y agoAh, I should clarify the readme. What that refers to is plugins that add additional functionality to Bublé, such as compiling features that aren't yet in the spec (class decorators and so on). Plugins like gulp-buble, which allow other tools to work smoothly with Bublé, are warmly encouraged!
- rajington 11y agoMy main complaint with bublé is that it wasn't called babybel.
- rajington 11y agoin all seriousness though, if I rely on async/await is kneden/nodent the way to go?
- dumbmatter 11y agokneden is cool, but fairly buggy still. I wouldn't recommend it unless you just want to play around with it and possibly work on making it less buggy. I believe most people use Babel to compile async/await to generators.
- aspiringuser 11y agorich_harris Yet another great project. Thanks. Question - how to have buble accept input from stdin and output to stdout? This is useful for quick ES6 tests and chaining piped output. buble with no args prints help. Would be more useful if it just started parsing code from stdin as babel 5.x did.
- rich_harris 11y agoThanks! It does accept input from stdin and direct to stdout if you do e.g. cat somefile.js | buble – can you explain in more detail what you mean? (Or better yet raise an issue :)
- aspiringuser 11y ago`cat | buble` did the trick! Thanks.
- deleted 11y ago[deleted]
- bsimpson 11y agoHonestly, why invest time re-writing an ES2015 transpiler? Hasn't this area already been sufficiently covered by existing tools (especially since the author explicitly "limits [Buble} to ES2015")?
- rich_harris 11y agoBecause it's many times faster (~4x faster with small files, ~20x faster with large files), very easy to set up, and tiny (which has a significant impact on CI – it's very quick to install). It also generates leaner code, and doesn't rewrite the parts that don't need to be transpiled, so your style/formatting is preserved. We need to update the docs – it actually supports ES2016 (only one new language feature – the exponentiation operator) and may support JSX in future.
- bcherny 11y agoHow does it compare to the Typescript transpiler? Do you have benchmarks somewhere?
- rich_harris 11y agoNot yet, though I agree that would be worthwhile
- smithkl42 11y agoInteresting, but not sure why you'd ever use this instead of TypeScript. TS has most everything this has - including real ease-of-use compared to Babel - plus a lot of additional stuff that's critical for large code bases. And its semantics are very clearly defined.
- cdata 11y agoI love TypeScript, but one thing that I find increasingly irksome is the phenomenon of TypeScript advocates who present a dismissive attitude towards workflows that don't include TypeScript. Why would I ever use this instead of TypeScript? A totally reasonable answer to this question is that I don't want my JavaScript sources to require transpilation before they will run in a modern browser.
- rich_harris 11y ago> I don't want my JavaScript sources to require transpilation before they will run in a modern browser. Exactly this. Bublé is designed to become increasingly redundant as node and browsers progress, until one day you can just remove it from your stack altogether. Planned obsolescence is an underrated feature in software
- smrtinsert 11y agoI think you mean https://en.wikipedia.org/wiki/Forward_compatibility https://en.wikipedia.org/wiki/Forward_compatibility and not https://en.wikipedia.org/wiki/Planned_obsolescence https://en.wikipedia.org/wiki/Planned_obsolescence.
- rich_harris 11y agoActually now that I read both definitions, neither is quite right. Perhaps a better metaphor would be dissolvable stitches – you need them when your wound is open, but once it heals the stitches vanish. If anyone can help me out with a less gross version of the same metaphor I'd be grateful!
- SimeVidas 11y agoWait, doesn’t Babel provide a zero-configuration setup for ES 2015-to-ES5 transpilation?
- Touche 11y agoNo, Babel does nothing by default.
- SimeVidas 10y agoYes, Babel by default does nothing, but I meant, does it not have a quick route to ES 2015-to-ES5 transpilation without having to perform the standard installation and setup procedure? (I’m asking from the perspective of someone who hasn’t started using Babel yet.) Something like “install this one thing and you’re done”?
- untog 11y agoBabel with zero configuration does absolutely nothing.
- lowboy 11y agoHey Rich, Bublé looks interesting! Ever going to move onto ES2016/17/etc features? Can't imagine myself just being satisfied with ES2015 for years to come.
- rich_harris 11y agoES2016 is already supported, in fact – it only adds one new language feature, the exponentiation operator. (It also adds Array.prototype.includes, but that's an environment feature rather than a language feature, i.e. it needs to be supported via a polyfill rather than a transpiler). The idea is for Bublé to eventually become irrelevant (planned obsolescence) – but as new language features do arrive it will be fairly straightforward to add them. I'm just not sure if there'll be that many more language features after ES2017, at least of the transpilable sort – I'd be surprised if we ever have another big bang like ES2015 was.
- tracker1 11y agogenerators and async/await are pretty big pieces missing for me... can't speak for others. And generators are mostly as a path to async/await for me.
- rich_harris 11y agoCool features, but they don't transpile very well (the output is much larger than the input), and require a non-trivial runtime component. Unless you're aware of the tradeoffs and have determined that the cost to your users is genuinely worth the nicer coding experience, I'd argue that it qualifies as a footgun. Having said that, I'm very interested in seeing where https://github.com/marten-de-vries/kneden https://github.com/marten-de-vries/kneden goes.
- tracker1 11y agoI absolutely understand that the transpile is kind of weird and requires tooling... the regenerator output isn't too hard to follow, but probably the farthest from the input. All of that said, I think it's definitely worth it, and the extra size is less of a difference for larger projects. For server-side code, the size is less of a difference since it isn't downloaded, and the performance impact has been negligible in terms of noticeable, real-world performance. Of coure by the end of 2017 I expect most browsers to have implemented async/await natively... so by 2019 won't be an issue... that said, it's still 2016, so I'll keep using Babel.