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.

What is the meteor?

12,439 views

Published on

Meteor platform 에 대한 개념 이해

Youtube : http://youtu.be/CeKps2It3Lw

Published in: Engineering
  • Be the first to comment

What is the meteor?

  1. 1. Meteor 넌 뭐니? by peter yun
  2. 2. 목차 ● Meteor 뭐니? ● Modern Application Platform ● Reactive Platform o Blaze o DDP o LiveQuery ● Isomorphic Programming ● ReactJS/Flux & Meteor ● Environments
  3. 3. Meteor 뭐니? ● Modern Application Platform o For Realtime (view & data) o Frontend & Backend Reactive Programming ● Like Node.js의 Spring Framework o For Fullstack development (one language) o Frontend & Backend Isomorphic Programming o Authentication (account), Authorization (collection)
  4. 4. Modern Application Platform ● For Realtime ● Frontend - Reactive Templating o Blaze o AngularJS o ReactJS ● Middle - Latency Compensation o DDP (Distributed Data Protocol) o Client Data Cache (minimongo) ● Backend - Data Bus o Livequery
  5. 5. Modern Application Platform For real Realtime To Reactive world
  6. 6. Reactive Platform client browser server node.js data store outside process CUD User Events Reactive Snyc ● DDP : SocketJS ● Client Mini database (mongodb) Reactive Templating ● Tracker (library) for Blaze ● AngularJS, ReactJS Reactive Data ● LiveQuery Full Stack DB Driver production : mongodb experimental : redis working on etc
  7. 7. Reative Platform - 영역 Meteor는 Frontend에서 Backend로 Reactive 프로그래밍의 확장 AngularJS ReactJS EmberJS Blaze DDP LiveQuery Mini-DataBase
  8. 8. Reactive Platform - 확장 HA Proxy Master/Slave ETL Collector insert select insert 참조 1 : http://blog.mongolab.com/2014/07/tutorial-scaling-meteor-with-mongodb-oplog-tailing/ 참조 2 : https://meteorhacks.com/does-meteor-scale socketJS sticky session
  9. 9. Blaze - Reactive Templating ● Tracker 기반으로 구현한 Reactive Templating 엔진 ● jQuery가 Imperative (명령형) 이라면 Blaze는 Declarative (선언형) 선언형 하나의 상태가 바뀌면 layout에 반영 - Reactive 명령형 필요한 곳에 로직을 추가하는 형태 - jQuery 방식 Reactive Templating 이해 : http://blog.percolatestudio.com/engineering/reactive-user-interfaces/ Tracker 소개 : https://atmospherejs.com/meteor/tracker
  10. 10. DDP - Websocket based Data Protocol ● using websocket with SocketJS (sticky-session, HA scale-out 가능) ● DDP 는 websocket을 이용한 REST 와 같다. o http://2012.realtimeconf.com/video/matt-debergalis (동영상) ● DDP Client는 다양한 언어로 구현 가능 (ObjectiveDDP) to Meteor Server o http://meteorpedia.com/read/DDP_Clients ● 브라우져 connection 갯수 제한 관리, 재접속 관리 o https://atmospherejs.com/meteor/ddp ● 적용영역 o Client쪽에 mini database 가 있으면 o 대기시간 보정이 가능. latency-compensated o 대기시간 보정 설명 : http://kr.discovermeteor.com/chapters/latency-compensation/ o Collection에 대한 Meteor.subscribe, Meteor.call  http://kr.discovermeteor.com/chapters/publications-and-subscriptions/
  11. 11. DDP 데이터 호출 흐름 출처 : https://opentutorials.org/module/1406/9000 Collection의 Pub/Sub with DDP for 대기시간 보정 Collection의 direct call to server
  12. 12. Live Query - Reactive Store ● Database의 변경을 감시 ex) replication log 감시 in MongoDB o 따라서 MongoDB를 별도로 운영시 replica set을 구성해야 함. o replica set 안하면 polling해서 변경을 체크함 o https://www.meteor.com/livequery ● 변경에 대한 모든 부분을 통지 ex) RethinkDB and Firebase ● mongo 패키지에 함께 있음 o https://atmospherejs.com/meteor/mongo : full stack database driver
  13. 13. Isomorphic Programming ● frotend & backend 하나의 언어, 동일 구조의 개발 ● 하나의 언어 : JavaScript ● 동일 구조 o client, server, public 이 아닌 폴더는 코드를 공유 : 중복 코드 제거 o MongoDB Collection Pub/Sub 및 권한 제어 o iron:router client/server 라우팅
  14. 14. Environments ● 빌드 o isobuild 커맨드 툴 제공 : meteor run/deploy/build o .meteor 폴더에 배포. 마치 webpack의 묶음과 같음 o npm 도 사용 가능 ● 의존성 관리 o 패키지 추가 : meteor add XXXX o 패키지 배포 : atmospherejs.com ● 개발 편의성 o live reloading : 운영중에도 가능 o 별도 배포 테스트 서버 제공 : <subdomain>.meteor.com
  15. 15. ReactJS/Flux & Meteor 출처 : https://github.com/AdamBrodzinski/react-ive-meteor http://react-ive.meteor.com/ << Flux 패턴 >> View에서 Action Creator 생성 Dispatcher에 전파 의뢰 Store에 정보 받아 View에 이벤트 발행 View는 Store 상태 정보를 가져와 화면 갱신
  16. 16. ReactJS/Flux & Meteor 출처 : http://info.meteor.com/blog/optimistic-ui-with-meteor-latency-compensation << Flux 패턴 >> View에서 Action Creator 생성 Dispatcher에 전파 의뢰 Store에 정보 받아 View에 이벤트 발행 View는 Store 상태 정보를 가져와 화면 갱신 << 특징 >> 모든 접속 클라이언트에 변경 데이터를 전송함
  17. 17. AngularJS에서 Reactive World로~~

×