Hello, I am Eric Charles and I'm happy to be here at Fuzzdam to discuss with you about Jupyter for ReactJS developer.

I am the founder of Data Layer, a data science platform and I am a committer for Jupyter Lab and Jupyter Server. First of all let me show you what Jupyter is. So what you see here is Jupyter Lab UI which is a next generation UI for the notebook

and a notebook is a collection of cells and you can type some code in a cell and you can run code from your browser. So for example I'm going to say x equals six, good.

And what you can do also is display some plots just to represent what your data is. Now I'm going to move to the source code of that UI which is developed in TypeScript. Here we have a class which is a notebook panel which extends another class and we

have a constructor, very object oriented programming, very imperative way to do what you have to do. And it's not typical React and actually you cannot embed or wrap what I've just

showed you, the notebook panel, into a React application because the notebook panel is not a component. So there is an issue there and to be very complete, Jupyter Lab is built on top of the Lumino toolkit and a Lumino toolkit can wrap ReactJS components.

So for example this component here is a React component which is wrapped into Lumino and exposed by Jupyter Lab to the user or to the extension developer but not as a React

once again component. So we are blocked, we cannot do what we would like to do which is upgrading our UI with data feature and when you want to display plots, run code, you don't want to reinvent the wheel, you just like to reuse what exists in Jupyter but you cannot.

And if you want to show that on the same page, you will have two different applications. One for Jupyter, Lumino which is different from the React and what you could do is show that Jupyter application into an iframe but they will remain different.

So first issue, second issue, if you want to modify Jupyter and let's say add a side panel to the cell widget, you're going to have to learn Lumino toolkit which is

very imperative. So we bridged the gap with Jupyter React, we developed a library which allows any ReactJS application to communicate and display those Jupyter Lab components. So there is a React to Jupyter communication to send command and there is a reverse where

Jupyter is going to emit signals that we will convert to React to reduce observable streams and we're going to manage a global state. Coming back to the previous picture, we add Jupyter React on top of Jupyter Lab and

your application can now use Jupyter React to communicate to Jupyter Lab and as a developer you have just some well-known components and context, so this is a Jupyter context

with some props, I want some terminals, I want my Jupyter to be collaborative with real-time collaboration and I'm going to ask the system to show me a notebook from that path, so for example the test ipynb file.

Now let me show you a few examples, this is an ipy widget, a well-known widget in the Jupyter ecosystem which communicates with the server, so this is an output time

component, so I just have a text area or a code mirror editor and I just ship here an output content, I'm going to say 3x3 is 9, so this is the output that I show or I can

just rely on a full cell which is a code editor plus the output and I can pilot that code cell from the outside, well from a React button, right, so this

is communication from React to Jupyter, I can display a full notebook and in this

I can show you a console, I choose a kernel and I say print hello again or I have my browser widget, so 2x03 which is a full React or the classical one

from JupyterLab and I have also terminal and I can change the theme of the terminal just with dark or light mode, cool, so we have a bunch of widgets, with those widgets I can

develop my own application or I can embed that into existing system, so here we have a cell

into a docuseries website and this gives you those kind of UI which allows you to run code directly from the docuseries website, another example where I can integrate the Jupyter

widget into a slate editor to be like more a single page editor notebook, so very very

flexible way to use and expose some data feature into your React application, good, so what are the next steps, we support real-time collaboration but this is at the notebook level, we want also to ship that at the cell level, just a single cell and for that

we may use other global store, for now we use Redux but we can go to Mobix or other syncable stores, I showed you the slate.js editor but we are working now on ProseMirror

editor and we're going to do that in two steps, so the first step would be Vania JavaScript plugins and then we're going to add the React layer, we want some more reactivity a bit like observable HQ, so if you know a bit D3 observable and so on, we're going to add that

to the classical way of working of Jupyter which does not really support those feature and we want to do that in the open with the Jupyter community with developer and user giving us feedback and so on, that's it, thank you very much, you have my details

so eric at datalayer.io, you can connect on twitter.com slash echarts and these are the three repository you can go on GitHub, so github.com datalayer Jupyter react which is a main

repository with the source here, you have the Jupyter example repository where you can try out those two examples, the docuseries and the slate one and this is a Jupyter docuseries plugin we

have developed also, so once again thank you and I am available for any questions, feedback, looking forward to discuss with you, bye-bye.

I want to ask question, as I see the mathematical functions supports your tool

in future for the analyzing tools for the Jupyter will support your tool

okay so I'm not sure if someone can hear me but okay thank you so the question is sorry no I can hear you thank you so the question is can you support

big data okay so I'm not sure if someone can and because we have a kernel system with Jupyter, so Jupyter is a server which provide UI, as I explained this is a UI

built with react what we propose and the UI just connects the server behind the server there is a code execution engine which is called a kernel and yes we do support with Jupyter

react big data like Spark, like Dask because well it is just a server which gonna delegate what is doing to the kernel and you can have a python kernel or you can have any kernel you want so absolutely big data processing is supported now probably the interesting question is

what type of UI or plots or charts or graphs you can give with this system because with big data you may be interested to display in a more clever way your content

so the answer to the way you're gonna show the the data sets a big data set is well we support with Jupyter react all the renderer of Jupyter lab meaning that you can have like some some

geo map or some data frame visualization which exists on the field like Plotly, like iCharts, like echarts or whatever so yeah big data is supported and and for sure this

we can do a better job if using react because you're going to build some dashboard so let's say you you want just a view for your business stakeholder you can easily create that kind of view in react and you can expose the data sets a big data set

in a in a nice way to see end user react and you can expose the data sets a big data set in a in a nice way to see end user

react and you can expose the data sets a big data set in a in a nice way to see end user

so i think we are nearly close so i'm gonna just paste the link to to the repository

and if you want to to ask question just open some shoes over there