Thanks @sacha. Has a lot changed since you made them?
Also, can I use Flow Router and Iron Router on the same project (Flow for React and Iron for Blaze) or will there be conflicts?
I don’t think that much has changed, although now I use React Router instead of Flow. I wouldn’t recommend mixing both router though, I don’t think that would work.
Thank you for the advice. It seems Flow Router is client side only? I need a router that has server side hooks too.
Why do you now use React Router (is it because Flow Router is no longer maintained)?
You can use Picker on the server:
And yeah, I don’t think Flow Router will be maintained forever. React Router has a much bigger community.
2 Likes
Will React Router work with Blaze too? I use Iron Router ATM and I can’t get rid of my Blaze stuff just yet.
Why are you making the switch now? If your app is working, postpone the switch for when you have money to hire someone to do it. Shortest path to $$$ 
is what matters.
1 Like
Yes, I also find it’s always better to postpone any technological evolutions until the absolutely last minute, when you’re desperate and everything is broken 
I don’t think React Router will work with Blaze though. I think using FlowRouter (or even just Iron Router but in a non-Iron-Router-y manner) as a middle step is fine though.
-
Meteor and MDG is moving away from Blaze. Without official support, it creates risk to my company to stay.
-
I haven’t seen much of any MDG-independent community contributions towards Blaze (granted being able to do so only recently). I’ve only seen a few champions of Blaze so far, and I can’t be certain what direction Blaze will take.
-
No one outside of Meteor uses Blaze, and within the Meteor community, the Blaze install base is shrinking by the month (mainly in favor of React). It seems logical to conclude Blaze community support will diminish over time.
-
Meanwhile, it seems like the entire industry to adopting React as the go-to UI framework (including MDG). Just looking at the React community for a short time now, I can see huge momentum, support and tooling.
It makes sense for me to hedge my bets and at least start to migrate now, while there are devs in the community migrating off of Blaze too, devs that might want to help me. And for the why, well for the many reasons that revolve around the points mentioned above (and probably much more).
So migrate to FlowRouter for client side routing and Picker for server side routing to start off – got it. This will allow me to migrate to React. Then, afterwards, I can see about migrating to React Router.
@sacha, fear mongering doesn’t help anyone. I held back replying in the past, but feel it’s hurting others not to answer these wrong statements.
- More than half surveyed meteor devs (on this forum) were still using blaze. Technology does not get obsoleted over night. This is what experience tells us - you know, white hair of experience and wisdom
- React is one of many UI frameworks - I am happy you and MDG like it - but, one of many
- Meteor is changing forever, Apollo is taking over and MDG engineers are moving onto it. Meteor will see little investment in UI, routers, states etc. Data is the new game in town.
- We are about to announce a fork of / update to meteor which completely replaces mongo with rethinkdb – real scalable reactivity. As part of this, we plan on being part of / funding maintenance of blaze / Vue / viewmodel
- We can swap blaze with React / Vue / viewmodel / ember any time, it’s a small effort if the app view layer is properly modularized
Finally, and most important (again experience speaking)
-6. This is a business decision as much as it is a technical one. Money first, tech second. Tech is ALWAYS changing, it’s like chasing a rainbow … unless one is an hourly labor peddling latest and greatest with no regard for commercial viability of a project.
1 Like
Simply, will this decision speed up your profitability? I am not against one framework vs other. I just don’t like fear mongering.
Who’s fear-mongering?? I feel like I’m just stating the fairly obvious fact that if you’re planning on migrating away from Iron Router and Blaze at some point (which you should, since they are currently not being maintained or worked on as far as I know, and better alternatives exist), it’s better to do it when you still have some breathing room than once everything starts to break.
I’m sure @aadams will be glad to know it’s just a “small effort”…
- Iron Router is definitely a goner.
- “Small effort” – you are confusing learning curve with actual work. An experienced dev can swap out UI if the app is properly designed.
- “once everything starts to break.” Care to share an example? Everything is a strong word, relativity is an important concept. Nothing is broken over here. Again, React for meteor is maintained by the community. In fact, other than Data, everything will soon get maintained by the community.
The only real risk is Apollo, if you intend on embarking on that.
1 Like
I’d like to start on React components, but I’m on Iron Router and Blaze ATM. Is there a way to incorporate React Router and incorporate blaze-layout for my Blaze templates on the client? I’d rather not do Flow Router, then go to React Router. Also, for a time, I’d like to have Blaze Templates and React components in the same project – I don’t want to mix React into Blaze templates – I just want them to be able to have one route be a Blaze template and the next a React “page”.
Also, I’m going to use picker for server side routes since no solution but Iron Router supports server side.
I’m confused what combinations will achieve what I need:
flow-router
blaze-layout
meteor-react-layout
Picker for Server side Render
react-router
react-mounter
So far:
- I mode all my subscriptions into Blaze templates.
- I removed Iron Router and Added:
- meteorhacks:picker,
- kadira:flow-router,
- kadira:blaze-layout,
- arillo:flow-router-helpers.
- I changed a lot of layout and links
- I converted all but on server side routes to methods
So far so good.
The only issue I’m now having is with my one server side route I can’t get rid of – my paypal route. And this is where I’m having an issue.
Specifically once I converted my Iron Router route to a Picker route I get an error.
Here’s the Iron Router code that worked:
Router.route('/pp', function (req, res) {
var params = req.body || {};
// STEP 1: read POST data
// Must respond to PayPal IPN request with an empty 200 first
req.statusCode = 200;
res.end('OK');
// Step 2: POST IPN data back to PayPal to validate
Transactions.verify_org(params, {'allow_sandbox': false}, function callback(err, mes) {
if (err) {
console.log(err);
}
else {
if (params.payment_status == 'Completed') {
Fiber(function () {
if (params.payment_status === 'Completed') {
// can run this meteor call because it's inside a fiber
// do stuff with params
}
}
}).run();
}
}
});
}, {where: 'server'});
This is the first version of the Picker.route that doesn’t work. I basically just took what I had in IR.
if (Meteor.isServer) {
Picker.route('/pp', function (params, req, res, next) {
var params = req.body || {};
req.statusCode = 200;
res.end('OK');
Transactions.verify_org(params, {'allow_sandbox': false}, function callback(err, mes) {
if (err) console.log(err);
else {
if (params.payment_status == 'Completed') {
Fiber(function () {
// do stuff with params
}).run();
}
}
});
});
}
With the above I get the following error:
Posting back to paypal
[Error: IPN Verification status: INVALID]
After switching from Iron Router to Picker, my solution for PayPal IPN verifications no longer worked. But this post on SO has the answer if you’re using Picker & IR.
Now that I’ve migrated my router, I think I can finally take my first crack at React.
One thing I’d like to understand is, with Flow Router, why do I get this extra /#!/ before all my routes? For example in IR I would have a route name /come-here. I the url bar it would look like this ‘mywebsite.com/come-here’. But in Flow Router its like this 'mywebsite.com/#!/come-here instead. I can’t find reference to this in the docs.
Also where can I find a good primer on how imports work within Meteor? For example, right now I have no imports in any of my files. But it seems from the Meteor docs I should move to have all my file with imports. Why do things work without imports and why should I add in imports?
Files in your /imports or /packages directories are not imported automatically. Everything else is. I think that’s basically what you need to know. In other words, if you want to use imports you’d move your code to the imports directory.
The short answer to “why should I use imports?” is “because smart people say it’s better”. But you don’t have to, for example for Telescope it took me a while before finally getting rid of all globals, even after switching to React.
Just to test out a small section:
Will someone please help me on this one? I’m on Meteor 1.3.5.1. I installed:
npm install --save react react-dom
meteor add react-template-helper
This should be all I need to get started right?
I created a folder for my react components, and I’m also showing where the target template is located in relation in case it matters somehow with imports:
\app
\client
\react
\components
hello.jsx
\views
\messages
messages-helpers.js
messages.html
In my hello.jsx file. In the official Meteor guide, there is no example I could find where it showed the actual component definition that was added to a Blaze template, so I took this from an example further up the page.
import React from 'react';
export default class HelloWorld extends React.Component {
render() {
return (
<h1>Hello World</h1>
);
}
}
Relevant code within the Blaze helper. Here, I do not have ANY import in any helpers so far. This is the first as I’m just following the Meteor guide. Do I actually need the import { Template }?
import { Template } from 'meteor/templating';
import './messages.html';
import HelloWorld from './react/components/hello.jsx';
Template.messages.helpers({
HelloWorld() {
return HelloWorld;
},
...
And messages.html.
<template name="messages">
...
<li>
{{> React component=HelloWorld}}
</li>
...
I have added the id=“app” in to my body’s HTML somewhere. I really don’t know if I need this or what this means actually.
<body>
...
{{> meteorStatus showLink=false}}
{{> sAlert}}
<div id="app"></div>
</body>
It’s not working. I don’t get any errors. Just nothing renders.
Any help or pointers are appreciated!