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 One
Dependency Two
Dependency Three

David 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 module

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_

$ browserify ./lib/hello.js

Browserify - 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

BioJS Workshop - Technology Fundamentals Part 1

  • 726