React and Redux are the buzz words around the company as of writing this blog. Several teams has started using it for some internal projects and there are plans of testing the two technologies to replace some production projects.

The usual questions would be, Why use react and redux? what does it add to the current stack? How’s the learning curve?

This blog tends to document my personal quest on understanding these technologies and adding it on top of our current setup.

To start things up, React is one of the new front-end tools that you can add to meteor. To read more about it, check this link

Redux on the other hand is predictable state container for javascript projects that tends to blend well with react in terms of managing project states. I tend to think that redux makes things a bit tedious but thanks to this good read, It changed my perception quickly.

through out this blog, we would be writing a simple ecommerce site for selling videos. It would just be a few screens with item search, checkout, comment and buy. There would be an admin module that would run on a separate meteor instance. Communication would be via API through DDP or restivus.

To start, first download and install meteor. I’ll be using meteor version 1.3.3 for this walkthrough. Afterwards, let us start creating and setting up our project. Type the following on the command line.

 meteor create meteor-react-redux-101
 cd meteor-react-redux-101
 meteor npm install
 meteor

This would create the initial project, install the npm modules and then would run the application. Next step is to add our libraries/ to the project

meteor npm install --save react react-dom

After this, we need to quickly set up React on out project. Open main.html on your editor and replace the current contents with :

<head>
 <title>Shop</title>
</head>
<body>
 <div id="home-container"></div>
</body>

We should now create the jsx file that would serve as the entry point of our project. Rename client/main.js to client/main.jsx and replace the contents with the following :

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';

import App from '../imports/ui/components/App.jsx';

Meteor.startup(() => {
  render(<App />, document.getElementById('home-container'));
});

The js vs jsx extension might cause some confusion on your end, I tend to use jsx for files that has html or react related codes while I use js for files without it. The purpose is for easy viewing on the editor. I’m not that sure if It has other implications.

Now, create our first react component. Create a new file imports/ui/components/App.jsx then copy the codes below :

import React, {Component} from 'react';

export default class App extends Component {
    render () {
        return (
            <div>Hello world!</div>
        );
    }
}

Now go to localhost:3000 to check your site. You should be seeing Hello world!

What we did was, we installed the meteor setup, added the react modules and linked them all together. The next part of this chapter is more on creating react components and understanding the concept of states.

I’m coming as a php developer who had the same issues a few years back in choosing what framework to really master or use extensively. During that time, the choices were not as many as compared to the number of frameworks/library/tools for JS.

So, the fear of investing my precious time to learn/master a new tool is really there. Here’s a few things that i’ve considered prior to my decision of using meteor.

1. Lots of things needed to become a good meteor developer

While it is true that you just need the basic understanding of javascript and node to use meteor, but, you really need more than that. Javascript alone offers a wide variety of tools or libraries that does solve problems but, they tend to overshadow the javascript as a language. Do I need to learn jQuery? underscore maybe? should I write it using babel for me to learn ecma6 ahead? coffeescript maybe? Oh, and node is a different beast on top of that.

It seems very frustrating, but in reality it isn’t that bad. It boils down to just choosing which ones you would want to learn and use because most of them just does the same thing. On my end, I’ve stick with babel, node and plain JS( and meteor ofcourse). Plus, you would be probably using 20% max of the library specially node.

2. Meteor changes so fast

Not just meteor but javascript as a whole changes so fast. Better solutions to do a certain problem comes every other month or week maybe, displacing the current king of the hill. Take browserfy for example, I’ve just started learning/using it and after a month, guess what? hello webpack.

Meteor’s core might not change that fast but the community packages around it seems to be affected by how things go. I really like to use meteoric but the package is not on active maintenance anymore because of a possible shift in how hybrid would be handled in meteor.

On the most recent news, meteor would be stoping the development of blaze for react. It is a good move by MDG no doubt but still, it is a bit hard to let go of blaze.

This is actually one of my major turn offs before. The phasing in the javascript world is so fast. Back in my php days, it takes years for certain major changes.

But on the bright side. It aint that bad. Welcoming change is not that bad. Just don’t think on applying it on your production codes. I’ll stick with blaze and meteor 1.2 and would do baby prototype with the upcoming 1.3 while learning react.

3. MongoDB ?

And another tool that I need to learn. Sigh. Though, the difference is, i don’t want it. Relational is the way to go for me. We did try using meteor packages to use postgre and mysql but still end up using mongodb. Meteor is so tied to it like bacon and eggs. But, so far, it functions well.

There’s so much new alternatives though like graphQL and many more coming in 1.3 release.

4. Does meteor scale?

And the answer is… Yes, It does. Meteor is built on top of Node.js and MongoDB. Node is notoriously scalable — 1 million concurrent connections. The other proof is that node is used by big companies like paypal. So I guess, It really can scale. The question is how. I’ll learn that eventually.

Basically, that’s about the major questions that bugs me and took me quite a lot of research to answer on my own. More likely convince myself to dive in. 6 months into meteor/node/js thing now and so far I have no regrets. Just a few minor what ifs. I’ve wrote this blog for the sole purpose of reminding myself that I’ve chose to “really” learn meteor.