Modernizing build/bundling

[joelgriffith]

As a contributor to graphiql, I'm impeded by the lack of real-time tooling for the project. I frequently have pause development, run a build, reboot a server, and then am able to test changes in a browser. This adds friction to contributors as there's numerous hoops to jump through in order to test changes. I propose the following (and can implement if there's buy-in):

• An npm command for active development. Can be npm run dev or some other variant. It would watch the source files, bundle (NOT minifiy), and start/reboot the example application.
• Implement one of the css pre-processors. There's numerous vendor issue in the css due to vendor namespacing (I'm looking at you old-ish IE). This would alleviate that by leaning on other tools like http://lessprefixer.com/

I do NOT want to add:

• A heavy-weight build manager, like gulp.
• More npm commands than is necessary.
• Confusion.

Thoughts? This would obviously introduce some more devDependencies like watchify or similar, but I think the value of which would be worth it. I can tell that there was motivation in this project to keep things "slim", but since it's grown in popularity and size the lack of these types of tools is a pain that is growing.

[asiandrummer]

Hey @joelgriffith - I'd seriously love that. Your workflow is similar to what I do in development time, and I see a lot of goodness coming from implementing what you've suggested. You probably already know more about how to do this (I'm rather inexperienced in this area), so I'd love to see/review what you come up with.

I'm a bit perplexed as to why we need css pre-processors. I feel like we don't have that many rules in need of vendor prefixes - and if we're missing any we could manually write them in, in a way that doing that won't get out of the hand just yet. Is this to prevent something gnarly from happening later?

[joelgriffith]

@asiandrummer thanks for reading! You're right correct, the rules are pretty simple. I think the biggest win is just the vendor prefixing at this point (which could probably be implemented by itself apart from a full-blown preprocessor).

I think at a certain point this project will likely need a preprocessor as the feature base grows. My real desire is to just get vendor prefixing (See my PR for IE10/11 support, which took about an hour of battering around to get working since it requires combing through lots of documentation).

I'll get an initial PR for this over the next few days and we can tease out what we'd like to keep.

[asiandrummer]

@joelgriffith your plan sounds amazing to me. To be honest we weren't really targeting for IE10/11 support, so if a css pre-processor could help with that (in addition to the build tools), I don't see why we can't have it. I'd also agree if you'd like to move slow and have one thing at a time - I'll be diligent in reviewing PRs.

[joelgriffith]

💥 #197

[asiandrummer]

@joelgriffith Just wanted to say thanks for your awesome contribution!