Getting a JS App Running With Meteor, React, and MongoDB
Having spent a few days on JavaScript, I was craving the framework that rails provided Ruby. After some minimal searching and a long salesy post via JS is sexy, I stumbled upon Meteor.js, an open-source JavaScript web framework that is based off Node.js. Meteor handles both server and client-side code and abstracts many parts of applications that are generally created manually.
Using their tutorial, I built up a simple Task Manager rather quickly by utilizing React for the front-end and MongoDB for the database. Needless to say, Meteor makes these integrations quite smooth.
Essentially, it takes 4 commands to get up and running with Meteor. The first command below in the terminal will create the basic application framework. The two NPM commands will install the necessary node and React modules for meteor to function properly. The meteor command will launch our server via the localhost.
meteor create mytodolist
meteor npm install
meteor
meteor npm install --save react react-domAnd boom, you can hot code push your heart out and the changes will occur faster than you can flip between text editor and browser; that is unless you’re on Flatiron’s wifi then it may take a few seconds.
Meteor uses JSX to parse all of the HTML files in your app folder and identify the <head>, <body>, and <template> tags (if any). Then it adds the data in your JSX according to those tags; very similar to a regular HTML file. There are few noticeable differences between the two: such as className vs Class or htmlFor vs for. JSX will actually compile directly into JS, compared to Angular. The template tags are quite similar to how Handlebars functions. I chose to stick with React while creating my app.
React is essentially just a library for rendering views; in others words it composes only the ‘V’ from our MVC. In order to generate React Components in my App class, we can set it up like this:
import React, { Component } from 'react';class App extends Component {
// awesome code here
}
View components are just subclasses of React.Component, which we can use to build out any methods we may need. They also come with certain methods with special functions, particularly render(). Render is used to get a description of the HTML that the current component should display. I added a loaded snippet below from my Task manager app using React’s createElement method in order to build out a form. Keep in mind that the below is actually in JS versus JSX. Babel has a solid repl for translating ES6 to JSX code.
While we’re at it, here’s another snippet for an example on methods created within a component. The first function handles the adding of items to the list. There is a naming convention that is suggested to differentiate between Component methods and methods that we create. Simply add an ‘_’ to it.
As you can see, we can handle DOM events by referencing a method on the component. Using ReactDOM.findDOMNode we can find the text field value using React’s ref that we added on to the props of that element.
Another interesting thing here is the insert function, which is storing the new task in our Tasks database. This is facilitated using MongoDB and is done as simply as:
import { Mongo } from 'meteor/mongo';export const Tasks = new Mongo.Collection('tasks');
On the server-side, this will set up a MongoDB collection called tasks; on the client-side, it will create a cache connected to this collection. Mongo has some helpful methods such as find(), which I used to sort and filter my list.
There is much more functionality that comes with Meteor and I have only scratched the surface. Perhaps I’ll follow this post up with some in depth functionality. The features that Meteor holds are quite vast. For example, Meteor is designed to work across iOS and Android as well. With just a few commands, you can turn the web app into mobile. Meteor also has a default UI engine called Blaze that facilitates the integration of a UI within a couple minutes.
Articles of interest:
