Elm: Programação Funcional no Front-End do jeito certo

Matheus Lima
Tableless
Published in
4 min readMay 19, 2016

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 num podcast que a maior preocupação dele em relação ao JavaScript não era performance, mas sim a garantia de qualidade.

Elm logo

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.

Continue lendo esse post para aprender:
1. O que é Elm
2. Quais suas vantagens
3. Por que ele te ajuda a desenvolver do jeito certo
4. Qual a relação de Elm com Redux

Elm?!

Para os que ainda conhecem pouco sobre Elm, podemos resumi-lo dessa forma:

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, diferentemente 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 pra 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:

1.   view model = 
2. div [] [ butto [ onClick Decrement ] [ text “-” ] ]
3.

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.

Nessa talk, 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 a combinação de React/Redux, já vem built-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 todos os pontos levantados, vejo Elm como uma das linguagens pra ficar de olho nos próximos anos.

Esse post 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 posts, que entrarão em muito mais detalhes.

[UPDATE: 02/06/2016]
O primeiro post da série “Como construir a sua primeira aplicação com Elm” já saiu:
Como construir a sua primeira aplicação com Elm — Parte 1

Se você gostou do post não se esqueça de dar um ❤ aqui embaixo!
E se quiser receber de antemão mais posts como esse,
assine nossa newsletter.

Seja um apoiador, doe BitCoins: 1BGVKwjwQxkr3w1Md2X8WHAsyRjDjyJiPZ

JSCasts

É difícil encontrar conteúdo bom e atualizado em português. Com isso em mente criamos o JSCasts, onde você vai se manter em dia com o JavaScript e todo o seu ecossistema de forma fácil e interativa.

Cursos:

Obrigado por ler! ❤

--

--