Welcome!

Tell us about yourself

http://bit.ly/1MhdUCs

The Room Today

Wifi:

Code Fellows Guest / guest2014

Meteor & React

Announcing Official React Support

Meteor vs React?

Whats the difference?

Complete Overlap?

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.

Our Mission

Build something ...

Uber of xxxxx

An app to xxxxx

Trello for xxxx

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:

So What is Meteor Anyway

  • Full Stack JavaScript framework (true platform)
  • JavaScript on client & server
  • Built on top of Node and MongoDB
  • Open Source
  • Cross Platform (Web & Mobile)

Meteor Compontents

  • Blaze / Spacebars
  • Web socket / DDP
  • Node
  • MongoDB
  • Atmosphere / NPM
  • ~125 Core Packages

Community Packages

  • jQuery UI
  • Moment
  • Bootstrap
  • Materialize
  • Polymer
  • ~8247 Packages

NPM Packages!

  • ~199,047 Packages

Questions?!

Getting Started

Installing Meteor

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

OS X / Linux

Windows

InstallMeteor.exe

Start Your First App

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

Meteor Structure

Other Folders

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

Initial Structure

  • my-app.html
  • my-app.js
  • my-app.css

JS: Introducing Client / Server

if(Meteor.isClient) {
    /*
        Add my JS code here
    */
}

if(Meteor.isServer) {
    /*
        Add my JS code here
    */
}

Adding React

meteor add react

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?

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?!

Demo: Join In

Join In: https://80469fa6.ngrok.io

Local Companies Using Meteor Today

C-SATS Inc.

Meteor's greatest win is JavaScript everywhere: client, server,
database. Our team is all de facto full-stack developers.

 

Adam Monsen - Head of Engineering

Coolearth Software

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

FlyBuy

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

Questions?!

Upcoming Events

  • Meteor 101: Building a Chat App in 60 Mins - Nov 23rd, 2015
  • Meteor & Angular - Dec 10th, 2015
  • Meteor & 3rd Party APIs - 2016
  • Meteor Seattle - Demo Day - 2016

http://seattle.meteor.com/

http://www.meetup.com/Meteor-Seattle/

Slack (send request to skifaster@gmail.com)

Contact Info

Meteor & React

By skifaster

Made with Slides.com

Meteor & React

  • 2,199

More from skifaster