Slides da apresentação Aplicações real time utilizando javascript puro em 2017 realizada na trilha de Javascript no The Developers Conference Porto Alegre 2017. Repositório: https://github.com/lucassanchez/js-tdc-poa-2017 The Developers Conference: www.thedevelopersconference.com.br/tdc/2017/portoalegre/trilhas

1. Aplicações
em real time
utilizando
Javascript
puro em 2017

2. Lucas Inocente
Front End Developer @ Zenvia
Co Fundador @ Fight Analytics
linkedin.com/in/lucassanchez

3. 2007 2017
Flash
My Space
jQuery / Wordpress
Fight Analytics
Zenvia

4. FIGHT ANALYTICS
▸ Widget
▸ Real Time
▸ Mean.js
http://fightanalytics.cc
Place your screenshot here

5. ZENVIA
▸ Chat Bot
▸ Plataforma de
conversação
▸ JS
http://zenvia.com.br
Place your screenshot here

6. TODO MUNDO
ESCREVE
JAVASCRIPT

8. MAS TODO MUNDO
ESCREVE EM CIMA
DE ALGUM
FRAMEWORK

9. https://github.com/search?l=javascript&q=stars%3A%3E1&s=stars&type=Repositories

10. TEM COMO NÃO
USAR FRAMEWORK
EM TUDO NA VIDA

11. OPÇÕES ATUAIS DO MERCADO
Angular
Vue.js
ReactjQuery
Muitos outros

12. CASO DE USO
▸ MOBILE
▸ 3G
▸ BRASIL

13. 1 kbO 3g já agradece!

14. SETUP E
APLICAÇÃO

15. SETUP
▸ MongoDB
▸ Express
▸ Angular
▸ Node
▸ Socket.io

16. SETUP
▸ MongoDB
▸ Express
▸ Angular Javascript
▸ Node
▸ Socket.io

17. Repositório
▸ https://github.com/lucassanchez/js-td
c-poa-2017

18. CHAT
INTEGRADO
COM CHAT
BOT
PLATAFORMA
ZENVIA
Mongo
DB
FRONT-END
CHAT
BACK-END
CHAT

19. ESTRUTURA
MVC

24. Front end da aplicação

25. SHOW ME
THE CODE

26. Repositório
▸ https://github.com/lucassanchez/js-td
c-poa-2017

27. https://github.com/lucassanchez/js-tdc-poa-2017

28. https://github.com/lucassanchez/js-tdc-poa-2017

29. // app/controllers/messageController.js
exports.create = function(req, res) {
var newMessage = new Message(req.body);
var room = req.body.room;
console.log('Message sent at room:', room)
newMessage.save(function(err, message) {
if (err) {
res.send(err);
} else {
io.in(room).emit('message', message);
res.json(message);
}
});
};
https://github.com/lucassanchez/js-tdc-poa-2017

30. // public/javascripts/scripts.js
const room = window.location.pathname.replace("/", "");
const socket = io.connect();
socket.on('connect', function() {
socket.emit('room', room);
console.log('Conectado na room:', room);
});
socket.on('message', function(message){
renderTemplate(message);
});
https://github.com/lucassanchez/js-tdc-poa-2017

31. // public/javascripts/scripts.js
const room = window.location.pathname.replace("/", "");
const socket = io.connect();
socket.on('connect', function() {
socket.emit('room', room);
console.log('Conectado na room:', room);
});
socket.on('message', function(message){
renderTemplate(message);
});
https://github.com/lucassanchez/js-tdc-poa-2017

32. // public/javascripts/scripts.js
function renderTemplate(message) {
let node = createNode();
node.className = 'message';
node.innerHTML = getMessageHtml(message);
appendMessage(node);
}
https://github.com/lucassanchez/js-tdc-poa-2017

33. // public/javascripts/scripts.js
function renderTemplate(message) {
let node = createNode();
node.className = 'message';
node.innerHTML = getMessageHtml(message);
appendMessage(node);
}
https://github.com/lucassanchez/js-tdc-poa-2017

34. // public/javascripts/scripts.js
function createNode() {
return node = document.createElement('div');
}
https://github.com/lucassanchez/js-tdc-poa-2017

35. // public/javascripts/scripts.js
function renderTemplate(message) {
let node = createNode();
node.className = 'message';
node.innerHTML = getMessageHtml(message);
appendMessage(node);
}
https://github.com/lucassanchez/js-tdc-poa-2017

36. // public/javascripts/scripts.js
function getMessageHtml(message) {
let className = getClassName(message.status);
return content = '<div class="' + className + '">
<div class="card-body">
<p class="card-text"> '+ message.content +'</p>
</div>
</div>';
}
https://github.com/lucassanchez/js-tdc-poa-2017

37. // public/javascripts/scripts.js
function renderTemplate(message) {
let node = createNode();
node.className = 'message';
node.innerHTML = getMessageHtml(message);
appendMessage(node);
}
https://github.com/lucassanchez/js-tdc-poa-2017

38. // public/javascripts/scripts.js
function appendMessage(node) {
document.getElementById("container").appendChild(node);
}
https://github.com/lucassanchez/js-tdc-poa-2017

39. MAIS COISAS
LEGAIS

40. let elem = document.getElementById('abc');
elem.style.height = '0px';
elem.style.color = red;
elem.className = disabled';
elem.setAttribute('disabled', 'disabled');
elem.value = '';
let paiElem = elem.parentNode;

41. let buttons = document.getElementsByClassName('clicked');
for (var i = 0; i < buttons.length; i++) {
buttons[i].elem.setAttribute('disabled', 'disabled');
}

42. Obrigado!
linkedin.com/in/lucassanchez
medium.com/@lucassanchez
twitter.com/lucassanchez
lucassanchez.github.io