Webpack, Grunt, Gulp, Babel

off.the.walls

What are people tending to use to compile their code?

At the moment i want to start migrating my applications to es6 in order to make use of the new functionality and features that it introduces, the only thing I can't seem to decide is what engine i'm going to use to migrate it back to es5 for backwards compatibility with older browsers?

Whats everyone using at the moment?

Buford T Justice

is it a js framework?

off.the.walls

Buford T Justice wrote: »

is it a js framework?

They're all packagers / compilers for ES6 javascript.

Buford T Justice

Gulp is the latest / trendy one for mean. seemingly its fast replacing grunt

dazberry

The front-end unicorns in here are currently talking about webpack.

counterpointaud

webpack and babel everywhere here for new projects.

miralize

I hate webpack with an undying passion. Tried the bets of Webpack 2 last night and still cant get around the fact that you need to use a require to even kickstart converting your SASS files to compiled CSS.

However, it is far easier to set up for Babel & ES6, than the Gulp browserify combo I use currently

off.the.walls

dazberry wrote: »

The front-end unicorns in here are currently talking about webpack.

Unicorns? I've been using grunt for a while but wouldn't mind switching to something else like Webpack or Gulp. Need something that can compile ES6 fairly handily.

Graham

off.the.walls wrote: »

Unicorns?

Designer who codes.

dazberry

off.the.walls wrote: »

Unicorns? I've been using grunt for a while but wouldn't mind switching to something else like Webpack or Gulp. Need something that can compile ES6 fairly handily.

Graham wrote: »

Designer who codes.

Not designers no, I was just joking, they all use TS + React/Redux - I'm just an old dotnet guy that gets to play with JQuery the odd time, the amount of change in the JS world is astounding...

D.

John_Mc

Ionic 2 which uses Angular 2 have moved from Gulp to WebPack anyway. Still in R.C so WebPack must have the momentum now

counterpointaud

Graham wrote: »

Designer who codes.

This forum seems to have been largely free of pejorative terms like that, let's not introduce them now? I work work with some very talented UX designers , and what they do is every bit as involved and nuanced as what us 'engineers' get up to.

Any designers I met who do a bit of coding, don't tend to be interested in things like Webpack anyway, more html, css and event handling JS, but that's beside the point.

I get that you are just trying to explain what you thought another poster was saying, and it may not necessarily reflect your attitude, but it is not very welcoming to non-traditional devs visiting this forum.

There is also another unpleasant attitude I have come across, mostly exhibited by jaded back-end devs who never learned to work with front-end web tech and feel threatened by it, that all front-end development is basically stack-overflow copy and paste hackery. Given how sophisticated client-side apps are becoming, it kind of amazes me how people can maintain this viewpoint. Anyway...

off.the.walls wrote: »

Need something that can compile ES6 fairly handily.

Webpack and babel does this well with minimal setup IMO

John_Mc

I wouldn't consider the term "Unicorn" to be derogatory and think you're jumping the gun a bit to be honest

counterpointaud

John_Mc wrote: »

I wouldn't consider the term "Unicorn" to be derogatory and think you're jumping the gun a bit to be honest

I don't either, it was more the the 'designers who code' meaning assigned. The implication that designers are somehow lesser than coders. But maybe you're right.

John_Mc

Programmers tend to think like that though don't they? A designer has a completely different set of skills, which I completely agree with you in that they are just as important, but they are not the same as programmers.

They're pretty rare too because the design and implementation require such different skills. I suspect this is where the term comes from

counterpointaud

John_Mc wrote: »

Programmers tend to think like that though don't they? A designer has a completely different set of skills, which I completely agree with you in that they are just as important, but they are not the same as programmers.

They're pretty rare too because the design and implementation require such different skills. I suspect this is where the term comes from

OK, I may have been looking at this thread through the filter of some personal experiences, apologies if I was a bit OTT there.

There is nothing inherently negative about the term unicorn (to describe rare combination of skills etc) or the phrase 'designers who code'. I have just heard both, particularly the later, used pejoratively and had a bit of a reaction to it.

John_Mc

I've never heard it before and an hoping/assuming it's not derogatory. It shouldn't be because someone who can design a slick UI and then implement it has a valuable set of skills and more power to them for it!

Graham

John_Mc wrote: »

I've never heard it before and an hoping/assuming it's not derogatory. It shouldn't be because someone who can design a slick UI and then implement it has a valuable set of skills and more power to them for it!

I can't say I've ever heard it used in a derogatory fashion. Quite the opposite in fact.

counterpointaud

Graham wrote: »

I can't say I've ever heard it used in a derogatory fashion. Quite the opposite in fact.

Fair enough, apologies. Please chalk it down to over-sensitivity on my part.

So... back on topic: anyone played with rollupjs for this?

off.the.walls

I started off as a designer! Got so fed up with it I started to learn how to code. Been working with code for about 2 years now! Anytime I say I wanna get away from design i'm reminded how rare it is to find someone who knows how to design a slick UI and to be able to implement it and code it.

dazberry

counterpointaud wrote: »

This forum seems to have been largely free of pejorative terms like that, let's not introduce them now?

Since I was the one who posted the term I should really clarify that I did not post it as a pejorative term or with any derogatory intent - the opposite really. I work on a cross functional team with a number of front-end guys who are all exceptionally good. It was difficult enough to hire those we have - hence the term was more in relation to how difficult it was to get them.

I worked for 15 years as a Delphi developer and I've been on the receiving end of that sort of ignorance on far too many occasions

... and I'm burned out - not jaded, but maybe that's for another thread

D.

off.the.walls

Just incase anyones interested I wrote a compile package.json with babel. If you write your express app in es6 this will serve and compile it.

Fairly handY!

[HTML]
{
"name": "babel-es6test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon lib/index.js --exec babel-node --presets es2015,stage-2",
"build": "babel lib -d dist"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.18.0",
"babel-register": "^6.18.0",
"nodemon": "^1.11.0"
},
"dependencies": {
"babel-core": "^6.20.0",
"express": "^4.14.0"
}
}
[/HTML]


also make sure to include a start.js hook file for babel otherwise node runs into some errors.

[HTML]
require("babel-register")({
"presets":
});
require("./index.js");
[/HTML]

Once you run the build run node dist/start.js and that will start your es5 compiled server.

off.the.walls

https://github.com/EvanBurbidge/babel-es6-node-starter

Put this together! been experimenting with using classes as route controllers! it's fairly fun to work with!

Enjoy

Anyone can suggest improvements let me know ! Feel free to fork / pull.

Aswerty

I use a mix of Gulp and plain old NPM for building - I don't compile but I am eyeing up TypeScript for my next project, so I guess that'd be the TypeScript compiler I'd be using.

Gulp is nice but having to use gulp specific packages (e.g. gulp-x) for everything is just insanity. How does anyone think that's an acceptable approach?

On the other hand using NPM scripts is far too simplistic and I probably won't be using it in future since the lack of flexibility is stifling.

The JS world is crazy - the language is fine once you get used to it - but the ecosystem is utter madness.

off.the.walls

Aswerty wrote: »

I use a mix of Gulp and plain old NPM for building - I don't compile but I am eyeing up TypeScript for my next project, so I guess that'd be the TypeScript compiler I'd be using.

Starting using typescript myself since I started these posts gives access to the vast majority of ES6 Features and allows for some really cool things in regards to checking for errors and such!

I have it set up at the moment with a small grunt task to just run the tsc command in my terminal.

Aswerty

off.the.walls wrote: »

Starting using typescript myself since I started these posts gives access to the vast majority of ES6 Features and allows for some really cool things in regards to checking for errors and such!

I have it set up at the moment with a small grunt task to just run the tsc command in my terminal.

Yeah, I'm a fan of statically typed languages which is a big plus for TypeScript. They've been pretty careful ensuring TypeScript is a superset of JS so that all valid JS is valid TypeScript which is important when you're moving between both. I always stayed away from CoffeScript because I didn't want to deal with a whole new syntax. I've kept an eye on TypeScript since it came out but I always had some other new tech in every project I did for the last few years so I kept putting off introducing it for fear of introducing too much in one go.

off.the.walls

Aswerty wrote: »

Yeah, I'm a fan of statically typed languages which is a big plus for TypeScript. They've been pretty careful ensuring TypeScript is a superset of JS so that all valid JS is valid TypeScript which is important when you're moving between both. I always stayed away from CoffeScript because I didn't want to deal with a whole new syntax. I've kept an eye on TypeScript since it came out but I always had some other new tech in every project I did for the last few years so I kept putting off introducing it for fear of introducing too much in one go.

Have to say since I started working with it it doesn't really feel like you're introducing something "New". It's just got handy features for error checking your types. Functions are still functions, with it I can make use of arrow functions, destructuring, classes, importing / exporting, to be honest after spending a few weeks at it don't know why I haven't used it before!. Main upside is I can still write plain JS and have that compile for me! that for me is a big bonus.