Introduction to the BioJS project
Download as PPTX, PDF0 likes32 views
The document introduces the BioJS project, which is a collection of JavaScript components for presenting biological information. It began as a student project in 2011 and a registry of components was released by the EMBI in 2012. The BioJS project aims to create reusable components that can be combined to build biological applications. It provides benefits for both developers in sharing and extending components, and for users in reusing standardized visualizations across different sites and institutions.
Introduction to the BioJS project
- 1. Introduction to the BioJS project Rafael C. Jimenez 2013-06-17 Bi JS EBI BioJS workshop
- 2. EMBL-EBI electronic modules that snap together 13.12.20182
- 4. EMBL-EBI 13.12.20184 Components Application Applying the concept in bioinformatics
- 5. EMBL-EBI What 13.12.20185 A collection of JavaScript components following a common guideline to present biological information Bi JS
- 6. EMBL-EBI When • Aug 2011 – Started as student project • Dec 2012 – Registry released at the EBI • Feb 2013 – Published in Bioinformatics pubmed:23435069 13.12.20186 Bi JS
- 9. EMBL-EBI9
- 10. EMBL-EBI
- 21. EMBL-EBI Bi JS
- 24. EMBL-EBI How to 13.12.201824 use Components Example Installation Configuration Find a component Have a look to the example and test it Find all the necessary code you need to run it on a web page Have a look to the options, methods and events to configure it Bi JS
- 28. EMBL-EBI Installation 13.12.201828 Bi JS <html> <head> <title>Biojs.GeneExpressionSummary</title> <script language="JavaScript" type="text/javascript" src="src/Biojs.js" /> <script language="JavaScript" type="text/javascript" src="src/Biojs.GeneExpressionSummary.js" /> <script language="JavaScript" type="text/javascript" src="../biojs/dependencies/jquery/jquery-1.6.4.js" /> <link href="../biojs/css/GeneExpressionSummary.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" type="text/javascript"> window.onload = function() { var instance = new Biojs.GeneExpressionSummary( target: 'YourOwnDivId', identifier: 'ENSG00000066279‘ }); }; </script> </head> <body> <div id="YourOwnDivId"></div> </body> </html>
- 30. EMBL-EBI 13.12.201830 Easy to use, not that easy to create How to create Bi JS
- 31. EMBL-EBI How to 13.12.201831 create + + + From scratch: Wrapping an existing component: Bi JS
- 32. EMBL-EBI How to 13.12.201832 create + + From scratch: Process: CodingDesign Release Bi JS
- 33. EMBL-EBI 13.12.201833 Input Output Aim Sketch Options Methods Events Style Biologists Biologists + Developer Developer 1. Collect requirements 2. Propose layout and functionality 3. Define component DesignBi JS
- 34. EMBL-EBI 13.12.201834 Input Output Aim Sketch Options Methods Events Style Biologists Biologists + Developer Developer DesignBi JS
- 35. EMBL-EBI 13.12.201835 Input Output Aim Sketch Options Methods Events Style Biologists Biologists + Developer Developer Developer BioJS component Coding following design + spec BioJS Design Coding SpecificationBi JS
- 36. EMBL-EBI 13.12.201836 Release 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
- 37. EMBL-EBI Component layers 13.12.201837 Data representation JavaScript code Dependencies Style • Constructor • Options • Methods • Events • Comments • Examples • Dependencies • Documentation Registry + API doc Bi JS
- 39. EMBL-EBI • Use extension to – Add functionality – Change functionality Extension 13.12.201839 extends PDB file PDB accession input A B Example Bi JS
- 40. 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.201840 create Bi JS
- 41. 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.201841 use Bi JS
- 42. 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.201842 as organization Bi JS
- 43. 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
- 44. EMBL-EBI Technology overview 13.12.201844 JavaScript Dependencies (JavaScript libraries, proxies, applets, …) SVN Web server Maven PHP Component X X Registry X X X API doc X Source code X