I’m not a front developper but I had a lot of fun playing around and getting quickly a result.
I worked a bit with France’s national railway network data and made a shortest path algorithm. You can try it out by selecting a departure and arrival (let’s say Paris and Marseille).
It works marvelously well, but I wanted to make a “real” JS app (but again, I’m no front developper).
I thought it would be easy, and copied-pasted my code from observable. Alas! The performances are very bad. Where it feels instantaneous on Observable, it takes a few seconds (~a factor 10 I’d say).
I think I ruled out any framework interaction (I used vue-js, but in the end I used just vanilla js). The time is really spent in the bellman function (the one making the route calculation).
So… This is not really a request for help. Just a curiosity, is there some voodoo magic that would explain its performance ?
Not Voodoo, but Observable notebooks are “reactive”: Each cell in your notebook is rerun only when one of its dependencies updates. A common mistake made when porting an Observable notebook to a different environment (e.g. codepen.io) is to just drop every cell content into a single function and rerun everything on every iteration or change.
To find out how the individual cells in your notebook depend on each other, check out @mbostock’s Notebook Visualizer:
To find gain a better understanding of Observable’s internal flow have a look at
If you don’t mind sharing a link to your “real” JS app, we might be able to figure out exactly what’s causing the performance difference. I at least am also fairly interested in seeing examples of Observable notebooks “out in the wild”.
Sorry @jipexu for your browser. Maybe having 16Gb of ram I didn’t measure the weight of the data I’m manipulating (not that big actually, but I’m bad at appreciating those things).
Thank you @mootari for all the hints. The notebook visualizer is amazing. The whole reactive cells is a very pleasant feature for someone like me getting rapidly overwhelmed by interaction between different states/calculations. Yet in my situation, it’s really the one function call bellman that had a performance gap.
I found in the end the problem. That exact same code served (python3 -m http.server) directly runs as expected. Launched with parcel (https://parceljs.org/) I get a factor 10 (330ms vs 4000 according to firefox’s performance measurement). Not really sure what happens here, whatever…
That you for your help, even if my question wasn’t about observable in the first place! It is good to know that the flexibility doesn’t come at a cost of performance
