Integration to BioJS

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

David Dao

Topics

BioJS Component Architecture

Guideline into BioJS

- BioJS Slush

- BioJS Sniper

- BioJS Registry

David Dao

BioJS is Node-driven

Remember CommonJS and Browserify?

David Dao

CommonJS

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

David Dao

One file out of many

With 

David Dao

Step by Step Integration into BioJS

1. Step - Download Node.js

http://nodejs.org/download/

2. Step - Get rid of the Script Tag Hell (hardest part)

Require dependencies using CommonJS

David Dao

Step by Step Integration into BioJS

1. Step - Download Node.js

http://nodejs.org/download/

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

David Dao

//Important dev scripts
npm run prepublish
npm run sniper 

David Dao

BioJS Sniper

David Dao

Step by Step Integration into BioJS

4. Step - Register in NPM

https://www.npmjs.com/

npm publish 

5. Step - Publish with the BioJS Tag!

Enough talking! I want to see Code ...

David Dao

David Dao

David Dao

David Dao