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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/101705/images/2063011/Screen_Shot_2015-12-12_at_16.00.01.png)
Meteor Components
- Blaze , Angular, React
- Web socket / DDP
- Node
- MongoDB
- Atmosphere / NPM
![](https://s3.amazonaws.com/media-p.slid.es/uploads/347461/images/1526793/asdf.png)
- ~125 Core Packages
NPM Packages!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/347461/images/1526847/we23.png)
- ~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
Copy of Meteor & React
- 1,340