[GitHub] [whimsy] rubys opened a new issue #110: Upgrade to Vue v3 or move back to React.js

[GitBox <gi...@apache.org>]

rubys opened a new issue #110:
URL: https://github.com/apache/whimsy/issues/110


   Not urgent, but this work should be planned for.  Summary
   
    * Vue.js version 3 was [released](https://github.com/vuejs/vue-next/releases/tag/v3.0.0?ref=madewithvuejs.com) in September of 2020.  It is not exaggerating much to say that pretty much every API we used has changed.  Details below.
    * Previously the agenda, secretary workbench, and roster apps were built using React, but we moved away from that when React changed to a non-open source license.  React changed their license back shortly after this work was completed.  They were aware of our moving away due to licensing issues, and this may have contributed to their change of heart, but at that point it didn't seem worth spending the effort to migrate back.
   
   ---
   
   In Ruby syntax, a minimal application looks like the following:
   
   ```ruby
   class C < Vue
     def render
        _span "hi"
     end
   end
   
   Vue.render '#greetings' do
     _C
   end
   ```
   
   The above currently compiles to the following JavaScript:
   
   ```javascript
   var C = Vue.component(
     "c-",
     {render: function($h) {return $h("span", "hi")}}
   );
   
   new Vue({el: "#foo", render: function($h) {return $h(C)}})
   ```
   
   With V3:
   
     * `component` is no longer a method on `Vue`.  Instead one needs to call `createApp`, and `component` is a method on the app.
     * `render` methods no longer are passed an argument.  Instead, one is expected to call `Vue.h`.
     * `new Vue` no longer works; instead one needs to call `mount` on the app.
   
   After a day's worth of effort, I've gotten close, but I still haven't found a combination of calls that is equivalent to the above.  Once that is done, I don't know what else has changed.
   
   To be fair, Vue discourages the use of these APIs; they recommend creating HTML templates and mounting data onto the templates instead.
   
   ---
   
   During this same time, the React API has remained stable, mostly with some additions that don't much matter to us.
   
   If the requires for `ruby2js/filter/vue` were replaced with requires for `ruby2js/filter/react` and each of the classes defined in `.js.rb` files were changed to inherit from `React` instead of `Vue`, the code would nearly work.
   
    * [Vue lifecyle methods](https://v3.vuejs.org/api/options-lifecycle-hooks.html) are a bit different than [React lifecycle methods](https://reactjs.org/docs/react-component.html).  Some of the mappings are straightforward Vue's `created` is roughly the same as React's `componentDidMount`.  Others are subtly different and need to be investigated on a case by case basis.
    * React event handler names are a bit different.  If you want to have a method called every time someone enters a character in an input field, you would define this with `onChange` instead of `onInput`.
   
   I really don't think that there was much more to it than that.  This would not be a particularly difficult task, but it does represent a non-trivial amount of effort given the number of source files involved.
   
   In case it isn't obvious, my recommendation is to move back to React.
   
   
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [whimsy] sebbASF commented on issue #110: Upgrade to Vue v3 or move back to React.js

[GitBox <gi...@apache.org>]

sebbASF commented on issue #110:
URL: https://github.com/apache/whimsy/issues/110#issuecomment-757136777


   How does this compare with the proposal to rewrite in Node.js?


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [whimsy] sebbASF commented on issue #110: Upgrade to Vue v3 or move back to React.js

[GitBox <gi...@apache.org>]

sebbASF commented on issue #110:
URL: https://github.com/apache/whimsy/issues/110#issuecomment-757136777


   How does this compare with the proposal to rewrite in Node.js?


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org