top | item 9820332

Integrating React with Meteor

132 points| djmashko2 | 10 years ago |info.meteor.com | reply

39 comments

order
[+] pluma|10 years ago|reply
> Meteor: the missing infrastructure for building great React apps

Extremely bold words as usual. I don't think I've ever seen any JS technology that manufactures as much hype as Meteor. Every single article from Meteor makes it sound like the best thing since sliced Jesus.

Are there any reliable numbers on Meteor adoption (and retention)? If you listen to people using Meteor it's already more popular than jQuery but everybody else seems apathetic at best. If you go by Stackoverflow numbers (which Meteor shows off on its homepage), it's merely 1/10th as popular as AngularJS (and roughly as popular as express, which never even came close in terms of hype).

[+] echoless|10 years ago|reply
If you try building a realtime single page app using Meteor and measure the amount of time it took you to complete it, you'll find that the hype is justified.
[+] baby|10 years ago|reply
I build stuff with React but never tried with Meteor. But I looked at it, and if you watch the introduction video where he creates something and deploy in like 2 minutes you would go wow as well. It's definitely the most exciting "new" thing I've seen along with React.
[+] pgm8705|10 years ago|reply
Interesting to see this implemented as a mixin when they just announced yesterday they are fully supporting es6. Looking forward to building some side projects with this and seeing how it compares to using react + flux.
[+] avital|10 years ago|reply
Hi, I wrote this blog post.

We were trying to keep our API surface area small with one way to load data into components, but you're right -- we should probably /also/ add a ES6 base class as a second option, and let the people choose which they prefer.

A lot of React developers still prefer mixins -- react-router recently switched from mixins to ES6 classes and then changed their mind "until ES6 classes have better answers to replace what mixins do (like decorators).": https://github.com/rackt/react-router/blob/master/UPGRADE_GU...

[+] phoenixmatrix|10 years ago|reply
The community is pretty divided and es6 classes are fairly controversial. Don't be too surprised to see a lot of people avoid them. On purpose. And it's not because they aren't familiar with OOP.
[+] alexgaribay|10 years ago|reply
I've been creating an application with Meteor and React* and it has been pretty easy thus far. Although I'm not using the official Meteor-React package, it does a lot of the same things that the official package does. The unofficial package also uses a mixin to use with React classes.

*edit: Meant to say React instead of flux

[+] metaverse|10 years ago|reply
What advantages does a meteor+react setup have vs pouchdb+react (synced to couch in backend)? I would think, with meteor you get the backend rendering (for SEO), and with pouch you get a DB API on the fronted that's available offline.
[+] trcollinson|10 years ago|reply
I would say that the paradigms are a bit different between meteor+react and pouchdb+react. I can't say I am expert in either. I have never used pouchdb, but I am well versed in meteor.

If I understand correctly pouchdb is an in browser implementation of couchdb and some api's which allow the pouchdb to synchronize with a remote, server side couchdb. It is lightweight, allows for easy set up and integration, and really focuses on the database side of things.

Meteor has this same sort of functionality and one could easily say that Meteor and pouchdb could serve nearly the exact same purpose, with the key difference being that Meteor uses mongo as opposed to pouchdb's couchdb. However, Meteor is aiming to be more than an in browser database with remote server synchronization. It also has a robust server side api with many other built in tools and features. I guess I could list out some of them, but I would suggest instead that docs.meteor.com would do a better job at this (I am not trying to say read the docs, I am just saying, they are well laid out and will be more helpful than me!).

I guess I would say pouchdb is a minimalist solution for those who want to synchronize data from client to server and have an offline solution available. Meteor is a complete, and somewhat picky, client/server framework. Their functionality may intersect in some small areas but they both serve very different functional purposes.

[+] Lazare|10 years ago|reply
Meteor's story for backend rendering is the spiderable package, which works as follows: "When a spider requests an HTML snapshot of a page the Meteor server runs the client half of the application inside phantomjs, a headless browser, and returns the full HTML generated by the client code."

That's not really a good solution for all the obvious reasons. (Speed, resource usage, dependencies.) Plus, by that logic every client-side webapp supports being rendered on the server, so that's not even a meteor-specific advantage.

Conversely, React actually does supports true universal (aka isomorphic) apps; you can pre-render the app on the server using node (without needing a headless browser), ship it to the client, and rehydrate it. (Ember is working on shipping the same functionality under the name FastBoot.) Meteor doesn't have anything like that.

I'm sure meteor+react has some advantages over pouchdb+react, but it's not because of server side rendering. :)

(Well, as far as I know. I haven't been paying much attention to Meteor development, so it's possible the story has changed in the last few months. But last I checked, true server-side rendering was easy with react, but not really possible with meteor.)

[+] mwcampbell|10 years ago|reply
Will Meteor work with React Native? I'd guess so, since React Native implements XHR and other non-DOm APIs one might expect to find in a browser.
[+] drew-y|10 years ago|reply
They alluded to it here: http://info.meteor.com/blog/whats-coming-in-meteor-12-and-be...

>"Mobile advances. There are many exciting possibilities in the mobile build toolchain, from new technologies like React Native to a wide range of tooling opportunities relating to cross-platform building and debugging.

With your help, we'll have more to say about these over the coming months."

[+] estefan|10 years ago|reply
I made a toy project once shortly after meteor had just been released. I just kept bricking myself that I'd overlook some security setting that would allow people to run arbitrary queries against my DB. When I also looked into scaling I gave up.

Now with the way things have gone with an emphasis on mobile, most sites I'd want to make would be better written as REST-style app servers with pluggable clients.

[+] Siyfion|10 years ago|reply
Firstly, your concern about security is completely unfounded; Meteor only allows you to run queries against the database if you write specific ALLOW/DENY rules to let them through. Otherwise, all DB calls go through Meteor methods that are run both on the client (for optimistic updates) and on the server (in a controlled environment). So you let through whatever you choose to let through.

Secondly, Meteor has several modules that allow you to expose Meteor methods as a REST frontend, so it's a trivial change to get that functionality added in.

[+] zackify|10 years ago|reply
I would like to see this with es6 components
[+] Offler|10 years ago|reply
You mean web components? I'm not sure it's possible to pass in anything other then strings as values via their attribute changed callback. They simply aren't as well designed and powerful as React components.