[Koha-bugs] [Bug 30225] Rewrite cities admin view in Vue

[bugzilla-daemon at bugs.koha-community.org]

https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30225

--- Comment #3 from Jonathan Druart <jonathan.druart+koha at gmail.com> ---
(In reply to Kyle M Hall from comment #2)
> This looks really interesting!
> 
> Jonathan, having used both to implement the same feature, I would love to
> know your opinion on how easy each one was to learn, and to use.

Good question.
I should start by saying that I had almost no expression with any of JS
frameworks. Only played a bit with react a couple of months ago.
I am at a loss when diving into the whole node ecosystem: npm, yarn, gulp, and
all the transpilers/compilers available. It took me a while to make it work
with Vue...

It seems very easy to start a new project from scratch using any of the JS
frameworks, you have several CLI tools (Vue CLI, create-react-app) to build the
whole structure of the project, run a dev instance on a port, hot reload, etc.
But there is way less documentation when you want to integrate them to an
existing project, write your own code to transpile, etc.

Anyway, I found react and vue quite different.
The major problems I had to deal with were:
1. The integration with DataTables
  Both React/Vue and DataTables will manage the DOM and we should not make DT
mess with React/Vue's components. Actually we should not make React/Vue aware
of DT's instance
2. Render React/Vue's components "on the fly", for the "Edit" and "Delete"
buttons we had to each action cell
  On need to make React/Vue aware of the onclick event to change the state of
the app, but those components need to be added after DT has been initialized.

Given all the work we provided to make our DT implementation a big player of
our REST API usage (and even when we don't use the REST API routes) I didn't
feel confident to bypass it, we must deal with is as it, and not rewrite
another version of the table (ideally the table should be a REST/Vue
component).

Another problem was the different versions and the new coding
styles/recommendations.
For react I learnt, after my first implementation, that everything was
obsolete. They do no longer use class/this, but functions and hooks. Same for
Vue, there is v3 that is "the new default version as of 7 February 2022"
(that's fresh!) and so you find a lot of code that is actually v2.
Also, bootstrap's libraries (BootstrapVue and React-Bootstrap), BoostrapVue is
supporting Vue2.7 so you need to use another BootstrapVue3 lib for Vue3, which
is using Bootstrap 5, way ahead of our Bootstrap version 3.5 (and so buttons
are either not styled correctly when using BootstrapVue3's tags, or the whole
Koha CSS get broken when you use the BootstrapVue3 css).

I haven't answered your question yet, I can give you some subjective feeling:
Vue
Pro:
 * Template/Script/Style (I haven't used style in my implement however) pattern
in the component. The templating system is great (see <template> in *.vue
files)
Con:
 * Not much v3 examples available yet

React
Pro:
 * lot of examples found on the web
Con:
 * a bit more time to understand the whole picture

I didn't find how to implement a routing system correctly (click on "edit"
button to display the edit form but modify the url, /cities/42?op=add_form).
It seems easier to implement in Vue.

Both are similar I would say, starting as a beginner I haven't found one
easier/harder than the other. Both need the same convoluted contortions to deal
with our existing project...

-- 
You are receiving this mail because:
You are watching all bug changes.