4 ms·

I'd just like to point out this is like the fourth post in the last 24 hours in the front page to mention the babeljs transpiler. While transpilation was possi

by inglor 12y ago

I'd just like to point out this is like the fourth post in the last 24 hours in the front page to mention the babeljs transpiler. While transpilation was possible with Traceur before - babel has made it really easy and the fact issues are addressed within a day and the author is an overall great guy really helps. I've never been able to fully switch to Traceur - but ever since babel (used to be 6to5) came along I've made the switch and never looked back.

Bahamut 12y ago
I like Traceur (at least with tools like System.js & jspm), especially with its support for optional typing and annotations, but for some apps, Babel makes a lot more sense. I came across the difficulty of using jspm on the server and client for an isomorphic React app I am building for an online community I run, and I was advised to just use npm (& naturally Babel). Integrating browserify with babelify into the build process was a far easier task.
- egeozcan 12y ago
  OT, but I have to ask, do you use the flux pattern and if yes, any helper implementation?
  - Bahamut 12y ago
    A bit OT response here. I do not use the Flux pattern currently, but I am only in the beginning stages of building out this app & am inexperienced with React, and I have to coordinate getting others in this community involved too (two beginner/junior developers & a mid-level/senior developer, and 2-3 artists/designers, none with web designing experience). I have not evaluated how I want to handle state changes yet - I may just go with the Flux pattern for practicality for the beginner/junior developers' benefit career-wise. This app is being built on io.js with Sails.js, isomorphic React, and ES6 (server and client) - I went with React because of its ability to do client-side and server-side rendering for SEO purposes. I have a working isomorphic React foundation, and working testing solution for the React code, but I still have to get a server-side testing solution up, integrating optional Steam authentication via OpenID, and figuring out build & deploy tooling into separate environments. This is on top of gathering requirements from the community & organizing it into a nice functional spec for developers to consume...it is almost like creating a startup except that it will never be for money, only for the love of the community I created ~7 years ago as a part of a larger one.
    - egeozcan 12y ago
      Thank you very much for the detailed explanation. I once tried Sails and didn't find it easy (or was it even not possible at all) to configure relations for my models found on a PostgreSQL db. Do you have any plans to open-source the "foundation"? I'd be interested to see how you structured it.
      - Bahamut 12y ago
        Honestly, it wasn't all that bad - I had to do a little customization in the app.js script that gets generated on creation of a new Sails.js scaffold (added require('babel/register') before var sails = require('sails') ), and then created a simple browserify grunt task & inserted it into the pipeline. I hijacked the views folder for all of my React code, and exposed every React component via a top level script, including the router, so I could make use of all of them for custom code in both the server and client. For the models with Sails, I haven't touched that yet - the plus side for me is that there is no schema yet, so I am still free to set everything up in the database as I wish. If you need to configure relations, there are details listed here: http://sailsjs.org/#!/documentation/concepts/ORM/Associations http://sailsjs.org/#!/documentation/concepts/ORM/Association... (check the types of associations listed in the sidebar on the left)
- sebastianmck 12y ago
  Babel actually supports flow type annotations and declarators will be available once there's a decent ES7 spec for them.
bsimpson 12y ago
Traceur scared people away both because it was a build tool and had a runtime dependency. Now that tools like Webpack are common, introducing a build step at ay point in your workflow is trivial. Moreover, many of the JS Harmony improvements can be transpiled with a tool like Babel or jstransform without the need to introduce yet another library in your deployed code.
- bfgeek 12y ago
  If you want a cool way of adding traceur to a development webpage... without adding a compile step, check out https://github.com/bfgeek/swes6 https://github.com/bfgeek/swes6 It uses a serviceworker in the background to transpile es6-js requests into es5 transparently.
DigitalSea 12y ago
The thing that appealed to me about Babel back when it was still called 6to5 was the fact the output was far easier to read. If you compare the output of Traceur to Babel, the difference is night and day. Traceur isn't readable at all (at least not to me) which might not matter, but I think in some cases, Babel's output is closer to more traditional Javascript and more performant. Overall it is a much better transpiler than Traceur. Plus you're right, the author is a great guy and open to suggestions from the community, it definitely isn't a closed off effort.

by inglor 12y ago

Bahamut 12y ago

I like Traceur (at least with tools like System.js & jspm), especially with its support for optional typing and annotations, but for some apps, Babel makes a lot more sense. I came across the difficulty of using jspm on the server and client for an isomorphic React app I am building for an online community I run, and I was advised to just use npm (& naturally Babel). Integrating browserify with babelify into the build process was a far easier task.

egeozcan 12y ago
OT, but I have to ask, do you use the flux pattern and if yes, any helper implementation?
- Bahamut 12y ago
  A bit OT response here. I do not use the Flux pattern currently, but I am only in the beginning stages of building out this app & am inexperienced with React, and I have to coordinate getting others in this community involved too (two beginner/junior developers & a mid-level/senior developer, and 2-3 artists/designers, none with web designing experience). I have not evaluated how I want to handle state changes yet - I may just go with the Flux pattern for practicality for the beginner/junior developers' benefit career-wise. This app is being built on io.js with Sails.js, isomorphic React, and ES6 (server and client) - I went with React because of its ability to do client-side and server-side rendering for SEO purposes. I have a working isomorphic React foundation, and working testing solution for the React code, but I still have to get a server-side testing solution up, integrating optional Steam authentication via OpenID, and figuring out build & deploy tooling into separate environments. This is on top of gathering requirements from the community & organizing it into a nice functional spec for developers to consume...it is almost like creating a startup except that it will never be for money, only for the love of the community I created ~7 years ago as a part of a larger one.
  - egeozcan 12y ago
    Thank you very much for the detailed explanation. I once tried Sails and didn't find it easy (or was it even not possible at all) to configure relations for my models found on a PostgreSQL db. Do you have any plans to open-source the "foundation"? I'd be interested to see how you structured it.
    - Bahamut 12y ago
      Honestly, it wasn't all that bad - I had to do a little customization in the app.js script that gets generated on creation of a new Sails.js scaffold (added require('babel/register') before var sails = require('sails') ), and then created a simple browserify grunt task & inserted it into the pipeline. I hijacked the views folder for all of my React code, and exposed every React component via a top level script, including the router, so I could make use of all of them for custom code in both the server and client. For the models with Sails, I haven't touched that yet - the plus side for me is that there is no schema yet, so I am still free to set everything up in the database as I wish. If you need to configure relations, there are details listed here: http://sailsjs.org/#!/documentation/concepts/ORM/Associations http://sailsjs.org/#!/documentation/concepts/ORM/Association... (check the types of associations listed in the sidebar on the left)
sebastianmck 12y ago
Babel actually supports flow type annotations and declarators will be available once there's a decent ES7 spec for them.

bsimpson 12y ago

Traceur scared people away both because it was a build tool and had a runtime dependency. Now that tools like Webpack are common, introducing a build step at ay point in your workflow is trivial. Moreover, many of the JS Harmony improvements can be transpiled with a tool like Babel or jstransform without the need to introduce yet another library in your deployed code.

bfgeek 12y ago
If you want a cool way of adding traceur to a development webpage... without adding a compile step, check out https://github.com/bfgeek/swes6 https://github.com/bfgeek/swes6 It uses a serviceworker in the background to transpile es6-js requests into es5 transparently.

DigitalSea 12y ago

The thing that appealed to me about Babel back when it was still called 6to5 was the fact the output was far easier to read. If you compare the output of Traceur to Babel, the difference is night and day. Traceur isn't readable at all (at least not to me) which might not matter, but I think in some cases, Babel's output is closer to more traditional Javascript and more performant. Overall it is a much better transpiler than Traceur. Plus you're right, the author is a great guy and open to suggestions from the community, it definitely isn't a closed off effort.