Calendar: adieu Angular1, welcome Vue
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
All 36 comments
@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?
georgehrke
on 19 Jul 2017
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?
tcitworld
on 19 Jul 2017
Should we start using vue-router to generate routes for editing certain events / viewing certain time-ranges?
georgehrke
on 19 Jul 2017
Totally ! And this will allow linking to events and such !
tcitworld
on 19 Jul 2017
Shouldn't Yarn be capable of taking over Bower's tasks?
pixelipo
on 19 Jul 2017
Yarn has no differences to npm on this topic.
tcitworld
on 19 Jul 2017
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 :)
georgehrke
on 19 Jul 2017
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.
raimund-schluessler
on 19 Jul 2017
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
georgehrke
on 19 Jul 2017
cc @nextcloud/deck
pixelipo
on 19 Jul 2017
__Concerning tools:__
When we migrate to npm we should set up Greenkeeper.io.
georgehrke
on 3 Oct 2017
A third option for sharing code among Calendar app and Task app could be a private NPM module.
georgehrke
on 3 Oct 2017
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
jancborchardt
on 12 Oct 2017
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.
ChristophWurst
on 12 Oct 2017
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.)
jancborchardt
on 12 Oct 2017
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.
jorinvo
on 13 Oct 2017
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.
tcitworld
on 13 Oct 2017
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? :)
georgehrke
on 15 Oct 2017
So I tested migrating the notifications app to jQuery (for ajax) + Vue: https://github.com/nextcloud/notifications/pull/95
and I think it was almost straight forward after reading the docs.
nickvergessen
on 20 Oct 2017
(Also cc @skjnldsv in case Vue needs some special HTML structure like we had the issue with Backbone.)
jancborchardt
on 20 Oct 2017
PleaseDoNotWrapInDiv PleaseDoNotWrapInDiv!! 🙈😂
skjnldsv
on 20 Oct 2017
@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 :)
georgehrke
on 21 Oct 2017
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.
xMartin
on 22 Oct 2017
@xMartin @georgehrke @tcitworld is there one library that force the alteration of the dom? Like div wrapping ?
skjnldsv
on 23 Oct 2017
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.
ChristophWurst
on 23 Oct 2017
@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)
georgehrke
on 13 Jan 2018
I guess it will also depend on https://github.com/nextcloud/server/issues/7738, right ?
tcitworld
on 13 Jan 2018
Very interesting: https://fullcalendar.io/blog/2018/04/alpha-release-jquery-removal
georgehrke
on 2 Jul 2018
@georgehrke right on time!!
We're starting our contacts vue migration soon :)
skjnldsv
on 2 Jul 2018
@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? :)
georgehrke
on 25 Aug 2018
@georgehrke Not this year :(
tcitworld
on 25 Aug 2018
tcitworld
on 3 Oct 2018
@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.
georgehrke
on 17 Oct 2018
I think we should agree on a file/component listing and structure, and how things work generally. Fine with the WIP PR. :)
tcitworld
on 17 Oct 2018
Don't forget to check the vue basic guidelines about file naming and structure 😉😊
skjnldsv
on 20 Oct 2018
🎉🎉🎉
ChristophWurst
on 19 Oct 2019
Related issues
gschenck
·
4Comments
cappuMUC
·
4Comments
skjnldsv
·
4Comments
andre5tz
·
3Comments
brylie
·
3Comments
Most helpful comment
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.