JavaScript de qualidade: hoje, amanhã e sempre

Em maio deste ano ocorreu um dos maiores eventos de desenvolvimento de software em Campinas e região, o DevCamp....

Data de publicação: 04/07/2014

Em maio deste ano ocorreu um dos maiores eventos de desenvolvimento de software em Campinas e região, o DevCamp. Foram mais de 30 palestras em dois dias, que falavam desde as trincheiras do universo OpenSource até técnicas para realizar mineração de dados na base de código da sua empresa.
Felizmente, tive a oportunidade de colaborar com esse evento, falando um pouco sobre qualidade de código em JavaScript. Elencarei alguns pontos interessantes da talk que realizei com o Thiago de Oliveira (@tdopires).

O problema da dívida técnica

Qualidade de código em JavaScript é muitas vezes negligenciada, desenvolvedores acabam assumindo dívidas técnicas inconscientemente, pois não entendem bem como alguns detalhes da linguagem funcionam.
Pensando no front-end, onde o JavaScript comumente utilizado, podemos melhorar nosso código sem nem mesmo entrar nas minúcias da linguagem.
Quando implementamos módulos no back-end, é natural nos preocuparmos com a organização do componentes, escrevendo cada parte em uma camada de maneira coerente.
Esse tipo de pensamento também deve ser considerado no front-end. É comum ver código HTML misturado com código JS (geralmente, através daquelas concatenações ultra-complexas, que pioram ainda mais conforme o software evolui).
Outro mau cheiro é a presença de regras de negócio no JavaScript, como a validação de algum formulário. Nesse tipo de cenário podem ocorrer dois problemas: código duplicado, já que essa validação deverá ser realizada no back-end; ou pior, a validação pode não existir no back-end, deixando a API da sua aplicação bastante frágil, já que um usuário malicioso pode fazer requisições para criar entidades inválidas.
Respeitar todas as camadas do front-end, mantendo-as desacopladas, é fundamental para mantermos nosso código limpo e conciso.

Herança clássica

JavaScript é uma linguagem com base em protótipo funcional que não possui classes (ok, todo mundo já está cansado de saber disso). Porém, muitas vezes utilizamos a abstração de classes em código JS, principalmente quando buscamos estratégias para implementar uma feature que nem existe na linguagem, a feature de herança clássica.
A herança clássica é uma estratégia para implementarmos herança em JS, onde absorvemos explicitamente conceitos de linguagens orientadas a objeto, como Ruby.
[javascript]
function Parent() {
this.name = ‘Joey’;
}
Parent.prototype.say = function() {
console.log(‘I’m ‘ + this.name);
}
function Child() {
this.name = ‘Dee Dee’;
}
function inherits(Child, Parent) {
Child.prototype = Object.create(Parent.prototype);
}
inherits(Child, Parent);
var a = new Child();
a.say(); // => I’m Dee Dee
[/javascript]
Repare no exemplo acima, como “Parent” e “Child” se parecem muito com classes e que a relação de herança entre eles é bastante familiar.

ECMAScript 6

A nova versão do JavaScript, que virá com o ECMAScript 6, traz uma série de novos recursos para tornar algumas operações mais elegantes, como: ↪ class: A abstração de herança clássica implementada acima, por exemplo, ganhou uma sintaxe muito mais expressiva:
[javascript]
class Man {
constructor (name) {
this.name = name;
}
say (message) {
return this.name + ‘: ‘ + message;
}
}
let john = new Man(‘John Doe’);
john.say(‘Hi!’);
// => John Doe: Hi!
[/javascript]
↪ Arrow functions: Uma nova sintaxe para representar funções foi introduzida:
[javascript]
// ECMA 5
[1, 2, 3].map(function (i) {
return i * i;
});
// => [1, 4, 9]
// ECMA 6 – repare que o return pode ser omitido quando utilizamos funções dessa maneira
[1, 2, 3].map(x => x * x);
// => [1, 4, 9]
[/javascript]
↪  Modules: É uma maneira simples de exportar/importar módulos de maneira padronizada, criando um protocolo de compartilhamento de bibliotecas e facilitando o refactoring de código global para modular:
[javascript]
// plugins/math.js
export function square (a) {
return a * a;
}
// index.js
import ‘plugins/math.js’ as Math;
Math.square(1);
[/javascript]

E hoje?

JavaScript está se tornando uma linguagem cada vez mais robusta, e já passou da hora de tratarmos o código de nossos projetos e com um olhar mais crítico e analítico. Temos ferramentas muito bacanas para nos auxiliar nesse tipo de processo, como o Jasmine para escrita de testes (http://jasmine.github.io/), e o Grunt.JS para automatização de diversas tarefas (http://gruntjs.com/).
Se você curtiu o ECMA6 e está afim de começar a testar esses novos recursos, pode começar agora mesmo com o Traceur do Google (https://github.com/google/traceur-compiler).

Comentários

  1. Douglas Nogueira4 de julho de 2014

    Javascript é a linguagem do momento, esse descuido que existe em tratar a linguagem como se fosse algo simples é um erro fatal.
    com o nascimento do padrão rest, frameworks mvvm e agora com os recursos de websockets, a organização do código é mais importante do que nunca.
    o próprio google adota e indica padrões de desenvolvimento usando angular.js em seus aplicativos.

    Responder

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

2 + 6 =

Posts relacionados

  1. Sobre a Dextra

    Somos especialistas em desenvolvimento de software sob medida para negócios digitais. Pioneiros na adoção de metodologias de gestão ágil, combinamos processos de design, UX, novas tecnologias e visão de negócio, desenvolvendo soluções que criam oportunidades para nossos clientes.

  2. Categorias

Scroll to top