Meteor 넌뭐니 ?

by peter yun

목차

● Meteor 뭐니 ? ● Modern Application Platform● Reactive Platform

o Blazeo DDPo LiveQuery

● Isomorphic Programming● ReactJS/Flux & Meteor● Environments

Meteor 뭐니 ?

● Modern Application Platform o For Realtime (view & data)o Frontend & Backend Reactive Programming

● Like Node.js 의 Spring Frameworko For Fullstack development (one language)o Frontend & Backend Isomorphic Programming o Authentication (account), Authorization (collection)

Modern Application Platform

● For Realtime

● Frontend - Reactive Templatingo Blazeo AngularJSo ReactJS

● Middle - Latency Compensationo DDP (Distributed Data Protocol)o Client Data Cache (minimongo)

● Backend - Data Buso Livequery

Modern Application Platform

For real Realtime

To Reactive world

Reactive Platform

client browser server node.js data store outside processCUD

User Events

Reactive Snyc● DDP : SocketJS● Client Mini database

(mongodb)

Reactive Templating● Tracker (library) for Blaze● AngularJS, ReactJS

Reactive Data● LiveQuery

Full Stack DB Driverproduction : mongodbexperimental : redisworking on etc

Reative Platform - 영역

Meteor 는Frontend 에서

Backend 로Reactive 프로그래밍의확장

AngularJSReactJSEmberJS

Blaze

DDPLiveQuery

Mini-DataBase

Reactive Platform - 확장

HA Proxy Master/Slave ETL Collector

insert

selectinsert

참조 1 : http://blog.mongolab.com/2014/07/tutorial-scaling-meteor-with-mongodb-oplog-tailing/ 참조 2 : https://meteorhacks.com/does-meteor-scale

socketJSsticky session

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

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 Servero http://meteorpedia.com/read/DDP_Clients

● 브라우져 connection 갯수제한관리 , 재접속관리o https://atmospherejs.com/meteor/ddp

● 적용영역o Client 쪽에 mini database 가있으면o 대기시간보정 이가능 . latency-compensatedo 대기시간보정설명 : http://kr.discovermeteor.com/chapters/latency-compensation/o Collection 에대한 Meteor.subscribe, Meteor.call

http://kr.discovermeteor.com/chapters/publications-and-subscriptions/

DDP 데이터호출흐름

출처 : https://opentutorials.org/module/1406/9000

Collection 의Pub/Sub with DDPfor 대기시간보정

Collection 의direct callto server

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

Isomorphic Programming● frotend & backend 하나의언어 , 동일구조의개발● 하나의언어 : JavaScript● 동일구조

o client, server, public 이아닌폴더는코드를공유 : 중복코드제거o MongoDB Collection Pub/Sub 및 권한제어o iron:router client/server 라우팅

Environments● 빌드

o isobuild 커맨드툴 제공 : meteor run/deploy/buildo .meteor 폴더에배포 . 마치 webpack 의묶음과같음o npm 도사용가능

● 의존성관리o 패키지추가 : meteor add XXXXo 패키지배포 : atmospherejs.com

● 개발편의성o live reloading : 운영중에도가능o 별도배포테스트서버제공 : <subdomain>.meteor.com

ReactJS/Flux & Meteor

출처 : https://github.com/AdamBrodzinski/react-ive-meteor

http://react-ive.meteor.com/

<< Flux 패턴 >>View 에서Action Creator 생성Dispatcher 에전파의뢰Store 에정보받아View 에이벤트발행View 는 Store 상태

정보를 가져와화면갱신

ReactJS/Flux & Meteor

출처 : http://info.meteor.com/blog/optimistic-ui-with-meteor-latency-compensation

<< Flux 패턴 >>View 에서Action Creator 생성Dispatcher 에전파의뢰Store 에정보받아View 에이벤트발행View 는 Store 상태정보를

가져와화면갱신

<< 특징 >> 모든접속클라이언트에 변경데이터를전송함

AngularJS 에서 Reactive World로~~