Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Practical browser npm

Practical browser npm

All the things we wish we'd known about front end npm before we started.

23fc4556be14017796d38579dd4778ab?s=128

Mike MacCana

June 24, 2015
Tweet

Transcript

  1. @mikemaccana

  2. CertSimple

  3. EV SSL:

  4. CERTSIMPLE DO EV CERTIFICATES 40X FASTER

  5. HOW CERTSIMPLE 
 IS BUILT

  6. @mikemaccana

  7. @mikemaccana @certsimplessl We use npm on the backend We use

    npm on the frontend All our code is npm modules
  8. ALL THE THINGS WE WISH WE’D KNOWN ABOUT FRONT END

    NPM EARLIER
  9. @mikemaccana @certsimplessl Why we chose npm How you can use

    npm Things to avoid
  10. @mikemaccana @certsimplessl More packages

  11. @mikemaccana @certsimplessl Every frontend package
 CertSimple needed was officially maintained

    on npm
  12. @mikemaccana @certsimplessl Attitude to npm over time

  13. @mikemaccana @certsimplessl General JS things frontend needed also on npm

  14. YOU NEED MORE THAN 
 DATA BINDING & DOM MANIPULATION

    
 DON’T WRITE THESE YOURSELF
  15. @mikemaccana @certsimplessl Other module formats? • window globals are already

    dead • RequireJS never had a module repository - dead • UMD only exists because of globals and Require - just dead code at this point. • Very few ES6 packages, and they’ll be on npm anyway
  16. @mikemaccana @certsimplessl Building, 
 & bundling npm modules Build Tasks

    gulp npm run-script build webpack Bundle browserify browserify webpack
  17. @mikemaccana @certsimplessl Webpack? • Can bundle npm packages • Replaces

    build system as well • 8-10% smaller modules + hot reload • We use a bunch of existing gulp tools, so benefit not yet worth it
  18. @mikemaccana @certsimplessl Just modules - no /lib

  19. @mikemaccana @certsimplessl Why just modules? • modules are a reasonable

    unit of granularity • Unlike /lib, every module has ‘test’, README.md, packages.json, etc. • open source code with ‘npm publish’
  20. @mikemaccana @certsimplessl Making your modules prominent Automatically build a Sublime

    .project file that prioritises private npm modules
  21. @mikemaccana @certsimplessl Bundling This is the entire js/src/index.js Makes a

    bundle in js/dist/index.js
  22. @mikemaccana @certsimplessl The ‘frontend’ module:

  23. @mikemaccana @certsimplessl How to bundle templates?

  24. @mikemaccana @certsimplessl Analysing bundle size:

  25. @mikemaccana @certsimplessl Deploying • package.json only specified version for your

    immediate dependencies • a version 1.0.0 - only use b version 1.2.0 • b version 1.2.0 - use version c 1.0.0 or newer • c - could be any version • package.json alone isn’t enough to ensure C has a consistent version
  26. @mikemaccana @certsimplessl npm shrinkwrap • Provides consistent deploys • Specifies

    the full tree, all the way down • Built into npm • Avoids overhead of committing node modules
  27. THANKS!

  28. @mikemaccana @certsimplessl Links! Module counts
 http://www.modulecounts.com/ Discify
 http://hughsk.io/disc/ Sublime prioritise

    private modules
 https://gist.github.com/mikemaccana/fe5c1a83bcbdc0157534 Browserify + gulp
 https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify- uglify-sourcemap.md Webpack vs Browserify
 https://github.com/k88hudson/browserify-webpack#results