Vue rewrite

[JonathanTreffler]

fixes #195

TODO:

• [x] add config files for webpack, eslint, stylelint, babel ...
• [x] planning how exactly to split the code (folder structure ...)
• [x] update Makefile
• [ ] update CI Stuff
• [x] install all needed npm dependencies
• [ ] Figuring out the data Structure (vuex)
• [ ] Choosing the UI
• [ ] Implementing the UI

[Grotax]

Thank you so much for working on this 😊 Trust me it will be greatly appreciated not only by the active community on GitHub but also by lots of silent users.

[SMillerDev]

I think this should be a draft for now (since there's nothing added yet)

[JonathanTreffler]

I think this should be a draft for now (since there's nothing added yet)

sure

[JonathanTreffler]

It builds an runs sucessfully now ! Theres nothing there yet except a empty div, but npm, webpack, eslint, stylelint, babel run perfectly now. I updated the Makefile (further changes probably necessary). The actual Development can now begin :)

[jancborchardt]

Great stuff @JonathanTreffler, thanks a lot for taking this on! Ref our Vue experts @skjnldsv @juliushaertl @ma12-co @ChristophWurst just in case there’s some questions or input needed down the road. :)

[JonathanTreffler]

how it currently looks:

The Image loading currently doesn't work (so the icon for unread articles currently doesn't work). The shown texts are already using l10n.

[JonathanTreffler]

The Icon loading now works

[powerpaul17]

Hello and thanks for starting this PR! Do you plan to simply reimplement the current interface or is there already a new design planned? Because I think there is a lot of room for improvements especially for a "reader" app. Personally I think the current layout/ui is not very convenient.

I would be available if you need help with the redesign/implementation..

[jancborchardt]

Hi @powerpaul17!

We certainly have some plans – regarding design, our biggest competitor and also reference to look at is Feedly: https://feedly.com Also interesting are https://flipboard.com, https://feedbin.com and https://feeder.co

However in the current rewrite we should first try to focus on the code part, so it doesn’t grow into something that’s difficult to handle. Do you have experience doing mockups or frontend work, or how would you like to contribute? @JonathanTreffler will be able to say more about where he needs help! :)

[JonathanTreffler]

I currently plan to pretty much re implement the current layout with a new Design. Any layout improvement ideas are welcome, but i honestly don't think the current one is bad at all. I will change the Modes Articles are shown in. The current ones (normal and small) are not very good. Normal currently shows Articles in full length wich can be annoying With some feeds. Small currently only shows the Headline. I personally would like to have a mix of them (Normal, but with limited lines shown). Theres not much code written yet, so we have enough time to figure everything out. The first thing i will do (probably tomorrow) is to start connecting the frontend with the backend again.

[powerpaul17]

We certainly have some plans – regarding design, our biggest competitor and also reference to look at is Feedly: https://feedly.com Also interesting are https://flipboard.com, https://feedbin.com and https://feeder.co

Thank you for the links, good to know the competition.

However in the current rewrite we should first try to focus on the code part, so it doesn’t grow into something that’s difficult to handle. Do you have experience doing mockups or frontend work, or how would you like to contribute?

That's understandable, one step at a time :wink:. I'm a fullstack developer but mostly TS (JS) at the moment, I don't have experience with doing mockups but I'm interested in design/layout and typography.

[powerpaul17]

@JonathanTreffler Sounds like a good plan, I was just thinking about a three-pane layout, like most reader apps have, the scrolling with the article interweaved is a bit confusing IMO. Also the typography is not very good at the moment. But of course, one step at a time. Let me know if I can help you with something.

[JonathanTreffler]

I only use Nextcloud News so i have never seen a three pane layout, but it definitly sounds interesting. I think thats a layout mode we could add

[jancborchardt]

3 pane layout sounds good – we can use the same as Contacts and Mail. :) There's also a component for the list entries I think. Also since one can hide the navigation also on desktop, I would say that's the only layout we should go for. It also makes it much easier to test and reduces our overhead of maintaining 2 views.

Also :+1: on improving the typography. Let's most importantly use proper HTML structure like <article>, h2 for post titles, and our Vue components, then Nextcloud styling will already take care of much.

[JonathanTreffler]

I will hopefully have time to work on this at the end of this week and in the weekend

[powerpaul17]

@jancborchardt That was exactly what I was thinking about.. :wink:

[JonathanTreffler]

I would really like to continue the development, but until #1277 is merged i can't continue. I would have to develop with the code from the Pull Request, but there have been multiple releases since that Pull Request was opened and that just makes development messy (local version overide needed, just makes everything more complicated and nobody else will be able to compile the code written in this branch)

[SMillerDev]

Just checking in, anything I can do to help you along here?

[powerpaul17]

Yeah, as I said, I would also be available for helping here as I'm also interested in getting this done..

[SMillerDev]

Make a pull request to the vue-rewrite branch and it'll be automagically added to this PR when I merge that one.

[powerpaul17]

Make a pull request to the vue-rewrite branch and it'll be automagically added to this PR when I merge that one.

Ok, that's not the issue, but I wanted to wait for the original author for more information what can be done before interfering with his work. :wink:

[Grotax]

I think you can safely go ahead and start working. As @JonathanTreffler is occupied with other tasks at the moment. It's a research task anyway, nobody created the news app based on vue.js before :)

[SMillerDev]

Isn't interfering with other people's work the spirit of open source software? 😁

I wouldn't wait for a blessing/acknowledgement though, that could wait a long time and probably won't help much.

[JonathanTreffler]

Sure, you can help if you want. I will continue working on this in 2 days though. So please merge your changes into this branch as soon as they are done so we don't work on the same things twice.

EDIT: 2 days was a bit optimistic maybe :)

[JonathanTreffler]

If possible just wait one hour. There's a bit of stuff i need to change so it works with the latest release of nextcloud-vue.

(I used a now merged branch of nextcloud-vue in development, you would need to make the same changes to you local npm "configuration" to make it compile)

[JonathanTreffler]

It compiles without errors on the newest version of nextcloud-vue now. If anyone wants to help you can start now.

(I confirmed it compiles and has no linting errors, but i have not tested the newest version of this branch on a actual nextcloud instance yet. So hopefully it is in a working state right now)

[powerpaul17]

If possible just wait one hour. There's a bit of stuff i need to change so it works with the latest release of nextcloud-vue.

(I used a now merged branch of nextcloud-vue in development, you would need to make the same changes to you local npm "configuration" to make it compile)

Yeah, I know, I was the one who pointed out the wrong/missing export in nextcloud-vue while I was looking into the existing code. :wink:

Sure, you can help if you want. I will continue working on this in 2 days though. So please merge your changes into this branch as soon as they are done so we don't work on the same things twice.

That's great, I also have limited time, so don't get your hopes up too much, I just thought before it lies around for some more months I could at least add some bits to it..

[powerpaul17]

@JonathanTreffler Another question: would you be open about using Typescript? I think every project would greatly benefit from it, and since it's a complete rewrite anyways...?

[JonathanTreffler]

@JonathanTreffler Another question: would you be open about using Typescript? I think every project would greatly benefit from it, and since it's a complete rewrite anyways...?

I have heared great things about typescript and i dont mind typescript, but i have never developed a big project using typescript, so i would need to learn it.

[maxammann]

I think typescript would be very nice. I dont have experience with vue AND typesceipt though.

The gold thing is that the implementation of typescript can be incremental. I can offer my support for setting up typescript. Thwn wie can move parts to TS.