Desenvolvendo Aplicações Web com Elm – Parte 1

Este é o primeiro post de uma serie sobre desenvolvimento para web com Elm. Para começar, Elm é uma linguagem funcional que é compilada para JavaScript. Segundo seus desenvolvedores, ela visa simplicidade e facilidade no uso, se tornando um ferramental de qualidade para se desenvolver aplicações. Nessa postagem exploraremos o núcleo da linguagem.

Mas porque usar Elm? Entre suas features principais estão:

  • Possibilidade de fazer apenas parte de sua aplicação em Elm. Já que a linguagem compila para javascript, é possível ter parte do código em cada uma das linguagens na mesma aplicação.
  • Stateless Functions, ou seja, suas funções não tem nenhum efeito colateral, dependendo apenas da entrada para gerar uma saída.
  • Sem erros em RunTime, diminuindo a possibilidade de se levar erros para o usuário final, além de uma sintaxe bastante amigável na hora de estourar exceções.
  • É “tipado”, isso significa que suas variáveis tem tipo, evitando problemas inesperados, principalmente com atualizações de PATCHES.
  • Implementa um VirtualDOM, uma maneira declarativa de se representar o DOM, melhorando a performance na hora de renderizar paginas web. Além disso, o Elm gera um código JavaScript mais rápido que seus “concorrentes”, como React, Angular 1x/2x e Ember (imagem abaixo).

benchmark

    Os primeiros passos:

  • Instalação: É possivel instalar em OSX e Windows via Instalador e via npm em qualquer uma das plataformas. Neste tutorial vamos instalar com npm (necessario Node e npm instalados)
    • Rode o comando npm install -g elm
    • Rode elm-repl para abrir o compilador no seu terminal ou cmd

    Operadores:

  • Elm tem uma sintaxe minimalista e bem simples, os operadores deixam claro com que tipo de variável você está trabalhando, como por exemplo:
    • > “hello” ++ “world”   // Concatena 2 strings resultando em “helloworld”
    • > “hello” + “world” // Espera que os dois lado da soma sejam números, erro de compilação
    • > 10 + 10 //Soma os números e resulta em 20

    Condicionais:

  • > if True then “hello” else “world”  //Proximo de um if em JavaScript, apenas utilizando o operador then

    Funções:

  • As funções não utilizam nenhum tipo de chave ou vírgula
    • > over9000 powerLevel =   //Função over9000 recebe o parâmetro powerLevel
          if powerLevel > 9000 then “It’s over 9000!!!” else “meh”  
    • > over9000 42   //Chamada da função over9000 com 42 como parametro
      “meh”

    Estruturas de dados:

  • Em Elm temos 3 estruturas de dados principais:
    •  Listas (semelhantes a arrays em JavaScript, mas aceitam apenas variáveis de mesmo tipo)
      • > names = [ “Alice”, “Bob”, “Chuck” ]  
    • Tuples (basicamente uma Lista, mas pode carregar variáveis de tipos diferentes)
      • > (True, “name accepted!”)  
    • Records (A representação do que seria um Object em JavaScript, trabalhando com chave-valor)
      • > bill = { name = “Gates”, age = 57 }

    A Arquitetura:

Elm possui uma arquitetura “padrão” que fluiu naturalmente da maneira como a linguagem foi concebida, chamada de The Elm Architeture. Ela é bem simples e pode ser quebrada em 3 partes:

  • Model – o estado da aplicação
  • Update – um caminho para atualizar o estado
  • View – um caminho para visualizar o estado em forma de HTML

 

Em nosso próximo post iremos iniciar o desenvolvimento de uma aplicação seguindo a The Elm Architeture e as boas praticas da linguagem.

Por EDUARDO PEDROSO

Desenvolvedor de software a 4 anos, a maior parte deles trabalhando com JavaScript e Ruby On Rails. Atualmente dedica seu tempo a projetos Open Source voltados para aplicações Mobile Híbridas e Nativas com JS.

Postado em: 29 de novembro de 2016

Confira outros artigos do nosso blog

REST não é JSON

21 de agosto de 2017

Bruno Sofiato

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

JavaScript 6: diferença entre var, let e const

09 de maio de 2017

Otávio Felipe do Prado

Deixe seu comentário