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 e WebAssembly. Rust 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 : 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. Segurança de memória : Rust foi projetado para velocidade, competindo de perto com linguagens como C e C++. Desempenho : o design da linguagem Rust facilita a escrita de código simultâneo, tornando-o altamente escalável. Simultaneidade : 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. Rico ecossistema 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 : o código WebAssembly é executado em velocidade quase nativa, aproveitando os recursos comuns de hardware. Desempenho : o WebAssembly foi projetado para ser seguro e em área restrita, sendo executado dentro de um ambiente protegido separado do sistema host. Segurança : WebAssembly é independente de plataforma, o que significa que pode ser executado em qualquer máquina que possua um navegador compatível. Portabilidade : os módulos WebAssembly podem ser facilmente integrados em aplicativos JavaScript, permitindo aproveitar as tecnologias da web existentes. Interoperabilidade 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: : o foco do Rust em abstrações de custo zero garante que seus módulos WebAssembly sejam enxutos e rápidos. Desempenho otimizado : Tanto o Rust quanto o WebAssembly priorizam a execução segura, tornando suas aplicações web mais confiáveis. Segurança e Proteçã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. Facilidade de integração 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 : Visite o e baixe o instalador adequado ao seu sistema operacional. Baixe o instalador do Rust site oficial do Rust : Abra seu terminal e execute o seguinte comando para instalar o Rust e seu gerenciador de pacotes, Cargo. Execute o instalador curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh : Para ter certeza de que o Rust está instalado corretamente, abra uma nova janela de terminal e execute: Verifique a instalação rustc --version Você deverá ver a versão do compilador Rust como saída. Instalando o wasm-pack é uma ferramenta para montar e empacotar caixas Rust direcionadas ao WebAssembly. wasm-pack : Abra seu terminal e execute o seguinte comando: Instale o wasm-pack curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh : verifique se está instalado executando: Verifique a instalação wasm-pack wasm-pack --version Instalando Node.js e npm Node.js e npm são essenciais para gerenciar dependências e executar seu servidor web. : Visite o e baixe o instalador para o seu sistema operacional. Baixe o Node.js site oficial do Node.js : siga as instruções de instalação para instalar o Node.js e o npm. Execute o instalador : abra um terminal e execute os seguintes comandos para verificar se o Node.js e o npm estão instalados: Verifique a instalação node --version npm --version Configurando seu IDE Embora você possa usar qualquer editor de texto para desenvolvimento em Rust e WebAssembly, IDEs como oferecem extensões para Rust que fornecem recursos como conclusão de código, linting e depuração. o Visual Studio Code : Baixe e instale-o do . Instale o Visual Studio Code site oficial : 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. Instale a extensão Rust : 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. Nota para usuários do macOS Instalação Rust para macOS Instalação do pacote wasm Instalação do Node.js para macOS 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 : Abra seu terminal e execute o seguinte comando para criar um novo projeto de biblioteca Rust. Crie uma nova biblioteca Rust cargo new --lib factorial_calculator : Navegue até o diretório do projeto cd factorial_calculator Escrevendo a função fatorial arquivo : Navegue até o arquivo em seu editor de texto ou IDE. Abra o lib.rs src/lib.rs : adicione o seguinte código Rust para implementar a função fatorial. Implemente 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 que recebe um (inteiro não assinado de 32 bits) como argumento e retorna um . A função usa recursão para calcular o fatorial de um determinado número. factorial u32 u32 Compilar para WebAssembly : Agora que temos nossa função fatorial, vamos compilá-la em um módulo WebAssembly. Execute o seguinte comando em seu terminal: Compile o código Rust wasm-pack build : Depois de executar o comando, você deverá ver um diretório na pasta do seu projeto. Dentro dele, você encontrará o módulo WebAssembly ( ) e a ligação JavaScript gerada ( ). Verifique o Build pkg factorial_calculator_bg.wasm 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 novo arquivo chamado no diretório do seu projeto e adicione o seguinte código HTML: Crie um arquivo HTML index.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 novo arquivo chamado e adicione o seguinte código JavaScript: Crie um arquivo JavaScript bootstrap.js 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 . Esta função lê o número do campo de entrada, chama a função do nosso módulo WebAssembly e exibe o resultado. calculateFactorial factorial Executando o aplicativo da web : se você não tiver um servidor web local, poderá instalar um usando npm: Instale um servidor web npm install -g http-server : navegue até o diretório do seu projeto no terminal e execute: Execute o servidor Web http-server . : abra seu navegador da web e navegue até . 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. Abra o aplicativo da web http://localhost:8080 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 Linguagem de programação Rust Site oficial do WebAssembly Foto da no SpaceX Unsplash

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

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Making security fun one episode at a time

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

Muito longo; Para ler

Max Zhuk

STORY’S CREDIBILITY

Guide

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

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

Muito longo; Para ler

Max Zhuk

STORY’S CREDIBILITY

Guide

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

HISTÓRIAS RELACIONADAS