From Blaze to React (New Video Series)

announce
1

I want to port the app we use to host Discover Meteor from its current stack (Iron Router + Blaze) to a more modern one (FlowRouter + React), and I’ve decided to document the whole process along the way through a series of screencasts:

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

Rather than one big refactor, the idea is to go step by step, switching out one brick at a time but leaving the app in a functional state each time.

So I’ll go from route-level subscriptions to template-level subscriptions, from Iron Router to FlowRouter, and only then from Blaze to React (and who knows, maybe keep going towards modules and webpack).

I’ll also do my best to stick to the principles outlined by the Meteor Guide. Let me know what you think, and I hope you all join along for the ride!

29 Likes
2

Dude this sounds totally awesome. Let me know if something in the guide doesn’t make any sense!

1 Like
3

This is amazing @sacha! Please let the community know if there’s any way we can help somehow.

Also, it seems like there’s going to be a lot of change in 1.3, are you going to wait?

Thank you!

4

Superb! So we can have a newer version of DM soon right ?

1 Like
5

You can help by sharing and commenting! And I’m not going to wait, since I’m doing these changes incrementally I have to bring the app up to pre-1.3 standards first anyway.

Haha… We definitely want to update DM too, but it’s a lot more work. So I thought I’d get started on this series first and give it away for free to tide people over until we have time for a proper DM update : )

2 Likes
6

@sacha are you going to migrate Telescope to React? I imagine that it will be even more work than for the others large Blaze applications given that you have a lot of third-parties customizations that assumed the presence of Blaze in one way or the other.

1 Like
7

Yeah, for that reason right now I don’t really have any plans to migrate it. I’ll probably wait and see what the story with Blaze 2.0 and the migration path becomes.

And even so I’m not sure I’ll do it unless the migration is a real community effort, honestly it feels like a huge workload to take on just by myself…

8

Part 4 is up:

https://www.discovermeteor.com/blog/blaze-to-react-04-layouts-redirects/

It’s all about how to do redirects and layouts (hint: not in the router!)

3 Likes
9

Based on recent posts by MDG, I don’t think Blaze 2.0 is happening:

10

Well, we’ll see… Either way, I’ll wait and see how things shake out!

1 Like
11

Episode 5: managing template state (in Blaze): https://www.discovermeteor.com/blog/blaze-to-react-05-template-state/

3 Likes
12

@sacha This is amazing work, it’s so useful to have a curated path through the process. I just don’t have the time to investigate all the oh-my-god-so-many choices out there. I’m pleased to have someone making sensible, opinionated choices. Thank you.

13

This video series is just great! Watched your episodes yesterday and I really liked them.

I am especially looking forward to the chapters where you actually do the migration vom Blaze to React (I’m already on FlowRouter, yet I still profited from your idea to manage layouts using template helpers).

1 Like
14

I’m definitely going to watch it. I purchased the DM course and I’ve nearly given up on Meteor because I can’t figure out routing with Iron Router, nor can I figure out how to write a RESTful application. I’m also worried that React is taking over right now, so glad to see you’re going to work on this!

I’ve got a couple of projects that I started and feel I was a bit disillusioned by the “magic” of Meteor as every time I try to do something, I find I need yet another package of some sort… :frowning:

15

@sacha Is there some updated information on how to build the app in your Discover Meteor book using flow router instead of iron router? I’m not quite ready for react, I just think I need a different router.

16

Well, the idea is that once you’ve completed Discover Meteor you can take a look at this series to see how to make the switch to FR.

17

Yeah, been going through the book and I’m so confused with Flow Router! Either I’m dense (most likely) or it’s much harder than it should be and I’m not finding any good tutorials for it online. What would be helpful even would be a simple application that demonstrates the full basic CRUD actions.

For example, I have been able to get it to show a list of records from my collection, and I am now able to add a record to the collection, but I cannot figure out how to EDIT a record in my collection.

In my routes.js, I have:

FlowRouter.route(’/artistEdit/:artistId’, {
action: function(params, queryParams) {
console.log(params);
Artists.findOne(params.artistId);
BlazeLayout.render(“layout”, {content: “artistEdit”});
}
});

I can see the parameters being passed (the artist id), and I can render the layout, but the layout’s fields remain empty rather than displaying the data from the record (the artist info). I also cannot figure out how to get the dropdown to pre-select the item from the data.

The sample code in the docs leave out some of the most important things and just have comments after they show console logs.

Any help or pointers where to get more details (easy) instructions to make this work would be appreciated! Yes, I’m a noob, but very interested in learning to be a great meteor developer.

18

@sacha thank you very much for great Meteor resources! One question - are you considering updating the book (app) to Meteor + React + FlowRouter ? (which might seem like best option atm - at least from what I am reading) ?

And thank you again for great “Blaze to React” series!
Best regards
Tom

19

FlowRouter only handles routing, it doesn’t set the data context. You do that in your template. I’d suggest going through the FlowRouter documentation and the various MeteorHacks guides.

1 Like
20

You can also read about data loading in the Meteor Guide:

1 Like