Uma palestra sobre os paradigmas trazidos por bibliotecas e framework como Backbone.js, Angular.js e React. Conheceremos os principais conceitos por trás de programação imperativa, funcional e reativa. Por fim, teremos uma visão clara do quanto evoluímos e o que ainda está por vir na forma e uso da linguagem.

1. Paradigmas no
JavaScript
evolução e
futuro do uso de

2. jcemer.com
github.com/jcemer
twitter.com/jcemer
speakerdeck.com/jcemer

3. porto alegre
talentos.globo.com

4. Assim como a maioria das
linguagens, o JavaScript
atende a uma série de
paradigmas

5. Existe confusão e falta de
entendimento de como os
paradigmas funcionam e se
relacionam

6. Esta é uma palestra
avançada (e extensa) sobre
programação e JavaScript

7. Programando
de maneira
imperativa

8. Solução baseada em uma
sequência de passos

9. <SCRIPT>
var visits = getCookie("counter");
if (visits) {
visits = parseInt(visits) + 1;
document.write("By the way, you have been here " + visits +
" times.");
}
else {
visits = 1;
document.write("By the way, this is your first time here.");
}
setCookie("counter", visits);
</SCRIPT>
http://www.sislands.com/coin70/week7/counter.htm
if e else

10. <SCRIPT>
// Use single-spaced text for Multiplication table
document.write("<CENTER><BLOCKQUOTE><STRONG><PRE><FONT COLOR='FF0000'">)
var i, j, total; // global variables
for (i = 1; i <= 10; i++) {
for (j = 1; j < 10; j++) {
total = i * j;
total = " " + total //add space before each number
// Add another space before single digits
if (total < 10) total = " " + total;
// Display result
document.write(total);
} // end inner j loop
document.write("<BR>"); // end of line break
} // end of i outer loop
document.write("</FONT></PRE></STRONG></BLOCKQUOTE></CENTER>");
</SCRIPT>
http://www.sislands.com/coin70/week2/NestedLoops1.htm
foooorr

11. Código que explicitamente
altera o estado e fluxo de
execução do programa

12. Difícil de manter, reusar e
evoluir

13. REQ HTML
CLICK
JSO
N
G
EN
E
ADD
JSON
CLICK
UE
RATE
ST

14. O surgimento de
tecnologias foi essencial
para o aperfeiçoamento do
uso de paradigmas

15. A comunidade foi o
principal agente

16. Orientando a
objetos com
protótipos

17. Solução baseada em um
conjunto de objetos e troca
de mensagens entre eles

18. Prototype.js
a saudosa

19. var Person = Class.create({
initialize: function(name) {
this.name = name
},
say: function(message) {
return this.name + ': ' + message
}
})
var Pirate = Class.create(Person, {
say: function($super, message) {
return $super(message) + ', yarr!'
}
})
http://prototypejs.org/learn/class-inheritance
herança

20. Objetos são instâncias de
um construtor e mantêm
estado

21. Todo construtor deve
possuir uma única
responsabilidade
Single responsibility
principle
http://www.infoq.com/br/news/2014/02/solid-principios-javascript

22. Até mesmo as tarefas mais
simples eram complexas
utilizando Web APIs

23. Abstrações
Orientando a objetos com
protótipos

24. new Ajax.Request('/some_url', {
method:'get',
onSuccess: function(transport) {
var response = transport.responseText
alert("Success! nn" + response)
},
onFailure: function() {
alert('Something went wrong...')
}
})
http://prototypejs.org/learn/introduction-to-ajax

25. getTransport: function() {
return Try.these(
function() {return new XMLHttpRequest()},
function() {return new ActiveXObject('Msxml2.XMLHTTP')},
function() {return new ActiveXObject('Microsoft.XMLHTTP')}
) || false
}
Código fonte da versão 1.7.2.0 da Prototype.js
Operação interna
do Request

26. Abstrações servem para
isolar a complexidade de
uma operação

27. Abstrações normalizam e
delegam operações

28. Em alguns casos parecia
mais fácil estender

29. if (!document.getElementsByClassName)
document.getElementsByClassName = function(instanceMethods){
Código fonte da versão 1.7.2.0 da Prototype.js
Object.extend(Function.prototype, (function() {
var ELEMENT_PROTOTYPE = window.HTMLElement ? HTMLElement.prototype :
Element.prototype;
Estender document
Estender construtor de função
Estender objetos do DOM

30. DOM extension is one of the
biggest mistakes Prototype.js has
ever done.
http://perfectionkills.com/whats-wrong-with-extending-the-dom
- Kangax

31. Modificar objetos que não
pertencem ao seu código
não é uma boa prática
https://www.nczonline.net/blog/2010/03/02/maintainable-javascript-
dont-modify-objects-you-down-own

32. jQuery
a unipresente

33. $('li').hide()
http://jqfundamentals.com/chapter/jquery-basics

34. jQuery possui as mesmas
operações da Prototype.js
implementas da maneira
correta

35. Encadeando
operações
Orientando a objetos
com protótipos

36. $('li')
.click(function () {
$(this).addClass('clicked')
})
.find('span')
.attr('title', 'Hover over me')
http://jqfundamentals.com/chapter/jquery-basics

37. Encadeamento permite
executar uma série de
operações em um
mesmo objeto

38. A biblioteca padrão do
JavaScript é pobre e
obscura

39. Aprimorando a
biblioteca
padrão
Orientando a objetos
com protótipos

40. Underscore.js
a útil

41. var toString = Object.prototype.toString
toString.call("Oops") == "[object String]"
_.isString("Opps")
Com underscore.js

42. - keys
- allKeys
- values
- mapObject
- pairs
- invert
- create
- functions
- findKey
- extend
- extendOwn
- pick
- omit
- defaults
- clone
- tap
- has
- property
- propertyOf
- isEqual
- isMatch
- isEmpty
- isElement
- isArray
- isObject
- isArguments
- isFunction
- isString
- isNumber
- isFinite
- isBoolean
- isDate
- isRegExp
- isNaN
- isUndefined
- noConflict
- identity
- constant
- noop
- times
- random
- mixin
- iteratee
- uniqueId
- escape
- unescape
- result
- now
- template
- isNull
- matcher

43. Operações utilitárias
são essenciais para um
código mais legível

44. Invariavelmente seus
projetos enfrentarão os
mesmos problemas

45. Código
modularizado
Orientando a objetos
com protótipos

46. Módulos separam porções
de código que possuem
algo em comum

47. Módulos são coesos,
desacoplados e reusáveis

48. Lodash
a modular

49. var methods = ['Arguments', 'Function',
'String', 'Number', 'Date',
'RegExp', 'Error'];
_.each(methods, function(name) {
_['is' + name] = function(obj) {
return toString.call(obj) ===
'[object ' + name + ']';
};
});
underscore.js

50. var isObjectLike = require('./isObjectLike');
var stringTag = '[object String]';
var objectProto = global.Object.prototype;
var objToString = objectProto.toString;
function isString(value) {
return typeof value == 'string' ||
(isObjectLike(value)
&& objToString.call(value) == stringTag);
}
module.exports = isString;
lang/isString.js

51. var isObjectLike = require('./isObjectLike');
var numberTag = '[object Number]';
var objectProto = global.Object.prototype;
var objToString = objectProto.toString;
function isNumber(value) {
return typeof value == 'number' ||
(isObjectLike(value)
&& objToString.call(value) == numberTag);
}
module.exports = isNumber;
lang/isNumber.js

52. DEPENDÊNCIA DUPLICAÇÃO
VS
A manutenção do equilíbrio,
reduzindo a duplicação
David Chelimsky
https://www.youtube.com/watch?v=ugTQF2uw9eg

53. O importante é definir bem o
critério de modularização

54. JavaScript suporta diferentes
padrões de módulos,
escolha um
http://eloquentjavascript.net/10_modules.html

55. Programando
de maneira
funcional

56. Solução baseada em
transformação de valores

57. https://smthngsmwhr.wordpress.com/2014/02/02/eloquent-javascript-
with-underscore-js
First-class functions movem o
JavaScript significativamente
em direção a FP

58. Funções podem ser
passadas e retornados por
outras funções
First-class functions

59. Underscore.js
a funcional

60. _.reduce(collection, function(a, b) {
return a + b
})
_.filter(collection, function(n) {
return (n % 2) === 0
})
Livro: Introducing Functional Programming with Underscore.js

61. Construções funcionais são
mais fáceis de ler e manter

62. array.forEach(iteratee)
array.map(iteratee)
array.reduce(iteratee, memo)
array.every(predicate)
array.find(predicate)
array.includes(element)
[...arguments]
Object.keys(object)
https://www.reindex.io/blog/you-might-not-need-underscore
ES 5.1 + ES2015 + ES2016

63. Ausência de estado
compartilhado, funções que
não geram efeito colateral
Funções puras

64. Programação funcional vai
muito além de manipulação
de coleções

65. var mult = function (a, b) { return a * b }
var negate = _.partial(mult, -1)
var mult2 = _.partial(mult, 2)
var square = function (n) { return n * n }
var result = _.compose(negate, mult2, square)

66. export default store => next => action => {
// [...]
}
https://github.com/rackt/redux/blob/master/examples/real-world/
middleware/api.js
export default function (store) {
return function (next) {
return function (action) {
}
}
}
Portando para ES 5.1
Código original

67. http://documentcloud.github.io/underscore-contrib#curry
_.curry(function (store, next, action) {
// [...]
})
Underscore-contrib

68. Funções precisam aceitar e
retornar dados imutáveis
// frozen value type
const xy = #[ x, y ]
// functional extension
const xyz = #[ ...xy, z ]
https://github.com/sebmarkbage/ecmascript-immutable-data-structures

69. Mas nem tudo está disponível:
é preciso aprender a esperar
por operações assíncronas

70. getFiles('.', function (files) {
generateIndex(files, function () {
generatePosts(files, ready)
})
})
Funções que geram um blog

71. Programação funcional é
sobre valores e suas
relações
https://blog.jcoglan.com/2013/03/30/callbacks-are-imperative-
promises-are-functional-nodes-biggest-missed-opportunity

72. Utilizando
Promises
Programando de maneira
funcional

73. Promises são valores que
representam o possível
resultado de uma operação
assíncrona
http://tableless.com.br/fluxo-de-execucao-assincrono-em-
javascript-promises

74. https://blog.jcoglan.com/2011/03/11/promises-are-the-monad-of-
asynchronous-programming
pipe([getFiles, generateIndex, generatePosts])
Promises are the monad of
asynchronous programming

75. http://tableless.com.br/fluxo-de-execucao-assincrono-em-javascript-
promises
blogParser.start()
.then(getFiles)
.then(generateIndex)
.then(generatePosts)
Utilizando Promises/A+

76. Interfaces basicamente
reagem a eventos vindos do
usuário e servidor

77. Programando
orientado a
eventos

78. Solução guiada pela
ocorrência de eventos
externos

79. Web APIs são massivamente
apoiadas no paradigma de
eventos

80. Backbone.js
o organizado

81. Backbone.js faz seus dados
funcionarem igual ao DOM:
emitindo eventos

82. Apresentar palestra
na RubyConf

83. var TaskView = Backbone.View.extend({
events: {
'click [data-check]': 'done'
},
done: function (event) {
this.model.set({done: true})
},
initialize: function () {
this.listenTo(this.model, 'change', this.render)
},
render: function () {
// build task HTML
}
})

84. var TaskView = Backbone.View.extend({
events: {
'click [data-check]': 'done'
},
done: function (event) {
this.model.set({done: true})
},
initialize: function () {
this.listenTo(this.model, 'change', this.render)
},
render: function () {
// build task HTML
}
})

85. var TaskView = Backbone.View.extend({
events: {
'click [data-check]': 'done'
},
done: function (event) {
this.model.set({done: true})
},
initialize: function () {
this.listenTo(this.model, 'change', this.render)
},
render: function () {
// build task HTML
}
})

86. O DOM não é performático
quando aplicamos
modificações a revelia

87. var TaskView = Backbone.View.extend({
//...
initialize: function () {
this.listenTo(this.model,
'change:done', this.renderStatus)
},
renderStatus: function () {
var done = this.model.get('done') ? 'ok' : ''
this.$('[data-status]').text(text)
}
});

88. Neste cenário é que o
data-binding fez rir e
chorar

89. data
$scope.Field = "data"
Data-binding

90. $scope.Field = "data"
Two-way data-binding
data

91. AngularJS
o benevolente

92. <div ng-controller="TaskCtrl" ng-click="change()">
<span>{{ done ? 'Ok' : '' }}</span>
{{ description }}
</div>
app.controller('TaskCtrl', function($scope) {
$scope.description = 'My task'
$scope.change = function () {
$scope.done = true
}
})
HTML?
JavaScript

93. http://leoasis.github.io/posts/2014/10/28/think-twice-or-thrice-
before-using-angular
http://tutorials.jenkov.com/angularjs/critique.html
https://medium.com/@mnemon1ck/why-you-should-not-use-
angularjs-1df5ddf6fc99
Think Twice (or Thrice)
Before Using Angular

94. React.JS
o vanguardista

95. var Task = React.createClass({
getInitialState: function () {
return {done: false}
},
render: function () {
return <div onClick={this.change}>
{this.state.done ? 'Ok' : ''}
{this.props.description}</div>
},
change: function () {
this.setState({done: true})
}
})
React.render(<Task description='My task' />,
document.body)
XML?!

96. var Task = React.createClass({
getInitialState: function () {
return {done: false}
},
render: function () {
return <div onClick={this.change}>
{this.state.done ? 'Ok' : ''}
{this.props.description}</div>
},
change: function () {
this.setState({done: true})
}
})
React.render(<Task description='My task' />,
document.body)

97. var Task = React.createClass({
getInitialState: function () {
return {done: false}
},
render: function () {
return <div onClick={this.change}>
{this.state.done ? 'Ok' : ''}
{this.props.description}</div>
},
change: function () {
this.setState({done: true})
}
})
React.render(<Task description='My task' />,
document.body)
Estado

98. Manipular e manter o histórico
dos estados do DOM é difícil. A
solução é escrever código como
se você recriasse o DOM toda
vez que o estado muda
https://github.com/Matt-Esch/virtual-dom

99. Já existe um esquema
gratuito para o fluxo dos
dados: O DOM
http://www.code-experience.com/why-you-might-not-need-mvc-with-
reactjs/
(os eventos e CSS já utilizam)

100. Componentes mantêm estado
e recebem propriedades dos
seus ancestrais

101. Set state Dirty Re-render
React Components
http://calendar.perfplanet.com/2013/diff/

102. var newTree = render(data)
var patches = diff(tree, newTree)
rootNode = patch(rootNode, patches)
tree = newTree
Patch!
Virtual DOM
https://github.com/Matt-Esch/virtual-dom

103. React.js♥

104. Ainda precisamos lidar
com eventos a todo tempo

105. instant search

106. var onType = _.debounce(function() {
$.get('data.json')
}, 300)
Buscar depois de 300ms de
inatividade

107. var onType = _.debounce(function() {
$.get('data.json')
}, 300)
Buscar depois de 300ms de
inatividade
ZzzZzzZz...

108. E se as request não
retornarem na ordem?!

109. Programando
de maneira
funcional
reativa

110. Solução guiada por streams
de dados assíncronos

111. Stream é uma sequência de
eventos ordenados no
tempo

112. var text = $('#input')
.asEventStream('keydown')
.debounce(300)
.map(function(event) {
return event.target.value
})
https://baconjs.github.io
instant search

113. text BACO NJS
Debonced 300ms

114. var text = $('#input')
.asEventStream('keydown')
.debounce(300)
.map(function(event) {
return event.target.value
})
function movieSearch(query) {
return Bacon.fromPromise(queryMovie(query))}
text.flatMap(movieSearch)
.onValue(function(results) {
console.log(results)
})

115. text BACO NJS
Query BACO
Query BACONJS
Request para a nuvem

116. text
results
BACO NJS
Query BACO
Query BACONJS
Ops

117. var text = $('#input')
.asEventStream('keydown')
.debounce(300)
.map(function(event) {
return event.target.value
})
function movieSearch(query) {
return Bacon.fromPromise(queryMovie(query))}
text.flatMapLatest(movieSearch)
.onValue(function(results) {
console.log(results)
})
latest

118. text
results
BACO NJS
Query BACO
Query BACONJS
x
http://nullzzz.blogspot.com.br/2012/12/baconjs-tutorial-part-iii-ajax-and-stuff.html

119. FRP é sobre relações
dependentes que se estabilizam
com o passar do tempo
https://www.zweitag.de/en/blog/technology/functional-reactive-
programming-frp

121. Conhecer paradigmas e
práticas vai além de sair
implementando em projetos

122. Compreender contextos e
aplicar as soluções mais
adequadas é o mais
importante

123. só, por favor,
não usem o
maldito ;

124. @jcemer
Obrigado