Dependency management > npm + Browserify

[addyosmani]

The trick with this section is going to be deciding how much of the tooling around Node/npm we include in the introduction section of the book (given that Grunt/Yeoman etc rely on them so heavily) vs. how much of this we capture in this chapter.

Either way we should talk about:

• Compelling reasons to use a single package manager
• Introduction to Browserify - how it works, where it fits in your workflow
• Demonstrate building a simple app perhaps using components that rely on a Browserify layer for their modules/packages so it's clear how you would practically use it.

We can very likely flesh this out better. Ideas welcome.

[jackfranklin]

Have written briefly on this previously.

I think a layout such as:

• Why use a single package manager (npm)
• How Browserify works
• Installing and using modules through Browserify
• Creating your own modules that use Browserify
• Automating the process of generating bundle.js file (Grunt / Gulp / whatever - link this to the relevant other sections of the book?)
• "Gotchas" / things to be aware of

[addyosmani]

That layout looks pretty solid to me - we can always iterate over time :)

Don't suppose you'd be interested in getting involved on the Browserify chapter, @jackfranklin? :)

[jackfranklin]

Absolutely, within reason, although I can't commit to too much ATM..blame University exams! :)

Are you planning to cover Grunt/Gulp before going into this kind of thing? I think that way would make sense because then you can reference things. EG, would be easier to explain the browserify Grunt/Gulp task if Grunt/Gulp has been explained first.

[addyosmani]

Yep! Gulp, Grunt and Brunch will be covered earlier on! I also envision us having an intro section which talks about the tooling basics that many of the other tools build on (Node/npm/command-line etc). That way you can refer back to those explanations without having to worry about repetition.

Totally understand commitments and time constraints :) You could even (if you wanted) reuse some of the content you've already written on the subject as a baseline. The project is all about getting a kickstart on a reliable educational resource about front-end tooling and we can always improve as we go on.

[toddself]

Would love to see a discussion on using browserify-shim and other plugins to help build bundles, as well not using a build system, ie generating the bundle.js on the fly in development so you don't have to worry about live reload, etc. (this is what we currently do)

[sethvincent]

I'd be excited to help with this chapter if needed. I've got this post and a couple others that might be useful: http://superbigtree.tumblr.com/post/54873453939/introduction-to-browserify

This roundup I did of various blog posts about browserify may be useful as a resource: http://learnjs.io/blog/2013/11/24/browserify-resources/

Related to @toddself's comment: including a section about use of watchify and/or beefy for development would be great.

[jackfranklin]

@sethvincent would love to "team up" as it were on this :)

[sethvincent]

@jackfranklin Cool!

Here's a revised list of sections:

• What are npm & browserify?
  • why use one package manager
  • how browserify works
• Examples of npm/browserify usage.
• Installation - Windows, Mac, Linux.
• How to find modules on npm that work with browserify.
• Installing modules.
• Using dependencies, devDependencies, and peerDependencies.
• Using beefy and watchify for development.
• Using transforms (cli and in package.json)
• Using browserify to produce standalone UMD modules
• Using browserify with npm scripts / grunt / gulp / etc.
• Using js libraries that aren't on npm with browserify.
• Creating modules for both node.js and browserify.
• Publishing modules for browserify on npm

Adapted from your list above and here: https://github.com/tooling/book-of-modern-frontend-tooling/issues/6#issuecomment-31259216

Feel free to revise this further. Maybe we claim the sections we want to work on?

[addyosmani]

@jackfranklin @sethvincent if you're happy, I can finalize you both as co-authors of this chapter and add it to the index. We're working on fleshing out the repo structure/build process etc. so plenty of time to work on the section as time allows.

[jackfranklin]

@addyosmani @sethvincent ah sorry, managed to miss your last message.

That list looks good to me and I'm happy to co-author. Next 2 weeks of my time are fairly busy with exams but I should be able to do bits & bobs and then commit more time after that. If you're cool with that Addy feel free to add me to the co-authors list :)

[sethvincent]

@addyosmani Awesome! That works for me. @jackfranklin, do you have particular sections you'd like to work on?

I'm thinking I'll do a first pass on these:

• What are npm & browserify?
  • why use one package manager
  • how browserify works
• Examples of npm/browserify usage.

[shama]

A couple of things I didn't see mentioned but probably should be:

• Using transforms (cli and in package.json)
• Using browserify to produce standalone UMD modules

[sethvincent]

Thanks, @shama. I added those to the list.

[Raynos]

I'll happily review this chapter and help if I can !

[addyosmani]

Just a friendly ping to see where we are on this :) Thanks again for volunteering to help out with this chapter!

[addyosmani]

@jackfranklin @sethvincent I know both of you are probably busy at the moment, but I was wondering if you might have a chance to take a look at this sometime over the next month. It would be fantastic if we could even start by repurposing/updating some of the existing content we've written about this subject (I think Jack may have) and can then at least ask others in the community to help us expand on that base. I believe @Raynos and others would still be up for reviewing if that was the case.

[jackfranklin]

@addyosmani I actually managed to make a start on this - Uni dissertation getting in the way! I'll try to find time to push what I have up in the next couple of days so we can start on this. Sorry it's taken so long.

[jackfranklin]

@addyosmani @sethvincent et al I have finally made a start. Not tonnes of work (yet) but it does now exist: #50.