20 August 2013

1. EMBL-EBI
Rafael C. Jimenez
2013-08-20
Bi JS
Introduction

2. EMBL-EBI
13.12.20182
A collection of JavaScript components
following a common guideline
to present biological information
Bi JS

3. EMBL-EBI
13.12.20183
Components Web applications
reuse
share

4. EMBL-EBI
13.12.20184
http://www.ebi.ac.uk/Tools/biojs/registry/
collection of
components
use
https://github.com/biojs/biojs
guidelines
(specification)
createBi JS
…
source code & documentationComponents registry

5. EMBL-EBI
13.12.20185
Input
Output
Aim
Sketch
Options
Methods
Events
Style
Biologists Biologists + Developer Developer Developer
BioJS component
BioJS
Design Coding
Specification
Developer
Registry
Source code
Release
API doc
Bi JS

6. EMBL-EBI
Component layers
13.12.20186
Data representation
JavaScript code
Dependencies
Style
• Constructor
• Options
• Methods
• Events
• Comments
• Examples
• Dependencies
• Documentation
Registry + API doc
Bi JS

7. EMBL-EBI
Bi JS
Examples

8. EMBL-EBI
8

9. EMBL-EBI
9

10. EMBL-EBI
10

11. EMBL-EBI
11

12. EMBL-EBI
12

13. EMBL-EBI
13

14. EMBL-EBI
14

15. EMBL-EBI
15

16. EMBL-EBI
16
Bi JS

17. EMBL-EBI
17
Bi JS

18. EMBL-EBI
18

19. EMBL-EBI13.12.2018
19
Bi JS

20. EMBL-EBI
Bi JS
20

21. EMBL-EBI
21
Bi JS

22. EMBL-EBI
22
Bi JS

23. EMBL-EBI
Bi JS
Benefits

24. EMBL-EBI
Benefits
• Share development
• Enhance the visibility of your widget
• Make components not just for you but for the community
• Isolate visualization from your web framework
• Have a minimal common code structure
• Components easy to take over since they need to be well
documented
• Easy to add functionality by extending a component
• Out of the box API documentation for your component
13.12.201824
create
Bi JS

25. EMBL-EBI
Benefits
• A registry to find a list components
• Components including an example to see and test
• Different components which are installed same way
• A common API documentation for all the components
• Easy to add functionality by extending a component
• Visualize like other groups/institutions
• Adapt the component to your visual styles
13.12.201825
use
Bi JS

26. EMBL-EBI
Benefits
• Follow minimal common guidelines
• Aim at having common visualizations
• Encourage developers to work in common implementations
• Let the community visualize like your institution does
• Make people aware of what components are developed
13.12.201826
as organization
Bi JS

27. EMBL-EBI
Bi JS
Use case 1 – Predict protein

28. EMBL-EBI
13.12.201828
Bi JS

29. EMBL-EBI
13.12.201829
Bi JS

30. EMBL-EBI
Bi JS
Use case 2 – COPA

31. EMBL-EBI
13.12.201831

32. EMBL-EBI
13.12.201832
Bi JS

33. EMBL-EBI
The BioJS project
members and collaborators
http://code.google.com/p/biojs/
biojs@googlegroups.com
Support from
• UniProt
• EBI web development team
• The Proteomics Services Team
Thanks to:
Jhon Gomez
johncar@gmail.com

34. EMBL-EBI
Technology overview
13.12.201834
JavaScript Dependencies
(JavaScript libraries,
proxies, applets, …)
SVN Web server Maven PHP
Component X X
Registry X X X
API doc X
Source code X