14,235 leituras

Construindo um aplicativo Web simples com Rust e WebAssembly: um guia passo a passo

por Max Zhuk8m2023/10/26

Muito longo; Para ler

Aprenda a construir um aplicativo web de alto desempenho usando Rust e WebAssembly.

featured image - Construindo um aplicativo Web simples com Rust e WebAssembly: um guia passo a passo

Introdução

Você já ficou frustrado com as limitações de desempenho do JavaScript? Você não está sozinho. À medida que as aplicações web se tornam mais complexas, a necessidade de soluções de alto desempenho torna-se mais aparente. Entra em cena Rust e WebAssembly – duas tecnologias que prometem não apenas desempenho, mas também segurança e eficiência. Neste artigo, percorreremos o processo de construção de um aplicativo Web simples usando Rust e WebAssembly.

Por que Rust e WebAssembly?

O que é ferrugem?

Rust é uma linguagem de programação de sistemas que visa fornecer segurança, simultaneidade e desempenho de memória. Ele foi projetado para eliminar bugs comuns causados por ponteiros nulos, buffer overflows e corridas de dados, graças ao seu forte sistema de tipos e modelo de propriedade. Isso torna o Rust a escolha ideal para construir software confiável e eficiente.

Vantagens da ferrugem

Segurança de memória : o modelo de propriedade do Rust garante que as variáveis tenham um único proprietário, evitando vazamentos de memória e acesso não autorizado aos dados.
Desempenho : Rust foi projetado para velocidade, competindo de perto com linguagens como C e C++.
Simultaneidade : o design da linguagem Rust facilita a escrita de código simultâneo, tornando-o altamente escalável.
Rico ecossistema : com um repositório de pacotes cada vez maior, Cargo, Rust oferece uma ampla variedade de bibliotecas e estruturas para desenvolvimento web, manipulação de dados e muito mais.

O que é WebAssembly?

WebAssembly (frequentemente abreviado como wasm) é um formato de instrução binária que serve como alvo de compilação para linguagens de alto nível como C, C++ e Rust. Ele foi projetado para ser um formato de código portátil e eficiente que permite desempenho quase nativo em navegadores da web.

Vantagens do WebAssembly

Desempenho : o código WebAssembly é executado em velocidade quase nativa, aproveitando os recursos comuns de hardware.
Segurança : o WebAssembly foi projetado para ser seguro e em área restrita, sendo executado dentro de um ambiente protegido separado do sistema host.
Portabilidade : WebAssembly é independente de plataforma, o que significa que pode ser executado em qualquer máquina que possua um navegador compatível.
Interoperabilidade : os módulos WebAssembly podem ser facilmente integrados em aplicativos JavaScript, permitindo aproveitar as tecnologias da web existentes.

A sinergia entre Rust e WebAssembly

Combinar os recursos de desempenho e segurança do Rust com a velocidade e portabilidade do WebAssembly cria uma dupla poderosa para desenvolvimento web. Veja por que eles funcionam tão bem juntos:

Desempenho otimizado : o foco do Rust em abstrações de custo zero garante que seus módulos WebAssembly sejam enxutos e rápidos.
Segurança e Proteção : Tanto o Rust quanto o WebAssembly priorizam a execução segura, tornando suas aplicações web mais confiáveis.
Facilidade de integração : Rust tem suporte de primeira classe para WebAssembly, tornando simples compilar o código Rust para wasm e integrá-lo em seus aplicativos da web.

Ao aproveitar o Rust e o WebAssembly, você não está apenas acompanhando as tendências modernas de desenvolvimento web; você está ficando à frente da curva.

Configurando seu ambiente de desenvolvimento

Antes de mergulhar no código, é crucial configurar um ambiente de desenvolvimento personalizado para Rust e WebAssembly. Isso garantirá que você tenha todas as ferramentas e bibliotecas necessárias à sua disposição, agilizando o processo de desenvolvimento.

Instalando ferrugem

Baixe o instalador do Rust : Visite o site oficial do Rust e baixe o instalador adequado ao seu sistema operacional.
Execute o instalador : Abra seu terminal e execute o seguinte comando para instalar o Rust e seu gerenciador de pacotes, Cargo.
```
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```
Verifique a instalação : Para ter certeza de que o Rust está instalado corretamente, abra uma nova janela de terminal e execute:
```
 rustc --version
```
Você deverá ver a versão do compilador Rust como saída.

Instalando o wasm-pack

wasm-pack é uma ferramenta para montar e empacotar caixas Rust direcionadas ao WebAssembly.

Instale o wasm-pack : Abra seu terminal e execute o seguinte comando:

 curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

Verifique a instalação : verifique se wasm-pack está instalado executando:
```
 wasm-pack --version
```

Instalando Node.js e npm

Node.js e npm são essenciais para gerenciar dependências e executar seu servidor web.

Baixe o Node.js : Visite o site oficial do Node.js e baixe o instalador para o seu sistema operacional.
Execute o instalador : siga as instruções de instalação para instalar o Node.js e o npm.
Verifique a instalação : abra um terminal e execute os seguintes comandos para verificar se o Node.js e o npm estão instalados:
```
 node --version npm --version
```

Configurando seu IDE

Embora você possa usar qualquer editor de texto para desenvolvimento em Rust e WebAssembly, IDEs como o Visual Studio Code oferecem extensões para Rust que fornecem recursos como conclusão de código, linting e depuração.

Instale o Visual Studio Code : Baixe e instale-o do site oficial .
Instale a extensão Rust : Abra o Visual Studio Code, vá para o mercado de extensões e procure a extensão "Rust" por ferrugem-lang. Instale-o para obter suporte aprimorado ao Rust.

Nota para usuários do macOS : os comandos de instalação fornecidos neste guia são compatíveis com o macOS. Se você encontrar algum problema, consulte a respectiva documentação oficial para obter instruções específicas da plataforma.

Criando um programa Rust simples

Nesta seção, criaremos um programa Rust que calcula o fatorial de um determinado número. Isso nos dará a oportunidade de explorar alguns dos recursos do Rust, como funções, loops e instruções condicionais, ao mesmo tempo em que criamos um programa que exige muita computação.

Inicialize o projeto Rust

Crie uma nova biblioteca Rust : Abra seu terminal e execute o seguinte comando para criar um novo projeto de biblioteca Rust.
```
 cargo new --lib factorial_calculator
```
Navegue até o diretório do projeto :
```
 cd factorial_calculator
```

Escrevendo a função fatorial

Abra o arquivo lib.rs : Navegue até o arquivo src/lib.rs em seu editor de texto ou IDE.
Implemente a função fatorial : adicione o seguinte código Rust para implementar a função fatorial.
```
 #[no_mangle] pub extern "C" fn factorial(n: u32) -> u32 { if n == 0 { 1 } else { n * factorial(n - 1) } }
```
Aqui, definimos uma função chamada factorial que recebe um u32 (inteiro não assinado de 32 bits) como argumento e retorna um u32 . A função usa recursão para calcular o fatorial de um determinado número.

Compilar para WebAssembly

Compile o código Rust : Agora que temos nossa função fatorial, vamos compilá-la em um módulo WebAssembly. Execute o seguinte comando em seu terminal:
```
 wasm-pack build
```
Verifique o Build : Depois de executar o comando, você deverá ver um diretório pkg na pasta do seu projeto. Dentro dele, você encontrará o módulo WebAssembly ( factorial_calculator_bg.wasm ) e a ligação JavaScript gerada ( factorial_calculator.js ).

E aí está! Você acabou de criar um programa Rust que calcula o fatorial de um número e o compila em um módulo WebAssembly. Isso não apenas demonstra os recursos do Rust, mas também prepara o terreno para a integração dessa lógica em um aplicativo da web.

Integrando WebAssembly em um aplicativo Web

Agora que temos um módulo WebAssembly para calcular fatoriais, vamos integrá-lo em uma aplicação web simples. Criaremos uma interface HTML básica onde os usuários podem inserir um número e então exibir o fatorial desse número usando nosso módulo WebAssembly gerado por Rust.

Configuração de HTML e JavaScript

Crie um arquivo HTML : Crie um novo arquivo chamado index.html no diretório do seu projeto e adicione o seguinte código HTML:

 <!DOCTYPE html> <html> <head> <title>Factorial Calculator</title> </head> <body> <h1>Factorial Calculator</h1> <input type="number" id="numberInput" placeholder="Enter a number"> <button onclick="calculateFactorial()">Calculate</button> <p>Result: <span id="result"></span></p> <script src="./bootstrap.js"></script> </body> </html>

Aqui criamos uma interface simples com um campo de entrada para o número, um botão para acionar o cálculo e um parágrafo para exibir o resultado.

Crie um arquivo JavaScript : Crie um novo arquivo chamado bootstrap.js e adicione o seguinte código JavaScript:
```
 import('./factorial_calculator').then(module => { window.calculateFactorial = () => { const input = document.getElementById('numberInput').value; const result = module.factorial(parseInt(input)); document.getElementById('result').innerText = result; }; }).catch(console.error);
```
Neste script, importamos dinamicamente nosso módulo WebAssembly e definimos uma função chamada calculateFactorial . Esta função lê o número do campo de entrada, chama a função factorial do nosso módulo WebAssembly e exibe o resultado.

Executando o aplicativo da web

Instale um servidor web : se você não tiver um servidor web local, poderá instalar um usando npm:
```
 npm install -g http-server
```
Execute o servidor Web : navegue até o diretório do seu projeto no terminal e execute:
```
 http-server .
```
Abra o aplicativo da web : abra seu navegador da web e navegue até http://localhost:8080 . Você deverá ver seu aplicativo da web Calculadora Fatorial. Digite um número, clique em “Calcular” e o fatorial do número deverá ser exibido.

E é isso! Você integrou com sucesso um módulo WebAssembly gerado por Rust em um aplicativo da web simples. Isso demonstra o poder e a flexibilidade de combinar Rust com WebAssembly para criar aplicativos web de alto desempenho.

Conclusão

Neste artigo, exploramos a poderosa combinação de Rust e WebAssembly para desenvolvimento web. Começamos configurando nosso ambiente de desenvolvimento e depois criamos um programa Rust que calcula o fatorial de um número. Finalmente, integramos este programa em uma aplicação web simples.

A sinergia entre Rust e WebAssembly oferece uma infinidade de oportunidades para a construção de aplicações web de alto desempenho, seguras e eficientes. Esteja você procurando otimizar um projeto existente ou iniciar um novo, essas tecnologias fornecem soluções robustas que valem a pena considerar.

À medida que as tecnologias da web continuam a evoluir, manter-se à frente da curva é crucial. Rust e WebAssembly não são apenas tendências modernas; eles são os blocos de construção da próxima geração de aplicativos da web.

Obrigado por se juntar a mim nesta jornada e encorajo você a mergulhar mais fundo no mundo do Rust e do WebAssembly. Fique atento aos nossos próximos artigos, onde nos aprofundaremos na construção de recursos mais complexos e na exploração de aplicativos do mundo real.