introduction to meteor & react

Introduction to Meteor & React

9/16 React 讀書會

MaxWebsite

LinkedIn

Github

What is Meteor ?

Code Demo

How is behind Meteor ?

The Plight of Meteor

The Future of Meteor

Company in Taiwan

Resources

What We’ll Cover

What is Meteor ?

A full-stack, open source platform for building web and mobile apps in JavaScript

DDP Subscribe to changes in the database

MiniMongo Client-side in-memory mongodb

Tracker Rerun function when data changes

Blaze Reactive HTML templates

store.subscribe()

DDP

MiniMongo

Tracker

Store

X

2012 2015

Data Flow

Atmosphere - 1

Atmosphere - 2

https://github.com/meteor/blaze

Code Demo

meteor create messenger

Messenger App

File structure

npm install --save react react-dom

Defining views with React components

Defining views with React componentshttps://goo.gl/g58hDP

Storing messages in a collection - 1

Create messages collection

File structure

Load messages collection on the server

Storing messages in a collection - 2

meteor mongo

db.messages.insert( { username: " 罗胖 ", text: " 逻辑思维👍 ", createdAt: new Date()} )

db.messages.find({})

Connect Minimongo with React

Storing messages in a collection - 3

meteor npm install --save react-addons-pure-render-mixinmeteor add react-meteor-data

Storing messages in a collection - 4

Messages.find().fetch()

https://goo.gl/A6IpKF

meteor mongo

db.messages.insert( { username: "TJ", text: "DDP", createdAt: new Date()} )

Storing messages in a collection - 5

DDP - Subscribe to changes in the database

DDP

Defining methods - 1

Call by both sever & client side

Defining methods - 2

Meteor.methods({ 'messages.insert': text => { const username = 'Anonymous'

Messages.insert({ username, text, createAt: new Date() }) }})

Defining methods - 2

import '../../api/messages/methods'

Meteor.call('messages.insert', this.state.value)

import '../../api/messages/methods'

Backend

Frontend

Latency Compensation - 1

import '../../api/messages/methods'

Meteor.call('messages.insert', this.state.value)

Frontend

Recall File structure

Call by both sever & client side

Latency Compensation -1

Latency Compensation - 2not import method to front-end

if (Meteor.isServer) { const d1 = Date.now() while (Date.now() < d1 + 10000) { // do nothing }}

// import '../../api/messages/methods'

Latency Compensation - 3

import '../../api/messages/methods'

import method to front-end

meteor mongo

db.messages.find()

Latency Compensation -4

Adding user accounts - 1

https://goo.gl/nHB5n8

Adding user accounts - 2

Meteor.userId()

Meteor.user().username

Demo Chat room

db.messages.drop()meteor mongo

App Repo

https://goo.gl/n9stjo

How is behind Meteor ?

Meteor Development Group

The Plight of Meteor

Meteor ~= React + Redux + Backend

Express, Koa, Go, Scala

The Future of Meteor

Meteor 1.5

DDP

MiniMongo

Tracker

Blaze

Redux

Apollo/GraphQL

Redux

React

Recall Meteor Development Group

Meteor

React + Redux + GraphQL + Socket.io Backend

===

Meteor 1.5

Meteor

React + Redux + GraphQL + Socket.io Backend

===

Meteor 1.5

整合資源形成平台 (Platform)

Meteor 1.5

Company in Taiwan

Resources

24 小時， React 快速入門Meteor Tutorial

線上 React 讀書會