20_gotchas_about_resusability.md 1.7 KB
Newer Older
Seb's avatar
Seb committed
1 2 3 4
---
title: 'Reusability'
layout: series_item
series: 'details'
Seb's avatar
Seb committed
5
permalink: details/reusability/
Seb's avatar
Seb committed
6 7 8
estimated-time: 10
---

Seb's avatar
Seb committed
9
The modularity and re-usability is one of the key ideas of BioJS. Maybe it helps to think of biojs.io as an "App Store" for JS components and "downloading the App" means actually embedding it in a website.
Seb's avatar
Seb committed
10 11 12 13 14

### General assumptions:

(user refers to someone who embeds your application, e.g. a website owner)

Seb's avatar
Seb committed
15
* you only have __one div__ (nobody wants to copy HTML that will change over versions, to some extent you could have more for optional user controls)
Seb's avatar
Seb committed
16 17
* a user is allowed to create __multiple__ instances of your app (on the same page)
* a user wants to __customize__ your app by changing some options - he will have its own file and customize the your settings
Seb's avatar
Seb committed
18 19 20 21 22 23 24

### This means:

* don't dumb HTML to the snippets - a general rule of thumb is that this makes your app hard to reuse -> only use "js" in the example
* If you want to stick with your HTML upload form, please provide at least one minimal example with just your raw component (see below for a minimal example)
* Don't use global variables!
* Consider the div that your application gets as a virtual environment for your component - only modify stuff inside of it
Seb's avatar
Seb committed
25
* A user will instantiate your application (=will call your main class with new)
Seb's avatar
Seb committed
26
* Don't do crazy shit with document.body or the Function.prototype
Seb's avatar
Seb committed
27
* Don't query the entire web page for DOM elements. So the naive jQuery won't work as (1) `$('#fancyId')` and ID unique is and if you switch to classes it `$(".fancyClass")` will return you the objects of all instances
Seb's avatar
Seb committed
28 29

A general advise is to create all the needed DOM elements in your component and save references to the most important ones.