Downloaded 10 times
More Related Content
![Intro to Meteor [Deprecated]](https://cdn.slidesharecdn.com/ss_thumbnails/meteor-intro-141113203821-conversion-gate02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Introduction to Meteor & React
Introduction to Meteor & React
- 1. Introduction to Meteor& React 9/16 React 讀書會
- 2.
- 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.
- 5. A full-stack, opensource 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.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. npm install --savereact react-dom Defining views with React components
- 14. Defining views withReact components https://goo.gl/g58hDP
- 15. Storing messages ina collection - 1 Create messages collection
- 16.
- 17. Load messages collectionon the server Storing messages in a collection - 2 meteor mongo db.messages.insert( { username: "罗胖", text: "逻辑思维👍", createdAt: new Date()} ) db.messages.find({})
- 18. Connect Minimongo withReact Storing messages in a collection - 3 meteor npm install --save react-addons-pure-render-mixin meteor add react-meteor-data
- 19. Storing messages ina 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.
- 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 Callby both sever & client side
- 27.
- 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.
- 31. Adding user accounts- 1 https://goo.gl/nHB5n8
- 32. Adding user accounts- 2 Meteor.userId() Meteor.user().username
- 33.
- 34.
- 35. How is behindMeteor ?
- 36.
- 37. The Plight ofMeteor
- 38. Meteor ~= React+ Redux + Backend Express, Koa, Go, Scala
- 39. The Future ofMeteor
- 41.
- 42.
- 43. Meteor React + Redux+ GraphQL + Socket.io Backend === Meteor 1.5
- 45. Meteor React + Redux+ GraphQL + Socket.io Backend === Meteor 1.5 整合資源形成平台 (Platform)
- 46.
- 47.
- 49.
- 50. 24 小時，React 快速入門 MeteorTutorial 線上 React 讀書會