Use svelte for our js code ?

mgautierfr commented 3 years ago

I've recently discovered Svelte It is a framework to create UI in html/css/js. In opposition to other framework (vue, react, jquery) svelte works at compilation time and generate output (css/js) only containing what we need and want.

Pro:

No need to embed libraries (jquery, isotope (#534))
Only what we need for fast loading
High level way of programming (component, reactive ui, animation, ...)

Cons:

Need to generate ("compile") the css/js code along with the cpp code. So we need to setup a node/svelte build env on developer machine (and CI). This could be mitigate by keeping the generated css/js in the git repository. Then, only frontend dev would have to setup de build env. Other dev would simply use the already generated files.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

kelson42 commented 2 years ago

We have discussed this. This is an interesting proposal. But the main problem we have is our dependence to jquery... and this dependence will vanish anyway.

To me the main question is: which practical improvement will that bring considering our actual Javascript code base?

mgautierfr commented 2 years ago

We would not embed isotope neither.
As we don't embed a library, we ask user to load (and our server to send) less data. Our binaries don't embed it and so, are smaller.
As we don't embed a library, we don't have to keep it up to date and we potentially have less security issue

kelson42 commented 2 years ago

@mgautierfr Ok, so the main advantage is to remove js isotop? If we do so the look&feel would be kept? Woukd you recode all the isotop library logic?

mgautierfr commented 2 years ago

so the main advantage is to remove js isotop?

Yes, but also help us to implement all our frontend (and help us with new feature as incremental search or widget)

If we do so the look&feel would be kept?

We just have to keep our current css

Woukd you recode all the isotop library logic?

Mostly no. isotop is just a "flexbox" container with few animations. (and svelte handle animation pretty nicely)

Here a small POC of what it is possible to do : https://svelte.dev/repl/2b6fd14cbd454b339dc8c55ea32d67e0?version=3.48.0

Please not that is it is a POC made in less than two hours. Style is not identical. There is no download link and so. But you can see that:

It is working (fast)
Code is pretty clear
Tiling is made with flexbox, which is standard in css3
Styling is a copy paste of our style.css (+ flexbox)
~~No code for transition (but pretty easy to add)~~ This is done
No history/cookies/... management
No pagination
The only files to embed would be the js and css generated

I still have to figure how (and if) we integrate it in our buildsystem (and our cache system for static resources and ...)

mgautierfr commented 2 years ago

@juuz0 this could be interesting for you as you work on the frontend also. Do you have an opinion on svelte ?

juuz0 commented 2 years ago

I have used svelte little only as opposed to react, jquery so not much opinion :) But absolutely up for higher level of programming - components. As complexity grows in kiwix-serve, it might reach a point where injecting HTML all the time will be infeasible.

kiwix / libkiwix

Use svelte for our js code ? #549