Designer, entenda o que é Sintaxe e Função no mundo da programação!

Publicado originalmente em Codesigners.cc

Ok, tudo bem… eu sei que o título deste artigo é bastante pretensioso para que um designer explique o que é Sintaxe e Função no mundo da programação. Mas vamos lá, vou tentar!

A idéia aqui não é falar sobre como ‘010101s’ funcionam, tão pouco explicar como bits e bytes se organizam dentro de um computador. Existe um grande percurso para se entender como programas de computadores funcionam, inúmeras vertentes e paradigmas que uma pessoa, por exemplo, que cursa Ciência da Computação, estuda ao longo de sua graduação. Mas como designers, o que nos interessa dentro deste universo acaba se restringindo ao que visualizamos na tela e suas interações, e para criar e interagir com elementos visuais primeiro precisamos aprender bastante sobre Sintaxee Funções.

Vou tomar por base a linguagem Javascript, que é a que tenho mais experiência até o momento, mas vários (o quiçá todos) os conceitos que vou apresentar a seguir se aplicam à inúmeras linguagens de programação. Vamos lá!

Sintaxe

Uma das primeiras coisas que um designer precisa entender quando inicia-se no mundo da programação é a tal da Sintaxe da linguagem. Esse foi um dos meus primeiros problemas. Eu tentava escrever meus códigos sozinho, mas nunca sabia onde colocava parênteses, ou chaves, ou colchetes, ou dois pontos, ou ponto e vírgula… e porquê tem um sinal de exclamação, ou porquê a última linha da função é sempre um colchetes seguido de um ponto e vírgula:

function dump_props(obj, obj_name) {
  var result = "";
  for (var i in obj) {
    result += obj_name + "." + i + " = " + obj[i] + "<br>";
  }
  result += "<hr>";
  return result;
}

O código acima é um exemplo de função com um Loop do tipo For. Quando eu olhava para um bloco de código como esse daí, eu nunca sabia onde e porquê existiam parênteses, vírgulas e chaves, e muito menos onde e quando inseri-los.

Bom… para entender isso, você precisa entender a sintaxe da linguagem de programação que você está estudando. Sintaxe é como se fosse a Gramática do código. Se você vai aprender uma língua estrangeira, a gramática muda completamente. O mesmo se aplica à programação, que tem sua própria gramática.

Portanto, você precisa realmente estudar a linguagem e saber onde vai cada coisa. Aqui não tem muito jeito, o lance é repetição e leitura técnica. Recomendo fortíssimamente o primeiro livro da série You Don’t Know JS, que explica a sintaxe do Javascript de maneira bem legal.

Mas enfim, em resumo, para aprender sintaxe não tem outro jeito a não ser escrever bastante código. É igual aprender a escrever em português, você só vai ser um bom redator se escrever muita redação. Para treinar, recomendo você fazer os exercícios do desafio Javascript30 do programador Wes Bos. A idéia é que você faça 30 mini programinhas, um por dia, que vão te ajudar a explorar várias funcionalidades básicas do Javascript. Vale muito a pena e o Wes é muito bom.

Função

Talvez a parte mais importante de se programar seja criar funções. Sem elas nada acontece, nada é executado. Uma função é um bloco de código que executa uma série de tarefas de acordo com uma solicitação.

O meu maior problema para aprender funções foi a falta de metáforas comparativas. Geralmente um programador vai te explicar usando termos como “daí a função recebe o argumento X, executa o método Y e retorna Z”… WTF is argumento, execução ou retorno? Piora ainda quando acrescenta-se Método, Callback e por aí vai… são muitos termos e sempre muito abstratos em relação à coisas do ‘mundo real’.

Veja a imagem que montei abaixo, como se fosse um diálogo. Não é a metáfora mais linda do mundo, mas se no início alguém tivesse me mostrado essa imagem aí eu teria entendido melhor como uma função funciona…. Acredito que a imagem abaixo já explica um pouco melhor do que você só ver a função montada e não entender nada do que está escrito em meio à tantos parênteses, chaves e outros símbolos:

Aos poucos a gente vai entendendo como imaginar esses diálogos malucos. Acredito que a maioria dos programadores não pensam dessa forma, ou não criam esses pequenos diálogos em suas mentes, mas eu faço isso toda vez que vou montar uma função.

Outra coisa que me atrapalhava muito era o formato da função/código. Digo, graficamente elas também têm uma forma, algo tipo a figura abaixo:

Sim meus amigos, as funções têm formas na programação. Mas como pode ser observado na imagem acima, temos duas formas sendo que a de cima é o ‘Convencional‘ e a de baixo seria tudo escrito em uma única linha. As duas estão fazendo a mesma coisa e têm os mesmos elementos, a diferença é que a forma de cima é a mais comum e é basicamente o que você mais encontrará no mundo da programação.

Elas assumem esse desenho por questões de convenções, pois facilitam a leitura do código através do que é chamado de indentação, onde à cada linha interna da função é adicionada uma tabulação maior (mais ‘para dentro’).

Mas não existe uma obrigatoriedade de sempre seguir esse ‘design’ de código. É apenas uma boa prática que eu recomendo você a seguir, assim as chances de outras pessoas que forem ler seu código entenderem logo de cara será muito maior do que você escrever e organizar suas linhas de código de um jeito só seu.

O que eu faço com isso agora?

Ok, agora que você sabe que linguagens de programação têm sua própria ‘gramática’, e que uma Função pode se comparar à um diálogo onde quase sempre alguém está pedindo algo para que a outra parte execute, você já pode imaginar como juntar tudo e fazer um software né?

Se você não entendeu nada ainda, tamo junto! =P

Além da Sintaxe e Funções você também precisa ter um profundo conhecimento da gama de ferramentas que a linguagem que você escolheu te proporciona. No caso do Javascript você pode consultar o Guia Javascript nesse site maravilhoso da Mozilla. Como a linguagem é algo extenso e muito difícil de se ‘decorar‘, vai ser comum para você designer aventureiro no mundo da programação (assim como é comum para programadores), recorrer inúmeras vezes à documentação do Javascript para buscar informações de que método utilizar para montar a função desejada.

O importante é que agora você já sabe um pouco mais sobre este monte de símbolos e textos estranhos que você vê nos códigos, e a partir de agora você já tem um ponto de partida para criar suas próprias funções.

Se você acha que eu falei alguma besteira e quer me corrigir, ou acabou desenvolvendo seu próprio método para entender e escrever código, deixa aí nos comentários!