Introduction to Meteor & React
•Download as PPTX, PDF•
3 likes•670 views
This document summarizes a presentation about Meteor and React. It introduces Meteor as a full-stack platform for building web and mobile apps with JavaScript. It demonstrates storing messages in a Meteor collection and rendering them with React components. It also covers latency compensation, user accounts, and the future of Meteor integrating React, Redux, GraphQL and Socket.io on the backend.
Report
Share
Related slideshows
Introduction to Meteor & React
- 1. Introduction to Meteor & React 9/16 React 讀書會
- 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
- 7. Data Flow
- 10. Code Demo
- 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
- 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()
- 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
- 35. How is behind Meteor ?
- 37. The Plight of Meteor
- 38. Meteor ~= React + Redux + Backend Express, Koa, Go, Scala
- 39. The Future of Meteor
- 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
- 49. Resources
- 50. 24 小時，React 快速入門 Meteor Tutorial 線上 React 讀書會