paint-brush
Construindo um aplicativo Web simples com Rust e WebAssembly: um guia passo a passopor@zhukmax
16,736 leituras
16,736 leituras

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

por Max Zhuk
Max Zhuk HackerNoon profile picture

Max Zhuk

@zhukmax

Web-developer, tech writer

8 min read2023/10/26
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript

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
Max Zhuk HackerNoon profile picture
Max Zhuk

Max Zhuk

@zhukmax

Web-developer, tech writer

0-item

STORY’S CREDIBILITY

Guide

Guide

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

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

  1. Baixe o instalador do Rust : Visite o site oficial do Rust e baixe o instalador adequado ao seu sistema operacional.

  2. 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
  3. 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.

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

     curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
  2. 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.

  1. Baixe o Node.js : Visite o site oficial do Node.js e baixe o instalador para o seu sistema operacional.

  2. Execute o instalador : siga as instruções de instalação para instalar o Node.js e o npm.

  3. 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.

  1. Instale o Visual Studio Code : Baixe e instale-o do site oficial .
  2. 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

  1. 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
  2. Navegue até o diretório do projeto :

     cd factorial_calculator

Escrevendo a função fatorial

  1. Abra o arquivo lib.rs : Navegue até o arquivo src/lib.rs em seu editor de texto ou IDE.

  2. 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

  1. 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
  2. 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

  1. 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.

  2. 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

  1. Instale um servidor web : se você não tiver um servidor web local, poderá instalar um usando npm:

     npm install -g http-server
  2. Execute o servidor Web : navegue até o diretório do seu projeto no terminal e execute:

     http-server .
  3. 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.

Recursos adicionais


Foto da SpaceX no Unsplash

L O A D I N G
. . . comments & more!

About Author

Max Zhuk HackerNoon profile picture
Max Zhuk@zhukmax
Web-developer, tech writer

Rótulos

ESTE ARTIGO FOI APRESENTADO EM...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
X REMOVE AD