Change Stack

[butterproject]

Change Stack

[MrAdder]

Something is being worked on in angular using Electron https://github.com/butterproject/butter-desktop-angular

[AlicanC]

@rafaell-lycan, I used Electron, JSPM and AngularJS for gifmaker.io and I am very pleased about it.

AngularJS could be React (with Flux or Relay or Fynx or whatever), but I don't think I would ever replace Electron or JSPM.

The build system is Gulp, but I don't use any Gulp plugins. Gulp or Grunt plugins just complicate things on big projects. Just replace gulp.src(), with node-glob and use the actual stuff instead of lame Gulp plugins that keep failing at every edge case. When you transpile your Gulpfile with Babel, you can also use ES7 async/await. With q's Q.nfcall() and Q.ninvoke() you can do stuff like:

import gulp from 'gulp';
import glob from 'glob';
import fse from 'fs-extra';
const qlob = Q.nfcall.bind(Q, glob);

async function clean() {
  await* [
    Q.nfcall(fse.emptyDir, 'temp'),
    Q.nfcall(fse.emptyDir, 'dist'),
  ];
}

async function buildCSS() {
  const cssFiles = await qlob('src/*.css');
  await cssBuilder.build(cssFiles);
}

async function buildJS() {
  const jsFiles = await qlob('src/*.js');
  await jsBuilder.build(jsFiles);
}

async function pacakageApp() {
  // whatever...
}

gulp.task('build', gulp.series(
  clean,
  gulp.parallel(
    buildCSS,
    buildJS,
  ),
  packageApp
));

It's really great to have control over your build system.

Electron also has some nice tools to make packaging easier. You can easily create DMGs for OS X and NSIS installers for Windows. Auto updater support for Windows also landed today so that's covered for OS X and Windows too.

@MrAdder, CoffeeScript, really? Grunt? Where is the good stuff?

2/10, wouldn't contribute.

[rafaell-lycan]

@AlicanC nice stuff, I'd like to work in some project with you soon. I've using some Gulp plugins because of Browserify and Babel (Babelify), very easy and nice.

@MrAdder for me Grunt it's OK, but Coffee and Stylus? Why? Things need be simple. I prefer to use Pure ES6 JavaScript and some soft pre-processor like Sass (.scss) or LessCss.

But this isn't about me 👻

[MrAdder]

I did not make this project I just linked it as they are already working on Angular and Electron :)

[AlicanC]

@rafaell-lycan, you should really give JSPM a shot. It manages your packages, transpiles JS with Babel (or Traceur or TS) and you can also import CSS and text (and much more) right in your JS so you don't worry about bundling your CSS or templates and such. That reduces your build process from something like "build css->build js->...->bundle" to just "bundle".

We do very few things in our build system:

• Bundle with jspm. (Just 4 lines for JS, CSS and everything.)
• Build application with electron-builder.
• Package application with electron-packager.
• Upload package to Azure.

Zero Gulp plugins and very few dependencies overall. Weeks pass, I move from CSS to LESS, I add or remove tons of dependencies and whatever and I don't even touch the build system even once.

JSPM handling all the hard work dramatically reduces weight of the build system (and the time you spend on it).

I would like to see Butter adopt a modern environment which would make it fun to contribute.

[xaiki]

patches are welcome, if it's a huge change, please make a new repository and we'll include it here, eventually devs and the users community will choose the one that works best for them.
that said rewriting is always much harder than it sounds

[AlicanC]

@xaiki, patches are welcome for what? No one's going to rewrite the whole build system or w/e just to get the PR rejected. We should discuss and open separate issues for each change that was agreed on. Then you can mark them "prs accepted" or "contributions welcome" if the core contributes don't want to spend time for them.

[oliviertassinari]

Why not simply using the same stack as Netflix?
Most of it is open sourced, React, Babel, and probably Webpack.