Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Meteor & React

442 views

Published on

9/12 Introduction to Meteor & React

Published in: Internet
  • Be the first to comment

Introduction to Meteor & React

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

×