Give VUE 2.x a chance

Yes, having a backlog makes implementing something new rather hard. I must admit it is very young but the reactive approach (virtual DOM) has some rather nice attributes.

So I accomplished at least the minor goal of bringing this kind of data binding and frontend templating to your attention.

Best regards

1 Like

I’m with @jan about keeping the amount frameworks to the minimum and that we have to look for the long-term.

Although the argument about what we use right now, can be dismantled a bit:
Backbone is more of a data handling library, than a real frontend framework and we use angular 1.x as far as I know, which will become outdated at some point in the future and the switch to angular 2 is a big one. So if we do it, it should be a conscious decision, because from my experience angular2 forces more architecture and is a little harder to get in to. (Disclaimer: Not used vue.js, but played with it and am eager to try it out. Use angular2 in a small project)

Adding @georgehrke

I was thinking about migrating the calendar to React once Angular 1 is EOL. But there is still plenty of time before that happens (afaik). And I didn’t discuss the React thing with @tcit yet, so that was only a wild thought and nothing set in stone yet.

Okay so let’s take the discussion to the future. If at one point the framework will have to be updated or changed (angular2 etc.) … having a framework that seperates the backbone from the fronted may come in handy. I like how Vue/React (and this kind of data binding) works with states and a datastore that trickles its updates down to a component tree. This way one hasn’t have to care about keeping data up-to-date and track every view (one of the main reasons Facebook switched to/developed react).
Also if you look at the code in the Movie-DB example above you can see how the certain views load und update data when a component is initialized. Also how one can use “transform” to animate the interface from one state to the next. Also nice about a virtual DOM ist that one can tell a component/route/view to be persistent and even if it is removed from the actual DOM it still keeps it’s state … so one can reattach it to the current view without loosing it’s settings. Not mentioning reusable HTML-like components.

I find Vue.JS more accessible then react. Also it can be used as CDN only (simple to extend existing apps with data bing etc.) or as a CLI with routes (for full app dev).

Regards

1 Like

We definitely had a lot of developers voice complaints about Angular or saying it’s not super easy to understand. Also that they change their entire thing from one release to the next doesn’t inspire confidence.

With Backbone, apps use Marionette which I guess achieves the other part. cc @ChristophWurst @MorrisJobke for more JS info.

A move to React could be discussed. It’s one of the first library where lots of JS people I know seem to agree it’s great.

Whatever path we take, I think one of ours goals should be to separate our code more into the view technology and the logic behind it. The latter could often be reused across views and even apps. Right now it’s all tied together very closely, using plain Backbone. Additionally we have to come up with a proper API for apps, that can be used regardless of the technology stack there.

In terms of React vs Angular vs Vue, I’m currently favoring Vue, because of its simplicity. Also the Laravel project (which is also a big PHP project) adopted it recently. All I know from React is that you’ll not be happy without JSX. And you cannot use JSX without a proper build too, which we do not allow. And angular has always been steep in terms of its learning curve, it abstracts away a lot of things which eventually makes debugging harder.
In any case, this is just a personal taste. If we want to move forward, we have to get rid of Backbone in the long run and replace it with a scalable framework. Whichever framework that will be has to be evaluated thoroughly.

2 Likes

Would also consider Vue.js above React, but whatever’s chosen, I think the whole Nextcloud apps should migrate to it for better coherence.

As @ChristophWurst said, I also think we should profit from this migration to separate more the view and the logic (es6 classes…) and provide better - and documented - js API for the apps.

I thought about migrating the Tasks app to Angular2 but this would certainly (but not necessarily) mean using Typescript. However, I would like to know if there is already a preference in what will be used in the future. I don’t want to start writing code using something which will not be used by the majority of apps.

Comparing https://github.com/tastejs/todomvc/tree/gh-pages/examples/react to https://github.com/tastejs/todomvc/tree/gh-pages/examples/vue Vue looks definitely much more straight forward.

@MorrisJobke @eppfel @juliushaertl do you have any experience with Vue vs React? :slight_smile:

Only touched both for some minimal examples to get a rough feeling. Too few experience to actually judge on them I would say.

I talked with a friend about this yesterday and he said that he really likes vue, because:

  • the concept is very easy to comprehend and its easy to write vue apps.
  • it does exactly one thing, the view

I had a few concerns about the scalability of vue and if its suitable for bigger apps, but he allayed my fears.
(He didn’t use React so far.)

1 Like

As stated before I played around with vue that’s it. React the same…

But I’m certain that Angular would be overkill.

Could we have a decision on this ?

1 Like

I just wanted to leave my opinion here since I did a not so small project in Vue 2 for university and have worked with Angular 1.

First of all I really like Vue and it’s much easier to work with than with Angular 1, there are less concepts to understand and the browser extension is way better than the Angular version. Also it looks like it’s easier to control the performance of Vue than the performance of Angular. (e.g. viewing a table with about 150 records really slowed the Angular app)

But there is a caveat: really please don’t use Webpack. I don’t say webpack is bad (it isn’t actually) but there are some things which makes developing very difficult:

  • a production build takes about 2 minutes in the project I was speaking of
  • the output of Webpack is impossible to debug, the errors you get inside your console are a bit random (every variable is mangled and line numbers are wrong). A solution is to use a development server include in Webpack (also reduces the build time) but even then errors are hard to debug. Line numbers are off by a random number (> 30), you don’t know which file caused the error, and integrating the development server inside a project like Nextcloud isn’t that easy.
  • in my experience the development is very Chrome oriented, what I mean with this is that the development “should” work in Chrome and maybe it works in Firefox. But even then things like source maps doesn’t work very well in Chrome.

Also don’t use Babel, yes ES6 is better than earlier versions, babel works perfectly fine and it’s actually easier to development in it, but babel makes the three points of above even worse. The generated code is even harder to debug.

Rather than webpack I would go with Grunt or Gulp. In the JSXC app we are using Grunt for some time now and it’s actually very handy to work with. With Grunt you have 100% control about how you develop.

TL;DR: go for Vue but don’t use Webpack/Babel etc since it’s hard to develop in and will scare new contributors.

Funny, I have the complete opposite experience.

The generated code is even harder to debug.

It isn’t intended to be.

Still in favour of Vue vs React, however React just moved from their silly licence terms to plain MIT.

Yes, the React.license was another issue but that is resolved. I still think Vue has a lower barrier of entry and works nicely as a “plugin” in any existing codebase.

I have a lot of experience building React/Redux apps, also teaching/coaching this. I recently did some research on Vue and got some intros by enthusiastic people. Although I’m lacking experience here I think it could be a good choice for nextcloud. React/Redux, although much more popular, has quite a learning curve if you want to follow best practices with little benefit for smaller apps. I found some good arguments why Vue could be easier while not having significant disadvantages.

1 Like

I did a project in Angular 1 a couple of years ago, but found the learning curve way too steep. Then a while back I tried React but had a hard time figuring out how it worked. After reading this thread I gave Vue.js a try and was really impressed. Very easy to dive into.

@xMartin You mention that React is much more popular, they have almost the same number of stars on Github, but there seems to be more than double the number of people using the developer tools for Firefox and Chrome.

  • Github stars
  • Developer addons

Lastly some people say that Vue.js doesn’t work with big projects, but Gitlab is using it and seems to be happy about it. You can read about their decision here. And their follow up a year later here

In a “philosophical” percpective, would be more coherent to use Vue, as it is more a community driven project. In my point of view, Vue is to React as NextCloud is to OwnCloud.
React can be more ready to use now, but Vue is growing more, in users, in resources, in projects, in approval (Vue came closer to PHP after adopted by Laravel, Vue is used by GitLab, React has restrictions in China, etc.)
And many AngularJS users feel more “at home” with Vue than with Angular 2 or 4.

3 Likes