Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Evolução e futuro do uso de paradigmas no JavaScript

Evolução e futuro do uso de paradigmas no JavaScript

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.

Jean Carlo Emer

September 19, 2015
Tweet

More Decks by Jean Carlo Emer

Other Decks in Programming

Transcript

  1. <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
  2. <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
  3. 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
  4. Todo construtor deve possuir uma única responsabilidade Single responsibility principle

    http://www.infoq.com/br/news/2014/02/solid-principios-javascript
  5. new Ajax.Request('/some_url', { method:'get', onSuccess: function(transport) { var response =

    transport.responseText alert("Success! \n\n" + response) }, onFailure: function() { alert('Something went wrong...') } }) http://prototypejs.org/learn/introduction-to-ajax
  6. 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
  7. 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
  8. DOM extension is one of the biggest mistakes Prototype.js has

    ever done. http://perfectionkills.com/whats-wrong-with-extending-the-dom - Kangax
  9. 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
  10. - 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
  11. 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
  12. 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
  13. 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
  14. DEPENDÊNCIA DUPLICAÇÃO VS A manutenção do equilíbrio, reduzindo a duplicação


    David Chelimsky 
 https://www.youtube.com/watch?v=ugTQF2uw9eg
  15. _.reduce(collection, function(a, b) { return a + b }) _.filter(collection,

    function(n) { return (n % 2) === 0 }) Livro: Introducing Functional Programming with Underscore.js
  16. 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)
  17. 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
  18. 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
  19. 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
  20. 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 } })
  21. 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 } })
  22. 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 } })
  23. 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) } });
  24. <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
  25. 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?!
  26. 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)
  27. 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
  28. 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
  29. 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)
  30. 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
  31. 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) })
  32. 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
  33. FRP é sobre relações dependentes que se estabilizam com o

    passar do tempo https://www.zweitag.de/en/blog/technology/functional-reactive- programming-frp