presentation.pres

##
    __                                      _ ____
   / /_  _________ _      __________  _____(_) __/_  __
  / __ \/ ___/ __ \ | /| / / ___/ _ \/ ___/ / /_/ / / /
 / /_/ / /  / /_/ / |/ |/ (__  )  __/ /  / / __/ /_/ /
/_.___/_/   \____/|__/|__/____/\___/_/  /_/_/  \__, /
                                              /____/
##

http://browserify.org
https://github.com/substack/node-browserify


















##
     __  __     ___
 /\ |__)/  \/  \ |
/--\|__)\__/\__/ |

##


- dependency management

- uses CommonJS style

  * declare dependencies with require()

  * export modules with module.exports or exports

- utilizes npm


















##
      _____             ___  __
||\ |(_  |  /\ |  |   /\ | |/  \|\ |
|| \|__) | /--\|__|__/--\| |\__/| \|
##

- get node (homebrew, nodejs.org, etc)

- install npm package globally

   -----------------------------------
  |ooo                                |
  |-----------------------------------|
  |                                   |
  |$ npm install -g browserify        |
  |                                   |
  |                                   |
  |                                   |
  |                                   |
   -----------------------------------


















##
     __ __
/  \(_ |_
\__/__)|__
##

- import dependencies using CommonJS styles

  * for 3rd party modules, install with npm

     -----------------------------------
    |ooo                                |
    |-----------------------------------|
    |                                   |
    |$ npm install underscore           |
    |                                   |
    |                                   |
     -----------------------------------

  * for local modules, use relative path

- compile using browserify command

   -----------------------------------
  |ooo                                |
  |-----------------------------------|
  |                                   |
  |$ browserify main.js > bundle.js   |
  |                                   |
  |                                   |
   -----------------------------------

- optionally use a watcher to compile on save


















##
___ __          __ __ __  __      __
 | |__) /\ |\ |(_ |_ /  \|__)|\/|(_
 | | \ /--\| \|__)|  \__/| \ |  |__)
##

- plugins that allow transforming files before browserifying them

- examples:

  * coffeeify - compile coffeescript

  * liveify   - compile livescript

  * hbsify    - pre-compile handlebars templates

  * deAMDify  - translate AMD modules

  * ... and many more


















##
 __  __  __  __
|__)|__)/  \(_
|   | \ \__/__)
##


- less "ceremony" to syntax

- bundles up everything into one file

  * closer to production environment

- utilizes npm

  * huge number of packages

  * keep 3rd party libs out of source control

- great for node developers


















##
 __ __      __
/  /  \|\ |(_
\__\__/| \|__)
##


- bundles up everything into one file

  * need to build to use/test

  * difficult to debug (mitigate with source maps)

- requires npm for easy use of 3rd party libs

  * shimming local libs is difficult

  * need browser-specific lib (e.g. jquery-browserify)

  * out-of-sync lib version

    * may not be the latest

    * package version usually differs from lib version

- poor documentation / lack of community


















##
     __           __
\  /(_    /\ |\/||  \
 \/ __)  /--\|  ||__/
##

- syntax

- npm vs local 3rd party libs

- synchronous vs asynchronous

- multiple files vs one file

- compilation vs no/optional compilation


















##
 __ ___     __ __         ___ __ __        ___      __ __
/  \ | |__||_ |__)   /\ |  | |_ |__)|\ | /\ | |\  /|_ (_
\__/ | |  ||__| \   /--\|__| |__| \ | \|/--\| | \/ |____)
##

- almond.js

- curl.js

- yepnope.js

- head.js

- manually

- build tools

  * sprockets

  * grunt