Meteor platform 에 대한 개념 이해 Youtube : http://youtu.be/CeKps2It3Lw

1. Meteor 넌 뭐니?
by peter yun

2. 목차
● Meteor 뭐니?
● Modern Application Platform
● Reactive Platform
o Blaze
o DDP
o LiveQuery
● Isomorphic Programming
● ReactJS/Flux & Meteor
● Environments

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. 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. Modern Application Platform
For real Realtime
To Reactive world

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. Reative Platform - 영역
Meteor는
Frontend에서
Backend로
Reactive 프로그래밍의 확장
AngularJS
ReactJS
EmberJS
Blaze
DDP
LiveQuery
Mini-DataBase

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. 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. 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. DDP 데이터 호출 흐름
출처 : https://opentutorials.org/module/1406/9000
Collection의
Pub/Sub
with DDP
for 대기시간 보정
Collection의
direct call
to server

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. Isomorphic Programming
● frotend & backend 하나의 언어, 동일 구조의 개발
● 하나의 언어 : JavaScript
● 동일 구조
o client, server, public 이 아닌 폴더는 코드를 공유 : 중복 코드 제거
o MongoDB Collection Pub/Sub 및 권한 제어
o iron:router client/server 라우팅

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. 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. ReactJS/Flux & Meteor
출처 : http://info.meteor.com/blog/optimistic-ui-with-meteor-latency-compensation
<< Flux 패턴 >>
View에서
Action Creator 생성
Dispatcher에 전파 의뢰
Store에 정보 받아
View에 이벤트 발행
View는 Store 상태 정보를
가져와 화면 갱신
<< 특징 >>
모든 접속 클라이언트에
변경 데이터를 전송함

17. AngularJS에서 Reactive World로~~