David Dao @daviddao_
Biologist
Developer
//Selfish Visualization Component
Complex JS Code
I am deeply in need of awesome visualization for the web!
Dependency One
Dependency Two
Dependency Three
David Dao @daviddao_
<html>
<head>
<meta charset="utf-8" />
<title>Hell no!</title>
</head>
<body>
<script src="jquery.js"></script>
<script src="d3.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="fancy.js"></script>
<script src="newick.js"></script>
<script src="tree.js"></script>
<script src="main.js"></script>
<script src="server.js"></script>
//ongoing...
</body>
</html>
The state of the art is to have a ton of script tags that either leak globals e.g. jQuery plugins all use $
David Dao @daviddao_
David Dao @daviddao_
David Dao @daviddao_
David Dao @daviddao_
Node & NPM (Node Package Manager)
Common JS
BioJS Component
Server Side
Browserify
Client / Browser
David Dao @daviddao_
David Dao @daviddao_
JS Library (with versions)
Hosts Node Packaged Modules
David Dao @daviddao_
David Dao @daviddao_
David Dao @daviddao_
David Dao @daviddao_
David Dao @daviddao_
Node & NPM (Node Package Manager)
Common JS
BioJS Component
Server Side
Browserify
Client / Browser
David Dao @daviddao_
var d3 = require('d3');
var newick_parser = require('biojs-io-newick').parse_nwk;
var tree = newick_parser("(a,(b,c))");
d3.select("body")
.append("svg")
...
//your awesome code
...
David Dao @daviddao_
David Dao @daviddao_
Node & NPM (Node Package Manager)
Common JS
BioJS Component
Server Side
Browserify
Client / Browser
David Dao @daviddao_
David Dao @daviddao_
David Dao @daviddao_
require('./path/to/local/module')
will be calling another local module
David Dao @daviddao_
Node & NPM (Node Package Manager)
Common JS
BioJS Component
Server Side
Browserify
Client / Browser
David Dao @daviddao_
$ browserify ./lib/hello.js
<script src="http://wzrd.in/bundle/biojs-vis-chromosome@0.0.2"></script>
David Dao @daviddao_