React Router vs Flow Router

I was just playing around with React Router and had a little bit of a hard time getting it to work in the app I was building. I still haven’t got it working… However, I was able to set up Flow Router and React Layout in about 30 seconds. This experience got me thinking about which router would be better to use… I don’t have any react experience aside from my little adventures with React + Meteor so I’d appreciate it if someone a little more experienced could opine on what router would be better to use with Meteor + React (or maybe the pros and cons of each)

7 Likes

I’m also a Meteor guy who started to use React. FlowRouter like routing makes me happy. May be that gets changed.

FlowRouter has a nice API specially targeted for Meteor apps. (with reactive API)
We are also working with SSR support. (May be we can add it for react-router too)

It may be pretty early. May be someone has a good React experience can answer better.

8 Likes

@arunoda Ya, I really like Flow Router type routing as well. It just seems cleaner and more straightforward than React Router. Great Job on the API!

I’m curious as to why @sashko chose React Router over Flow Router in the todos example app?

3 Likes

I would assume it was the consistency of doing it react way, as is the case with angular. But I also prefer flow router…

We’re going to add some routing examples to the guide, so that people can get started easily with either router without hitting speed bumps.

7 Likes

I came across this thread while trying to figure out what router package to use for a new project I’m working on. Just curious if anyone here has changed their minds since July? Flow router seems more intuitive to me, but I think that’s because it’s more in line with traditional routing packages. Thoughts?

I started with Flow Router because of this thread, and it was easier to get up and running with it, but I think that’s because of my Meteor experience. After investing some time into learning React Router, I now prefer it. It feel clearer to me, and the knowledge is also portable to other React projects.

2 Likes

+1 for React Router. If you are building a React App this is definitely the way to go.

2 Likes

What made you switch to React Router from Flow Router ?

I’ve never really used Flow Router. I have a big app in production that uses Iron Router (and Blaze) and I haven’t switched to Flow Router simply because I’ve never had any trouble with IR and don’t see a reason to switch. Other than that I’ve only used Flow Router for basic apps. I use React Router for all React apps that I make and it works great. It’s definitely the “react way” of doing things and you’ll find a lot more material on the best ways to use it.

Furthermore, I’ve started to move away from using Meteor as a backend for React apps. I’m putting my money on Elixir and the Phoenix Framework as the backend of the future. It’s the complete package whereas Meteor is missing a ton of basic things. For instance, routing and testing is baked right into Phoenix and it JUST WORKS unlike Meteor. It’s also insanely fast and powerful. The server responses are in the low microsecond range… One Phoenix server can also scale to millions of websocket connections. Check this article for more info http://www.phoenixframework.org/blog/the-road-to-2-million-websocket-connections

For all my new apps I’m looking at serving up a static React app with a CDN and then having it talk to a Phoenix API.

6 Likes

This is the first time I’ve heard of Phoenix, where could I find out more about using it with React?

here’s a good video explaining a simple chat app example, pheonix ships with a JS client API and they demonstrate connecting with it and the server side handling of messages https://youtu.be/WIyXz2wxnJQ?t=3m56s you could create a top-level react component that listens for messages and passes the data down as props to children

1 Like

I don’t know that there is much info on using it with React at the moment. I made a simple demo repo awhile back on using React/Redux with a Phoenix API. I hope to pump out some blog posts in the future that will make the way clearer for those looking to transition over to it. Here is a link to my example repo: https://github.com/ryanswapp/elixir-react-redux-example

Note: This repo uses React 0.13 so there may be slight modifications that are needed when switching to React Router 1.0 and React 0.14.

5 Likes
1 Like

Nice, looks really interesting! Quite off-topic, but what do you use Meteor for now? Just existing projects?
I’m not really interested in learning Elixir and Phoenix for my one app, as Meteor is great for that, but I always like to know what exists and is cool at the moment :wink:
Do you have a comparison somewhere?

A lot changed since july on that matter. Now you can use the react-router package and set it up as fast as FlowRouter.

Most people here seems to be choosing whatever they were already using. I think it is a sane approach to use whatever you are used to until it fits your needs. You are never really locked up with one or the other. They are actually quite easy to switch.

I personally use react-router because I was already used to using it before Meteor and the syntax feels simplier / lighter to me, but I also think FlowRouter is doing a great job.

Phoenix channels with RethinkDB atomic changefeeds seems to rival Meteor oplog processing.

I have an app in production that is built with Meteor. It’s built with Blaze, Iron Router, and the rest of the regular Meteor stack. It all works pretty well! However, once I started getting into Elixir and Phoenix I found it to be a much better development experience. I still like Meteor a lot and think its great. I just like learning new things and finding new tools for the toolbox and I think Elixir/Phoenix is an excellent tool. I don’t know of any point for point comparisons. Its one of those things where you have to try it to really understand the differences.

Can you comment on how mature the Elixir eco-system is with regards to functionality like authentication and deployment options?

The Elixir community is a lot different than the Meteor community. Meteor caters more to newer developers whereas the Elixir/Erlang community is more advanced focused. As a result, the community isn’t interested in providing accounts-password type packages for your app. There are a few authentication packages, but its still the early days and you’re better off rolling your own authentication system. Authentication in Phoenix is actually super easy to do yourself. It requires only a few lines of code. Deployment is fairly straight forward as well. There is a good guide for deploying to Heroku on the Phoenix website. If you’re interested in learning more I’d recommend spending time getting familiar with Elixir via the Programming Elixir book and then moving on to the Programming Phoenix book.

When I first began my journey into the world of Erlang/Elixir I found myself wishing that authentication was as simple as: meteor add accounts-password. However, I now prefer to write the authentication logic myself. The more I program the more I want control over the whole stack… haha. The good news is that writing your own auth logic is super simple given the functional nature of Phoenix. It’s hard to explain how much better functional programming is for web development. You just have to give it a try to see why.

2 Likes