Imba: linguagem compatível com JavaScript para um trabalho rápido com DOM

Imba é uma linguagem de programação de código aberto criada pelo Scrimba especificamente para o desenvolvimento de aplicativos da web. Compila em JavaScript e pode trabalhar no ecossistema JS existente. Estamos falando, por exemplo, sobre Node.js, sobre npm, sobre Webpack.

O principal ponto forte da Imba é que essa linguagem permitirá criar aplicativos muito mais rápidos do que aqueles baseados em bibliotecas que usam a tecnologia Virtual DOM, como React e Vue. Os ganhos de desempenho de aplicativos são alcançados através da maneira como a Imba trabalha com atualizações do DOM. Detalhes sobre isso podem ser encontrados aqui .



O autor deste material, co-fundador do projeto Scrimba, diz que usa a Imba há vários anos. Segundo ele, escrever nesta linguagem é um verdadeiro prazer, pois, em comparação com o JavaScript, possui uma sintaxe mais limpa, o que melhora a legibilidade do código.

Este material é um guia da Imba para iniciantes, cujo desenvolvimento permitirá que você comece a criar aplicativos simples. Primeiro, o básico da linguagem será revelado aqui e, em seguida, será considerado o desenvolvimento de interfaces do usuário com sua ajuda. Ele mostrará imediatamente a configuração do ambiente de desenvolvimento para programação na Imba.

Sobre projetos que usam Imba

Antes de entrarmos no código, gostaria de chamar sua atenção para o fato de que o Imba não é algo como outra linguagem estranha compilada em JS e usada exclusivamente em projetos amadores. Também é usado em aplicações sérias de grandes empresas.

Um exemplo de sua aplicação é a plataforma de suporte ao leilão de peixes na Islândia. Nesse país, o comércio de peixes é responsável por cerca de 1,6% do PIB, que é de aproximadamente US $ 390 milhões.


Leilão de peixes islandeses

Outro exemplo é a plataforma de treinamento Scrimba.com , onde o Imba é usado nas partes do cliente e servidor do projeto. A usabilidade dessa plataforma, que é baseada em um aplicativo complexo, depende muito da capacidade da Imba de sincronizar rapidamente as alterações do DOM.


Plataforma Scrimba.com

Como resultado, podemos dizer que o idioma que você encontrará hoje é adequado para o desenvolvimento de projetos de várias escalas.

Sintaxe

A sintaxe da Imba é muito parecida com JavaScript, mas outras linguagens como Ruby e Python também têm efeito. Talvez os recursos de sintaxe da Imba sejam convenientemente considerados como um exemplo. Abaixo está uma função JS simples que retorna o maior dos dois números passados ​​para ela ou, se esses números forem iguais, false .

 function findGreatest(num1, num2) { if (num1 > num2) {   return num1 } else if (num2 > num1){   return num2 } else {   return false } } 

Agora escreva a mesma coisa na Imba.

 def findGreatest num1, num2   if num1 > num2       num1   elif num2 > num1       num2   else       false 

Provavelmente, comparando esses dois exemplos, é possível ver imediatamente as diferenças entre Imba e JavaScript. Ou seja, eles são os seguintes:

1. function transforma em def . A function palavra-chave function substituída pela palavra-chave def .
2. Falta de colchetes. Os parâmetros de função não estão entre parênteses. Na Imba, de fato, os parênteses raramente são necessários, embora você possa usá-los se quiser.
3. Recuo. O recuo desempenha um papel muito importante na Imba. Isso significa que chaves aqui não são necessárias.
4. Palavra-chave de return ausente. Na Imba, o retorno de valores de funções é realizado implicitamente, ou seja, não há necessidade da palavra-chave return . Imba retorna automaticamente a última expressão da função.

Isso não quer dizer que os recursos de sintaxe descritos acima são o aspecto mais importante da Imba, mas tornam o código mais conciso do que o código semelhante escrito em JavaScript. Essa vantagem se tornará mais visível à medida que progredirmos no material.

Design de Interface do Usuário

Vamos falar sobre a criação de interfaces de usuário usando o Imba. De fato, essa linguagem foi criada apenas para isso. Em particular, isso significa que os nós DOM são incorporados no idioma na forma dos chamados "objetos de primeira classe".

Se você possui experiência com o desenvolvimento do React, pode considerar esse recurso do Imba como se o Imba tivesse sua própria versão do JSX incorporada à linguagem.

Considere o código a seguir, no qual a biblioteca React é usada para renderizar um botão e exibir uma mensagem para o console quando você clica nesse botão.

 class App extends React.Component { logOut() {   console.log('button clicked!') } render() {   return (     <div className="container">       <button onClick={this.logOut}>click me!</button>     </div>   ) } } 

Se você reescrever isso na Imba, obterá o seguinte.

 tag App   def logOut e       log 'button clicked!'   def render       <self.container>           <button :tap.logOut> 'Click me!' Imba.mount <App> 

Vamos comparar esses dois trechos de código. Ou seja, prestamos atenção aos três recursos a seguir:

1. Tags embutidas. Observe que a construção da class App extends React.Component foi convertida para uma forma muito mais simples - a tag App . A palavra-chave tag é incorporada ao idioma. Tags DOM também são integradas.
2. Falta de tags de fechamento. Como o alinhamento de linha determina a estrutura do programa, você não precisa fechar as tags (por exemplo, usando a </button> ). Isso acelera a entrada do texto do programa e reduz seu tamanho.
3. Sintaxe de classe simples. Imba simplifica o trabalho com classes HTML. Ou seja, em vez da construção complicada de className="container" basta adicionar .container à própria tag.

Você também pode ter notado recursos de manipuladores de eventos na Imba. Nomeadamente, conectamos o manipulador correspondente ao botão usando a construção :tap.logOut , usada em vez de onClick={this.logOut} . Essa é apenas uma das várias maneiras de lidar com eventos provenientes do usuário. Detalhes sobre isso podem ser encontrados aqui .

Trabalhar com dados

Agora vamos falar sobre como trabalhar com dados na Imba. O exemplo a seguir mostra um aplicativo React, no estado do componente App do qual existe uma variável de count igual a 0. O valor dessa variável diminui ou aumenta clicando nos botões correspondentes.

 class App extends React.Component { state = {   count: 0 } increase = () => {   this.setState({     count: this.state.count + 1   }) } decrease = () => {   this.setState({     count: this.state.count - 1   }) } render() {   return (     <div className="container">       <button onClick={this.increase}>Increase!</button>       <button onClick={this.decrease}>Decrease!</button>       <p>{this.state.count}</p>     </div>   ) } } 

Veja como o mesmo ficará na Imba.

 tag App   prop count default: 0   def increase       count += 1   def decrease       count -= 1   def render       <self.container>           <button :tap.increase> 'Increase!'           <button :tap.decrease> 'Decrease!'           <p> count Imba.mount <App> 

A primeira coisa que chama sua atenção ao comparar esses dois exemplos é a diferença na quantidade de código.

O exemplo da Imba é cerca de duas vezes menor - tanto em termos do número de linhas quanto da quantidade de código.

Embora a comparação do número de linhas de código ao comparar linguagens de programação não seja tão importante, ela afeta a legibilidade do código, que, na escala de uma determinada base de código, já desempenha um papel. Menos código na Imba significa melhor legibilidade em comparação com o React.

Auto-acesso implícito

Você deve ter notado que no exemplo acima, acessamos diretamente a variável de instância do objeto, mencionando apenas sua count nomes. No React, o mesmo é feito usando a construção this.state.count .

Em nosso exemplo em Imba, também se pode usar uma construção da forma self.count , no entanto, self é acessado aqui implicitamente, portanto self opcional. A Imba, quando se refere à count , descobre se essa variável existe no escopo ou na instância do próprio aplicativo.

Mutabilidade

Outra grande diferença entre os dois exemplos anteriores é como eles implementam a mudança de estado. Em um exemplo escrito em Imba, o estado é mutável, o que permite alterar o valor da variável count diretamente.

O React adota uma abordagem diferente, na qual o valor this.state considerado imutável, como resultado, a única maneira de alterá-lo é usar this.setState .

Se você preferir trabalhar com o estado imutável, poderá usar a biblioteca apropriada com o Imba. A linguagem Imba, neste sentido, não está ligada a nenhuma solução específica. No projeto Scrimba, usamos um estado mutável, pois acreditamos que não precisamos dos custos excessivos dos recursos do sistema necessários para garantir a imunidade.

Configurando um ambiente de desenvolvimento

Agora que você se familiarizou com o básico da Imba, é hora de experimentar. Para fazer isso, você precisará configurar o ambiente de desenvolvimento. Para fazer isso, basta executar os seguintes comandos.

 git clone https://github.com/somebee/hello-world-imba.git cd hello-world-imba npm install npm run dev 

Depois disso, vá para o navegador em http://localhost:8080/ e você verá a página principal do projeto. Para modificar o aplicativo - edite o arquivo, que pode ser encontrado em src/client.imba .

Se a instalação local do Imba não combina com você, você pode usar a sandbox online interativa do projeto Scrimba.

Imba Performance

Vamos falar sobre o desempenho de aplicativos escritos em Imba. A razão pela qual o Imba permite criar aplicativos da Web extremamente rápidos é porque esse idioma não usa o conceito Virtual DOM, que se tornou muito popular no React. A Imba usa a tecnologia DOM memorizada. É mais simples que o DOM Virtual e usa menos mecanismos intermediários para trabalhar com o DOM.

Nesta referência, que você pode executar em casa, basta clicar no botão RUN BENCHMARK em sua página, comparamos o número de operações com o DOM que podem ser executadas em um segundo durante a modificação da lista TODO usando Imba, React e Vue.

No teste, cujos resultados são mostrados abaixo, a Imba é 20 a 30 vezes mais rápida que o React e o Vue. Em computadores diferentes, os resultados do teste variam.


Medições de desempenho de Imba, React e Vue

Como você pode ver, o uso da Imba significa a capacidade de trabalhar extremamente rapidamente com o DOM.

Sumário

Neste artigo, abordamos apenas o básico da Imba. Se você está interessado neste idioma, consulte a documentação . Em particular, será útil dominar seu conceito de uso de getters e setters e o mecanismo de chamadas implícitas. Aqui está uma lista de recursos úteis relacionados à Imba. Deve-se observar que, a princípio, esse idioma pode parecer difícil, levará algum tempo para dominá-lo, mas, como todos sabem, não é possível tirar facilmente um peixe de um lago.

Caros leitores! Você planeja usar a linguagem Imba em seus projetos?