Durante os últimos anos, bibliotecas como Underscore e lodash, encontraram seu espaço no cinto de utilidades de muitos programadores JavaScript.
Embora essas bibliotecas ajudem a escrever e até facilitar a sua vida em partes do seu código, não necessariamente, esse código, fica simples ou de fácil entendimento. Quem estiver lendo ou mantendo o código será obrigado a, além de conhecer a linguagem e sua biblioteca padrão, também conhecer a biblioteca de utilitários que está sendo usada.
Bibliotecas vem e vão, e todo mundo tem sua favorita. Qual é a ordem de argumentos para essa função map()? De qual biblioteca que essa função vem? Underscore (o eterno favorito), lodash (o versátil e mais rápido irmão mais novo), Ramda (o primo que tem uma abordagem mais funcional, que tem todos os argumentos começando do lado direito), ou qualquer abstração legal que você encontrar hoje em dia?
Se você estiver em um time, quais bibliotecas favoritas você escolheria? E se eu te disser, que você pode escolher a biblioteca padrão do JavaScript?
Quando você escreve código usando a biblioteca padrão de funções, você está tornando ele mais fácil para usar, entender e manter futuramente (aliás, pode ser você essa pessoa, daqui uns meses, quem sabe?).
Tudo bem, pode ser que você tenha que digitar um pouco mais para atingir a mesma funcionalidade, mas, desde quando, a velocidade que escrevemos código, é o gargalo para criar e manter um bom software?
É mais fácil de recuperar uma não-abstração do que uma abstração errada – Sebastian Markbåge
É muito mais fácil refatorar código verboso com poucas abstrações, do que códigos resumidos com uma abstração errada. Quando você começa a ver os padrões no seu código, repetidos por toda a parte, é hora de abstrair, você tem uma idéia de qual abstração correta você deve fazer, e provavelmente, vai acabar criando uma que valha a pena, mesmo contando com toda a sobrecarga que toda abstração adiciona.
JavaScript está evoluindo, e as novas edições, ES2015 e ES2016 (antes conhecidas como ES6 e ES7) trazem novas possibilidades, e ferramentas como Babel, deixam isso ainda mais fácil de se usar hoje em dia. Com isso em mãos, essas bibliotecas de funções utilitárias ficam obsoletas.
Ótimos recursos para aprender mais sobre as novas funções, a página em inglês, Learn ES2015 no site do Babel e o livro, em inglês, Understanding ECMAScript 6, escrito pelo Nicholas C. Zakas. Aprender e utilizar todos os poderosos recursos do JavaScript te dá uma segurança futura, pois elas terão vida mais longa do que a biblioteca do momento.
Mas não estou dizendo que não há espaço para bibliotecas de utilitários. Eu só estou dizendo que muitas das funções que eram essenciais para nós sermos produtivos quando escrevíamos ES3, podem ser escritas nativamente usando os recursos padrões do JavaScript.
Talvez você não precise de lodash ou Underscore.
Exemplos
Esses exemplos demonstram funcionalidades do ES5.1, ES2015 e ES2016, ficaram tão simples que você não precisa de uma biblioteca externa mais.
O que eu preciso para usá-los hoje em dia?
ES5 é suportado atualmente em todos os navegadores e no Node.js. Exemplos usando ES2015 e ES2016, podem ser compilados para ES5 usando Babel. É muito simples integrar o Babel no seu sistema, quase todas as ferramentas de automação hoje em dia, tem uma integração oficial. Se você precisar dar suporte para navegadores antigos (IE8), você pode utilizar a biblioteca es-shim, que traz quase todos os polyffils para ES5.
Arrays
Iteração
Underscore
_.each(array, fn)
ES5.1
array.forEach(fn)
Map
Underscore
_.map(array, fn)
ES5.1
array.map(fn)
Usar uma função para acumular o valor de um array (da esquerda para a direita)
Underscore
_.reduce(array, fn, init)
ES5.1
array.reduce(fn, init)
Usar uma função para acumular o valor de um array (da direita para a esquerda)
Underscore
_.reduceRight(array, fn, init)
ES5.1
array.reduceRight(fn, init)
Testar se todos os elementos de um array passam em uma operação
Underscore
_.every(array, fn)
ES5.1
array.every(fn)
Testar se um dos elementos de um array passam em uma operação
Underscore
_.some(array, fn)
ES5.1
array.some(fn)
Achar um valor em um array
Underscore
_.find(array, fn)
ES2015
array.find(fn)
Pegar uma propriedade de cada elemento do array
Underscore
_.pluck(array, prop)
ES2015
array.map(value => value[prop])
Verificar se o array contém o elemento
Underscore
_.includes(array, el)
ES2016
array.includes(el)
Convertendo um objeto array-like em array
Underscore
_.toArray(arguments)
ES2015
[...arguments]
Criando uma cópia do array e removendo todos os valores falsos
Underscore
_.compact(array)
ES5.1
array.filter(Boolean)
ES2015
array.filter(x => !!x)
Criando uma cópia do array e removendo itens duplicados
Underscore
_.uniq(array)
ES2015
[...new Set(array)]
Achando o index de um valor no array
Underscore
_.indexOf(array, val)
ES5.1
array.indexOf(val)
Achar o index de um valor no array baseado em uma operação
Underscore
_.findIndex([4, 6, 7, 12], numPrimo);
ES2015
[4, 6, 7, 12].findIndex(numPrimo);
Criar um array com N números, começando do X
Underscore
_.range(x, x + n)
ES2015
Array.from(Array(n), (v, k) => k + x)
Objetos
Nomes de todas as propriedades enumeráveis do próprio objeto
Underscore
_.keys(object)
ES5.1
Object.keys(object)
Número de chaves em um objeto
Underscore
_.size(object)
ES5.1
Object.keys(object).length
Nome de todas as propriedades enumeráveis em array
Underscore
_.allKeys(object)
ES2015
[...Reflect.enumerate(object)]
Valores
Underscore
_.values(object)
ES2015
Object.keys(object).map(key => object[key])
Criar um novo objeto passando o prototype e propriedades
Underscore
_.create(proto, prop)
ES2015
Object.assign(Object.create(proto), prop)
Criar um novo objeto a partir da mescla de suas propriedades
Underscore
_.assign({}, source, { a: false })
ES2015
Object.assign({}, source, { a: false })
ES2016
{ ...source, a: false }
Clonando um objeto e suas propriedades (cópia não recursiva de propriedades)
Underscore
_.extendOwn({}, object)
ES2016
{ ...object }
Verificando se o dado objeto é um array
Underscore
_.isArray(object)
ES5.1
Array.isArray(object)
Verificando se o objeto é um número finito
Underscore
_.isNumber(object) && _.isFinite(object)
ES2015
Number.isFinite(object)
Funções
Vinculando funções a novos escopos (ou binding)
Underscore
foo(_.bind(function () {
this.bar();
}, this));
foo(_.bind(object.fun, object));
ES2015
foo(() => { this.bar(); });
foo(object.fun.bind(object));
ES2016
foo(() => { this.bar(); });
foo(::object.fun);
Utilidades
Funções de identidade
Underscore
_.identity
ES2015
value => value
Uma função que retorna um valor
Underscore
_.constant(value)
ES2015
() => value
Funções vazias
Underscore
_.noop
ES2015
() => {}
Pegar o valor to tempo em milisegundos
Underscore
_.now()
ES5.1
Date.now()
Template
Underscore
var greeting = _.template("hello <%= name %>");
greeting({ name: 'moe' });
ES2015
const greeting = ({ name }) => `hello ${name}`;
greeting({ name: 'moe' });
Resumindo
Cada um dos exemplos demonstra as possibilidades que os novos padrões do JavaScript traz para nosso código do dia-a-dia. Re-aprenda o JavaScript de hoje!
Se interessou pelo assunto? Quer ver mais posts desse tipo? Alguma sugestão?
Deixe sua opinião aqui nos comentários ou mande um ping no twitter.
Artigo traduzido e adaptado de You Might Not Need Underscore escrito por Ville Immonen
---
Este artigo foi escrito por Eduardo Rabelo.
Visite o nosso site para mais posts sobre desenvolvimento web! Tableless.
from Tableless http://ift.tt/25yH2lP
via IFTTT
Comentários
Enviar um comentário