21/06/2019 O que é WebAssembly e por que ele afeta todos os desenvolvedores web!

| iMasters

Eventos (h ps://eventos.imasters.com.br/)
Fórum iMasters (h ps://forum.imasters.com.br/)
Developer Store (h ps://imasters.shop/)
we are developers 7Masters (h ps://setemasters.imasters.com.br/)
Revista Impressa (h ps://issuu.com/imasters/docs/imasters_26_v6_isuu)
Certificações (h p://certificacao.imasters.com.br)
Blue</>Dev (h p://www.bluedev.com.br)

POWERED (HTTP://IMPULSO.NETWORK/?
(/)
BY:
(HTTPS://DEV.ELO.COM.BR) (h ps://www.face
UTM_SOURCE=IMASTERS&UTM_MEDIUM=SITE&UTM_CAMPAIGN=HEADER)

Back-End(https://imasters.com.br/back-end)
Mobile(https://imasters.com.br/mobile)
Front End(https://imasters.com.br/front-end)
DevSecOps(https://imasters.com.br/devsecops)
Design & UX(https://imasters.com.br/design-ux)
Data(https://imasters.com.br/data)
APIs e Microsserviços(https://imasters.com.br/apis-microsservicos)
IoT e Makers(https://imasters.com.br/iot-makers)

PATROCINADORES:

BACK-END

18 NOV, 2015

O que é WebAssembly e por que ele afeta todos os desenvolvedores

web!
(h ps://www.facebook.com/sharer?
u=h ps://imasters.com.br/back-end/o-que-e-
webassembly-e-por-que-ele-afeta-todos-os-
desenvolvedores-web)
1803 visualizações
(h ps://twi er.com/share?
url=h ps://imasters.com.br/back-end/o-que-e-
webassembly-e-por-que-ele-afeta-todos-os-
desenvolvedores-web)
(h ps://www.linkedin.com/shareArticle?
url=h ps://imasters.com.br/back-end/o-que-e- COMPARTILHE!
webassembly-e-por-que-ele-afeta-todos-os-
desenvolvedores-web)

THOMAS PEHAM
(HTTPS://IMASTERS.COM.BR/PERFIL/THOMASPEHAM)
Tem 13 artigos publicados com 31497
visualizações desde 2015

PUBLICIDADE

THOMAS PEHAM (HTTPS://IMASTERS.COM.BR/PERFIL/THOMASPEHAM)

13

É um gerente de marketing na startup austríaca Usersnap. É

especializado em inbound &amp; content marketing. Em seu tempo livre,
escreve sobre tendências de marketing e de tecnologia em seu blog. Ele
pode ser encontrado no Twi er: @tompeham.

LEIA MAIS (HTTPS://IMASTERS.COM.BR/PERFIL/THOMASPEHAM)

18 ABR, 2016
Plugins do WordPress essenciais para desenvolvedores e designers –
Parte 02 (h ps://imasters.com.br/back-end/plugins-do-wordpress-
essenciais-para-desenvolvedores-e-designers-parte-02)

15 MAR, 2016

https://imasters.com.br/back-end/o-que-e-webassembly-e-por-que-ele-afeta-todos-os-desenvolvedores-web 1/7
21/06/2019 O que é WebAssembly e por que ele afeta todos os desenvolvedores web! | iMasters
Por que ninguém fala sobre testes Agile…
(h ps://imasters.com.br/agile/por-que-ninguem-fala-sobre-testes-agile)

21 JAN, 2016
5 dicas essenciais para melhorar mockups de website
(h ps://imasters.com.br/design-ux/5-dicas-essenciais-para-melhorar-
mockups-de-website)

V ocê já ouviu alguma notícia sobre WebAssembly? Google, Microsoft, Mozilla e outros estão se unindo para lançar um novo
formato binário para a web.

Vamos direcionar um olhar mais atento para o que é WebAssembly e por que seu aspecto e desenvolvimento futuro devem importar
para todos.

Ele vai mudar a web. Pelo menos alguma extensão dela.

(https://static.imasters.com.br/wp-content/uploads/2015/11/webassembly-1.jpg)

JavaScript – o idioma da web

A web é baseada em vários padrões, o que é absolutamente bom. E isso faz com que a vida de construtores e criadores de código
seja mais fácil. Imagine que não existisse quaisquer regra, linguagem, estrutura ou conceito sob os quais construiríamos sites e
aplicações.

O padrão web que detém diversos conjuntos de informações tem um nome bem conhecido. É chamado de JavaScript.

O JavaScript é basicamente a linguagem de programação padrão para plataformas web. E como cada vez mais os softwares se
tornam softwares web, o JavaScript ganhou uma imensa popularidade.

Tem havido algumas tentativas ao longo dos anos para contornar as limitações do JavaScript, o que ele definitivamente tem.
Arquivos JavaScript são arquivos de texto simples. Esses arquivos são baixados do servidor e, em seguida, analisados e compilados
pelo motor JavaScript no navegador.

(https://static.imasters.com.br/wp-content/uploads/2015/11/webassembly-2.png)

Os navegadores atualmente usam JavaScript para interpretar código e habilitar funcionalidades, como conteúdo dinâmico. Melhorias
de desempenho com frameworks JavaScript também foram feitas. No entanto, os sistemas baseados em bytecode são ainda mais
rápidos e mais eficientes.

Então, o que diabos é WebAssembly?

https://imasters.com.br/back-end/o-que-e-webassembly-e-por-que-ele-afeta-todos-os-desenvolvedores-web 2/7
21/06/2019 O que é WebAssembly e por que ele afeta todos os desenvolvedores web! | iMasters
WebAssembly é uma espécie de novo código de byte. WebAssembly – ou abreviado: “wasm” – é uma nova sintaxe para código
binário seguro de baixo nível. Ele é definido como “um formato portátil para execução, carregamento, verificação e exibição de
modelos de código”, projetado para servir como um alvo de compilação para a web.

Isso definitivamente significa melhorias de desempenho no navegador. E nos dá acesso a um conjunto de blocos de construção de
baixo nível, como uma gama de tipos e operações.

Não me interpretem mal. Ele não é anunciado e concebido como uma alternativa ao JavaScript.

E como Bjarne Stroustup declarou:

(https://static.imasters.com.br/wp-content/uploads/2015/11/webassembly-3.png)(Tradução: JS vai sobreviver. “Há apenas dois tipos

de linguagem: aquelas sobre as quais as pessoas reclamam e aquelas que ninguém usa”.)

Ou como Eric Elliott afirmou: (https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6)

“Pode ser útil não pensar em WebAssembly como uma linguagem de fato. Ele é mais como uma máquina”.

De asm.js para WebAssembly?

O asm.js (http://asmjs.org/) é ótimo para código na compilação escrito – por exemplo – em C ou C ++. O asm.js é um subconjunto
do JavaScript, que pode ser usado em plataformas de baixo nível, e é uma linguagem de destino eficiente para compiladores.

A ideia do asm.js é codar o JavaScript de uma forma que os motores de compilação produzam código de máquina mais eficiente. Se
você compilar C ++ para asm.js, poderá alcançar grandes melhorias de velocidade em navegadores web.

(https://static.imasters.com.br/wp-content/uploads/2015/11/webassembly-4.png)

O WebAssembly tem algumas vantagens sobre o asm.js que envolvem principalmente problemas de desempenho. De acordo com o
FAQ do WebAssembly: “Em dispositivos móveis, grandes códigos compilados podem facilmente levar 20-40s apenas para serem
analisados […] As primeiras experiências mostram que o WebAssembly pode ser carregado mais do que 20 vezes mais rapidamente,
porque o trabalho de análise é mínimo”.

O que isso tem de tão incrível, afinal?

Então, provavelmente você está perguntando: por que toda essa febre sobre a notícia? O WebAssembly é definitivamente uma
melhoria para o JavaScript. Mas não apenas isso. É uma grande melhoria para o navegador também.

Os navegadores vão entender o formato binário. Então você vai ser capaz de compilar pacotes binários que comprimem muito mais
do que um conteúdo JavaScript.

Isso poderia trazer a “performance parecida com aplicativos” para todos os aplicativos de conteúdos da web. Parece ótimo, né? Em
vez de ter que analisar o código completo, porém, que muitas vezes pode demorar um pouco (especialmente no celular), o
WebAssembly pode ser decodificado significativamente mais rápido.

Veja esta conversa por Brendan Eich:

https://imasters.com.br/back-end/o-que-e-webassembly-e-por-que-ele-afeta-todos-os-desenvolvedores-web 3/7
21/06/2019 O que é WebAssembly e por que ele afeta todos os desenvolvedores web! | iMasters

Brendan Eich on JavaScript Taking Both the High a…

a…

Quem já está nessa?

Google, Microsoft e Mozilla são apenas alguns nomes. Engenheiros líderes lançaram uma Comunidade WebAssembly com a missão
de “promover a colaboração cross-browser em estágio inicial em formato portátil do novo, […] formato para compilação na web”.

No entanto, é necessário lembrar que a obra “acaba de começar” no WebAssembly. Então este é um estágio muito cedo do projeto
e vai certamente demorar algum tempo até que o WebAssembly se torne um padrão web bem conhecido.

Por que isso afetará todos os desenvolvedores web?

Porque ele vai permitir que os desenvolvedores façam todo tipo de coisas novas que não teriam sido possíveis ou tão fáceis com
JavaScript.

A comunidade W3C WebAssembly (https://www.w3.org/community/webassembly/) tem poucos casos de uso para o WebAssembly e
como ele vai facilitar a vida dos desenvolvedores web. Aqui estão alguns:

 A melhor forma de execução das linguagens de programação é cross-compilada para a web.

 Para o desenvolvedor das ferramentas, dentro do navegador.

 Cliente mais rápido para aplicações empresariais (por exemplo, bancos de dados).

O WebAssembly pode ser usado de várias maneiras. Por exemplo, pode ser utilizado em código existente JavaScript/HTML que pode
ser incorporado. Por outro lado, o WebAssembly pode ser usado como o framework principal, enquanto a IU (interface de usuário)
ainda é feita em JavaScript / HTML.

Menos código, melhor desempenho, menos bugs?

De acordo com o grupo WebAssembly, o simples fato de utilizar WebAssembly significa menos código-fonte. Em comparação com
asm.js, isso significa uma redução de cerca de 25% no tamanho do código – embora ele seja apenas um protótipo, e os resultados
variam.

Então, provavelmente você está querendo saber como manter-se atualizado sobre WebAssembly? Eu recomendo os seguintes
recursos úteis para WebAssembly:

 Página do GitHub WebAssembly (https://github.com/WebAssembly)

 Documentação de projeto WebAssembly (https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md)

 Comunidade W3C WebAssembly (https://www.w3.org/community/webassembly/)

 O que é WebAssembly por Eric Elliott (https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-

61256ec5a8f6)

***

Thomas Peham faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com
autorização do autor, e você pode acompanhar o artigo em inglês no link: http://usersnap.com/blog/what-is-webassembly-for-web-
developer/ (http://usersnap.com/blog/what-is-webassembly-for-web-developer/)

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

https://imasters.com.br/back-end/o-que-e-webassembly-e-por-que-ele-afeta-todos-os-desenvolvedores-web 4/7
21/06/2019 O que é WebAssembly e por que ele afeta todos os desenvolvedores web! | iMasters

0 1 2 3 4 5 6 7 8 9 10

ARTIGOS PUBLICADOS POR ESTE AUTOR

THOMAS PEHAM (HTTPS://IMASTERS.COM.BR/PERFIL/THOMASPEHAM)

18 ABR, 2016

Plugins do WordPress essenciais para desenvolvedores e designers – Parte 02 (h ps://imasters.com.br/back-end/plugins-do-wordpress-essenciais-

para-desenvolvedores-e-designers-parte-02)

THOMAS PEHAM (HTTPS://IMASTERS.COM.BR/PERFIL/THOMASPEHAM)

15 MAR, 2016

Por que ninguém fala sobre testes Agile… (h ps://imasters.com.br/agile/por-que-ninguem-fala-sobre-testes-agile)

THOMAS PEHAM (HTTPS://IMASTERS.COM.BR/PERFIL/THOMASPEHAM)

21 JAN, 2016

5 dicas essenciais para melhorar mockups de website (h ps://imasters.com.br/design-ux/5-dicas-essenciais-para-melhorar-mockups-de-website)

THOMAS PEHAM (HTTPS://IMASTERS.COM.BR/PERFIL/THOMASPEHAM)

8 JAN, 2016

23 lições aprendidas entrevistando os principais desenvolvedores do mundo (h ps://imasters.com.br/carreira-dev/23-licoes-aprendidas-entrevistando-

os-principais-desenvolvedores-do-mundo)

THOMAS PEHAM (HTTPS://IMASTERS.COM.BR/PERFIL/THOMASPEHAM)

23 NOV, 2015

7 poderosas integrações JIRA para otimizar o fluxo de trabalho no desenvolvimento web (h ps://imasters.com.br/desenvolvimento/7-poderosas-
integracoes-jira-para-otimizar-o-fluxo-de-trabalho-no-desenvolvimento-web)

THOMAS PEHAM (HTTPS://IMASTERS.COM.BR/PERFIL/THOMASPEHAM)

16 NOV, 2015

Quando relatórios ruins de bugs acontecem com pessoas boas (h ps://imasters.com.br/desenvolvimento/quando-relatorios-ruins-de-bugs-

acontecem-com-pessoas-boas)

Thomas Peham
(http://usersnap.com/blog/) (mailto:thomaspeham.articulista@imasters.
13 Artigo(s)
SAIBA MAIS
(HTTPS://IMASTERS.COM.BR/PERFIL/THOMASPEHAM)
É um gerente de marketing na startup austríaca Usersnap. É especializado
inbound &amp; content marketing. Em seu tempo livre, escreve sobre tend
de marketing e de tecnologia em seu blog. Ele pode ser encontrado no Tw
@tompeham.

1 comentário Classificar por Mais antigos

Adicione um comentário...

Laedson Oliveira
Excelente matéria.
Curtir · Responder · 6 sem

Plugin de comentários do Facebook

Este projeto é oferecido pelas empresas

https://imasters.com.br/back-end/o-que-e-webassembly-e-por-que-ele-afeta-todos-os-desenvolvedores-web 5/7
21/06/2019 O que é WebAssembly e por que ele afeta todos os desenvolvedores web! | iMasters

(h p://bit.ly/2sB2idH) (h p://impulso.network/?
utm_source=imasters&utm_medium=site&utm_campaign=footer)

Este projeto é mantido e patrocinado pelas empresas

(h p://www.alura.com.br) (h ps://www.cielo.com.br/e- (h p://www.dialhost.com.br?

commerce/) utm_campaign=PatrocinioiMasters&utm_sour

(h ps://fiap.me/2C8SbRO) (h ps://www.hostgator.com.br/? (h ps://www.idexo.com.br/)

utm_source=imasters&utm_medium=logo&utm_campaign=hostgator&utm_term=hosped

(h ps://www.impacta.com.br/) (h p://www.ingrammicro.com.br/isv/) (h ps://king.host/?

utm_source=parceiros&utm_medium=&utm
2019&utm_campaign=)

(h p://lambda3.com.br/) (h ps://www.locaweb.com.br/? (h p://bit.ly/2BXbpvx)

utm_campaign=eventos&utm_source=imasters&utm_medium=site&utm_content=loca

(h ps://www.userede.com.br/) (h ps://www.schoolofnet.com/cursos/gratuitos?(h ps://developers.totvs.com/)

utm_source=imasters&utm_medium=patrocinio&utm_campaign=institucional_patrocin
institucional&utm_content=institucional_patrocinio_imasters_link-
institucional)

(h p://clicklogger.rm.uol.com.br/? (h p://www.zarpsystem.com.br/)
prd=16&grp=src:34;chn:118;cpg:imasters2019;&msr=Cliques%20de%20Origem:1&oper=11&redir=h ps://uolhost.uol

Este projeto é apoiado pelas empresas

(h ps://imasters.tech/) (h p://www.w3c.br)

ASSINE NOSSA

Newsletter
Fique em dia com as novidades do iMasters! Assine nossa newsle er e receba
conteúdos especiais curados por nossa equipe

Qual é o seu e-mail?

ASSINAR

https://imasters.com.br/back-end/o-que-e-webassembly-e-por-que-ele-afeta-todos-os-desenvolvedores-web 6/7
21/06/2019 O que é WebAssembly e por que ele afeta todos os desenvolvedores web! | iMasters

SOBRE O IMASTERS (HTTPS://IMASTERS.COM.BR/P/SOBRE-O-IMASTERS)

POLÍTICA DE PRIVACIDADE (HTTPS://IMASTERS.COM.BR/P/POLITICA-DE-PRIVACIDADE)

FALE CONOSCO (HTTPS://IMASTERS.COM.BR/FALE-CONOSCO/)

QUERO SER AUTOR (HTTPS://IMASTERS.COM.BR/P/QUERO-SER-AUTOR)

FÓRUM (HTTPS://FORUM.IMASTERS.COM.BR/)

7MASTERS (HTTPS://SETEMASTERS.IMASTERS.COM.BR/)

AGENDA (HTTPS://IMASTERS.COM.BR/AGENDA/)

IMASTERS.COM (HTTPS://IMASTERS.COM/)

https://imasters.com.br/back-end/o-que-e-webassembly-e-por-que-ele-afeta-todos-os-desenvolvedores-web 7/7