mediacenterjs icon indicating copy to clipboard operation
mediacenterjs copied to clipboard

Rewrite frontend

Open jansmolders86 opened this issue 9 years ago • 26 comments

For MCJS 2.0 I really want to make the move to react/webpack for the entire project. Even though nearly all apps are angular already.

jansmolders86 avatar Jan 30 '15 08:01 jansmolders86

Anuglar 1.x or Angular 2? They differ quite a lot, so be sure to make the correct choice :)

lucienimmink avatar Jan 30 '15 11:01 lucienimmink

haha, good question. First of all version 2.0 of MCJS has nothing to do with Angular's versioning ;) It'll probably be 1.0 seeing as 80% of the application is already written in 1.x. Unless you can convince me otherwise of course ;)

jansmolders86 avatar Jan 31 '15 21:01 jansmolders86

Have you seen react ? The fact that Netflix us it to target Tv, make me wondering how is mediacenter perform in regard with usage of angular.

Is this something you want to look into ?

benzen avatar Feb 23 '15 20:02 benzen

@benzen given the DOM interactions for mediacenterjs are probably not significant enough for either Angular or React to have a clear advantage. Personally, I really like the Flux+React paradigm more, but don't think performance is a significant real world difference between the two in usage here.

If this was moving forward to Angular 2, then I would definitely suggest at least considering alternatives like Flux+React, Mercury, Meteor, and others...

tracker1 avatar Feb 23 '15 21:02 tracker1

I really like React in general (whether with Flux or not). But i would agree with @tracker1 that React in comparison with Angular would not give any noticeable Performance differencies so far.

hoffi avatar Feb 24 '15 17:02 hoffi

Hmm, I'll dive into React more to make an educated discussion! Thanks guys for pointing this out!

jansmolders86 avatar Mar 02 '15 10:03 jansmolders86

Given the hint you provided, I totaly agree with your choice. What about the coming 2.0 version of Angular.

Wont this mean a lot of rewrite for you ?

benzen avatar Mar 02 '15 14:03 benzen

It would ;)

I would stick to 1.x for now I guess. What I'm wondering is hoe well react and angular work together.

So say I use angular for the routing and other Model controller stuff and use React for the view. Eg components.

Would that work? Or would that just get messy ?

Thanks!

jansmolders86 avatar Mar 06 '15 13:03 jansmolders86

Hm i would not mix both together. You can use React-Router for routing.

hoffi avatar Mar 06 '15 15:03 hoffi

I've started reading up on react, and it seems flux goes with it fairly often. Though I'm unsure about the what the difference between flux and react is, does anyone here know?

Jon889 avatar Mar 06 '15 15:03 Jon889

I've spent some time arround react. In fact react is really only about stop using the dom directly. Let react handle that for you, and make "intelligent" decision about that.

IMO what is really awesome is more flux. Flux is just a pattern on how to organize your data in the front end, how move the data in the front end.

WE can use react for build directive (https://github.com/davidchang/ngReact ).

What in my opinion make more sense, is looking at flux, and apply it to your app.

But again this will change radically the way you build pages.

Hope this helps

2015-03-06 10:52 GMT-05:00 Jonathan Bailey [email protected]:

I've started reading up on react, and it seems flux goes with it fairly often. Though I'm unsure about the what the difference between flux and react is, does anyone here know?

— Reply to this email directly or view it on GitHub https://github.com/jansmolders86/mediacenterjs/issues/185#issuecomment-77581251 .

Benjamin DREUX

benzen avatar Mar 06 '15 18:03 benzen

So flux is for data whereas react is more view/Dom stuff?

I think the weather app is the only one not on on Angular, should it be converted or wait until angular 2.0/react is decided?

Jon889 avatar Mar 11 '15 11:03 Jon889

I'm still very much on the fence. I've been running through demo's and tutorials of all these libraries and think all of them have a thing going for them. Personally I'm most familiar with Angular 1x but that shouldn't be the reason to pick that one. I like the component driven syntax of react /flux but haven't been able to make an educated decision to be honest. If we port the weather app and redo the routing in angular, we'll be able to wrap the entire app in atom shell which is (for me at least) is a big goal to achieve :)

jansmolders86 avatar Mar 11 '15 11:03 jansmolders86

So I've been playing with React and so far I'm really liking it. Sometimes it feels a bit more barebone than angular, but the virtual dom and the component driven development are awesome and would work great for this project. I'm first going to do a couple smaller scale react projects before I'm starting on the rewrite though.

jansmolders86 avatar Mar 26 '15 14:03 jansmolders86

Hi Jan, long time no hear!

Looks like things are going good with mediacenterjs. Just my two cents, I would go angular 1.x. I don't know much about react, but with angular you can create dynamic routing based on a compiled template and the state provider. At run time the template is compiled with the routes from different controllers. This enables each controller to specify it's route and be separate from other routes in the $stateprovider. Have a look at https://github.com/Karnith/JMedia/tree/Dev/assets/src/app for an example. If you have questions, let me know.

Karnith

Karnith avatar Apr 27 '15 18:04 Karnith

There's also now: http://jsblocks.com which they claim is faster than react

Jon889 avatar Apr 27 '15 18:04 Jon889

For work I've been using https://github.com/rackt/react-router a lot recently and I have to say, although not as full featured as Angulars routing it helps to route to specific react components.

I really liked working with React these last few weeks. Everything is very flat and transparent. State and stack management are intuitive and easily manageable.

I'm currently building a mini MCJS locally in React to gauge the speed pitfalls etc of porting to angular. I'll upload it to a branch once I'm satisfied so you guys can check it out as well!

Still thanks for keeping the conversation alive, sorry I haven't been as responsive as I used to!

jansmolders86 avatar Apr 28 '15 20:04 jansmolders86

what about something like http://ionicframework.com/ or http://reapp.io/ seems like they might help running on different devices as well.

plessbd avatar Oct 12 '15 05:10 plessbd

I can't speak for the other frameworks, but angular has ui-router for states and is able to use future states with a plugin. I'm just starting to play around with future states now, but from what I understand future states allow for dynamic states to be used, say coming from a db on the fly verses needing to reload your app every time a new state is added...

Karnith avatar Oct 12 '15 20:10 Karnith

@jansmolders86, I think it may be worth looking at how Redux handles state, and workflows... it's a flux-like framework that's pretty simplified over Flux and has become pretty popular... it's about consistent, and immutable state.

I find that Redux + React + Router is a pretty good combination for application workflow and rendering.

tracker1 avatar Oct 12 '15 22:10 tracker1

@tracker1 :) I am using it for work atm and love it as well! Now I just have to find time to rewrite MCJS with it haha

jansmolders86 avatar Oct 13 '15 19:10 jansmolders86

@jansmolders86 true enough... been following this project with great interest for a while, and honestly still haven't had the time to dig in... was thinking on doing something similar, that could run on a desktop/server, then have a tablet/phone UI that then "plays" through a chromecast...

I've seen some chromecast bits in npm, and combined with the work here, I think it's entirely doable, it's just a matter of getting the free time... thanks for all your work on this project.

tracker1 avatar Oct 14 '15 18:10 tracker1

Hello, are you still looking at doing this? If so, I can help out with the transition to react. The other framework you might want to consider is vue.js

KatFrog avatar Jan 07 '19 21:01 KatFrog

I wish I had the time, sadly work has kept me way too busy to start such a huge endeavor

jansmolders86 avatar Feb 18 '19 15:02 jansmolders86

Wow, totally forgot about this... haven't looked at it in a long time... today, my choice for UI in general is absolutely React + Redux + Material-UI ... Couldn't be happier. Have done a little with Vue and for a mid-large app it's difficult to get it all working together.

tracker1 avatar Mar 05 '19 18:03 tracker1

Even Redux wouldn't be necessary. I'd go React 16.8 (hooks FTW) with styled components and React spring. If only the days were longer and more plentiful!

jansmolders86 avatar Mar 11 '19 17:03 jansmolders86