The design documents for Toolhub call for an API first design that would allow external tools to be built to do all of the same actions that are available in the 'main' application. A good way to ensure that we stick with this as the project grows would be to build the UI layer as an API consumer. That idea leads to wondering if building the UI as a "single-page application" would be a good way to construct a greenfield API driven UI. If so, we would want to use something like React, Angular, Vue.js, etc as a framework for the UI system. Even if we don't decide to go with a SPA UI, we probably should pick a UI library for building rich interaction widgets. And ideally we would pick one that has some other use both in the Wikimedia ecosystem and in the general internet.
Description
Related Objects
Event Timeline
@srishakatux I would like your opinions on this library selection topic. If the question seems poorly defined I would also be more than happy to have a short meeting with you to talk things through so that you and I are roughly on the same page about what we want the UI framework to help us do and why.
@bd808 Interesting task it is :) First, I could find almost zero or not many projects in the Wikimedia ecosystem using any of the mentioned UI frameworks. I may have not properly searched :-/ I have used React a bit but have no idea about the other two frameworks, so I looked at external sources for comparison. I found this Angular vs. React vs. Vue 2020 Update promising, and it helped me understand the differences between the three. Summarizing what I captured below by some criteria:
- Features: Angular is the richest, React is minimalist, and Vue is between the two.
- Syntax: In Angular & Vue, HTML & Javascript are written separately, Angular uses Typescript. In React, there is no such separation. All HTML rendering is handled based on conditions via JSX inside a Javascript component.
- Ease of learning & getting started: Angular has the steep learning curve; it requires an elaborate setup. React is slightly more comfortable, and Vue is the easiest.
- Performance: Both startup and runtime performance is the same for all three.
- Popularity and prospects: Based on npm downloads, GitHub stars, Google trends, StackOverflow questions, open jobs, React seems to the most popular framework. Demographics wise, React is popular in the US & Europe, Vue is popular in China, and Angular in India.
- Framework evolution: All three are stable but under active development.
So, looking at the comparison above and considering that:
- We are not using any one framework already heavily for Wikimedia projects. Perhaps, I should research this more.
- For Toolhub, our primary and complex features will be search, view, and add tools in/to a collection (that are not too many or complicated features in terms of the user interaction). Is that right?
- React is a popular framework (in a region where most of our developers are: US & Europe) and among our outreach program students too.
- React's docs, and the community both seems promising (from personal experience).
- I don't see significant differences that will impact our selection.
I incline for us to use React :)
I see some "Vue" related activity, particularly https://github.com/wikimedia/wvui. I haven't thoroughly investigated this yet, can do more, and chat with its owners to see their opinion.
What you think?
As @JJMC89 mentioned in T261029#6431938 there is some Vue.js work starting by folks in Product, but I think you are right that no major 3rd party js framework is widely used yet. There is quite a bit of detail on T241180: RFC: Adopt a modern JavaScript framework for use with MediaWiki about why the Front End Working picked Vue.js. My TL;DR is that they liked both Vue.js and React, but ultimately felt that Vue.js would be easier to integrate into MediaWiki.
- For Toolhub, our primary and complex features will be search, view, and add tools in/to a collection (that are not too many or complicated features in terms of the user interaction). Is that right?
That sounds right to me. Currently I do not foresee a lot of "fancy" user interface needs. Toolhub will be primarily a catalog search tool (think ecommerce shopping site) with an integrated editing system for the "toolinfo" records that it displays. Light boxes and/or carousels might come in handy, but we probably won't need things complex components like WYSIWYG editors or game sprites.
- React is a popular framework (in a region where most of our developers are: US & Europe) and among our outreach program students too.
- React's docs, and the community both seems promising (from personal experience).
- I don't see significant differences that will impact our selection.
I incline for us to use React :)
Your familiarity with React is a good reason to prefer it. Before we make the final decision, maybe it would be good to do a bit of research on support for specific features in React vs Vue.js. A few things that come to mind:
- LTR/RTL switching
- server side rendering
- integration with Django backend apps
RTL support
It looks like React was improved in 2016 to support RTL layouts. Also, there are these promising & popular packages available in React:
- webpack-rtl-plugin: generates a separate RTL specific CSS file as the changes are made to the original one.
- react-with-direction: provides RTL/LTR support for interactive or complex UI components.
- react-with-styles: allows using CSS-in-JavaScript for React components with easily accessible, styling related information (e.g., colors, fonts).
Airbnb wrote the above two and used it to make its platform accessible to ~27 RTL languages in the last two years. In Vue, there are frameworks, all but one support RTL. Vuetify, the popular UI library, seems to be offering this support.
Server-side rendering
With both React and Vue, the support is possible. In React, there is ReactDomServer object that renders components to static markup. But, for more complicated operations, frameworks can be relied upon and similarly in Vue. Perhaps, there can be an analysis done to see the difference in performance when using React vs. Vue to decide. I'm only assuming that there won't be significant as overall performance-wise, both do same.
Django integration
There is no official documentation available that explains the use of React + Django or Django + Vue. So, it might be tedious that way to land on a right resource for reference. The only difference that I am seeing is that with Vue, we can add interactivity step by step, as it was designed to be adopted that way. Like instead of JQuery, we can use it to make enhancements to Django templates. Unlike React, the entire app needs to set up to use React from the beginning (more here).
Personally, I am not seeing significant differences between the two still, and picking one vs. other might be a matter of choice or philosophical reasons. It might be helpful to get expert advice :) I can ping a couple of folks from the Frontend working group to see if they have anything to share here.
I'm jumping in (by request! ;) to give my recommendation: I would 100% go with VueJS on this, even only for the reason that recently this was the framework adopted by the foundation for our frontend modernization.
FAWG (Frontend Architecture Working Group) has done extensive research on all the above frameworks and made a choice for Vue; now, it's true that the consideration was more about what's relevant *inside* MediaWiki, but the differences within these are not incredibly large when you do a standalone project, they all mostly have good contributor base and depend on learning the ropes.
But if you choose Vue you can also win from the tooling (eslinting, unit testing shims, etc), design(!) and some of the vue-component library stuff that is being worked on right now that's meant to be both inside AND standalone components.
On top of that, you'd retain and add to the expertise that we are now developing in the Foundation as we go with VueJS, and gain from the training and all the surrounding support that has come and will continue to be in the future.
Honestly, I'd still recommend VueJS (or React to a slightly lesser extent) even if the Foundation hasn't picked it up. Between React and Vue, given that Toolforge has varying expertise levels, I'd go with Vue anyways since it's a lot more straight forward (in my opinion) to varying expertises rather than React that tends to require a bit more JS-specific prowess.
If you want server-side rendering, Node can do that to both React and Vue, but if that's not what you want to run, you can check into Laravel+Vuejs, which seems to be a good marriage that people use.
I think overall, the choice of platform depends on what you need, what expertise (or multiple) you have in your team, what you plan for the future (who should maintain this, etc) etc etc etc. I don't think there's a one-answer-trumps-all situation, and you'll probably be good with wahtever you choose as long as it fits your team. I personally think that it's worthwhile to keep to the modernization effort that the Fondation picked up because the "side benefits" that you'd get may actually be worth not re-implementing everything from scratch (for example, RTL ;) or using libraries that may not be optimized for our super-language-heavy-usages (like RTL :p )
I hope this helped and not confused things more, even though it's a bit of a non-answer :)
+1, I agree with @Mooeypoo regarding the advantages of sticking with the same thing that other foundation projects will be using.