Slide 1
Slide 1 text
UMRUM
An open source real user monitoring
service with Node.js
Slide 2
Slide 2 text
@helielson @rafaelverger
Quem somos?
@rictorres @willmendesneto
Slide 3
Slide 3 text
Alguém não sabe o que é Node.js?
visit: speakerdeck.com/rafaelverger/nodejs-why
Antes de mais nada...
Slide 4
Slide 4 text
E o que é o UMRUM?
Slide 5
Slide 5 text
Já ouviram falar desse cara?
Slide 6
Slide 6 text
Google Analytics Realtime
Slide 7
Slide 7 text
O UMRUM é outro RUM!
Em Node.js e Open Source :D
Slide 8
Slide 8 text
Tá, e U.M.R.U.M. significa o que?
Slide 9
Slide 9 text
Em uma de nossas reuniões...
e o nome?
Slide 10
Slide 10 text
O serviço vai ser algo mágico.. plug'n'play!
Slide 11
Slide 11 text
Tem que ser algo como: o último
RUM que você vai precisar!
O serviço vai ser algo mágico.. plug'n'play!
Slide 12
Slide 12 text
Tem que ser um nome fucking
awesome!
Tem que ser algo como: o último
RUM que você vai precisar!
O serviço vai ser algo mágico.. plug'n'play!
Slide 13
Slide 13 text
Ultimate Fucking Magic RUM!
Slide 14
Slide 14 text
Ultimate Fucking Magic RUM!
Slide 15
Slide 15 text
Finalmente:
Ultimate Magical Real User Monitoring
Slide 16
Slide 16 text
E por que mais um RUM?
Slide 17
Slide 17 text
Queríamos aprender!
Slide 18
Slide 18 text
Hackathon internacional de Node.js, desde 2009;
Surgiu junto com o Node pra incentivar seu uso;
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Então, vamos fazer um projeto, já temos um
prazo, e o que vamos fazer?
@helielson: "sempre quis implementar 'um
Chartbeat'".
Vamos fazer um "Chartbeat Open Source"!
E por que mais um RUM?
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Nosso benchmark
Slide 23
Slide 23 text
Como rastreamos os usuários?
Slide 24
Slide 24 text
Tracking code
!function(k,w,d,s){
w._mrm=w._mrm||{},
w._mrm.hostId=k,
s=c.createElement("script"),
s.async=1,
s.src="//umrum.io/dist/umrum-client.js",
d.body.appendChild(s);
}("UMRUM_KEY",window,document);
Slide 25
Slide 25 text
Definindo um UUID pro usuário
props.uid = generate_uuid();
doc.cookie = [
cookieName, '=', props.uid,
';expires=', weekAhead
].join('');
// UUID = xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
Slide 26
Slide 26 text
Ei, servidor, to aqui!
API.ping = function(){
if ( IS_USER_ACTIVE ) this.send('/ping');
this.ping_timeout = setTimeout(function(){
API.ping();
}, 30 * 1000);
}
Slide 27
Slide 27 text
API.send
send = function(route){
this.element.src = [ // this.element = ![]()
this.API_URL, route,
"?uid=", props.uid, "&hostId=", props.hostId,
"&url=", win.location, "&title=", doct.title,
"&servertime=", svtime, "&pageload=", pgload,
"&t=", (+new Date)
].join('');
}
Slide 28
Slide 28 text
Navigation Timing
window.performance.timing
{
"loadEventStart": 1411631886735,
"domComplete": 1411631886735,
"responseEnd": 1411631885549,
"responseStart": 1411631885347,
"requestStart": 1411631884630,
"redirectEnd": 0,
"redirectStart": 0,
"unloadEventStart": 0,
}
https://developer.mozilla.org/en-US/docs/Navigation_timing
Slide 29
Slide 29 text
function activate_user() {
USER_ACTIVE = true;
}
addEvent(window, 'scroll', activate_user);
addEvent(doc.body, 'click', activate_user);
addEvent(doc.body, 'mouseover', activate_user);
activate_user();
Usuários ativos
Slide 30
Slide 30 text
Usuários inativos :(
_oldblur = window.onblur;
window.onblur = function(){
try{_oldblur();} catch(e){}
USER_ACTIVE = false;
};
addEvent(win, 'beforeunload', API.exit);
Slide 31
Slide 31 text
Como salvamos os dados?
Slide 32
Slide 32 text
Como salvamos os dados?
Slide 33
Slide 33 text
Salvando usuários ativos
multi = redisclient.multi(); // pipeline
multi.hincrby(user.hostId, 'curr_visits', 1);
multi.zincrby(toppagesKey, 1, user.url);
multi.lpush(servertimeKey, user.servertime);
multi.lpush(pageloadKey, user.pageload);
multi.hmset(user.uid, user);
multi.setex(EXP_PREFIX+user.uid, USR_TIMEOUT, 1);
multi.exec();
Slide 34
Slide 34 text
IMPORTANTE - Pipeline!
multi = redisclient.multi();
...
multi.exec();
Slide 35
Slide 35 text
Atualizando usuários
multi.zincrby(toppagesKey, -1, old_user.url);
multi.zincrby(toppagesKey, 1, user.url);
multi.hmset(user.uid, user);
multi.setex(EXP_PREFIX+user.uid, USR_TIMEOUT, 1);
Slide 36
Slide 36 text
Removendo usuários :(
multi.del(user.uid);
multi.hincrby(user.hostId, 'curr_visits', -1);
multi.zincrby(toppagesKey, -1, user.url);
Slide 37
Slide 37 text
Entregando os dados
multi = redisclient.multi(); // pipeline
multi.hget(hostId, 'curr_visits');
multi.zrevrangebyscore(
toppagesKey,
+inf', -inf', 'WITHSCORES',
'LIMIT', 0, MAX_TOPPAGES);
multi.lrange(servertimeKey, 0, MAX_PERF_LIST);
multi.lrange(pageloadKey, 0, MAX_PERF_LIST);
multi.exec(send_data_to_dashboard);
Slide 38
Slide 38 text
Como organizar CSS?
E o Javascript?
HTML com herança?
Client-side
Slide 39
Slide 39 text
HTML
JS
$('button').on('click', function() {
do_something();
})
Começamos sem componentizar
Slide 40
Slide 40 text
emberjs.com
Slide 41
Slide 41 text
Posso ter componentes?
Existe herança?
Slide 42
Slide 42 text
Posso ter componentes?
Existe herança?
O
Ember é Perfeito!!
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
{{ }}
Slide 47
Slide 47 text
{{ page_title }}
Slide 48
Slide 48 text
{{"{{ site.host }}"}}
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
facebook.github.io/react/
Slide 51
Slide 51 text
facebook.github.io/react/
Não é um
Framework!!!
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
var TrackedSites = React.createClass({
trackNewSite: function(host) {
// ...
},
render: function() {
var siteItems = this.state.sites.map(function(site) {
return (
);
});
return (
);
}
}); components/tracked-sites.jsx
Your sites
{siteItems}
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
umrum.io