Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Introduction to Meteor & React

446 visualizaciones

Publicado el

9/12 Introduction to Meteor & React

Publicado en: Internet
  • Sé el primero en comentar

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 讀書會

×