Tell us about yourself
The Room Today
Wifi:
Code Fellows Guest / guest2014
Announcing Official React Support
Whats the difference?
Complete Overlap?
Whats the difference?
50% Overlap?
Whats the difference?
10% Overlap?
Build apps that are a delight to use, faster than you ever thought possible
We built React to solve one problem: building large applications with data that changes over time.
Build something ...
Uber of xxxxx
An app to xxxxx
Trello for xxxx
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
Building our Server (e.g Stack)
React
Node
DB
Express
Socket.IO
...
...
React
Meteor
Option #1:
Option #2:
curl https://install.meteor.com/ | sh
OS X / Linux
Windows
InstallMeteor.exe
> meteor create my-app
> cd my-app
> meteor run
Other Folders
Initial Structure
if(Meteor.isClient) {
/*
Add my JS code here
*/
}
if(Meteor.isServer) {
/*
Add my JS code here
*/
}
meteor add react
<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"));
});
}
// 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>
);
}
});
myCollection = new Mongo.Collection('mycollection');
myCollection.insert({names: 'my name'});
> meteor deploy my-app.meteor.com
> meteor add-platform ios
> meteor run --mobile-server <IP/cname> ios-device
> meteor install-sdk android
# Install Java (web install)
# Install Emulator (web install)
> meteor add-platform android
> meteor run --mobile-server <IP/cname> android-device
YES! - Connect over DDP
Join In: https://80469fa6.ngrok.io
Meteor's greatest win is JavaScript everywhere: client, server,
database. Our team is all de facto full-stack developers.
Adam Monsen - Head of Engineering
Meteor has allowed us to reduce code needed by 4-10x over conventional techniques. Thanks to the in browser replicated DB, client side code has greatly reduced complexity, is mostly free from locking and is very reactive to user input. This makes it much faster to port our existing legacy applications to the web. As and example, in our legacy program it takes on average 100-200 lines to query the db, serialize and transmit it to the client, then bind that data on the dropdown and then report back to the server the users choice. In Meteor, its <10 lines, a DB query for the content, and a db update for the users choice
Nick Burrows - Coolearth Software
Our original app, which was a hybrid app that only worked on iOS, took more than 15 months to build, was still not complete, and was buggy and difficult to maintain. The new app was built from scratch using Meteor in less than 6 months, has significantly more functionality than the original, supports Android & iOS and is much easier to maintain.
Bryan Terrell - FlyBuy
http://seattle.meteor.com/
http://www.meetup.com/Meteor-Seattle/
Slack (send request to skifaster@gmail.com)
Contact Info