Web-developer, tech writer
Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.
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.
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.
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.
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:
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.
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.
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.
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
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
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.
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.
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.
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
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.
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.
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.
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.
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.
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.