9/12 Introduction to Meteor & React

1. Introduction to Meteor & React
9/16 React 讀書會

2. Max
Website
LinkedIn
Github

3. 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

4. What is Meteor ?

5. 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

6. store.subscribe()
DDP
MiniMongo
Tracker
Store
X
2012 2015

7. Data Flow

8. Atmosphere - 1

9. Atmosphere - 2
https://github.com/meteor/blaze

10. Code Demo

11. meteor create messenger
Messenger App

12. File structure

13. npm install --save react react-dom
Defining views with React components

14. Defining views with React components
https://goo.gl/g58hDP

15. Storing messages in a collection - 1
Create messages collection

16. File structure

17. 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({})

18. Connect Minimongo with React
Storing messages in a collection - 3
meteor npm install --save react-addons-pure-render-mixin
meteor add react-meteor-data

19. Storing messages in a collection - 4
Messages.find().fetch()
https://goo.gl/A6IpKF

20. 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

21. DDP

22. Defining methods - 1
Call by both sever & client side

23. Defining methods - 2
Meteor.methods({
'messages.insert': text => {
const username = 'Anonymous'
Messages.insert({
username,
text,
createAt: new Date()
})
}
})

24. Defining methods - 2
import '../../api/messages/methods'
Meteor.call('messages.insert', this.state.value)
import '../../api/messages/methods'
Backend
Frontend

25. Latency Compensation - 1
import '../../api/messages/methods'
Meteor.call('messages.insert', this.state.value)
Frontend

26. Recall File structure
Call by both sever & client side

27. Latency Compensation -1

28. Latency Compensation - 2
not import method to front-end
if (Meteor.isServer) {
const d1 = Date.now()
while (Date.now() < d1 + 10000) {
// do nothing
}
}
// import '../../api/messages/methods'

29. Latency Compensation - 3
import '../../api/messages/methods'
import method to front-end
meteor mongo
db.messages.find()

30. Latency Compensation -4

31. Adding user accounts - 1
https://goo.gl/nHB5n8

32. Adding user accounts - 2
Meteor.userId()
Meteor.user().username

33. Demo Chat room
db.messages.drop()
meteor mongo

34. App Repo
https://goo.gl/n9stjo

35. How is behind Meteor ?

36. Meteor Development Group

37. The Plight of Meteor

38. Meteor ~= React + Redux + Backend
Express, Koa, Go, Scala

39. The Future of Meteor

41. Meteor 1.5
DDP
MiniMongo
Tracker
Blaze
Redux
Apollo/GraphQL
Redux
React

42. Recall Meteor Development Group

43. Meteor
React + Redux + GraphQL + Socket.io Backend
===
Meteor 1.5

45. Meteor
React + Redux + GraphQL + Socket.io Backend
===
Meteor 1.5
整合資源形成平台 (Platform)

46. Meteor 1.5

47. Company in Taiwan

49. Resources

50. 24 小時，React 快速入門
Meteor Tutorial
線上 React 讀書會