adieu Angular1, welcome Vue

[georgehrke]

Looking at https://help.nextcloud.com/t/give-vue-2-x-a-chance/9956, a lot of people favor vue over react (and definitely favor vue over angular)

I would like to start making plans when and how to migrate.
Let's collect a list of:

• tools we gonna use (bower is deprecated, ...)
• replacement for certain angular libraries (angular UI, ...)
• how to migrate our code (Controller -> Component?, what about DI?)
• create a rough schedule when to migrate
• get Ocular via composer

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[georgehrke]

@raimund-schluessler

Additionally calendar and tasks have quite some duplicate code.
Among other things:

• CalendarService
• CalendarModel
• DavClient
• ICalFactory

What about creating a dedicated Git repo for shared JS code and simply submoduling it into our code?

[tcitworld]

tools we gonna use

Normally we can load everything through npm with Webpack. When looked a bit at migrating to webpack it was more our own dependency chain that was bothering, no the tools themselves.

replacement for certain angular libraries

There's quite a list here for vue-related libraries : https://github.com/vuejs/awesome-vue

common code

Additionally calendar and tasks have quite some duplicate code.

Wouldn't it be interesting to consider putting these into the core server / dav app and load them when required?

[georgehrke]

Should we start using vue-router to generate routes for editing certain events / viewing certain time-ranges?

[tcitworld]

Totally ! And this will allow linking to events and such !

[pixelipo]

Shouldn't Yarn be capable of taking over Bower's tasks?

[tcitworld]

Yarn has no differences to npm on this topic.

[georgehrke]

Yes, npm 5 has a huge speed increase compared to npm 4. It can keep up with yarn now.
So we should just ditch yarn and use npm5 :)

[raimund-schluessler]

Additionally calendar and tasks have quite some duplicate code.

Having a shared basis for the javascript code would be great. I didn't manage to follow all the improvements you incorporated on these files and a shared basis would help to get rid of this issue. I would be fine with either having a dedicated repo or including it in the DAV server app.

Switching to Vue

Good idea to switch to Vue. I also considered this for Tasks, I just wasn't sure whether to use Angular2 or Vue. But I guess the simplicity of Vue is a huge benefit. Vue-router would also be necessary for Tasks and could enhance the Calendar experience quite a bit.

[georgehrke]

Wouldn't it be interesting to consider putting these into the core server / dav app and load them when required?

I'm not sure about this:

• people will consider it a public API and we will have to provide a stable interface and support
• it will slow down development for calendar and tasks because we can't back port features to older Nextcloud versions
• we will have to deal with different versions of the shared code in different Nextcloud versions

[pixelipo]

cc @nextcloud/deck

[georgehrke]

Concerning tools:
When we migrate to npm we should set up Greenkeeper.io.

[georgehrke]

A third option for sharing code among Calendar app and Task app could be a private NPM module.

[jancborchardt]

Keep in mind that since the forum thread and since opening this issue, React has been licensed as just MIT without the patents clause. So maybe it should be reevaluated which we should use, maybe also an opportunity to standardize across apps more. cc other app devs @ChristophWurst @irgendwie @Henni @juliushaertl @v1r0x @nickvergessen

[ChristophWurst]

From what I've read about Vue it seems to be a lot easier to learn than React, thus I'm still in favor of it as it lowers the barrier for contributors.

What about creating a dedicated Git repo for shared JS code and simply submoduling it into our code?

I'd suggest to use npm packages for that. This way npm will also check/include dependencies.

Generally, it would be awesome to have some kind of share component library (navigation, menus, notifications, filepicker) that apps can integrate as building blocks. That would speed up app development a lot and furthermore help us standardize Nextcloud front-end development.

[jancborchardt]

Heya @xMartin @jorinvo @gsambrotta @simison @daiyi as frontenders / devs: what are your takes on React vs Vue? Which would be a better and sustainable choice for Nextcloud apps, maybe something to standardize on and also get more JS folks involved? Or any other pointers? (Right now different apps use different things like plain JS / jQuery, Backbone, Angular, etc in different ways.)

[jorinvo]

It is really hard to tell the future. Currently react is definitely the big one. I also heard many good things from people using vue.js. Personally I would say that it doesn't matter as much which one you pick as long as you can establish some kind of common ground internally. If you have more people that enjoy working with vue, I would say that it is a good choice.

[tcitworld]

I would also still go with Vue vs React. Apart from being easier for new contributors to learn, I have the feeling it would be easier for everybody to migrate existing logic to Vue whereas React has another lot of paradigms to understand.
I agree with @ChristophWurst on the subject of using npm packages for all common things in Nextcloud, that would make all the Nextcloud js APIs much more discoverable and - with ES6 - much more easier to integrate as modules.

[georgehrke]

Originally I was looking forward to introduce integrations tests using protractor. Given it's only for Angular, that does no longer make sense.

Any suggestions for an integration test framework? :)

[nickvergessen]

So I tested migrating the notifications app to jQuery (for ajax) + Vue: nextcloud/notifications#95
and I think it was almost straight forward after reading the docs.

[jancborchardt]

(Also cc @skjnldsv in case Vue needs some special HTML structure like we had the issue with Backbone.)

[skjnldsv]

PleaseDoNotWrapInDiv PleaseDoNotWrapInDiv!! 🙈😂

[georgehrke]

@tcitworld @raimund-schluessler I don't want to procrastinate this issue forever and would like to start migrating shortly after the release of Nextcloud 13.

In the meantime, we can already start building up the shared javascript library if u want to :)

[xMartin]

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.

[skjnldsv]

@xMartin @georgehrke @tcitworld is there one library that force the alteration of the dom? Like div wrapping ?

[ChristophWurst]

FYI I've started some experiments with Vue at https://github.com/ChristophWurst/nextcloud_vue.

How about we create a dedicated repository (e.g. in the nc orga) to track all requirements as issues. Likewise, which components we need, how to design them in general and so on. We can then work on the implementation together.

[georgehrke]

@tcitworld I would like to get started with this in Q1 2018.

Should we put up a little schedule / transition plan?
(we will probably have to wait for the js dav lib to be done I guess)

[tcitworld]

I guess it will also depend on nextcloud/server#7738, right ?

[georgehrke]

Very interesting: https://fullcalendar.io/blog/2018/04/alpha-release-jquery-removal

[skjnldsv]

@georgehrke right on time!!
We're starting our contacts vue migration soon :)

[georgehrke]

@tcitworld Are you at Nc conf? :)

@skjnldsv Can we talk later today about your experience migrating Contacts to Vue, so that we can write down the rough steps and a rough schedule for migrating Calendar? :)

[tcitworld]

@georgehrke Not this year :(

[tcitworld]

https://fullcalendar.io/blog/2018/10/release-v4-alpha2

[georgehrke]

@tcitworld How should we split up the work for migrating to vue.js? :)
It's probably best to create a WIP Vue PR like in the tasks app.

[tcitworld]

I think we should agree on a file/component listing and structure, and how things work generally. Fine with the WIP PR. :)

[skjnldsv]

Don't forget to check the vue basic guidelines about file naming and structure 😉😊

[ChristophWurst]

🎉🎉🎉