biojs1 biojs2 migration

You can find the biojs1 repo here

What is different in BioJS 2.0?

↝ Summary presentation of the differences between BioJS1 and BioJS 2.0.

Examples for migrated components

• biojs-vis-sequence
• biojs-vis-chromosome
• biojs-vis-pdbviewer
• biojs-vis-circularfv
• biojs-rest-psicquic
• biojs-vis-feature

(add your component to this list)

This guide is a work in progress. Please add your own experiences and comments to make it better.

0. Requirements

1. node (V8 JavaScript runtime enviroment) and npm (node's package manager)

See our installation guide

2. gulp (node build tool, like make, ant or mvn)

Gulp is automatically installed within your local project. (It is a dependency of your project)

3. slush (project bootstraper, helps you to create your first package)

sudo npm install -g slush slush-biojs

If you haven't done anything before with Node, you should have a look at our 101 intro tutorial.

1. Create a new BioJS package

mkdir yourComponent && cd yourComponent && slush biojs 

2. Copy your existing component

copy it into the lib folder.

3. Remove the Biojs core

Replace Biojs.extend(

var Class = require('js-class');
module.exports = Sequence = Class({
```

`js-class` is a very simple class implementation for JavaScript and thus replaces the BioJS core. 
You don't need to use it, but it could make your life easier ;-)

```
npm install js-class --save
```

### 4. Search for calls of `Biojs`

You need to replace all those calls.

### 5. Add event support

```
npm install biojs-events --save
```

```
var Events = require('biojs-events');
Events.mixin(YourClass.prototype);
```

__Important__: We renamed the event methods

```
s/addListener/on/g
s/raiseEvent/trigger/g
```

For more information see [biojs-events](https://github.com/biojs/biojs-events)

### 6. Merge the default config

You need to extend your default options array with the user input.
There are > 100 ways to do it, here are two. Of course you would need to install the lib (`npm install <pkg> --save`).

using a js-extend (light-weight)

```
require('js-extend').extend(this.opt, options)
```

using underscore

```
_.extend(this.opt,options);
```

using jQuery

```
jQuery.extend(this.opt,options);
```


### 7. Split you single file into multiple files

You can also `require` files.
It would be also great if you can extract e.g. a parser and create a separate module for it.

### 8. Check you component

```
npm run watch
```

(this will watch for all changes and recompile your code)

This is probably the trickiest part. You might get some weird errors.
A good coffee and Chrome debugger will guide you through this.

Just use an example html and see whether it is still working.
Adding UI unit tests might be an overkill in this stage.

If you need help, ping us on gitter, github or via mail.

### 8.b) Possible pitfalls

* add your js dependencies to the [sniper](https://github.com/biojs/biojs-sniper) section of your `package.json`

### 9. Publish it

```
npm publish
```