Improve the default javascript setup

[mrmartineau]

I would like to revisit the default js setup, we have been using Browserify for much of our work at TMW, should that be used by default?

• What should we include by default? (shims, plugins etc)
• Should we use bower for all external dependencies?
• Should we use the UMD style for all modules?

/cc @munkychop @ashleynolan @nicbell @CiaranPark @bardius

[mrmartineau]

I'll get started, I think we should include:

• trak.js via bower or included properly? My thought is to include it with bower so we can update it independently.
• @nicbell's Shimly grunt plugin for generating js shims

Our existing helpers are quite useful, but not all are necessarily needed. We could add them to gists and link to them (the ones that aren't shims), I think these should be included:

• log / console.log wrapper
• cookies

The libs (html5 polyfill shims, mobile helpers etc) probably could be left out, most projects include Modernizr anyway so the html5 shims are probably not needed, and if they are, the dev can add them themselves.

The mobile libs probably aren't needed unless we are support iOS 4!

[ashleynolan]

I'm all for moving kickoff onto using Browserify. The JS setup isn't necessarily core to the framework anyway and is easily replaced, and if the compilation is included in the grunt setup, wouldn't need people to upskill much to use it.

I think it would be useful to move the mobile helpers in /js/libs/mobile into a centralised mobile.js file in the /js/helpers directory. We can then evolve this over time, and add in any mobile specific helpers as we need them.

Agree with removing html5 shiv – not needed as we use modernizr. I think we could potentially keep the polyfill directory and move it to helpers – I think we should make libs very specifically for more complex maintained libraries rather than smaller chunks of code.

Happy to start work on the initial browserify setup if we all see the value in it though.

[tommaton]

Browserify would be a good route to go down and I've found it to be very useful in creating a much cleaner JS.

I also would recommend https://github.com/Modernizr/grunt-modernizr for generating modernizr as it only generates what is needed creating a lighter weight version of the file.

[mrmartineau]

I tried using grunt-modernizr back in the early days of Kickoff and removed it because I found that downloading from the site, using their builder app, was easier and better (which is what I do nowadays), than the this grunt plugin. I realise that it is an entirely different beast now and generates a new modernizr file when corresponding Modernizr tests are seen, which sounds like a good idea but I am wary of using this. I think we should do some testing before including in the framework.

@tommaton can you give some more info about the plugin based on your usage? Does it slow down build times?

[tommaton]

when I've used the plugin I've specified the folders/files rather than setting parseFiles:true; otherwise it will go through the entire project and check all the .js, .scss & .css which will slow it down especially on larger projects.

I've also set the extra parameter to set things like shiv, mq etc which also saves time as it add's it in by default.

But I can honestly say I've not come across any performance issues

[mrmartineau]

Thanks @tommaton, it's good to hear someone else's workflow. Could you paste your settings for grunt-modernizr below? Cheers