angular-browserify-npm.md

angular-browserify-npm.md

The problems

• HTML

  • meant to display linked document
  • used to write complex applications

• What is missing

  • JS has no module system
  • No components for the web

• Annoyance

  • Sharing client and server-side code

How to fix these?

Browserify

what it does

how it does it

Walk dependencies with module-deps applying specified transforms, insert module globals - require, process, __dirname etc - browser-pack

what is awesome

• --debug outputs sourcemaps - see your original line numbers when debugging. See coffee-script code for cofee-script!
• reuse node modules (browserify provides browser variants of node core)
• write plugins (transform jade files, even require HTML strings)
• publish your browser-side code to npm (!)

Examples in what is awesome:

• basic example - just like commonjs. Build it, show what happens to output. (TODO)
• include node-uuid in basic example. run it on both browser and on server (TODO)
• node-core example - shoe, dnode (just show code from book)

Which brings us to

npm, CommonJS

what it does

• handle dependencies

whats great:

same package, different versions:

quux@1.0.0
|
+-- bar@1.0.0
|   |
|   `-- foo@1.0.0 \
|                  \
`-- baz@1.0.0       > Conflict?
    |              /
    `-- foo@2.0.0 /

Nope, no conflict. Everything works. How?

• directory separation (wasteful? worth it)

• CommonJS require has scope separation

  import moduleName # lookup defined by the language

  var moduleName = require('whatever/path') 
  // path can be anything and is relative by default. Wee!

AngularJS

• take book examples
• kitchen sink included

Templates

With data binding - show example

Controller

attach stuff to scope = viewmodel

Directives

show chart directive

Services, router

Show via example wiki from book