Integration to BioJS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
Slush, Sniper and Registry
David Dao
Kudos for the presentations!
You almost made it!
Schedule
Oct 16 - Introduction, BioJS, Technology Fundamentals (HTML, CSS, SVG)
Oct 23 - Technology Fundamentals (JavaScript, Git)
Oct 30 - Introduction to Interactive Data Visualization with D3
Nov 06 - Visualization: Best Practices
Nov 13 - Project Proposal
Nov 20 - Supervised Team Meeting
Nov 27 - JS: Best Practices, Open Question Session
Dec 03 - Supervised Team Meeting
Dec 17 - Supervised Team Meeting
Jan 08 - Final Project Presentation (Prof. Rost)
Jan 15 - Submission to BioJS, Documentation
Project Phase
Theory Phase
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
David Dao
Topics
BioJS Component Architecture
Guideline into BioJS
- BioJS Slush
- BioJS Sniper
- BioJS Registry
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
David Dao
BioJS is Node-driven
Remember CommonJS and Browserify?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
David Dao
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/871973/Screen_Shot_2014-11-26_at_15.24.15.png)
CommonJS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/871980/Screen_Shot_2014-11-26_at_15.26.39.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
David Dao
// foo.js exports, someone imports (index.js)
module.exports = function () {
console.log('Hello world');
};
// index.js
var foo = require('./foo');
foo();
Or goal ...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
David Dao
One file out of many
With
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/871987/Screen_Shot_2014-11-26_at_15.29.13.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
David Dao
Step by Step Integration into BioJS
1. Step - Download Node.js
2. Step - Get rid of the Script Tag Hell (hardest part)
Require dependencies using CommonJS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
David Dao
Step by Step Integration into BioJS
1. Step - Download Node.js
3. Step - Download Slush and BioJS Slush
2. Step - Get rid of the Script Tag Hell (hardest part)
Require dependencies using CommonJS
npm install -g slush
npm install -g slush-biojs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
David Dao
//Important dev scripts
npm run prepublish
npm run sniper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
David Dao
BioJS Sniper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/967601/Screen_Shot_2015-01-08_at_09.14.50.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
David Dao
Step by Step Integration into BioJS
4. Step - Register in NPM
npm publish
5. Step - Publish with the BioJS Tag!
Enough talking! I want to see Code ...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
David Dao
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
David Dao
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
David Dao
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724716/rost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/daviddao/images/724718/seas.png)
David Dao
Integration to BioJS
By David Dao
Integration to BioJS
- 1,567