## BioJS

### Create interactive Yeoman generator for BioJS components

BioJS is a library of over one hundred JavaScript components enabling developers to visualize and process data using current web technologies. BioJS makes it easy for them to integrate their visualizations into their own website or web application. BioJS is a community that spans multiple countries and multiple high profile bioinformatics organisations.

#### Rationale
Web standards have moved on a little since the [BioJS slush generator](https://github.com/biojs/slush-biojs) was created (ES2015 support has improved, as has support for WebComponents), so we're in the processes of updating the BioJS standard to version 3.0. We've created a scaffold wrapper tool to update older BioJS components to work as WebComponents, but we still have more features in mind. This task would involve updating the yeoman generator with options to create command-line based tools and brand new tools, as well as clearly documenting the process with tutorials. You can see the [BioJS 3.0 working draft](https://hackmd.io/j8y-Ht9_TP2yaDhYdUeIEQ#) for more information.

If you like like to work on the infrastructure of an international, respected open source data visualisation bioinformatics code, this is your project.

##### Getting started and understanding the problem

1. Visit [biojs.net](http://biojs.net) and have a look through the components. Do they all have..?
- sufficient documentation to build and run the code?
- built / distribution copies of the libraries?
- quickstart guides so a non-computational person could embed the visualisation in their work?
2. You've probably noted that many components don't fulfil this. Once reasonable good example that _does_ have these requirements is [ProtVista](https://github.com/ebi-uniprot/ProtVista) - take a look at example.html and the snippets folder, plus the developer docs. We want to make it easy to make all components as high-quality as this in a standardised way!
3. Take a look at the BioJS 3.0 [Yeoman generator](https://github.com/biojs/generator-biojs-webcomponents). This allows us to upgrade existing BioJS components by wrapping them in a WebComponent, enabling the two-line easy import task effectively without requiring that the authors of the existing component re-write or change anything that they've done. Run through the "getting started" section in the readme for this repo.
4. Learn a little more about [Yeoman](https://yeoman.io/) and how it works.
5. Learn a bit more about [WebComponents](https://developer.mozilla.org/en-US/docs/Web/Web_Components).

##### Task

The task is to make it easier for people to create brand-new high-quality biological visualisation components for the web. These components should have:

- Copy/pastable examples of their code, ideally in around two lines: One line to include the script, one line to initialise the component. This can be achieved by implementing each BioJS component as a WebComponent. End-users shouldn't need to install npm and run command-line tasks just to use a visualisation.
- Preview images for all visualisations (to serve as thumbnails for the BioJS registry)
- Demo code so the registry component page can initialise the component automatically, without having to build the component on the fly.
- Configuration so the component has an embedded development server task, build tasks and test tasks that can be run locally or on TravisCI

In order to do this, we would like to either create a Yeoman generator or extend our [existing generator](https://github.com/biojs/generator-biojs-webcomponents) to automatically generate the default files required to make a biojs component compliant with these standards.

This should include files to initialise the bioJS component as a WebComponent, with clear prompts which files should be updated by the users implementing their BioJS component and which files or methods shouldn't be changed at all! The goal is to make it so easy to be BioJS 3.0 compliant that there's no reason not to do it.

Make sure to support at least the last three versions of Chrome, Firefox, and Edge.

This project will also require you to take the time to create a tutorial walking users through working with the generator and creating a basic visualisation component.

Bonus tasks: If there is any time left over in the coding period after these tasks are complete, students could begin to upgrade existing components to BioJS 3.0 standards.

#### Mentors

- [Sarthak Sehgal](https://github.com/sarthak-sehgal)
- [Yo Yehudi](https://github.com/yochannah)

#### Goals
The primary goal is to:

* Create a fully-featured BioJS standard-compliant yeoman generator to allow people to generate the starter files for BioJS 3.0 tools easily.
* Fully documented tutorials for the generator, walking people through creating their first component.

There is also a fair amount of flexibility with this project to allow the student to inject their own ideas and introduce new features and functionality.

#### Skills/Prerequisites

* Basic knowledge of NodeJS/Javascript/HTML/CSS
* Ability to work independently and to report to a group and discuss theories and results
* Basic git skills required as working with github is mandatory

#### Student Benefits

* We aim to ensure that each student gets a great learning experience tailored to their ability, interest and experience.
* Hands on experience in providing a major change to a web-based application that is used around the world.
* Practical experience in NodeJS, Javascript, HTML and CSS for a software project that is used around the world
* Gain understanding of how real-world software is developed and how priorities are established
* Improving your oral and written communication skills in a team environment

#### How to Apply

* Provide a cover letter that explains why your skills would be a good fit. If you don’t have the skills, explain why you would like to learn those skills. 2 pages maximum.
* Provide a resume with a list of skills and experience. 2 pages maximum.
* Provide a breakdown of how you'd run this project - i.e. Features A, B delivered in the first two weeks, Features C, D delivered in later weeks. Show your proposal to mentors for feedback as they may be abe to suggest improvements!
* Provide links to any code you might have contributed to eg. github, bitbucket repos/commits
* If you have any questions, please ask us here - https://gitter.im/biojs/biojs