Meteor

🍱Framework

javascript

outdated

New App - First steps

meteor create

start server

meteor

React

meteor add react

basic html file must contain

<body>
  <div id="render-target"></div>
</body>

Use packages (templates) with React

Write Wrapper Component (here: AccountsUIWrapper.jsx), here with data:

AccountsUIWrapper = React.createClass({
  componentDidMount() {
    // Use Meteor Blaze to render login buttons
    // this.view = Blaze.render(Template.loginButtons,
      // React.findDOMNode(this.refs.container));
    this.view = Blaze.renderWithData(Template.loginButtons, {
        align: "right"
    }, React.findDOMNode(this.refs.container));
  },
  componentWillUnmount() {
    // Clean up Blaze view
    Blaze.remove(this.view);
  },
  render() {
    // Just render a placeholder container that will be filled in
    return <span ref="container" />;
  }
});

or without data:

this.view = Blaze.render(Template.loginButtons,
	React.findDOMNode(this.refs.container));

Other tipps

See simple-todos-react project

Use ReactDOM instead of React in setting up Client.

Meteor.startup(function () {
    // Use Meteor.startup to render the component after the page is ready
    ReactDOM.render(<App />, document.getElementById("render-target"));
  });

If you have templates as html files, use Blaze Templates as React Comonents with the 4commerce:blaze-as-react package.

Addition resources

React-in-meteor homepage

Rapid Prototyping vs. secure & auto-publish

Make app secure: Direct requests to database are not possible from Client. Requests have to be made via methods.

meteor remove insecure
meteor remove autopublish

mongo db database

MONGODB MANUAL

Access database

$ meteor mongo
> db.tasks.insert({ text: "Hello world!", createdAt: new Date() });

Delete all tables in the database of the project

$ meteor reset

Reactive Joins In Meteor

Database queries with react

mixins: [ReactMeteorData],

getMeteorData() { ... }

Spacebars

Handlebars Extension for Meteor Understanding Spacebars

Promises

Meteor.promise

HTTP requests

Add HTTP package
```
$ meteor add http
```

Define HTTP Call on Server

  Meteor.methods({
    callAlchemy: function(apikey, image_url) {
      this.unblock();
      return Meteor.http.call(
          "GET",
          "http://gateway-a.watsonplatform.net/calls/url/URLGetRankedImageKeywords",
          { params: {
            "apikey": apikey,
            "url": image_url,
            "outputMode": "json"
          }}
      );
    }
  });

Invoke the HTTP call with callback on client

//invoke the server method
Meteor.call("callAlchemy", apikey, image_url, function(error, results) {
  console.log(results.data);
});

Publishing data from an external API

Publishing data from an external API

Routing

Add package
```
$ meteor add iron:router
```
Read guide

Iron router Guide
Watch video

Building Large Scalable Realtime Applications With Meteor

Mobile

xcode and Android SDK Platform API 22 (5.5.1) has to be installed manually (because Cordova requires that version).

I installed it in the homebrew version of Android SDK tools. The Android SDK manager can be opened with: /usr/local/Cellar/android-sdk/24.4.1_1/bin/android, not the one opened via Android Studio/Configurations.

Run on simulators (Android does not work yet.. TODO: try genymotion)

meteor add-platform ios
meteor run ios

meteor add-platform android
meteor run android

Run on device

meteor run android-device
meteor run ios-device

Run on mobile server

meteor run android-device --mobile-server my_app_name.meteor.com
meteor run ios-device --mobile-server my_app_name.meteor.com

These commands are not needed anymore:

meteor install-sdk ios
meteor install-sdk android

User accounts

Add user-accounts functionality

meteor add accounts-ui accounts-password
// or
meteor add accounts-ui accounts-facebook
meteor add accounts-ui accounts-google
meteor add accounts-ui accounts-twitter

Wrap a Blaze component in React

AccountsUIWrapper = React.createClass({
  componentDidMount() {
    // Use Meteor Blaze to render login buttons
    this.view = Blaze.render(Template.loginButtons,
      React.findDOMNode(this.refs.container));
  },
  componentWillUnmount() {
    // Clean up Blaze view
    Blaze.remove(this.view);
  },
  render() {
    // Just render a placeholder container that will be filled in
    return <span ref="container" />;
  }
});

Meteor Add-Ons

Animations meteor add webtempest:animate
Bootstrap meteor add mrt:bootstrap-3

meteor

Video (14:16) updateNodes Method with either insert or update..

Hybrid approach - transient collection + database

Meteor uses DDP protocol

Discuss on Twitter ● Improve this article: Edit on GitHub