Technology Fundamentals -Behind the scenes
David Dao @daviddao_
The Problem
Biologist
Developer
//Selfish Visualization Component
Complex JS Code
I am deeply in need of awesome visualization for the web!
Dependency OneDependency TwoDependency ThreeDavid Dao @daviddao_
script tag hell
<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_
-
browsers don't have a good way to load modules
-
Tons of HTTP requests
-
A good module system enables better code to be written
David Dao @daviddao_
Solving the Script Tag Hell
David Dao @daviddao_
The anatomy of a BioJS Component
Node & NPM (Node Package Manager)
Common JS
BioJS Component
Server Side
Browserify
Client / Browser
David Dao @daviddao_
What is NPM ?
David Dao @daviddao_
NODE Packaged Module
-
JS Library (with versions)
Node Package Manager
-
Hosts Node Packaged Modules
David Dao @daviddao_
Pros of Node.js
-
language: JavaScript
-
virtual-machine: V8 is faster than should be allowed
-
module system ALIAS ...
David Dao @daviddao_
The Treasure (ModuleTOPIA)
David Dao @daviddao_
It grew really fast...
David Dao @daviddao_
Unix Philosophy
... How ?
David Dao @daviddao_
The anatomy of a BioJS Component
Node & NPM (Node Package Manager)
Common JS
BioJS Component
Server Side
Browserify
Client / Browser
David Dao @daviddao_
CommonJS is a Standard which allows you to require Modules by name only
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_
Require
David Dao @daviddao_
The anatomy of a BioJS Component
Node & NPM (Node Package Manager)
Common JS
BioJS Component
Server Side
Browserify
Client / Browser
David Dao @daviddao_
BioJS Component Dependencies
David Dao @daviddao_
Besides of reusing libraries by others, NPM gives a productive and safe way to split the internal code into small pieces
David Dao @daviddao_
require('./path/to/local/module')
will be calling another local moduleDavid Dao @daviddao_
The anatomy of a BioJS Component
Node & NPM (Node Package Manager)
Common JS
BioJS Component
Server Side
Browserify
Client / Browser
David Dao @daviddao_
$ browserify ./lib/hello.jsBrowserify - Solving your Script Hell
Local Development
Global Delivery
<script src="http://wzrd.in/bundle/biojs-vis-chromosome@0.0.2"></script>David Dao @daviddao_
BioJS Workshop - Technology Fundamentals Part 1
By David Dao
