Readit News logoReadit News
protoduction · 6 years ago
Hi HN, I developed Starboard over the past months.

Cell-by-cell notebooks like Jupyter are great for prototyping, explaining and exploration, but their dependence on a Python server (with often undocumented dependencies) limits their ability to be shared and remixed. Now that browsers support dynamic imports, it has become possible to create a similar workflow entirely in the browser.

That motivated me to build Starboard Notebook, a tool I wished existed. It's:

* Run entirely in the browser, there is no server or setup, it's all static files.

* Web-native, so no widget system is necessary. There is nearly no magic, it's all web tech (HTML, CSS, JS).

* Stores as a plaintext file, it will play nicely with version control systems.

* Hackable: the sandbox that your code gets run in contains the editor itself, so you can metaprogram the editor itself (e.g. adding support for other languages such as Python through WASM).

* Open source (https://github.com/gzuidhof/starboard-notebook).

You can import any code that targets the browser directly (e.g. puts stuff on the window object), or that has exports in ES module format.

I'm happy to answer any questions!

spankalee · 6 years ago
I see you're using lit-html, LitElement/web components, and you've exposed lit-html to users. That's awesome! I'm one of the authors.

Observable's html templates were inspired by lit-html, but they ended up implementing their own library. I'm glad the lit-* stuff is useful to you, and really excited to see it available in cells. I'll have to try this out!

benrbray · 6 years ago
This is the first I'm hearing of lit-html, but it looks great! Is it still an active project? I'd be curious to hear your thoughts about lit-html in comparison to newer tools like svelte, solidjs, etc., which, like lit-html, abandon VDOM in favor of "surgical updates" to the DOM.

Also, have tried PureScript? e.g. [1]

[1]: https://github.com/paf31/purescript-sdom

billconan · 6 years ago
I worked on a similar project: https://epiphany.pub/post?refId=2684bc94f9fcb9ffe637ebfbeba2...

It's half abandoned now. one issue of js based notebook is the missing of a file system. data scientists load huge data into notebooks, this is hard to do on the web. There is the new web filesystem api, but that only helps load local files.

anderspitman · 6 years ago
My vision is for this to be handled by things like remoteStorage, Solid, or (if you must) Google Drive. I find having control over your data and delegating access to various apps to be a nice flow when implemented well (see for example https://app.diagrams.net/).

It's not a silver bullet. For larger data you can't afford to download it every time. That tends to balance itself out though, because you don't really want to store huge data on your laptop anyway, so you're going to have to find a different solution for that anyway (such as using Jupyter). You can accomplish quite a bit with streaming + sampling, which is the crux of how all our apps work in iobio.

amadeuspagel · 6 years ago
I guess the web first way of dealing with this would be to have the data online also, maybe even on the same platform. Then you could have things like: Look at visualizations of this dataset, at what people have done with this dataset etc.. And you could immidiately verify the results, assuming you trust the data.
mujina93 · 6 years ago
Very cool project! 3 questions:

- did I understand correctly that notebooks would be hosted (at least stored and served) on the Starboard website? (you mention it's kind of a github, in the About section) What does this imply for private notebooks? Are they possible?

- any example on how to run python there with pyodide? I didn't understand by quickly looking if that integration is part of future plans or it's already a possibility.

- I read that not all features are ready at the moment, for example exporting to a proper website. Any forecast on when will features like this one ready?

Thanks!

protoduction · 6 years ago
Thanks!

Answering your questions:

- If you log in and create a public notebook, it's stored on Starboard's server, then you can just share it by link. If you create an offline notebook it's stored in your browser's LocalStorage. Right now you can't create a notebook yet that only you can see or can be shared with a private link, to do!

But of course you don't have to use the Starboard website, you can just save it as a text file on your disk. In the future I want there to be a CLI tool that serves that notebook for you on localhost.

- No examples yet, it's future plans for now (but I hope to land that in a week or two!)

- No forecast.. It's just myself working on it, so you'll have to bear with me. I am working full-time on this.

Jugurtha · 6 years ago
> Cell-by-cell notebooks like Jupyter are great for prototyping, explaining and exploration, but their dependence on a Python server (with often undocumented dependencies) limits their ability to be shared and remixed. Now that browsers support dynamic imports, it has become possible to create a similar workflow entirely in the browser.

Pretty cool. As someone involved in building a machine learning platform which also allows users to leverage Jupyter notebooks, I feel your pain. We had to add many features to make working on non trivial projects more feasible. For example near-real-time collaboration so people could pair-program on one notebook.

One other problem you mention is the kernel in the backend. The problem with that is often found in issues where a user launches a long-running notebook, closes their tab/browser. The computation happens but the results don't find their way, which means users must have code for side effects and artifacts in the notebook.

We've added a functionality to run notebooks asynchronously to address that problem, which also addresses the problem of multiple users competing for limited resources (tragedy of the commons) and kernels dying. Now users can run their notebooks asynchronously: they're scheduled, run, and saved seamlessly.

Jupyter is a useful tool which has these problems that aren't trivial to solve. For example, for the near-real-time collaboration, the Jupyter team is revamping their API with Lumino (https://github.com/jupyterlab/lumino), which was PhosphorJS but the development stopped when the main contributor had retired.

mujina93 · 6 years ago
Hey! I'm using jupyter notebooks on a daily basis, and I would be really interested in the 2 features that you mentioned: enabling real time pair programming (a la google doc) and resuming running notebooks whose frontend was closed.

Are you building a product that you plan to release? Or are these contributions that are available as open source components?

In any case, I'd like to know more, or to have some information on relevant topics that might be useful to understand and find workarounds for these issues!

jarmitage · 6 years ago
Great stuff! Congrats on launching.

Can it be combined with https://svelte.dev? Would be great for reactivity and cheaply creating visualisations.

benrbray · 6 years ago
There's also SolidJS which is a promising alternative to Svelte!

[1] https://github.com/ryansolid/solid [2] https://indepth.dev/exploring-the-state-of-reactivity-patter...

westurner · 6 years ago
Neat! There's a project called Jyve that compiles Jupyter Lab to WASM (using iodide). https://github.com/deathbeds/jyve There are kernels for JS, CoffeeScript, Brython, TypeScript, and P5. FWIU, the kernels are marked as unsafe because, unfortunately, there seems to be no good way to sandbox user-supplied notebook code from the application instance. The README describes some of the vulnerabilities that this entails.

The jyve project issues discuss various ideas for repacking Python packages beyond the set already included with Pyodide and supporting loading modules from remote sources.

https://developer.mozilla.org/en-US/docs/Web/Security/Subres... : "Subresource Integrity (SRI) is a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match."

There's a new Native Filesystem API: "The new Native File System API allows web apps to read or save changes directly to files and folders on the user's device." https://web.dev/native-file-system/

We'll need a way to grant specific URLs specific, limited amounts of storage.

https://github.com/iodide-project/pyodide :

> The Python scientific stack, compiled to WebAssembly

> [...] Pyodide brings the Python 3.8 runtime to the browser via WebAssembly, along with the Python scientific stack including NumPy, Pandas, Matplotlib, parts of SciPy, and NetworkX. The packages directory lists over 35 packages which are currently available.

> Pyodide provides transparent conversion of objects between Javascript and Python. When used inside a browser, Python has full access to the Web APIs.

https://github.com/deathbeds/jyve/issues/46 :

> Would miniforge and conda-forge build a WASM architecture target?

> Emscripten or WASI?

tanepiper · 6 years ago
Hi, I have had a look and I think it look great - it really fits the format of a set of notes I'd like to share.

One thing is I can't really find docs - I want to add RxJS on the page - is this possible?

Edit: Oh nevermind, I see it in the screenshot on the Github page with the import

Edit 2: Oh actually it's not working:

    TypeError: Cannot set property 'rxjs' of undefined 
If I try import { interval } from '...' I get:

   SyntaxError: 'import' and 'export' may only appear at the top level (1:14)

Gehinnn · 6 years ago
If you are looking for a rxjs playground + visualizer, you might like this tool: https://blog.hediet.de/post/a_typescript_playground_for_rx_j...
thekaleb · 6 years ago
Have you tried the import expression as opposed to the import statement?

E.G. const foo = await import('foo.js');

roywiggins · 6 years ago
This is really cool, and I've wanted something like this to hack on for ages. I'm a big fan of being able to present concepts along with code that you can run, and I'm also a huge fan of not having to rely on a server backend. I have a static blog where I try to talk about various math concepts which I illustrate with code. I hacked together a pseudo-literate html sort of presentation, and it works just fine, but it's inflexible.
rguiscard · 6 years ago
It is indeed a good work. The barebone demo is an empty notebook. How could I loaded a locally saved notebook ? Should I loaded it through javascript API or embed it in the index.html ? Thanks.
rguiscard · 6 years ago
To answer my own question, just set window.initialNotebookContent before calling starboard-notebook.js.
angleofrepose · 6 years ago
Thanks for sharing, this is a cool project.

I've been working on something similar on and off for a while, and I've found the space to be fascinating and somewhat puzzling. Most of the first questions I try to ask about these in browser notebooks don't have clean answers. In no particular order:

- Do you have any ideas about solving logic errors? As it stands right now a while(true) loop crashes the page and consecutive re-openings of the page for a short while (in chrome). What about things like document.body.innerHTML = "" (you actually seem to handle this pretty gracefully, I'll see if I can poke more holes in this another time). For what it's worth none of the online notebooks I've seen have a satisfactory solution to infinite loops, loop timeouts are too blunt an instrument and crashing the tab can take the browser minutes to recover.

- Is there a particular reason you use eval rather than the new Function constructor? From what I've read using new Function is much more performant, and other than different scoping a better choice than eval. Can't find the link at the moment, but it was wrapped up in the mdn[1] design docs for their codebox examples.

- I see you're using the first codemirror 6[2] beta release, how are you liking it? I really enjoy the interface so far.

- Do you have any favorite resources or inspirations about why you went about building a hackable offline local first notebook environment? I particularly like the experiments at Ink and Switch[3]. (many related hn submissions). As well as webstrates[4].

My attempt at this game is to break out of the notebook style single column layout and embrace an art board style canvas, which is a rather radical idea in that it is not obvious what that should look like or how basic interactions like hierarchies or execution order should look, but fun to explore. I also desperately want to prevent crashing as a result of logic errors and workflow footguns(like deleting DOM elements or overwriting storage), to that end I have a separate storage of scripts to rebuild a "safe boot" interface, but there is more thinking to be done here.

I look forward to poking around your code some more soon. Thanks for posting.

[1]: https://developer.mozilla.org/en-US/ [2]: https://codemirror.net/6/ [3]: https://www.inkandswitch.com/ [4]: https://www.webstrates.net/

Edited out a question about your motivations. I reread your comment and the about page and I realized my motivations are similar to yours. While observable doesn't have a few of your key points, it is a fantastic product. The reason I don't settle on it is that I'm interested in experimenting with the environment outside of a notebook-with-cells interface.

rewq4321 · 6 years ago
> As it stands right now a while(true) loop crashes the page

> [...] I also desperately want to prevent crashing as a result of logic errors

I could be wrong here, but I think the new Site Isolation stuff in Chromium[0] may mean that you can sandbox an iframe to a different origin, so that the main threads of the top frame and the iframe aren't synced. So the iframe where the code is running would freeze, but the main frame would still be responsive. Again, I may have misinterpreted this because I only read about it in passing, and it was a while ago.

[0] https://www.chromium.org/Home/chromium-security/site-isolati...

CuriousSkeptic · 6 years ago
I’ve been thinking a little of doing something in this space. But doing so as part of a larger project involving a new programming language so perhaps not applicable to you situation.

I also want to leave the notebook style, focusing more on graph approach. Think higher order spread sheet without the grid.

One, somewhat tangential, thought I’ve had to handle the infinite loop issue though. Is to fragment the language somewhat like they suggest in the out the tarpit paper. Trying to avoid infinite loops by construction, only used at the highest orchestration layer to schedule execution blocks, where the runtime can keep track of things going out of control.

Not sure what it would take to extract a “total” subset of javascript though. But one idea would be to insert a trampoline breaking out of infinite loops often enough for error handling.

protoduction · 6 years ago
To answer some of your questions (let me know if I didn't answer all of them!)

- I think logic errors can't be solved or prevented when exposing vanilla HTML, CSS and JS. You can completely break the notebook if you want to. Like the sibling comment to this stated: the notebook is run in an iframe of a different origin so you (should!) not be able to break out of that iframe. But of course if you introduce some endless loop that crashes the browser (or maybe just the iframe depending on the browser), I can't stop that.

- No particular reason, but it was always a bit iffy getting the return value correctly. To support top level await your code actually gets wrapped into an async function, I don't know how nicely that plays with new Function.

In the future I want to support ES modules with import instead. Perhaps no magic will be required at all anymore and performance will probably be even better (https://2ality.com/2019/10/eval-via-import.html)

- Codemirror is very good and doesn't have a huge bundle size. I decided I wanted to support touchscreens. The monaco editor completely fails on my phone (if I type space it usually copies the word in front of it), whereas codemirror just works. The autocomplete and language support is much worse though, on a desktop I think I will always choose the Monaco editor.

- Probably not the most exiting answer, but for me it was just wanting to use Jupyter for things it was really bad at. There is Project Iodide which is very similar, but they made some different design decisions that move away from the code-output-code-output structure.

By putting the editor inside the sandbox things become much more straightforward and less "special" or "magic", that's another big difference from Project Iodide.

I think more and more fully client-side editors are becoming possible now due to dynamic import and webassembly, do share your project with me if you get the chance to work on it!

zamber · 6 years ago
The only viable way to avoid an endless while loop or overly heavy operations is to have a worker do the eval(), though it would defeat the meta-programming aspect and isolate execution making it pretty much useless. It's still possible to proxy local objects via comlink (or implement your own worker proxy) but it would limit communication to POJO's so no dynamic module imports and access to non-serializable objects.
cheez · 6 years ago
Very cool. I'm not sure I will use it in place of Jupyter notebooks but I love the fact that it can be a simple file.
K2L8M11N2 · 6 years ago
I was working on an (unrelated) thing also called Starboard, I guess I have to rebrand :/
jv22222 · 6 years ago
IMHO As an indie founder you never really have to worry about your brand being the same as another until something is internet owned. Which means that it is undeniably #1 on all search engines for that word. For example you couldn’t really start an indie project called “gap” because it’s just so dominated and there’s no room for you to ever overtake it.

But “wide”, for example, is not internet owned so you could start something scrappy called “wide” with the hope that one day you can internet own it.

Starboard is definitely not internet owned so if you do decide to drop it at least know that there is no reason to do so because of external optics.

Also note, there is Probably no other brand that you could choose that didn’t already have a lot of folks using that brand already.

In the end the market will choose the winner!

All that said, this version of starboard here does look pretty cool. I don’t mean to upset anyone. But I did want to explain this point of view on brands for indie founders.

BTW What’s your product all about?

jrott · 6 years ago
awesome work, I love that it's plaintext. The easy sharing can definitely make a difference.
wokwokwok · 6 years ago
Hm.

So, without a kernel that can do heavily lifting, you're limited to basically what you get when have the browser console open; ie. html + js.

Is that the idea? A better / structured browser console?

Or am I missing something?

I mean, I completely appreciate the benefit of notebooks; but if you're limited to running code inside your browser window sandbox... how do you do anything useful with it?

How do you import a dataset?

> const data = await fetch(`https://api.exchangerate.host/timeseries?start_date=2020-01-...

Is great for trivial public datasets, but CORS is going to forbid you from loading any personal/private data right?

unpkg can give you public packages, but if you have any personal code, how do you use it?

It seems like you basically end up with an empty sandbox.

brainless · 6 years ago
I somehow felt very similarly. In that this is a very cool project, but what does it really solve. People who work with data also actually need Python, do you really expect me to recreate all the Py libs in JS now?

I am really curious what was the author's thinking process here with regards to solving the problem, what in fact was even the problem. Perhaps the author could share their thoughts.

Edit: grammar

brainless · 6 years ago
After looking at https://starboard.gg/about things are clearer now. The use-cases are clear and I can see the audience it targets.
pjmlp · 6 years ago
Many of those Py libs are actually C libs with Python bindings, they can just as easily get JS bindings, and maybe even be compiled to WebAssembly in the process.
roywiggins · 6 years ago
angleofrepose · 6 years ago
Outside of the datascience context, I would argue that notebooks like these are how information in a world of compute should be presented. It's ironic that we have codeblocks upon codeblocks of content served on the web on technical sites and blogs that aren't immediately executable in the context of the post. The most popular software in the world are javascript vms, yet we talk about and teach javascript code on websites in a javascript vm that can't run the code on the screen.
zamber · 6 years ago
SO has runnable snippets, there are services like CodePen too and some articles are using it, but there's one simple trick making your point moot.

F12 or Ctrl+Shift+i and Ctrl+c Ctrl+v and you're executing code in the context of the post ;).

It's not a notebook but does the job well enough.

lewisjoe · 6 years ago
At first look, I could use this as an interactive documentation for JS modules in my codebase.
kbouck · 6 years ago
How does this compare with Observable?

https://observablehq.com/

protoduction · 6 years ago
Observable is an amazing tool, some of the differences:

* Observable has quite some magic, it's not just Javascript (there is a compile step to make it possible, see the other comment). With Starboard the plan is to make it trivial to export as a static website, in the end Starboard is just away to make a simple website without too much magic that you can instantly share.

* The reactive system they have there is powerful, sometimes probably a bit too powerful. Starboard is just plain javascript (for better or for worse). You can run cells out of order and have complete freedom. Any restrictions on the order that cells should be executed and re-evaluated will have to come from external plugins.

* Observable is a walled garden, you can't export the notebooks into say a text file and use it independently (as far as I know). They own the ecosystem and you can't really move away from it (and fair enough, it's a commercial product!). Starboard notebook is fully open source and it is built with customization, vanilla-ness and portability as main features.

fzaninotto · 6 years ago
jacobolus · 6 years ago
It’s misleading to take this headline and not actually read the document and notice how few these differences are.

Observable cells are basically Javascript, with a small handful of additional conveniences (most importantly: they can reference other cells reactively) which make a huge improvement in the notebook context, and make Observable significantly more pleasant than any other notebook environment (Jupyter, Mathematica, etc.).

Javascript libraries and code snippets can be used as-is in an Observable notebook, and anything in Observable cells can be straightforwardly ported to vanilla JS at the expense of a bit of effort and slightly uglier code. (Or the Observable runtime and standard library can be used directly externally.)

j-pb · 6 years ago
Yeah but it's close enough (in the sense that it's like JSX, syntactic sugar over a JS runtime), so an in depth comparison would still be usefull.
TeMPOraL · 6 years ago
It's still JavaScript, just implicitly transformed to execute in a different way than it would if you put all the cells you've written in a single file.

If I write a macro in Common Lisp that packages my code in a lambda, establishes a bit of dynamic context around its execution, and perhaps walks the code itself to modify some of its contents, this doesn't make uses of that macro "not Lisp". Yet that's what's happening here, just with less elegant machinery as JS doesn't have proper macros.

skemper911 · 6 years ago
https://github.com/fonsp/Pluto.jl A julia notebook using observablehq underneath. Reactive with a git compatible file format, looks very promising.
LeonidBugaev · 6 years ago
Combine it with https://github.com/iodide-project/pyodide (Python and bunch of scientific libs compiled to webasm), and you will get really nice lite Jupiter alternative which can cover 90% of use cases.
Equiet · 6 years ago
Great work!

I'm the founder of Deepnote (https://deepnote.com/). We're working on a data science notebook (primarily focused on Python), happy to share what we've learned. I couldn't find any contact info on the website, feel free to message me at jakub@deepnote.com.

yetanotheruser8 · 6 years ago
This is actually useful. I like this better than Codesandbox for just messing around with some data cleanup or something hacky and quick. I'm sure it's on the list, but I wouldn't be opposed to some Dark-mode.
jvanvugt · 6 years ago
Cool project! Using Monaco for the editor makes it much more pleasant for writing code than Jupyter notebooks
fomojola · 6 years ago
I really like it! Have you given any thought to server-side execution? One of the things I think is missing from Jupyter is a clean, standard way of doing timed execution of a notebook: there are a number of paid solutions, but nothing out of the box (that I could find; spent a few days searching). Conceivably one could string together puppeteer or something similar, but it would be great to be able to run "node starboard_runner.js <notebook file>" and have the results output to stdout or saved to a file.
paulgb · 6 years ago
> One of the things I think is missing from Jupyter is a clean, standard way of doing timed execution of a notebook

Have you looked at nbconvert with the ExecutePreprocessor? I use it (with a light wrapper) from cron for sending automatic email reports and generating static dashboards. It might do what you're looking for.