Introduction to Meteor & React
Transcript of Introduction to Meteor & React
![Page 1: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/1.jpg)
Introduction to Meteor & React
9/16 React 讀書會
![Page 2: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/2.jpg)
MaxWebsite
Github
![Page 3: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/4.jpg)
What is Meteor ?
![Page 5: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/5.jpg)
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
![Page 7: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/7.jpg)
Data Flow
![Page 9: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/9.jpg)
Atmosphere - 2
https://github.com/meteor/blaze
![Page 10: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/10.jpg)
Code Demo
![Page 11: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/11.jpg)
meteor create messenger
Messenger App
![Page 12: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/12.jpg)
File structure
![Page 13: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/13.jpg)
npm install --save react react-dom
Defining views with React components
![Page 14: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/14.jpg)
Defining views with React componentshttps://goo.gl/g58hDP
![Page 15: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/15.jpg)
Storing messages in a collection - 1
Create messages collection
![Page 16: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/16.jpg)
File structure
![Page 17: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/17.jpg)
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({})
![Page 18: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/18.jpg)
Connect Minimongo with React
Storing messages in a collection - 3
meteor npm install --save react-addons-pure-render-mixinmeteor add react-meteor-data
![Page 19: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/19.jpg)
Storing messages in a collection - 4
Messages.find().fetch()
https://goo.gl/A6IpKF
![Page 20: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/21.jpg)
DDP
![Page 22: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/22.jpg)
Defining methods - 1
Call by both sever & client side
![Page 23: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/23.jpg)
Defining methods - 2
Meteor.methods({ 'messages.insert': text => { const username = 'Anonymous'
Messages.insert({ username, text, createAt: new Date() }) }})
![Page 24: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/24.jpg)
Defining methods - 2
import '../../api/messages/methods'
Meteor.call('messages.insert', this.state.value)
import '../../api/messages/methods'
Backend
Frontend
![Page 25: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/25.jpg)
Latency Compensation - 1
import '../../api/messages/methods'
Meteor.call('messages.insert', this.state.value)
Frontend
![Page 26: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/26.jpg)
Recall File structure
Call by both sever & client side
![Page 27: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/27.jpg)
Latency Compensation -1
![Page 28: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/28.jpg)
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'
![Page 29: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/29.jpg)
Latency Compensation - 3
import '../../api/messages/methods'
import method to front-end
meteor mongo
db.messages.find()
![Page 30: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/30.jpg)
Latency Compensation -4
![Page 32: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/32.jpg)
Adding user accounts - 2
Meteor.userId()
Meteor.user().username
![Page 33: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/33.jpg)
Demo Chat room
db.messages.drop()meteor mongo
![Page 34: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/34.jpg)
App Repo
https://goo.gl/n9stjo
![Page 35: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/35.jpg)
How is behind Meteor ?
![Page 36: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/36.jpg)
Meteor Development Group
![Page 37: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/37.jpg)
The Plight of Meteor
![Page 38: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/38.jpg)
Meteor ~= React + Redux + Backend
Express, Koa, Go, Scala
![Page 39: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/39.jpg)
The Future of Meteor
![Page 40: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/40.jpg)
![Page 41: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/41.jpg)
Meteor 1.5
DDP
MiniMongo
Tracker
Blaze
Redux
Apollo/GraphQL
Redux
React
![Page 42: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/42.jpg)
Recall Meteor Development Group
![Page 43: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/43.jpg)
Meteor
React + Redux + GraphQL + Socket.io Backend
===
Meteor 1.5
![Page 44: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/44.jpg)
![Page 45: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/45.jpg)
Meteor
React + Redux + GraphQL + Socket.io Backend
===
Meteor 1.5
整合資源形成平台 (Platform)
![Page 46: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/46.jpg)
Meteor 1.5
![Page 47: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/47.jpg)
Company in Taiwan
![Page 49: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/49.jpg)
Resources
![Page 50: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/50.jpg)
24 小時, React 快速入門Meteor Tutorial
線上 React 讀書會
![Page 51: Introduction to Meteor & React](https://reader035.fdocument.pub/reader035/viewer/2022062503/587bfcc81a28ab7c668b5b99/html5/thumbnails/51.jpg)