Writing Modular JavaScript with Browserify

pixelwhip

Developing a modern web application requires an increasing amount of JavaScript code.  If not managed properly, you'll quickly find yourself dealing with a tangled mess of libraries and dependecies. Browserify can help.

Browserify is a flexible and powerful build tool for JavaScript.  At the most basic level, it allows you to bundle your JS code using CommonJS style modules that will run in the browser. It also offers a plugin and transformation api. Allowing you to process your scripts as they are bundled. 

In this talk we'll look at the benefits Browserify and walk through practical examples, including:

  • Organizing your code into smaller modules for better reuse.
  • Requiring 3rd-party modules from npm.
  • Separating your JS application's markup into clean template files.
  • Transpiling ES2015 (ES6) code to ES5 with Babelify.
  • Minifying code with Uglify.
  • Setting up super fast incremental builds with Watchify.
  • Extracting shared dependencies into common files with automatic code-splitting.

Whether working with Drupal 7, 8, or a headless frontend, you'll come away with a deeper understanding of what Browserify is and concrete steps to integrate it into your workflow.

This talk is geared toward developers who have experience with JavaScript and may have used other nodejs based tools such as Grunt, Gulp or node-sass. Those with experience using Browserify or Webpack are bound to learn something new as well.

Slides: http://pixelwhip.github.io/modular-js-slides/#/

Session Track

Front End

Experience Level

Intermediate

Drupal Version

When & Where

Time: 
Tuesday, 10 May, 2016 - 14:15 to 15:15
Room: 
263 [Phase2]