glam icon indicating copy to clipboard operation
glam copied to clipboard

Build System

Open tparisi opened this issue 11 years ago • 54 comments

We need a real build system. Deal with this as part of the GLAM/Vizi integration. Related to #29

tparisi avatar Dec 11 '14 00:12 tparisi

Maybe look at gulp

tparisi avatar Jan 07 '15 01:01 tparisi

As per #15, would you be interested in a PR for having this?

RangerMauve avatar Jan 17 '15 20:01 RangerMauve

@RangerMauve howdy Ranger I would love it if you were to take this on... FYI I just merged the Vizi engine into the GLAM code base. It's all renamed GLAM, the idea is that it's the "glam engine." The whole mess uses the Closure-based build system from Vizi. I agree that we want to move this to node and NPM. So if you are interested in tearing into this, I would really appreciate it!

Note also that I am going to move this off the "Alpha 1" milestone and un-schedule it. I need to work on other high-priority items myself for the next week or so.

Let me know if you're still into working on this! Thanks

tparisi avatar Jan 26 '15 20:01 tparisi

Yeah, I'm definitely interested. I'm not sure how many hours I can devote yet since I'm also working on another side project at the moment. But I'm definitely up for working on it.

Also, by the looks of it @srounce is also interested in working on this.

I was thinking of ignoring any gulp fanciness and just having browserify run with npm run from the get go.

RangerMauve avatar Jan 26 '15 20:01 RangerMauve

The fewer tools the better! I hear you say "gulp fanciness" and I get scared.

I'm quite ignorant of web build systems. What I care most about is that it's (a) easy to install and use, assuming basic Node and NPM knowledge and (b) there's a way to have a continuous build task runner like grunt or whatever. I don't care what we pick. I have a strong preference for as Node-based as possible though.

tparisi avatar Jan 26 '15 20:01 tparisi

Yeah, in terms of a CI I was thinking of using something like travis-ci which is pretty easy to set up.

Defining tasks should be easy enough by using the scripts property inside package.json. Here's a guide on how that works. Since NPM is a pretty core part of node, this would probably be the "Node way" of doing things.

RangerMauve avatar Jan 26 '15 20:01 RangerMauve

FYI I'm getting a CloudFlare fail on that URL right now...

tparisi avatar Jan 26 '15 20:01 tparisi

The guide? Here's another one that goes over most of the same stuff.

RangerMauve avatar Jan 26 '15 20:01 RangerMauve

OK that one works.

tparisi avatar Jan 26 '15 20:01 tparisi

Mind listing all the dependencies and links to where you got them from? I've found tween, threejs and jQuery, but I'm not sure about oculus, parsecss, and if vizi is an actual dependency or not.

RangerMauve avatar Jan 27 '15 01:01 RangerMauve

Could we possibly get away with assuming those are globals?

srounce avatar Jan 27 '15 14:01 srounce

No, then we wouldn't really be making use of commonJS to the fullest. Typically when you publish a module to npm, it is assumed that it is entirely self contained.

RangerMauve avatar Jan 27 '15 14:01 RangerMauve

Alternately if we absolutely must use some globals, it'd be possible with browserify-global-shim

RangerMauve avatar Jan 27 '15 14:01 RangerMauve

Let me go through all the external dependencies with a fine tooth comb. There are probably a few things to clean up, like Oculus, that should actually be part of the GLAM code base. There should also be no trace of Vizi in there going forward, anything that matter from that will now be named 'glam.*' Please stay tuned I am going to look at this right now.

tparisi avatar Jan 27 '15 16:01 tparisi

OK I need a day to clean some things up:

  1. Oculus files will go into the GLAM core
  2. parsecss dependency will be removed; I need to de-jQuerify the whole thing. (Vizi was not dependent on it; the GLAM parsing only uses it in a couple of places)
  3. Old Three.js can be gone

Stay tuned.

tparisi avatar Jan 27 '15 16:01 tparisi

The parsecss stuff could probably be replaced with something available on npm pretty easily.

RangerMauve avatar Jan 27 '15 16:01 RangerMauve

I de-jQueryified parcess for now (just hacked the code) and pulled out the Ajax jQuery dependency. So, no jQuery required. This is all in the Alpha-2-VR branch. Next up: more cleanups.

tparisi avatar Jan 28 '15 22:01 tparisi

Just got rid of other unused libs. Now the dependencies are only:

requestAnimationFrame three.js - library and extras files (files not built into the core) tween.js

They're still concatenated; would love to come up with a scheme to build this all using compilation/require-style techniques. But now it's in a form where an enterprising sort ( @RangerMauve !) could go at it with a PR. What do you say?

tparisi avatar Jan 28 '15 23:01 tparisi

Perfect! I've got time today and tomorrow to work on it, too.

My plan is to do a dirty pass over everything and just get the dependencies over npm as well as linking all the files with requires, but after that we'll want to clean up the way different files require each other a bit.

RangerMauve avatar Jan 28 '15 23:01 RangerMauve

All that; yeah thanks.

So just to be clear, a developer wishing to build will only need NPM? What will the work flow look like?

tparisi avatar Jan 28 '15 23:01 tparisi

There will be a devDependency in the package.json for browserify, this will automatically create a binary in node_modules/browserify. Then, package.json will have a scripts property, and inside it'll define the command build which will just call browserify ./ -o build/glam.js, and I was thinking of having minifyify thrown in there to have the build-min command. Then we could also have watchify to have a watch command which will automatically watch for changes and rebuild.

But the flow for new devs would be

  • clone the repo
  • make sure node is installed
  • run npm install to install the dependencies and dev dependencies
  • run wither npm run build or npm run watch to have the project built
  • make changes
  • ???
  • Profit!

RangerMauve avatar Jan 28 '15 23:01 RangerMauve

Sounds reasonable and I'm delighted to be the guinea pig for it. LMK!

tparisi avatar Jan 28 '15 23:01 tparisi

Since you have the goog.require and goog.provide stuff, it's easier for me to look up the dependencies, so this should be quicker than I though. Not sure on ETA yet, though.

RangerMauve avatar Jan 29 '15 00:01 RangerMauve

Yeah the deps work in Closure already, for whatever that's worth. I await with bated breath!

tparisi avatar Jan 29 '15 00:01 tparisi

You have a bunch of constructors being defined like

glam.SomeName = function(param){}

Would it be OK to convert them into regular named functions since that'll make it cleaner to export?

It'd look like

var util = require("util");
var SuperClass = require("../core/someSuperClass");

module.exports = SomeName;
util.inherits(SomeName,SuperClass);

function SomeName(params){ /* etc ... */}

RangerMauve avatar Jan 29 '15 00:01 RangerMauve

OK here's where I display my ignorance: does that mean it all has to get run through browserify and that will somehow turn it into glam.SomeName?

It's a usage issue as in, I want to be able to say var sn = new glam.SomeName(params). Will that still work? If not, I need to know what the pattern would be (and there will be a ton of code to convert from using new)

tparisi avatar Jan 29 '15 00:01 tparisi

Yeah, so each file will now export the thing that it's defining. At the top level in src, there will be index.js. It'll look something like:

module.exports = {
AnimationService: require("./animations/animationService"),
Interpolator: require("./animations/interpolator");
/*  etc ... */
}

Then libraries using this will have code that looks like:

var glam = require("glam");

glam.AnimationService({whatever:"here"});

Internally, all the individual modules will just require the file that they want directly.

The API should stay exactly the same, it's just that the way it's all linked together will be a bit different from what you have with the closure compiler.

The compiled bundle will expose the global glam, if needed, and the bundle itself will actually be both AMD and CommonJS compatible as well. More details on how the bundle will be compiled are here.

RangerMauve avatar Jan 29 '15 00:01 RangerMauve

As long as the API surface stays the same, I'm down with it.

tparisi avatar Jan 29 '15 00:01 tparisi

Oh and what happens with debugging... you'll see the generated source? Or use source maps?

tparisi avatar Jan 29 '15 00:01 tparisi

Yeah, browserify supports source maps.

RangerMauve avatar Jan 29 '15 00:01 RangerMauve