Hi everyone, please take a seat.
We'll soon start the next talk.
So, the next presentation will be done by Manu Leduc,
and it's about crystal, flexible, weak UI.
So, hi everybody.
So, for this talk, I'm going to start by presenting the organization of the project on the team.
Then, the world idea of what the project is.
It's features.
Given the main points about the project design,
present the roadmap for the next year,
or maybe even more.
And if you have enough time, a life demo.
With of course, demo effect.
So, crystal is developed as part of XWKS,
which is a French company that now probably many of you know,
because of the panel and everything.
It's a self-funded company,
which is mainly known for developing XWKS on Creeppad.
So, the team is composed of Ludovic Diverse, which is here,
when some are sold as a CTO,
myself as a tech lead.
So, I go UX designer, peer on my developers,
on the rest of the XWKS team on XWKS community,
which is a good wiki expert.
So, useful feedbacks on the project.
So, what is crystal?
It's a new project.
It's beta zero dot 14.
Today we are building zero dot 15.
It's a new UI for wiki's based on modern technologies,
which is compatible with XWKS.
I will see later with other backends.
We do one with these every month,
only implementing the second number so far.
So, no major version.
The source I have available on data,
can find the documentation online on,
we have a metric channel when you can come and chat if you want.
So, the origin of the project is that we realize that,
no edge is not only something you do in wiki's,
but some things that you also do in other projects,
for instance, if you do test management,
you want to have some documentation aside your tasks,
or if you do document storage,
you might want to have textual documents that you want to edit,
directly inside the project,
on that you might want to link together.
And so, in this version,
it's important to collaborate,
and that we can concepts inside different sources of knowledge,
and to have a familiar UI elements for that,
that can be embedded inside different software.
Possibly to start from small chunks of knowledge inside,
non-educated software,
and to move gradually inside full-fetch wiki,
such as X wiki.
So, this is some screenshot of the UI as it is today,
just to give you an idea,
with the edit model as well.
So, the key concept of crystal,
the notion of embedding,
meaning that crystal is not only a full interface,
but can also be integrated inside
other software,
for instance, it could be embedded as
an extension dedicated to wiki-wiki content.
It's also modular,
meaning that you don't want to always take all the picture at once,
but you might want to select only the ones
that are relevant to the predictions,
which you want to embed crystal.
It's also adaptable, for instance,
you don't always have an index in for instance.
So, search might not be an option in this case,
so you want to be able to remove all the notion of search of your UI,
because your backend doesn't support it on
as part of the embed ability.
You also want to be able to adapt the UI
of your wiki to the UI as a prediction side,
which you are embedding.
So, that's the integration is seamless,
and doesn't have to kind of UI mixed together.
Where we software,
we have, of course,
viewing it in pages,
for xwiki,
the software next to it as a source of knowledge,
and also,
from five to ten new five system,
specifically for the five system,
we're able to move on random pages on,
we're working on,
making it possible for the other backends.
Of course,
navigation between pages,
the given tree,
right frame,
and so specifically for xwiki,
so far,
we support authentication,
pages,
the history,
on the notion of view or edit rights.
We also embed a rich editor,
which allows currently to edit images,
to spot links with the completion,
blogs that you can move up and down,
the splash action to quickly insert rich content inside,
your documents,
so far, everything is saved in my down,
and,
optionally,
you can connect to real-time server,
people to collaborate in real-time,
to documents,
and it's based on,
on tipped up.
So,
additionally,
some crystal specific features,
so as I say,
we support not only xwiki,
but also other backends,
such as an extra on the five system,
we are also working on GitHub.
Another interesting feature is,
crystal can be used on the web,
but also as desktop application,
using electron,
which is able to connect to a remote source,
or directly to your five system,
with always the same UI,
which is familiar to the users.
And we also have a prototype of,
a flying mode where,
the page revisit,
gasped,
and then once we have offline,
you are still access to the page you already visited,
and when you get back on the page,
refer to,
in the back end,
on the new version,
is asynchronously,
it's played again,
when they are available.
So,
all of it is developed
in test-tripped with view.
This is a broad map of the main concepts,
which is that we have at the core,
an extension manager,
which is loading extensions
for the mini part of the UI.
One of them is the,
absolutely,
the system,
we have two,
the same system,
so far,
but it's built to be extensive.
On,
relevant extensions,
can connect to subparties,
such as real-time server,
or the backend.
One important technique,
aspect,
is that everything is a component-based,
we need,
components are nicely,
the components,
which has some interesting properties,
such as feature,
discoverability,
and also extensions
can come on over other features,
to specialize part of the application.
Also,
not about the design system.
So, for instance,
if you want to write a button,
we define a type,
meaning the parameters that are,
a load for the use of a button,
and this is separated from the ways
that will be displayed to the user.
Meaning,
if you have a success button,
then you can choose,
even at one time,
to choose beautify on this is,
the text is green with green,
back end,
like green,
but if you switch to shoelace,
all the styles of the buttons are adapted
to the specificities of this new design system.
All of this is a type-safe,
meaning that,
as a user of the abstract design system,
you are,
I mean, sure that everything is all right,
because of the type-shaking.
And as I said,
it is made to be extensible,
meaning that if you want to integrate,
crystal inside,
say next code,
which provides a nice,
design system library,
by writing a separate extension,
phonics that you can have,
crystal integrated in the next one.
Without the initial developer knowledge,
when you write a button,
you don't even know how it is going to be displayed again.
Also,
we made sure that every part of the UI
is only presented to the user,
if the backend supports the corresponding feature,
for instance,
with next load,
there is another shun of file story,
whereas in xpq,
we can provide this information
on so the story tab is only available,
when you are connected to the xpq backend.
Also,
what's so,
we are currently working on integrating the
search feature,
supporting the offline mode for more backend,
on the possibility to switch from rich text editing
to my identity,
for those that are more familiar with source editing.
As part of the first MVP roadmap,
remains user management inside the wiki,
right management as well,
the support for most in-textes,
or the other in-mardom,
the support for macros,
for richer content inside pages,
on the support for commands on pages.
For more longer-term work,
we plan to extract the editor,
we realize that most of the work we put in this editor
can,
is more generic than just crystal.
So, if we expect it,
we can re-zip first for xpq,
because xpq is still using xpq editor for,
which is quite legacy,
to say the list,
but it could also benefit other project
interesting to have a rich editor with actions
that are rated to wiki,
such as having the possibility to select images
from the attachments,
or the notion of links being internal,
or external.
We plan to support data editing,
meaning the possibility to edit tables,
what notion does,
for instance,
that explains also a rowing to do that.
The possibility to script inside pages,
which is also very interesting.
If we want to someday have crystal
as a new front end for xpq,
we need to work on many of the features of that,
such as extensions,
skins, spotting for the wiki xpq syntax,
several side micros,
like when there is many many other things we want to do.
We want to do,
also actual embedding inside a product,
such as next rod or gem spotting,
or is also interesting in that.
Okay.
Yeah.
You want to have time?
Yeah, good.
So,
here we have the same page.
The first one is displayed using shurice.
The second one is displayed in beautify.
As you can see, there is some slight differences,
because of the different design system.
So, the shape of the buttons,
the bread frame is different,
I can maybe fit to propose it
if you have something you wish to see more specificing.
So, yeah.
Of course, in the video shown,
a listing of attachments,
preview of attachments.
Okay, now I'm going to turn the same page.
Demo effect.
But you can see the cursor.
I'm not sure why.
It's not refreshing correctly.
But the two pages,
it's to both of us are connected to the same real time server
in the background.
I'm supposed to collaborate,
but they don't want to be here today.
And additionally,
we have the,
this is an electron app.
So, same UI again.
This is connected to an online backend.
Excuse me, back end.
But I can switch to say,
a five-system directory.
Here,
I can,
of course, this page really exists.
Yes.
So,
in the world,
okay.
And now,
you can see the new page being stored in your first system.
So, from the same UI,
that your family is on the web,
you can also edit the command offline.
Maybe in the future,
being able to migrate.
Your online,
your offline not too,
explicky by,
maybe just a drag and drop.
It's a longer-term vision,
that we have.
In but not.
So, far,
everything is stored in JSON files,
which is not user-friendly,
if you want to edit by yourself,
to make them document.
So, we are working on more,
for more specification,
how to store files in your file system.
All of this is also deployed online.
There is a demo instance,
available with the crystal backend.
If you want to try with a logged-in user,
please first create your user on the backend,
then use the crystal front end,
because it's not user-friendly for now.
And you can download,
add it from a web site as well.
If you're using Ubuntu,
we are there's a limitation
to pass a specific arguments
when it's starting,
I'm working at the fixed for the time.
If you have other operating systems,
please let us know if it's working correctly on Mac OS
or on Windows.
Thanks.
So.
Thank you very much, Manuel.
So, we have about 8 minutes for questions.
So, any questions here?
Yeah.
One.
No, no, no, no.
Can you go back on the file for them for the Windows?
Because it's said that there will be any questions
on Zoom in the text,
and the write them in the description.
Yeah.
Thanks, man.
You want to explain to me?
Oh, yep.
A bit laggy for some reason.
It's real partial time.
Okay.
So, yeah.
We said that everything is looking awesome.
Not, not no more.
Okay.
Any question?
Oh, yeah.
Hi, thanks.
So, if I understood correctly,
you have implemented two engines for that.
One is view-fi,
and the other one is shoelace,
which is true.
Yes.
It's to UI backends for the same database.
And what reason do you have for that?
Is it just for testing, for evaluating,
or is it to be able to embed crystal inside
other applications,
while having a style for the buttons,
for every thing that looks exactly the same as the application,
inside which you want to embed.
So, that crystal is like
seamlessly integrated inside the rest of the UI.
I see.
And how would you implement such a certain abstraction?
So, for example, if there was an existing UI framework,
that has several styles or something,
I need to write some kind of a connector,
or how do you need to imagine that?
Yeah, that's all it works.
You need to implement the set of UI elements
that we define.
There is a dozen,
for now,
that or have a specified interface with parameters
that are designed on specific type objects.
And then you need to work on how to properly run
those generic parameters,
inside some things and match the existing system
that you want to integrate.
I see.
Thank you.
Whether.
Of the design,
any direction?
Oh yeah.
Yeah.
Any other question in the meantime?
So let's wait for the solution then.
Two.
Maybe.
Okay, that's the list of UI elements
that you need to define,
and for instance, for the button,
there is this list of parameters that you need to
support in order to be compatible with the abstract API.
So sorry, quite.
Okay.
All those learning work,
is it a JavaScript SDK or a frame?
It's a library that we provide
that you need to install on your own.
There is a project that is providing all the APIs
and implementations that you need.
Hopefully.
Otherwise, you have to develop more.
Do you need to do it?
Do you use something?
The idea is that it should be a work component.
Yes.
That's my question.
Thank you.
Any other question?
Okay.
Well, then if there are no questions,
thank you very much.
Thank you.