We are thrilled to announce the 0.0.6 release of Datalayer. This release improves the data analytics user and developer experience with Jupyter React, a javascript library to ensure React.js is a first-class citizen in the Jupyter ecosystem.
Jupyter React is built on top of JupyterLab which aims to be the next default notebook for Python data scientists and is actively developed. However, some users sill prefer the classic notebook and JupyterLab is not yet mainstream... The following points can be the identified as the source of the shadow:
- The user interface is intimidating and quite complicated. An initiative to strip-down the user interface has been taken with Retrolab, but the result still looks pretty much like JupyterLab without visible value compared to the classic notebook. Users will even loose some beloved features like their preferred keyboard shortcuts, VIM mode, performance...
- The extensions ecosystem is rich but breaking changes in the core of JupyterLab have made the overall ecosystem fragile and subject to failures on installation.
- The overall performance (startup time, load large notebook, switch tabs...) is know to be degraded on JupyterLab.
- The recently merged realtime collaboration feature is solely not usable with a real multi-user authentication and authorization system.
- As developer, the Lumino widget toolkit which backs JupyterLab user interface is hard to use and looks pretty much like a Qt toolkit rather than like a modern javascript e.g. React.js, Vue.js, Svelte...
At Datalayer, we believe the JupyterLab foundations can be re-used to build on top, as it allows to not reinvent the wheel. However, the systems should be more connected with the awesome community of javascript developers, and specifically with the React.js community which is one of the major toolkit today that we love. JupyterLab can be evolved by adding or removing features (a.k.a. extensions) from the full application. But it is difficult to start from a blank page and incrementally add components. We aim building higher-level React.js components easy to use to embed in you React.js application or your favorite static web site generator like Docusaurus.
This is what it takes to get a notebook in your browser.
<Jupyter terminals={true} collaborative={true}>
<Notebook path="test.ipynb"/>
</Jupyter>
Damned simple! This will create your Jupyter context and you can choose to enable or disable terminals and realtime collaboration features. The available properties for the Notebook are listed here.
export type INotebookProps = {
path: string;
ipywidgets?: 'classic' | 'modern';
sidebarComponent: (props: any) => JSX.Element;
sidebarMargin: number;
}
You can see that upon the support for IpyWidgets, we also have option for custom Sidebar components.
Upon the Notebook component, you can also use the Cell, Notebook, File Manager and Terminal components. And guess what, we play nicely with well-known libraries like Material-UI (V4 and V5), Storybook, Docusaurus, Emotion.js...
Check out the Jupyter React example repository to get kick-started.
Behind that simplicity, under the hood, the library is backed by a bi-directional communication between React.js/Redux and JupyterLab/Lumino. You can of course inject the Jupyter React Redux store into your existing store (or the reverse).
React.js Application
-> Redux Observable Actions
-> Jupyter React
-> JupyterLab Commands
React.js Application
<- Redux State
<- Redux Observable Epics
<- Jupyter React
<- JupyterLab Signals
Why yet-another layer?โ
Lumino widgets constructs needs a lot of line of codes (see e.g. this example) and is not widely adopted outside of the JupyterLab community. Exposing in a more standard UI toolkit should drive a wider adoption.
We also need servers, kernels, so we are looking at backend, with for example Jupyterpool, hence the more generic jupyter-react name.
You can see Jupyter React as a way to embed data analytics in your branded WEB page. We want you to integrate Jupyter without pain into your existing beautiful application, rather than obliging you to move all your solution to the JupyterLab system.
Community adoption?โ
React future in JupyterLab is still under discussion:
- Remove dependency on third-party library for ui-components
- Future of ui-components package: drop Blueprint; should we use Material-UI
- Switch to material-ui
- [DISCUSS] React notebook for performance improvements?
- [Prebuilt Extension] Using a web worker with React results in shared module error
Current state of JupyterLab is that React.js should be limited to "leafs", and avoided in the more core constructs. Unfortunately, the trends for JupyterLab seem to un-react the core, whereas at Datalayer, we want to un-lumino the core.
We have also tried to build on top of Nteract which has react.js components with redux observables store. We have found it difficult to reuse: the documentation is not exhaustive but also, the component designs make is very difficult to use in an external React.js application. Also, the last move to RTC building on top of GraphQL was not something we were willing, as we have found CRDT more suited.
Limits of the current approachโ
Using the underlying JuyterLab/Lumino components can provide quick-wins, but can also bring limitations. Indeed, JupyerLab/Lumino fails to meet the following requirements:
- Accessibility.
- Performance.
- Custom cell type other than Raw, Markdown or Cell.
- Weak error reporting to the user in case of issue.
- Authenticated named cursor.
- ...
You may ask if we support the JupyterLab extensions like jupyterlab-git... The answer is no. There are technical ways to expose the Lumino extension mecanism into React.js, but this would ask the developer to pull most of the JupyterLab code, and impose to remain in the Lumino Panel system, which we want to move away from. But don't worry, we have a next step to support a new extension flavour.
In terms of outputs (the visible result of a cell execution), the open-source community is searching for ways to be more portable with initiatives like:
- Jupyter Extensible Renderers Spec
- Portable Widget
- Custom Widget Manager implementation for Google Colab
๐ช โ๏ธ Jupyter Reactโ
We have been happy so far with our approach for Jupyter React to build the premise of our Datalayer offering. However, to remove the above limitations, we are actively developing Jupyter React a pure React.js component. It will be a rewrite from scratch of the user interface, re-using the existing JupyterLab services to connect to the server and kernel APIs. At some point, we may reimplement also the services with a State Machine approach, which is not the case today.
Stay tuned on this blog for more information.