search

jellyfin / jellyfin-web

Web Client for Jellyfin
https://jellyfin.org
GNU General Public License v2.0
2.2k stars 1.17k forks source link

Migrate to a new framework #889

Closed dkanada closed 3 years ago

dkanada commented 4 years ago

We plan on modernizing the code here, which involves choosing a new framework. The only hard requirement is supporting incremental migrations, since we don't plan on migrating the entire codebase at once.

If you have a suggestion, add a comment below containing only the name of the library. An upvote means you would enjoy moving to that framework and a downvote means you would hate the framework. If you have no opinion don't add anything, and please avoid any other reactions on the suggestions themselves. Comments about your opinions are welcome!

dkanada commented 4 years ago

Vue

dkanada commented 4 years ago

React

dkanada commented 4 years ago

Angular

dkanada commented 4 years ago

Backbone

dkanada commented 4 years ago

Ember

dkanada commented 4 years ago

Polymer

thornbill commented 4 years ago

My argument for React is still it's much closer to standard html (in jsx) and js. Where as Vue even has it's own custom file type and uses custom syntax for data binding and logic that is useless outside of Vue. Meaning if you don't know Vue, you will be constantly looking up docs for trivial changes. And the time you invest in that will be useless once Vue inevitably dies (as will all current js frameworks in a few years).

heyhippari commented 4 years ago

Potential resources for the migration to either of the current front-runners:

React

https://xebia.com/blog/migrating-to-react-step-by-step/ https://babeljs.io/docs/en/babel-plugin-transform-react-jsx

Vue

https://medium.com/@bluntjackson/adding-vue-js-to-an-existing-project-ed2d040f870b

cromefire commented 4 years ago

Angular 9

(Please research if you Angular 9(!) and don't confuse it with angularjs, that's a totally different framework)

dkanada commented 4 years ago

I just fixed the Angular comment so it would indicate the newer versions.

cromefire commented 4 years ago

Meh people probably googled for angularjs or remembered it (or it being talked about), can't imagine that anyone just hates a modern framework, I heard many people being against it before they have even seen it or because they have used it "some time ago" it moved really fast.

cromefire commented 4 years ago

Pro angular 9 is just the ease of development, everything can just be triggers with CLI

dkanada commented 4 years ago

I would argue that React is not any closer to standard HTML and JS than Vue. I also disagree that Vue having a custom filename makes it less similar to HTML, because the SFC for Vue looks extremely standard to me. Airbnb is one company that goes so far as to require files including JSX get a different file extension because they don't consider them to be compatible.

One of the best reasons to switch to React in my opinion would be React Native. When we started thinking about moving to a framework we considered React specifically for this reason, but if we aren't moving in that direction I don't see a reason to use React over any other framework. It seemed like a pain at the time though, because lots of the libraries people were trying to add didn't support React Native and we had to limit our options.

Vue has amazing documentation which is helpful when learning a framework. They also have a framework comparison page here if anyone wants to see what Vue thinks about other frameworks.

cromefire commented 4 years ago

I think the same about react and I agree with the vue page that angular is really nice for large applications (which is what we are talking about) and recent efforts of optimizing it where really good

YouKnowBlom commented 4 years ago

Using react native in the web app would hold it back severely from my experience

heyhippari commented 4 years ago

Honestly, I think nobody would read Angular" anything and think Angular 1.0 nowadays.

We never really considered Angular internally, because no one in the web team is really familiar with it as much as with Vue or React, and it's heavy, which could prove to be an issue on Smart TV where memory is severely limited (And we're hitting a bottleneck already due to images, currently).

To me, the clear choice is between React and Vue. I'll need to see which is easier to integrate early in our build system so we don't have to wait for the ES6 migration to be done.

cromefire commented 4 years ago

Well you won't have anyone knowing angular, when you don't try it and I personally think it's really easy to learn, we didn't have anyone on the team knowing angular at that time, but every one was positively surprised, how easy it is to manage and develop. Just try something new it'll be a good choice I promise.

ThibaultNocchi commented 4 years ago

If the plan is to gradually move the codebase to a new framework, it seems Vue is more suitable to a migration than React. Moreover, I'd argue Vue has an easier learning curve than React and using the latter could see a reduced number of contributions than with Vue.

dannymichel commented 4 years ago

+1 for react, but knowing my reputation i don't doubt this immediately disqualifies react 🙃

ThibaultNocchi commented 4 years ago

Weren't there some talks about new clients in React? There's even a repo: https://github.com/jellyfin/jellyfin-react-client

joshuaboniface commented 4 years ago

I think the question should be "how and why is Vue better than React". Let's not pick what's hippest, but pick what best suits our needs and plans. Next year there will be another hip new framework for JS; would we discard all the Vue work for that?

cromefire commented 4 years ago

Well why always only vue and react? As you said don't always just pick the hottest framework. It sounds like you're discarding angular before you've tried or even looked at it. Yeah sure many people use react and vue, but if you build a huge application they're just not that suitable for it.

dkanada commented 4 years ago

@joshuaboniface the question should really be which is better, not why is React the best. We have exactly nothing written in any framework for the current web client and the question you posed seems to suggest a bias. It's also important to note React was started in 2013 and Vue in 2014, only one year later, so I wouldn't consider either one a "hip new framework" since both have been around and widely used for nearly the same amount of time. Angular has actually been around for even longer, so all three should be considered established at this point.

joshuaboniface commented 4 years ago

I mean out of the clear choices available to us based on developer experience. 8 downvotes and no upvotes for Angular seems to indicate that we have no one able to work on it.

I don't personally care, I know exactly zero of them. But I am concerned that this might turn into a bunch of pointless bikeshedding about which framework to use, when we should just pick the best one for our needs and stick with it.

cromefire commented 4 years ago

Well the 8 downvotes are for angularjs (it was edited) I downvoted it too

dkanada commented 4 years ago

We're still probably at least a month away from writing anything for this, so there's no rush.

PrplHaz4 commented 4 years ago

Keeping with the doocracy, IMO the guys who are consistently shipping are the ones who's opinions matter most. Wherever the active contributors land is probably the winner....

swillis12 commented 4 years ago

One of the best reasons to switch to React in my opinion would be React Native.

https://github.com/necolas/react-native-web this might be useful to create components that can be used in both web and mobile environments.

cromefire commented 4 years ago

There's also nativescript, which is kind of framework independent.

dkanada commented 4 years ago

Are there any wrappers like Electron or Cordova that cover more platforms? We have been doing that and so far it has worked well in my opinion.

YouKnowBlom commented 4 years ago

Are there any wrappers like Electron or Cordova that cover more platforms? We have been doing that and so far it has worked well in my opinion.

I believe react native has pretty great coverage. Only problem is I don't think we can do a gradual transition with that as you're only allowed to use their custom "html" tags AFAIK

PrplHaz4 commented 4 years ago

Are there any wrappers like Electron or Cordova that cover more platforms? We have been doing that and so far it has worked well in my opinion.

I believe react native has pretty great coverage. Only problem is I don't think we can do a gradual transition with that as you're only allowed to use their custom "html" tags AFAIK

Agree the approach has been successful and that it seems to have made the barrier to contributing pretty low. Web + Electron + Cordova/Capacitor seem to hit almost all relevant platforms - which others did you have in mind?

My biggest worry about React Native is it's not "web-first" which feels like would be more difficult to target oddball browsers like we see with TV clients and media boxes (but I have no practical experience there)...

Alternative Web Frameworks with cross-platform (Web, iOS, Android, Linux, Windows) packaging tools - the strengths here are high reusability/compatibility, pre-built UI components, existing web skillsets.

YouKnowBlom commented 4 years ago

My biggest worry about React Native is it's not "web-first" which feels like would be more difficult to target oddball browsers like we see with TV clients and media boxes

I share that worry

cromefire commented 4 years ago

Yeah Ionic is quite ok

h1nk commented 4 years ago

I don't personally care, I know exactly zero of them. But I am concerned that this might turn into a bunch of pointless bikeshedding about which framework to use, when we should just pick the best one for our needs and stick with it.

Wherever the active contributors land is probably the winner....

I second this and this.

My primary thoughts and considerations for picking would be:

Ultimately I think the choice should fall on the most active project members & contributors, as they'll be the ones having to end up dealing with the framework the most.

Also I'd like to ask about jellyfin-react-client (even though it's not really anything right now).

h1nk commented 4 years ago

Also any thoughts or opinions on moving code to ES6/Babel as part of the modernization/transition?

Already being covered (see #868).

cromefire commented 4 years ago

Also any thoughts or opinions on moving code to ES6/Babel as part of the modernization/transition?

I think this is already planned/started

cromefire commented 4 years ago

The incremental switch is likely the hardest part. It sadly eliminates many "automation options" like create react app (at least if it works like I think it does), angular cli and I guess other equivalents. So I don't know if it's particularly desirable to take that burden and also continue shipping parts of that legacy code.

h1nk commented 4 years ago

Would building a parallel web client like jellyfin-react-client be a better solution altogether? On one hand it's hard to incrementally transition the codebase to a new framework, on the other it's bad to either abandon the currently shipped client codebase or otherwise fragment developer resources to keep up feature parity between two totally different clients for an extended period of time.

heyhippari commented 4 years ago

Also any thoughts or opinions on moving code to ES6/Babel as part of the modernization/transition?

Take a look at #869 and #868

Also I'd like to ask about jellyfin-react-client

It's kind of abandoned, unfortunately. Most of the contributors prefer to work on this and to fix it up.

My personal opinion is that we have a client that works and I'd rather fix it up. Plus I have issues with React Native on web browsers. It's not "web first", despite the web client being the front of Jellyfin and what most users would be seeing. I've also seen that most web targets for it are limited and/or barely supported...

So I don't know if it's particularly desirable to take that burden and also continue shipping parts of that legacy code.

Whatever we do, this client has to be fixed up and maintained until we have something that can replicate 100% of the features available in this.
The fact is that the React Native client has seen very little activity in the 14 months since its initial commit.
To me, there's more value in fixing jellyfin-web, even if we have to redesign entire parts of it while porting it to something else. But, of course, anybody is free to work on the React Native client or lauch a React/Angular/Vue/other web client in parallel to this one. That's the beauty of open source :)

cromefire commented 4 years ago

I have started an angular client, but wanted to wait for swagger and the API redesign (if it ever comes) before resuming it

DMouse10462 commented 4 years ago

I believe that React DOM and React Native code can live in the same project, so they share the same base code with only the component rendering being different. By using different file extensions (.js vs .native.js or .android.js) you can make a certain build use only certain files.

In this way (if we choose React), the initial focus can be writing for React DOM. Once everything is ported over, then work can begin to add React Native component rendering to the existing project. This allows for cross-platform development with only two sets of rendering - web and everything else. This also avoids the fact that, like MrTimscampi mentioned, react-native isn't "web-first" by handling its rendering separately where needed.

h1nk commented 4 years ago

How good is Polymer and what does it excel at the most? Considering the entire YouTube frontend uses it might be a good fit.

cromefire commented 4 years ago

Polymer ist mostly build around custom elements, it's kind of interesting, but I personally don't think it really suited for a large app.

cromefire commented 4 years ago

And I don't know if we can get it to work on old tv browsers.

DMouse10462 commented 4 years ago

Polymer seems like a good option if you're looking for something lightweight, but if the goal is to make jellyfin-web the "one app that works everywhere" then you'll want a framework with some type of native app option.

cromefire commented 4 years ago

Well polymer would still work with Cordova... But it's just less of a framework and more focused on components

cromefire commented 4 years ago

Here's a nice comparison of the crossplatform frameworks, but it's in German and I don't know how well translator works on it: https://m.heise.de/developer/artikel/Flutter-React-Native-und-NativeScript-Kopf-an-Kopf-im-Cross-Plattform-Rennen-4502497.html

jonaspm commented 4 years ago

How about Riot.js?

https://riot.js.org/

heyhippari commented 4 years ago

I did a comparison of the stats for every framework that has been talked about here (Except platform stuff like Cordova, Ionic, Electron, etc): https://www.npmtrends.com/react-vs-vue-vs-@angular/core-vs-riot-vs-polymer

Here's a graph of the downloads in the last year: image

And here are some stats for each project: image

Honestly, one of the big things we need is community support for the framework. We need that thing to be staying alive for years, to be stable and to not implement breaking changes every six months. I'm pretty sure I'm not the only one who doesn't want to be doing another migration in a year because the framework we chose was abandoned or introduced breaking changes.

To me, that alone sort of eliminates everything but Vue, React and Angular (And I know this won't be popular).

Another big requirement we have is that we need to migrate everything in-place. I spent about 20 minutes searching Google for this for each of the three frameworks. I couldn't find anything about what that process would look like for Angular. All I can find are posts talking about moving from AngularJS to Angular, moving to TypeScript or upgrading your Angular version, but nothing about how to handle moving from straight JavaScript to Angular.
For both React and Vue, I quickly found the links I posted earlier in this thread, as well as dozens of other articles.

If anyone has good articles about migrating Angular in-place, feel free to send them, I'm interested.

Overall, I also notice in the stats that the Angular package is less used on NPM, has fewer stars, fewer forks and yet more open issues than React or Vue. This suggests bad issue triage, lower support, more problems, etc (I emphasize "suggests", because there's no real way to know for sure, but such a large difference is concerning).

Plus I don't think any contributor aside from Cromefire knows Angular, which kind of defeats the purpose.

As for React, I have a few issues with it:

With this, I can pretty confidently say my vote goes fully towards adopting Vue, as it seems to be the best option for our needs.