xcell
19 |xcell is a tiny, open source (MIT) 20 | library for building reactive, spreadsheet-like calculations in JavaScript.
21 |Spreadsheets are cool—if we say that A1 is the sum of B1 and C1, 22 | the spreadsheet will automatically update whenever we change the dependent 23 | cells.
24 |
This usually doesn't happen in our programs.
26 |For example in JavaScript:
27 |var b = 1, c = 2
28 |
29 | var a = b + c // a is 3 now
30 |
31 | b = 42
32 |
33 | alert("a is now: " + a) // it is still 3 :(our variable a does not automatically change if we 35 | change b. It will be equal to 3 until we imperatively 36 | change it something else.
37 |xcell allows us to write programs that work like spreadsheets.
38 |Here is how:
39 |function add(x, y) {
40 | return x + y
41 | }
42 |
43 | var b = xcell(1), c = xcell(2)
44 |
45 | var a = xcell([b, c], add)
46 |
47 | alert(a.value) // a is 3
48 |
49 | b.value = 42
50 |
51 | alert(a.value) // a is 44 \o/xcell is a function that returns an object that holds always
53 | updated value, just like a spreadsheet cell.
When we create our "cells" we tell them to either be independent:
55 |var b = xcell(1)or to depend on other cells and update its value when necessary using 57 | a provided function:
58 |var a = xcell([b, c], add)The cells emit change event whenever they change, so we can observe
60 | them and update our UI:
a.on('change', function handleChange(sender) {
62 | document.getElementById("my-cell").value = sender.value
63 | })Here are a few examples of how xcell can be used:
65 |-
66 |
- the real price of a pizza 67 |
- mortgage calculator 68 |
- spreadsheet demo 69 |
The source code is on github.
71 |