Desenvolvimento

21 jul, 2016

Elm: programação funcional no front-end do jeito certo

Publicidade

Nos últimos anos trabalhei, na maior parte do tempo, com apenas dois frameworks: Angular e React. Ambos possuem qualidades, mas um problema em comum: a liberdade que o JavaScript nos dá rapidamente se vira contra nós em aplicações grandes.

O próprio Douglas Crockford disse recentemente em um podcast que a maior preocupação dele em relação ao JavaScript não era performance, mas a garantia de qualidade.

De uns tempos pra cá, tenho visto um grande interesse pela comunidade na linguagem Elm. No começo, não consegui entender as motivações e achei que era mais um hype, mas ao me aprofundar vi que Elm é realmente uma linguagem fantástica. Ela praticamente te obriga a desenvolver do jeito certo e reforça todas as boas práticas que vemos atualmente em JavaScript de forma natural.

Neste artigo, vou falar um pouco sobre o que é Elm, quais são suas vantagens, por que ele te ajuda a desenvolver do jeito certo e qual a relação de Elm com Redux.

Elm?!

Para os que ainda conhecem pouco sobre Elm, podemos resumir assim:

“Elm é uma linguagem funcional, fortemente tipada e que compila para JavaScript, HTML e CSS.”

A ideia principal é trazer os benefícios (e garantias) da programação funcional para o front-end.

Elm não tenta ter nenhuma relação com o JavaScript, diferente das outras linguagens que são compiladas pra ele. É uma linguagem completamente distinta, com seu ecossistema próprio, e que por acaso precisa do JavaScript para poder rodar nos browsers.

Vantagens

Um dos pontos mais falados pelos criadores da linguagem é que Elm não tem runtime exceptions. Se você conseguir compilar um código Elm, simplesmente você não terá erros em tempo de execução.

Ou seja, nunca mais você verá erros como esse:

Uncaught TypeError: undefined is not a function

E isso só é possível por causa de três características da linguagem:

  1. Tipagem forte
  2. Imutabilidade
  3. Null e Undefined não existem

Compilador inteligente

Um dos pontos mais surpreendentes, principalmente para quem está acostumado com JavaScript, são as mensagens de erro do compilador. Eu nunca tinha visto algo parecido em nenhuma outra linguagem.

No exemplo abaixo nós cometemos um pequeno erro. Digitamos butto ao invés de button:

  view model = 
     div [] [ butto [ onClick Decrement ] [ text “-” ] ]

Repare na mensagem de erro que o compilador nos retorna e me diga que não é absolutamente fantástico:

Cannot find variable `butto` 
2| [ butto [ onClick Decrement ] [ text “-” ] 
     ^^^^^ 
Maybe you want one of the following? 
button 
Html.button

Ele não apenas nos disse exatamente onde estava o erro, como também sugeriu possíveis soluções.

Na talk abaixo, o Richard Feldman entra em mais detalhes sobre isso:

Boas práticas

Quando pensamos em boas práticas no atual cenário do JavaScript, imediatamente associamos a:

  • Programação Funcional
  • Imutabilidade
  • Previsibilidade
  • Reatividade

Esses benefícios, que geralmente estão associados à combinação de React/Redux, já vembuilt-in na linguagem, sem que seja preciso usar nenhuma lib externa. Inclusive, o criador do Redux admitiu que usou a arquitetura do Elm como inspiração.

Conclusão

Com os todos os pontos levantados, vejo Elm como uma das linguagens pra ficar de olho nos próximos anos. Lembrando que esse artigo foi apenas uma introdução, sem mostrar muito código, para revelar as principais motivações por trás da linguagem. Ele fará parte de uma série de artigos, que entrarão em muito mais detalhes.

Tem alguma dúvida ou algo a acrescentar? Aproveite os campos abaixo!