Meteor & React

Meteor vs React?

Whats the difference?

50% Overlap?

Meteor vs React?

Whats the difference?

10% Overlap?

Meteor's Mission

Build apps that are a delight to use, faster than you ever thought possible

React's Mission

We built React to solve one problem: building large applications with data that changes over time.

How do we get started?

From the React Tutorial:

In order to start this tutorial, we're going to require a running server. 

Source:

https://facebook.github.io/react/docs/tutorial.html

How do we get started?

Building our Server (e.g Stack)

React

Node

DB

Express

Socket.IO

...

...

React

Meteor

Option #1:

Option #2:

Blaze

AngularJS

So What is Meteor Anyway

  • Full Stack JavaScript framework (true platform)
  • JavaScript on client & server
  • Built on top of Node and MongoDB
  • ES6 by default
  • Open Source
  • Cross Platform (Web & Mobile & Desktop)
  • Supported by a startup (with lots of funding) MDG

So What is Meteor Anyway

Meteor Components

  • Blaze , Angular, React
  • Web socket / DDP
  • Node
  • MongoDB
  • Atmosphere / NPM
  • ~125 Core Packages

NPM Packages!

  • ~199,047 Packages

Getting Started

Installing Meteor

curl https://install.meteor.com/ | sh

OS X / Linux

Windows

InstallMeteor.exe

Start Your First App

> meteor create demo
> cd demo
> meteor run
  • Client (Blaze engine)
  • Server (Node)
  • Web socket (SocketIO + DDP)
  • MongoDB

Meteor Structure

Other Folders

  • Client​
  • Server
  • Public
  • Private
  • Lib
  • Packages

Initial Structure

  • demo.html
  • demo.js
  • demo.css

Adding React

meteor add react

Removing Blaze

meteor remove blaze-html-templates

You guessed it right, this works! :-) 
meteor add angular

Adding React Component

<body>
  <div id="render-target"></div>
</body>
if (Meteor.isClient) {
  // This code is executed on the client only
 
  Meteor.startup(function () {
    // Use Meteor.startup to render the component after the page is ready
    React.render(<App />, document.getElementById("render-target"));
  });
}

Adding React Component

// App component - represents the whole app
App = React.createClass({
  getTasks() {
    return [
      { _id: 1, text: "This is task 1" },
    ];
  },
  renderTasks() {
    return this.getTasks().map((task) => {
      return <Task key={task._id} task={task} />;
    });
  },
  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>
        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
});

Introducing Collections

myCollection = new Mongo.Collection('mycollection');

myCollection.insert({names: 'my name'});

Deploying a Meteor App

> meteor deploy my-app.meteor.com

Prove It!!!

Demo Time!

Bonus:

What about out mobile app?

Packages added

  • react / angularjs
  • react-meteor-data
  •  

Packages removed

  • blaze-html-templates
  • jQuery ( WTF!!!)

Create iOS App

> meteor add-platform ios
> meteor run --mobile-server <IP/cname> ios-device

Create Android App

> meteor install-sdk android
# Install Java (web install)
# Install Emulator (web install)
> meteor add-platform android
> meteor run --mobile-server <IP/cname> android-device

Can I Build Native Apps?

YES! - Connect over DDP

  • iOS
    • https://github.com/boundsj/ObjectiveDDP
  • Android
    • https://github.com/kenyee/android-ddp-client

Questions?!

Copy of Meteor & React

By kevohagan

Source: skifaster

Copy of Meteor & React

  • 1,340

More from kevohagan