Post on 16-Jan-2017
Introduction to Meteor & React
9/16 React 讀書會
MaxWebsite
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
Data Flow
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 - 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 讀書會