BioJS workshop. 20 June 2012

1. Agenda
10:00 - 10:30, Introduction to the BioJS project
10:30 - 11:00, How to use BioJS components and the registry
11:00 - 12:00, Tutorial of how to develop a BioJS component
12:00 - 13:00, Lunch break
13:00 – 13:30 Brainstorming
14:30 – 14:45 Coffee break
13:30 - 17:00, Helping you to develop a BioJS component
13.12.20181

2. BioJS workshop
Rafael C. Jimenez
2012-06-20
Bi JS

3. BioJS
A library of JavaScript components
to represent biological data
Not a framework, but a collection
of graphical components
Reusable components following
one specification
Under development from August 2011
13.12.20183

4. Examples of graphical components
13.12.20184

5. Why BioJS?
• No JavaScript library/framework in Bioinformatics
• JavaScript applications more than reusable components
• Some JavaScript functionality but (normally) …
• Difficult to find (no registry)
• Difficult to use (no examples)
• Difficult to reuse (tight to one project)
• Difficult to read (lack of documentation)
• Difficult to extend (built for specific requirements)
• Difficult to customize (have in mind one use case)
• Difficult to maintain (no community support)
13.12.20185

6. Component requirements
• Easy to develop
• Easy to maintain
• Easy to use
• Easy to test
• Easy to combine
• Easy to discover
13.12.20186
Bi JS
component
Easy

7. Proposal
13.12.20187
Bi JS
component
• Follow a common specification
• Architecture
• Intercommunication
• Extensible
• Well documented
• With working examples
• Platform and language independent
• Listed in a registry of components
• Allow development with different
JavaScript frameworks
• Propose development guidelines

8. JavaScript
Library specification
Specification and reference implementation
• Component architecture
• Event communication
• Component extension
• Self-documented code
• Examples
13.12.20188
Reference implementation
jQuery
Example

9. JavaScript
Library specification
Component architecture
• Content
• Options
• Input
• Configuration
• Methods
• Events
• Resources (dependencies)
• Styles
• Tests
13.12.20189
Reference implementation
jQuery
Example

10. JavaScript
Library specification
Event communication
13.12.201810
Reference implementation
jQuery YUI + JApplet
onSelection highlight
event action
Example

11. jsDAS
Proxy + PDBe WS
Library specification
Reference implementation
Component extension
13.12.201811
YUI + JApplet
Component 1
Component 2
Component 3
Extends
Extends
PDB file
PDB Acc
UniProt Acc
Example

12. Development
• Guidelines
• Specification as your reference guideline
• Tutorial for quick start
• Recommended development process
• Requirements (template)
• Implementation
• Test
• Deployment
13.12.201812

13. Requirements
13.12.201813
requirements
implementation
test
deployment
specification

14. Specification
13.12.2018
Library specification
requirements
implementation
test
deployment
specification

15. Implementation
13.12.201815
requirements
implementation
test
deployment
specification
Documentation Code

16. Test
13.12.201816
requirements
implementation
test
deployment
specification

17. Deployment
13.12.201817
requirements
implementation
test
deployment
specification

18. Unifying components
bi JS
component
bi JS
compone
bi JS
omponent
bi JS
component
bi JS
component
bioJS Library
UniProt
PDBe
Dasty
PRIDE
Requirements (visual representation + functionality)

19. Unifying components
13.12.201819
1 2 3
Graphical representation
Technology X Y Z
Developer
1 2 3
*
*
Type of representation
Website
• Represent the same type of information in different
projects using the same graphical component
• Not an aim, but a recommendation
Implementation a b c d

20. 13.12.201820
Registry:
http://www.ebi.ac.uk/~jg
omez/biojs/registry/Biojs
.Sequence.html
JSdoc:
http://www.ebi.ac.uk/~jg
omez/biojs/jsdoc/symbol
s/Biojs.Sequence.html
Sequence
bi JS
• PDBe
• UniProt
• Dasty
• PRIDE
Requirements from:

21. 13.12.201821

22. 13.12.201822
Source code
repository
SVN
Registry
Component
test and examples
Registry
Component
documentation
Component
release
Maven

23. 13.12.201823

24. 13.12.201824

25. Wrappers
13.12.201825
• Component wrappers for other frameworks and CMS. i.e.
Drupal module
bi JS
component
Dasty plugin
bi JS
component
GWT widget
bi JS
component

26. The bioJS project members
and collaborators
http://code.google.com/p/biojs/
biojs@googlegroups.com
The Proteomics Services Team
Thanks to:
Jhon Gomez
jgomez@ebi.ac.uk