The number of JavaScript frameworks these days has become mind-numbing. Back-end frameworks, front-end frameworks, isometric frameworks that do both at once. As a less experienced programmer, moving into the web-app world can be a daunting task. Where to begin? What is the most efficient path to take?

Using these frameworks in a mobile context can get even worse, as the hardware limitations of mobile coupled with a quickly evolving tech landscape and development costs can scare even the most experienced programmers.

I believe that simplicity should be the number one priority in choosing JavaScript frameworks for a project, particularly in terms of mobile. It allows for scalability, security, and testability while leaving a lighter footprint. There are a few frameworks that do this, but I have fallen in love with two in particular: Meteor and React Native.

React Native

I’m guessing you have at least heard of React, Facebook’s front-end JS framework that is currently surging in popularity. React is fantastically simple, based on the idea that your UI should be built in small, reusable components that can be written once and placed anywhere you need them. In the web version of React, this is done by creating a “virtual DOM,” meaning that your static HTML has now been replaced by dynamic JavaScript rendering the elements.

Facebook has now released a version of this for mobile devices called React Native. Unlike HTML5 frameworks such as Cordova or Ionic, which depend on a WebView and standard HTML and JS to create the app, React Native renders the native platform widgets. This means you get the look, feel, and speed of a native UI without the awkward sluggishness of an HTML5 app. Much of React Native’s components can be used in both iOS and Android without having to rewrite code, drastically reducing potential dev time.

React doesn’t deal at all with fetching data, though; it’s pure UI and therefore you need some other way to provide the data. That’s where Meteor comes in.

Meteor

Meteor is an isometric app platform, which means that it uses JS on the front-end, as well as on the backend in the form of Node.js. The goal of Meteor was to provide a simple solution for creating a complete web stack. With a few lines in the Terminal, you can have a full-blown web app running in a few minutes, complete with a MongoDB instance.

Meteor has quite a bit of “magic” that I won’t go into here, but personally, I love it for two reasons: reactivity and a cloned database on the client. To put it simply, Meteor allows you to create a smaller version of the Mongo database on the client with a subset of your data that you can access and modify through Mongo’s simple API. It then uses DDP to continually talk to the server, making sure that the data on the client is lined up with the larger database. What this allows for is instantaneous changes for the users, with these changes getting verified by the server.

What better to work with Meteor on mobile than a robust native JavaScript framework designed around reactivity?

Meteor App

We’re going to build a super simple Meteor/React Native app to demonstrate their abilities. I’m going to skip some of the best practices for the sake of simplicity, but please check out the Meteor and React Native documentation.

First, download Meteor in the Terminal with this:

[code]]czozNzpcImN1cmwgaHR0cHM6Ly9pbnN0YWxsLm1ldGVvci5jb20vIHwgc2hcIjt7WyYqJl19[[/code] And then run:

[code]]czo0NzpcIm1ldGVvciBjcmVhdGUgcmVhY3QtZGVtbw0KY2QgcmVhY3QtZGVtbw0KbWV0ZW9yXCI7e1smKiZdfQ==[[/code]

Head over to localhost:3000 in your browser and you should see a running Meteor app!

We’ll need to modify some of the code for our mobile demo, so open up the react-demo folder in your favorite editor. We’ll borrow some of our code from Meteor’s tutorials.

First, go into your client/main.html file and remove everything except for the head tag.

Then, create a top-level “imports” folder, and within that create an “api” and a “ui” folder.

Head into the imports/API folder and create a “tasks.js” file.

[code]]czo5MDpcImltcG9ydCB7IE1vbmdvIH0gZnJvbSBcJ21ldGVvci9tb25nb1wnOw0KZXhwb3J0IGNvbnN0IFRhc2tzID0gbmV3IE1vbmdvLntbJiomXX1Db2xsZWN0aW9uKFwndGFza3NcJyk7XCI7e1smKiZdfQ==[[/code]

Move over to server/main.js and add:

[code]]czozMzpcImltcG9ydCBcJy4uL2ltcG9ydHMvYXBpL3Rhc2tzLmpzXCc7XCI7e1smKiZdfQ==[[/code]

Then head to the imports/ui folder and create “body.js” and “body.html” files. In the body.js file add:

[code]]czo0NTpcImltcG9ydCB7IFRlbXBsYXRlIH0gZnJvbSBcJ21ldGVvci90ZW1wbGF0aW5nXCc7XCI7e1smKiZdfQ==[[/code]

import { Tasks } from ‘../api/tasks.js’;

import ‘./body.html’;

Template.body.helpers({
tasks() {
return Tasks.find({});
},
});

And in the body.html file add:

[code]]czowOlwiXCI7e1smKiZdfQ==[[/code]

Todo List

    • {{#each tasks}}
    • {{> task}}
    {{/each}}

 

 

  • {{text}}

 

And finally go into the client/main.js file, remove the code, and add this:

[code]]czozMTpcImltcG9ydCBcJy4uL2ltcG9ydHMvdWkvYm9keS5qc1wnO1wiO3tbJiomXX0=[[/code]

Now, with your app running, open up a new terminal window, move into the reactdemo directory, and run:

[code]]czoxMjpcIm1ldGVvciBtb25nb1wiO3tbJiomXX0=[[/code]

This gives you access to the MongoDB shell. Through here you can insert, update, and remove data. Go to localhost:3000 in your browser and in the terminal run:

[code]]czo3MDpcImRiLnRhc2tzLmluc2VydCh7IHRleHQ6IOKAnFRha2Ugb3V0IHRyYXNoLCBjcmVhdGVkQXQ6IG5ldyBEYXRlKCkgfSk7DQp7WyYqJl19XCI7e1smKiZdfQ==[[/code]

You should see your task show up in the browser! Run it a few more times to see how Meteor dynamically adds templates with data. Pretty cool, huh?

React Native App

Ok, now we need to get our React Native app up and running. Setting up RN can be a bit more complicated than Meteor, so if you have issues head over to the React Native page. You’ll also need Xcode installed.

If you haven’t installed them already, install Node and Watchman:

[code]]czo0MDpcImJyZXcgaW5zdGFsbCBub2RlDQpicmV3IGluc3RhbGwgd2F0Y2htYW5cIjt7WyYqJl19[[/code]

And then use npm to install the RN cli:

[code]]czozMTpcIm5wbSBpbnN0YWxsIC1nIHJlYWN0LW5hdGl2ZS1jbGlcIjt7WyYqJl19[[/code]

Then create your project and run it:

[code]]czo3NTpcInJlYWN0LW5hdGl2ZSBpbml0IE1ldGVvclJlYWN0RGVtbw0KY2QgTWV0ZW9yUmVhY3REZW1vDQpyZWFjdC1uYXRpdmUgcnV7WyYqJl19bi1pb3NcIjt7WyYqJl19[[/code]

A running React Native app should pop up in the iOS emulator!

Together

Theo Mathieu has created a fantastic package to marry React Native and Meteor together. It makes connecting the two amazingly easy, and he has done a wonderful job.

Install the react-native-meteor package in your RN app’s directory:

[code]]czoyNTpcIm5wbSBpIHJlYWN0LW5hdGl2ZS1tZXRlb3JcIjt7WyYqJl19[[/code]

And head into your index.ios.js file. Replace everything in it with this:
[code]]czoxODQ6XCINCmltcG9ydCBSZWFjdCwgeyBDb21wb25lbnQgfSBmcm9tIFwncmVhY3RcJzsNCmltcG9ydCB7DQpUZXh0LA0KVmlldywNCntbJiomXX1BcHBSZWdpc3RyeQ0KfSBmcm9tIFwncmVhY3QtbmF0aXZlXCc7DQppbXBvcnQgTWV0ZW9yLCB7IGNyZWF0ZUNvbnRhaW5lciwgTWV0ZW97WyYqJl19ckxpc3RWaWV3IH0gZnJvbSBcJ3JlYWN0LW5hdGl2ZS1tZXRlb3JcJztcIjt7WyYqJl19[[/code]

Meteor.connect(‘ws://192.168.X.XXX:3000/websocket’);

class MeteorReactDemo extends Component {
renderRow(task) {
return (
{task.text}
);
}

render() {
const { tasksReady } = this.props;
return (

Title
{!tasksReady && Not Ready}

 

);
}
}

export default createContainer( params => {
const handle = Meteor.subscribe(‘tasks’);
return {
tasksReady: handle.ready()
};
}, MeteorReactDemo);

AppRegistry.registerComponent(‘MeteorReactDemo’, () => MeteorReactDemo);

I’ll let you dig into how React Native components work on your own, but there are a few things to note:

[code]]czo1NDpcIk1ldGVvci5jb25uZWN0KFwnd3M6Ly8xOTIuMTY4LlguWFhYOjMwMDAvd2Vic29ja2V0XCcpOw0KXCI7e1smKiZdfQ==[[/code]

This connects to your running Meteor server. Obviously swap out the X’s with your actual IP.

[code]]czowOlwiXCI7e1smKiZdfQ==[[/code]

This differs from the regular ListView in that it does not need a datasource.

[code]]czoxNTM6XCJleHBvcnQgZGVmYXVsdCBjcmVhdGVDb250YWluZXIoIHBhcmFtcyA9Jmd0OyB7DQpjb25zdCBoYW5kbGUgPSBNZXRlb3J7WyYqJl19LnN1YnNjcmliZShcJ3Rhc2tzXCcpOw0KcmV0dXJuIHsNCnRhc2tzUmVhZHk6IGhhbmRsZS5yZWFkeSgpDQp9Ow0KfSwgTWV0ZW9yUmVhe1smKiZdfWN0RGVtbyk7XCI7e1smKiZdfQ==[[/code]

This is how Meteor connects its reactive data to both React and React Native’s UI. Note that Meteor uses the exact same method for React in the browser as it does on mobile. The amount of interchangeability is fantastic.

When you’re ready, save your index.ios.js file and hit Command+R with the iOS simulator selected. Voila! You should now see an app running with your Tasks you inserted into Meteor earlier. Head back into that Terminal window and insert a few more. You should see them pop up instantly.

And there you go, a super simple Meteor + React Native application. There is much, much more to dig into with both frameworks, but I hope this piques your interest.


Related Posts

Robert Ramsey

Robert Ramsey

Robert is a developer with experience in ASP.NET, Android, and front-end web development. He loves food probably a bit more than he should. Robert graduated from Hillsdale College in Michigan with a BA in History and Political Economy. Favorite food: In-n-Out Hamburgers