[Discussion] React

[geekgonecrazy]

We have interest in using react in Rocket.Chat. This ticket is to discuss

• Pros / Cons
• Why you would like to see this
• Suggestions for how to go about this
• Voicing support / Volunteering to contribute

Some links related:

https://forums.meteor.com/t/next-steps-on-blaze-and-the-view-layer/13561

Go forth and discuss :)

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

[sampaiodiego]

Let's bring all @RocketChat/core here =)

As I said, maybe we should wait for MDG define the future of Blaze. If they succesfully implements a blaze-over-react thing, it should be our best path.

[geekgonecrazy]

As I see it Blaze 2

Pros:

• Possibly not as big of a learning curve to those that don't know react.
• We can re-use a big portion of our templates.

Cons:

• Any react pro that comes in, maybe turned off being that its using some weird templating.
• We now have another piece we have to rely on being maintained. If MDG dumps it we have another mess to clean up.
• Performance might be impacted by going through the blaze stuff. There is bound to be at least a little. But we don't know if it will be noticeable or not.

[engelgabriel]

Let's wait and see for a month or two. It's hard to make assumptions now. The performance impact may be zero actually, because the template will be compiled/transpiled into react at build time. It won't exists in production... it is like CoffeeScript.

[tvld]

MDG announced that they will drop Blaze 1 development, so no new issues taken on. Also "Blaze 2" will not materialize. As far as I can tell, they seem to mostly ignore the community concerns on the forum ( @sampaiodiego pointed also to follow: https://forums.meteor.com/t/next-steps-on-blaze-and-the-view-layer/13561 I for one objected to dropping the installed base for the next hot thing as I dont like eco-system splits, but well... seems we have no choice.

It will be React, end of story and doubtful upgrade path

[tvld]

MDG was just as clear that we will have ES6 instead of Coffee as main common language. So, it might be that this is a possible pivot point we can even taken to our benefit:. What if all we write in ES6 will be React based so we all know that if it is Coffee, it is still Blaze? Just a thought ;)

[geekgonecrazy]

@tvld I've noticed the same thing in the discussions.

I think using something outside of MDG's solutions at this point might actually be to our benefit. For one we don't have to wait on them to make up their mind. Second, react is moving fast. I think we might be putting our self at a disadvantage if we limit to what ever version they support. Kind of how we have to force people to use an old version of node... But that's another subject.

tl;dr; We shouldn't put all our eggs in one basket.

[tvld]

Yeah, the MDG waggling is becoming a bit of a nuisance. For example: we like to start contributing to Rocket. But should we learn Blaze ? Or wait until Rocket adopts React ?

I think Rocket has no choice and should become opinionated quickly, otherwise it will hunt them as much as it hunts Meteor now...

[Morgul]

If Rocket.Chat is going to decide to make a break from Blaze (which at this point, seems like a smart decision), instead of hopping directly onto React, I'd recommend shopping around a little. Weigh the pros/cons of a few frameworks. For one, I've been blown away with Vue lately, and given their 1.0 release, I'd strongly recommend taking a look at it:

• http://vuejs.org/guide/comparison.html#React
• http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/

Just because React has some neat ideas, doesn't mean they're the only kid on the block. As @tvld said:

...Rocket has no choice and should become opinionated quickly, otherwise it will hunt them as much as it hunts Meteor now...

And I agree with that 100%. But, be a little picky, and weigh more than a single option.

[tvld]

Indeed, also not a big fan of React. I had a look at Vue and it seems promising.

In addition, I would also suggest you to have a look at Aurelia, from the guy at Angular 1 (not 2 ! ;) To me seems especially clean and... plain .js so no new layers or tricks to learn: http://www.aurelia.io or better indeed vue.js

[engelgabriel]

From Blaze to React video series.

https://www.discovermeteor.com/category/blaze-to-react/

[tvld]

@engelgabriel good video's.

Does it mean you decided to go for React full stop? And if we want to learn Meteor to be able to contribute to Rocket, you would suggest us to learn React?

[engelgabriel]

Not yet.. we will do 2 other project in ReactJS next month, and after that I'll be able to give my final opinion on this :)

[tvld]

Ok, we will take that month to learn the structure of Rocket and decide if we should follow your Rocket or go to another one, Aurelia in our case.

Anyway, please do not forget to give direction as soon as you can. People depend on opinions and choices to be able to invest and not doubt or look back all the time ;)

[engelgabriel]

I won't forget, and the reason I want to do this other 2 projects first, is exactly because we understand this is a very important decision. We can't afford to be wrong about this.

[geekgonecrazy]

@tvld I've actually looked at Aurelia. I come from doing a lot of Angular 1.x projects, and Aurelia looks very clean. I need to play around with it a little.

[tvld]

@engelgabriel ... how are your ReactJs project going? Any influence expected here?

[geekgonecrazy]

@tvld I think our new docs section we're adding is using react.

I know i've personally been taking a deep dive into react. I like it.

Also i've been noticing other people using react with meteor a lot more.

It looks like the kadira guys are doing some work with it:
https://voice.kadira.io/meteor-meets-graphql-3cba2e65fd00

[tvld]

@geekgonecrazy I suppose we are waiting for an official opinion from RC for this. I still stare in love at Aurelia, but love does not built a future. We need clear lines and stick to it, I think. So, hence the question: what will RC do? ))

[geekgonecrazy]

@tvld Yeah I think all of us are still looking. Kinda like with the es6 discussion. It really comes down to us having time to use it to form an opinion one way or another.

Aurelia does look very nice. Reminds me a bit of angular and angular 2

[tvld]

@geekgonecrazy "Reminds me a bit of angular and angular 2" Seems logical as Aurelia's founder Ron, was part of Angular 1 core but was not satisfied with Angular 2... so started all over.

[engelgabriel]

Here is yet another post to follow to help us make our minds:
https://forums.meteor.com/t/angular-react-and-blaze/16100

[geekgonecrazy]

Opinions below are purely my own

What I read from that is they don't want to put any man power on it any more. So they are killing the react attempt.

So they encourage react and then they discourage.... That whole post looked like a big wall of text to say one thing. Canceling their react effort.

I read through a bulk of the comments on that thread. It looks like many have started down the react path as a result of meteor moving that direction. Now that its not moving that way they are going to keep moving forward, as they are happy with it.

It also looked like companies are liking react over blaze, because they can find people with react / nodejs experience a lot easier then you are going to find someone with blaze / meteor experience.

tl;dr;
From where I stand... I think we would be better off moving forward with on our own then worrying what MDG does. I think as a community we would be better served choosing a framework that will make the project better.

[tvld]

Actually I have been active myself in the React/Blaze discussions, as I never really understood what is going on. I could not believe they would really alienate their complete atmosphere ecosystem, just for the sake of changing. So I just did not understand. I am afraid that by aiming to please everyone, they satisfy no one and get a bloated hard to maintain product. I hope they prove me wrong as I was a believer :)

@geekgonecrazy I believe you are right. Move forward. With the correct steps taken, I believe RocketChat might easily outgrow Meteor in size, cloud and contributions. Better replace one of the building blocks or even the foundation to keep RC reliable, fast and agile :)

[engelgabriel]

I believe that RocketChat will outgrow Meteor. We have been developing many workarounds to Meteor's limitations. As we develop more specific code to deal with our edge cases, move to ReactJS, create our own plugin/package system and Meteor 1.3 get more compatible with NPM, I can see we getting into a point when de-meteorising Rocket.Chat may be easier and necessary.

[engelgabriel]

4 strategies to survive Meteor in 2016
https://medium.com/@ottovw/4-strategies-to-survive-meteor-in-2016-ac12fe85c678#.gtzhrg436

[engelgabriel]

Top 5 Predictions for Meteor in 2016
https://voice.kadira.io/top-5-predictions-for-meteor-in-2016-c7c196eab308#.7qp9i2ecv

[engelgabriel]

And.. the last link for reading:
https://github.com/mattkrick/meatier

[tvld]

@engelgabriel The Meatier I did not see... but: excellent stuff ! Libraries are the way I suppose, over Frameworks.

[dcsan]

why would you use meteor for infra?
how are you integrating telegram with Vue? you wrote your own telegram client or just pushing to their bot api from your own app and asking people to use their client?

+1 for vuejs. lightweight and featured.

[tvld]

@dcsan with "infra" i meant server side and subscriptions, and so on...

We have extension to standard telegram, using their Games features...

[engelgabriel]

Some links:
https://github.com/mitar/vue-test
meteor/blaze#131
meteor-vue/vue-meteor-tracker#3
https://vue-loader.vuejs.org/en/configurations/pre-processors.html

[gdelavald]

To add some points in favor of React (and also Vue):

• React components makes the code more modular and reusable, which could work very well with RC packages approach;
• React adoption is very high and should continue like this in the foreseeable future (https://stackoverflow.com/insights/survey/2017#technology as most loved for ~66% and most wanted as ~18%) what can help having more contributions from the community
• Superior performance to most of the view frameworks nowadays (https://www.youtube.com/watch?v=z5e7kWSHWTg shows some comparisons to a Blaze/Angular demo) but of course Vue stands above in this case (https://vuejs.org/v2/guide/comparison.html)
• React.js similarities with React Native could help bring this projects closer (and perhaps migrating from Cordova to Native could be a thing)

Vue is a really strong contender for React, but at this point in time I still think React has the upper hand, with more adoption and the amount of support from the community.
Either way, Vue could be a great improvement as well (https://medium.com/front-end-hacking/why-how-we-migrated-to-vue-from-blaze-c3437b14dbcf)

[tvld]

@gdelavald we feel that Vue already gained the upper hand as the best contender at this time.. but well... we can all have different ideas ;)

[cyclops24]

+1 for use React instead of Blaze.

[Nepoxx]

There is a lot to consider to make such an important decision.

React has a massive community, vue.js does not.
Vue.js might be more performant than React, but it's not as good as Inferno, which is very similar to React and almost a drop-in replacement for it (lots of caveats of course, but still). (benchmarks)

You have to factor in "ease of adoption/contribution". React is used everywhere and known by a lot of people, it might not be the best tech but that's not the only factor to consider.

I used Aurelia personally and love it, great technology, and the people behind it are very good, but the adoption rate is abysmal and that comes with its own issues.

Just my two cents.

[allanlundhansen]

+1 on react vs vue

• larger ecosystem
• testability and simpler debugging of components
• functional approach (clean separation of state via redux!)
• larger development team
• native support
• Better support from MDG

https://medium.com/js-dojo/react-or-vue-which-javascript-ui-library-should-you-be-using-543a383608d

[janat08]

I'm against react, unless you got notifications indicator that randomly lights up costing millions. Being open-source software, not having plethora of files for "composabiity" with somewhat made up syntax and redux to boot is helpful.

[geekgonecrazy]

i'm a bit confused @janat08 first part of your sentence seems like you are against.. but the end of the second one seems like you are for it 😄

[janat08]

https://github.com/peerlibrary/meteor-blaze-components
Is OOP like react, nowhere as confining, and permits light adoption.

[mitar]

I have finished integrating Tracker with Vue. I think the result looks amazing. There are some internals we could continue improving, but I think that interface for developers works well. See this comment for more information.

[jgtoriginal]

After a whole year using Rocket.Chat, we came to the conclusion that it's front end slows us down on development. We needed something faster development wise, but we didn't want to leave behind the back end build in on Rocket.Chat. So we ended up building every new feature into a custom client in React which speaks with the Rocket.Chat API. This is great, because we keep on using what we had and we enhance it with React. Development wise, we increased our velocity hugely and we are all happy because after the learning curve React makes things easier. So I'd strongly recommend leaving Blaze behind and going for React.

[tvld]

@Nepoxx Funny how things can change in a few months: Vue is now well on its way to surpass React in forks and stars (today 74K/81K) in a few months current growth rate. But dont worry... personal preference plays a role as always, and am sure Rocket Chat will balance the options nicely )

[jgtoriginal]

I haven't been using Vue, but I think that Front End Development is moving towards that direction, call it Vue, React or even Angular, which is definitely worth going for.
To me the fact that Rocket.Chat has such a powerful backend and complex frontend, came as a blocker when trying to implement new features fast. So we went for React, which went up and beyond our expectations.
So I think it'd be a huge advantage to leave Blaze behind. And that actually this would translate on the dev community having an extra pro at the time to decide of choosing Rocket.Chat over any other solution.

[gdelavald]

Would love to hear more about your experience on this @jgtoriginal

[jgtoriginal]

@gdelavald so as you already know, we've been using RocketChat on it's main flavours: web, cordova, iOS, Android. And we quite liked the concept of coding once, but cordova was just too slow, and native wouldn't allow us that. Besides, no matter what we did, every code change would make us wait a bit to rebuild the app. And when it comes to FE this is a lot of time, cause you can't code on the fly as on BE.

So after lots of research, we came to the conclusion that react was our best option for coding things fast and cross platform. But trying to replace RocketChat FE was a bit of an overhead for us. That's why we explored on the API side of things, after all native apps speak to the API and they perform pretty well. So we did a first test with react native, then we did an other micro service in react web, and after the learning curve, we speeded up our velocity by 3 times at least.

There's a catch though, and it is that we've been using this Views https://github.com/viewsdx/docs which is an open source templating engine that allows you to build powerful UIs without doing html or css. You just need to write simple instructions for it to build the UI, so the only thing left is to code it's logic on React.

Long story short, we got now the power of RocketChat API, we still use RocketChat web, and we develop new custom features in React, which makes our life easier. So if RocketChat would go for React, we would actually end up implementing a lot of new features also within the web service.

[gdelavald]

@jgtoriginal Awesome to learn this, we are planning our move to renew the FE architecture as well. Our first experience has been developing the React Native app, and it has been great for us.
I'll update this thread once we got more solid news

[jgtoriginal]

@gdelavald that's great news really!! I'm eager on that update then. By the way, I think you really should try Views https://github.com/viewsdx/docs out. Actually it's been developed by one of our team members, so I guess we could explore that together. I'm not currently going too much to your demo server so in any case poke me here. Thx very much!

[kkumaresan]

Hi, we at Mongrov have developed a react-native mobile client library for Rocket.Chat. Please check this url: https://github.com/mongrov/roverz . Works both on iOS and Android. If you get a chance, do check this project for a comprehensive native mobile app using Rocket.Chat. We welcome your feedback 😃

[geekgonecrazy]

Thanks for sharing. We have also experimented and continue to do so. But this is very off topic. :)

On topic I believe the decision has been made to switch to react, we just have to begin the process.

@karlprieb might be able to comment more. i'll go ahead and close this issue though 😄

[yuanyong]

@geekgonecrazy Is the react migration on the road map?

[geekgonecrazy]

Its on the roadmap I believe. I don't know about timing.

@ggazzo might be able to speak to projected roadmap or if it still is on roadmap 😄

[sandys]

here's a suggestion - you guys should use https://pagedraw.io/ and https://news.ycombinator.com/item?id=16467387

or https://reactstudio.com/

It generates fully running React code from sketch/photoshop files. It should cut down development time considerably.

[akalittle]

And its 2020 now.

I'm new to Blaze, but I have experiences in React and Vue. And I think the development experience is terrible with Blaze.
I have so much difficulties in understanding where does this props data comes from.

Any plan of migration ?

[geekgonecrazy]

The react rewrite is well underway. Sections such as admin and the setup wizard were first. :)

[akalittle]

@geekgonecrazy
Thanks;
I've seen some code written in React.
Its possible to give an estimated time when the totally migration can be done ?

[geekgonecrazy]

Keep an eye on the fuselage repo. It contains the components being developed. ETA right now i think is it’s done when it’s done :) I’m sure it will move a long quickly now just need a bit of patience :)

A lot of things going on. The react component set is just one aspect of the exciting things coming. Keep an eye out for some rich message stuff in the works. A lot of powerful features coming.