Deck: Vue.js migration

[juliushaertl]

Since AngularJS is quite outdated and some of our dependency modules seem quite unmaintained, it might make sense to consider moving to Angular 4. Since there has been some discussion about vue.js at Nextcloud in general we should also consider that. https://help.nextcloud.com/t/give-vue-2-x-a-chance/9956

Maybe we can do a move to angular 4 and start developing new features in vue with
something like http://slides.com/npayot/ng-vue

Overview moved to https://github.com/nextcloud/deck/projects/1

Angular libs → vue lib replacements

• [x] ng-sortable → Vue.Draggable
• [x] ui-select - vue-multiselect
• [x] timepicker - nextcloud-vue
• Description
  
  
  
  • [ ] angular-markdown-it
  
  
  • [ ] markdown-it-checkbox [patched]
  
  
• File attachments
  
  
  
  • [ ] angular-file-upload
  
  
• Timeline
  
  
  
  • [ ] comments backbone
  
  
  • [ ] ng-infinite-scroll
  
  
  • [ ] jquery at-who
  
  
  • [ ] jquery caret
  
  

Checklist for feature parity

🙈 fine to move to polishing
🐛 needs to be fixed
✅ Full feature list

Navigation ✅

• [x] Board list
  
  
  
  • [x] Share indicator
  
  
  • [x] Open share view
  
  
• [x] Archived boards
• [x] Actions
  
  
  
  • [x] Edit board title/color
  
  
  • [x] Archive board
  
  
  • [x] Delete board
  
  
  • [x] Restore board
  
  
  • [ ] 🙈 Restore is only possible if not reloaded
  
  
  • [x] Open board details
  
  
• [x] Create boards
  
  
  
  • [ ] 🙈 Automatically select next unused color
  
  
• [x] Settings
  
  
  
  • [ ] 🐛 multiselect is hidden below the top bar
  
  
• [ ] 🐛 Persist toggle state of the sidebar
• New features
  
  
  
  • [x] Clone board
  
  

Board list ✅

• [x] List boards with members
• [ ] Actions (probably can be omitted)
• [ ] Editing (probably can be omitted)

Board view

• [ ] Header
  
  
  
  • [x] Breadcrumbs
  
  
  • [x] Share indicator, open share tab
  
  
  • [x] Add new stack
  
  
  • [x] Archived cards toggle
  
  
  • [ ] Compact card view
  
  
  • [x] Board details button
  
  

Board sidebar

Card sidebar

---

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

[splitt3r]

Will be pretty awesome to have some sharable components for parts like comments or acl / sharing 👍

[GustavoMarcante]

In my point of view, would be more coherent to use Vue, as it is a community driven project and, also, many AngularJS users now feel more "at home" with Vue than with Angular 2 or 4.

[juliushaertl]

Yes, since vue is being used more and more in Nextcloud in the future, this would be the framework that deck should also move to. Rewriting probably something that won't happen that fast, but maybe we can find a way to already move some parts of the UI to vue while keeping the existing code based on angularjs.

[juliushaertl]

Let's wait with this until we have some proper vue components, that we can then use to start moving parts of the UI. https://github.com/nextcloud/vue-components

[weeman1337]

:+1: for Vue.
I suggest not doing a 1:1 migration - instead we should use the opportunity to decouple some deck components. E.g. encapsulate a deck card, that's currently part of the board "object" somehow.

I would like to help doing the migration. Just ping me @juliushaertl

[juliushaertl]

Great to hear that @weeman1337 Let's talk about that after the next version has been released.

[juliushaertl]

@weeman1337 I would actually like to start with the migration in the near future. Do you have anything in mind already how we could handle communication between the existing angular code and new vue components?

Maybe we could start of with some single components like the app sidebar, single sidebaer tabs or a card component.

[weeman1337]

@juliushaertl basically moving services out of angular services is one step (e.g. into own classes or modules). You could still use them in an angular service wrapper.

It's possible to use vue components with angular side by side, but then you have two "frameworks" parallel. This shouldn't be for a long period :/

After this weekend I have some more time. Maybe we can align for the migration.

[juliushaertl]

Probably a good idea to start off with the services so we have the data handling ready. @weeman1337 Are you coming to the nextcloud contributor week next week in Stuttgart?

[weeman1337]

@juliushaertl as discussed start a branch and I'll jump in. If we're changing many things you may consider moving to ESLint and updating webpack.

[weeman1337]

@juliushaertl do you think we should change the new app navigation to be like described in the design guidelines?

[juliushaertl]

@weeman1337 In what terms? If we use the component from nextcloud-vue it should already be fine like that, right?

[weeman1337]

@juliushaertl lets try again :) The main point for me are the categories. The nav component supports sub items.

In the current version all, except the archived boards are shown on the left side. The filter applies to the boards in the middle. → With use of the sub items we can show the boards below their categories on the left. This is more intuitive in my opinion.

[juliushaertl]

@weeman1337 Yes, i think there was already some discussion about this, but I cannot find the issue right now. However totally fine by me to have archived boards as sub items of the archived navigation entry. :+1:

[nicolad]

Hello, I want to help with migration to vue.js. I noticed that there isn's any issue with label vue.
I would like to know if the list from Overview is ordered according to implementation sequence, if not, please advise what I can do.

[weeman1337]

Hi @nicolad great you want to help :)

The tasks aren't ordered in implementation sequence. I already put some placeholders in for the board view and the board side bar: https://github.com/nextcloud/deck/tree/vue/src/components/board You could start building the board view for example.

Just put your name somewhere and start :) happy coding!

[weeman1337]

@nicolad I just saw you may not have the permissions to edit the description and code here. Just tell me what you want to do I put your name there. You can start in a fork and I can merge it into this branch on demand (file a PR → vue) if you think you have something ready).

@juliushaertl could say something about the permission process.

[juliushaertl]

@nicolad I've added you as a contributor to the deck project, so you can push your branches directly to the deck repository. That way testing and collaboration on a branch with others works a bit nicer than having a separate fork.

For now I'm fine, if we just all push directly to the vue branch (without creating pull requests). Force-push is disabled for the vue branch already.

[juliushaertl]

Besides that, really great to have you on board for the migration as well @nicolad :+1:

[nicolad]

Thank you guys for kind introduction and given trust. Although I do react.js at work and have less experience with vue.js, I will try to learn as much as possible along the way. Because of that and not only I am open to feedback. Glad to be able to contribute to such awesome ecosystem.

[juliushaertl]

@nicolad If you have some feedback before merging feel free to just open a pull request to the vue branch instead of pushing directly, so we can give some comments on the code. We also have an IRC channel #nextcloud-deck at freenode in case you want to ask some questions or have a quick discussion about something.

[weeman1337]

Just an info: I gave it up with the "nextcloud-vue" AppNavigation components. The reason is it doesn't work without a mapping/change detection hell. Also things like the "undo delete" are really hard to implement with it. For example actions can't access the items. My first idea was to have a look how the "calendar" guys are doing it. But they also use an own implementation :/

I took some deck specific navigation components in place. Anyhow I kept the base structure from the "nextcloud-vue" components as much as possible.

From my side I would say we go on with the custom implementation. After the migration I'm willed to put my learning into the "nextcloud-vue" library to improve the navigation components.

[juliushaertl]

@weeman1337 Totally fine, thanks for looking into it. We can always just use a custom implementation and try to enhance the nextcloud-vue components afterwards at some point.

[juliushaertl]

Closing as the main migration is done, remaining steps are tracked in https://github.com/nextcloud/deck/projects/1