aboutsummaryrefslogtreecommitdiff
path: root/files/es/webassembly
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
commit1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch)
tree0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/webassembly
parent4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff)
downloadtranslated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip
initial commit
Diffstat (limited to 'files/es/webassembly')
-rw-r--r--files/es/webassembly/concepts/index.html152
-rw-r--r--files/es/webassembly/index.html119
-rw-r--r--files/es/webassembly/loading_and_running/index.html111
3 files changed, 382 insertions, 0 deletions
diff --git a/files/es/webassembly/concepts/index.html b/files/es/webassembly/concepts/index.html
new file mode 100644
index 0000000000..300394ddde
--- /dev/null
+++ b/files/es/webassembly/concepts/index.html
@@ -0,0 +1,152 @@
+---
+title: WebAssembly Concepts
+slug: WebAssembly/Concepts
+translation_of: WebAssembly/Concepts
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p class="summary">En este artículo se explica los conceptos detrás de cómo funciona WebAssembly, sus objetivos, los problemas que resuelve, y como se ejecuta dentro del motor de renderizado de un navegador.</p>
+
+<h2 id="¿Qué_es_WebAssembly">¿Qué es WebAssembly?</h2>
+
+<p>WebAssembly es un nuevo tipo de código que puede ser ejecutado en navegadores modernos, y provee nuevas funcionalidades y mejoras en rendimiento. No está pensado para ser ser escrito a mano, si no que está diseñado par ser un objeto final de compilación para lenguajes de bajo nivel como C, C++, Rust, etc.</p>
+
+<p>Esto tiene enormes implicaciones para la plataforma web -- presenta un medio para ejecutar código escrito en múltiples lenguajes en la web, haciendo que una aplicación web, se ejecute casi a la misma velocidad de código nativo, algo que previamente se podía hacer. </p>
+
+<p>Lo que es más, no es necesario conocer como se crea código WebAssembly para usar sus ventajas. Los módulos de WebAssembly pueden importase en una aplicación web (o Node.js), exponiendo funciones de WebAssembly para ser usadas mediante Javascript. Los entornos de Javascript pueden usar WebAssembly para obtener grandes mejoras de rendimiento y nuevas funcionalidades y ser fácilmente disponibles por los desarrolladores Web.  </p>
+
+<h2 id="Objetivos_de_WebAssembly">Objetivos de WebAssembly</h2>
+
+<p>WebAssembly ha sido creado por como un estándar abierto dentro de <a href="https://www.w3.org/community/webassembly/">W3C WebAssembly Community Group</a> con los siguientes objetivos:</p>
+
+<ul>
+ <li>Ser rápido, eficiente y portable — el código WebAssembly puede ejecutarse se puede ejecutar a una velocidad casi nativa en diferentes plataformas aprovechando las <a href="http://webassembly.org/docs/portability/#assumptions-for-efficient-execution">capacidades comunes del hardware</a>.</li>
+ <li>Ser legible y depurable — WebAssembly es un lenguaje ensamblador de bajo nivel, pero tiene un formato de texto que puede ser entendido por las personas (la especificación aún se está terminando) lo cual permite al código ser escrito, visualizado y depurado a mano.</li>
+ <li>Mantenerse seguro — WebAssembly se especifica para ser ejecutado de manera segura en un entorno de ejecución de espacio aislado (sandbox).Como otros códigos web, reforzará el propio origen del navegador así como sus políticas de seguridad.</li>
+ <li>No quebrantar a la red — WebAssembly está diseñado de tal forma que se lleve bien con otras tecnologías web y mantenga compatibilidad con versiones anteriores.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: WebAssembly tendrá también usos fuera de la red y de los ambientes JavaScript (vea <a href="http://webassembly.org/docs/non-web/">Incrustaciones no-web</a>).</p>
+</div>
+
+<h2 id="¿Cómo_se_inserta_WebAssembly_dentro_de_la_plataforma_web">¿Cómo se inserta WebAssembly dentro de la plataforma web?</h2>
+
+<p>La plataforma web puede pensar como constituida de dos partes:</p>
+
+<ul>
+ <li>Una máquina virtual (VM por sus siglas en inglés) que ejecuta el código de la aplicación Web p.e. el código JavaScript que potencia sus aplicaciones.</li>
+ <li>Un conjunto de interfaces Web (<a href="/en-US/docs/Web/API">Web APIs</a>) que la aplicación Web puede llamar para controlar la funcionalidad del navegador/dispositivo web y hace que las cosas sucedan (<a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/en-US/docs/Web/API/CSS_Object_Model">CSSOM</a>, <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, etc.).</li>
+</ul>
+
+<p>Históricamente, la máquina virtual ha sido capaz de cargar solamente JavaScript. Esto nos ha funcionado bien debido a que JavaScript es suficientemente capaz para resolver la mayor parte de los problemas que las personas tienen en la Web hoy día. Sin embargo hemos llegado a tener problemas de rendimiento cuando se trata de usar JavaScript para casos de uso más intensos como juegos 3D, Realidad Virtual y Aumentada, visión por computadora, edición de vídeo/imágenes y algunos otros dominios de cosas que demandan rendimiento como el de código nativo (vea <a href="http://webassembly.org/docs/use-cases/">Casos de Uso WebAssembly</a> para más ideas).</p>
+
+<p>Adicionalmente, el costo de descargar, analizar gramaticalmente (parsing) y compilar aplicaciones JavaScript muy grandes resulta prohibitivo. Plataformas en móviles (celulares y otros) y otras de recursos limitados (tabletas, etc.) pueden amplificar más estos cuellos de botella del desempeño.</p>
+
+<p>WebAssembly es un lenguaje distinto a JavaScript, aunque no se pretende sea un reemplazo. En lugar de ello, se diseña para complementar y trabajar en conjunto con JavaScript, permitiendo a los desarrolladores web tener una ventaja sobre las fortalezas de ambos lenguajes:</p>
+
+<ul>
+ <li>JavaScript es un lenguaje de alto nivel, flexible y suficientemente expresivo para desarrollar aplicaciones web. Tiene muchas ventajas - es tipado dinámicamente, no necesita el paso de compilarlo, y tiene un gran ecosistema que lo provee de entornos, librerías y otras herramientas.</li>
+ <li>WebAssembly es un lenguaje de bajo nivel similar a ensamblador, con un  binario de un tamaño compacto que se ejecuta con una rendimiento casi nativo, y provee a lenguajes con esquemas de memoria de bajo nivel como C++ y Rust, con un objeto de compilación que también pueden ejecutar en la web. (Notar que WebAssembly también tiene el objetivo de soportar a lenguajes de alto nivel con recogedor de basura (garbage-collector) en el futuro).</li>
+</ul>
+
+<p>Con la llegada de WebAssembly en los navegadores, la máquina virtual que se mencionó anteriormente, cargará y ejecutará dos tipos de código - JavaScript y WebAssembly.</p>
+
+<p>Los distintos tipos de código pueden llamarse uno al otro según necesiten.  <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly JavaScript API</a>  envuelve código WebAssembly exportado con funciones JavaScript, que pueden ser llamadas normalmente, y WebAssembly puede importar y llamar síncronamente funciones JavaScript. De hecho la unidad básica de código en WebAssembly se llama módulo y los módulos en WebAssembly son simétricos de muchas maneras a los módulos de ES2015.</p>
+
+<h3 id="Conceptos_clave_en_WebAssembly">Conceptos clave en WebAssembly</h3>
+
+<p>Hay varios conceptos claves que son necesarios para entender cómo se ejecuta WebAssembly en un navegador. Todos estos conceptos están reflejados uno a uno en <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly JavaScript API</a>.</p>
+
+<ul>
+ <li><strong>Módulo</strong>: Representa un binario de WebAssembly que ha sido compilado por el navegador en un ejecutable de código máquina. Un módulo no tiene estado, y es solo eso, como un <a href="/en-US/docs/Web/API/Blob">Blob</a>, puede ser explícitamente compartido entre ventanas y workers (por medio de <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>). Un módulo declara 'imports' y 'exports' igual que un módulo ES2015module.</li>
+ <li><strong>Memoria</strong>: Un conjunto de tamaño variable que contiene una serie lineal y continua de bytes, que puede ser leído o escrito por las instrucciones de memoria de bajo nivel de WebAssembly.</li>
+ <li><strong>Tabla</strong>: Una lista tipada de tamaño variable que contiene referencias (por ejemplo a funciones) que no podrían ser guardadas como bytes en memoria (por razones de seguridad o portabilidad).</li>
+ <li><strong>Instancia</strong>: Un modulo junto con todos los estados que use durante la ejecución e incluyendo la memoria, tabla y un conjunto de valores importados. Una instancia es como un módulo ES2015 que ha sido cargado en un global particular con un conjunto particular de 'imports'. </li>
+</ul>
+
+<p>La API de JavaScript provee a los desarrolladores con la habilidad de crear módulos, memoria, tablas e instancias. Dada una instancia de WebAssembly, el código de JavaScript puede hacer llamadas síncronas a sus 'exports', que son expuestos, como funciones de JavaScript normal. Funciones de JavaScript arbitrarias pueden ser llamadas síncronamente también desde el código de WebAssembly, pasando dichas funciones de JavaScript como 'imports' a la instancia de WebAssembly. </p>
+
+<p>Dado que JavaScript tiene un control completo sobre como el código de WebAssembly es descargado, compilado y ejecutado, los desarrolladores de JavaScript pueden pensar sobre WebAssembly como simplemente una funcionalidad de JavaScript para generar funciones de alto rendimiento.</p>
+
+<p>En el futuro, los módulos de WebAssembly se podrán cargar igual que los módulos de <a href="https://github.com/WebAssembly/proposals/issues/12">ES2015</a> (usando <code>&lt;script type='module'&gt;</code>), implicando que JavaScript será capaz de ir a buscar, compilar e importar un módulo de WebAssembly tan fácilmente como un módulo de ES2015.</p>
+
+<h2 id="¿Cómo_usar_WebAssembly_en_mi_aplicación">¿Cómo usar WebAssembly en mi aplicación?</h2>
+
+<p>Previamente se describieron las primitivas que WebAssembly añade a la plataforma Web: un formato binario para el código y APIs para cargar y ejecutar este código binario. Ahora se describirá cómo usar estas primitivas en la práctica.</p>
+
+<p>El ecosistema de WebAssembly está en sus comienzos; sin duda más herramientas parecerán en un futuro. Ahora mismo hay cuatro puntos principales donde comenzar:</p>
+
+<ul>
+ <li>Portar una aplicación C/C++ con <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>.</li>
+ <li>Escribir o generar WebAssembly directamente a nivel de ensamblador.</li>
+ <li>Escribir una aplicación en Rust y generar su salida como WebAssembly.</li>
+ <li>Usar <a href="https://assemblyscript.org/">AssemblyScript</a> que se parece a TypeScript y se compila a un binario de WebAssembly.</li>
+</ul>
+
+<p>Detallemos más cada una de estas opciones:</p>
+
+<h3 id="Portando_desde_CC">Portando desde C/C++</h3>
+
+<p>Dos de las muchas opciones para crear código WASM son o un ensamblador WASM en línea, o <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>. Hay varias opciones para un ensamblador WASM en línea, como pueden ser:</p>
+
+<ul>
+ <li><a href="https://wasdk.github.io/WasmFiddle/">WasmFiddle</a></li>
+ <li><a href="https://anonyco.github.io/WasmFiddlePlusPlus/">WasmFiddle++</a></li>
+ <li><a href="https://mbebenita.github.io/WasmExplorer/">WasmExplorer</a></li>
+</ul>
+
+<p>Estos son puntos adecuados donde se puede empezar a plantearse desde dónde empezar, pero que pueden no tener algunas optimizaciones para Emscripten.</p>
+
+<p>La herramienta Emscripten está disponible para casi cualquier tipo de código C/C++ y compila en un módulo .wasm, además del código "pegamento" necesario en JavaScript, necesario para cargar y ejecutar el módulo, y un documento HTML donde se muestre el resultado del código.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14647/emscripten-diagram.png" style="display: block; height: 104px; margin: 0px auto; width: 764px;"></p>
+
+<p>Resumiendo, el proceso es el que sigue:</p>
+
+<ol>
+ <li>Emscripten primero compila C/C++  en clang+LLVM — un compilador de código abierto, de C/C++, que por ejemplo se distribuye como parte de XCode en OSX.</li>
+ <li>Emscripten transforma el resultado de la compilación de clang+LLVM en un binario .wasm.</li>
+ <li>Por sí mismo, WebAssembly no puede acceder directamente a el DOM; únicamente puede llamar a JavaScript, y pasarle datos enteros o de coma flotante como datos. Luego, para acceder a cualquier API Web, WebAssembly necesita llamar a JavaScript, que entonces hará lla llamada a la API Web. Emscripten por lo tanto crea el documento HTML y el código "pegamento" en JavaScritp necesario para conseguir esto.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: There are future plans to <a href="https://github.com/WebAssembly/gc/blob/master/README.md">allow WebAssembly to call Web APIs directly</a>.</p>
+</div>
+
+<p>The JavaScript glue code is not as simple as you might imagine. For a start, Emscripten implements popular C/C++ libraries like <a href="https://en.wikipedia.org/wiki/Simple_DirectMedia_Layer">SDL</a>, <a href="https://en.wikipedia.org/wiki/OpenGL">OpenGL</a>, <a href="https://en.wikipedia.org/wiki/OpenAL">OpenAL</a>, and parts of <a href="https://en.wikipedia.org/wiki/POSIX">POSIX</a>. These libraries are implemented in terms of Web APIs and thus each one requires some JavaScript glue code to connect WebAssembly to the underlying Web API.</p>
+
+<p>So part of the glue code is implementing the functionality of each respective library used by the C/C++ code. The glue code also contains the logic for calling the above-mentioned WebAssembly JavaScript APIs to fetch, load and run the .wasm file.</p>
+
+<p>The generated HTML document loads the JavaScript glue file and writes stdout to a {{htmlelement("textarea")}}. If the application uses OpenGL, the HTML also contains a {{htmlelement("canvas")}} element that is used as the rendering target. It’s very easy to modify the Emscripten output and turn it into whatever web app you require.</p>
+
+<p>You can find full documentation on Emscripten at <a href="https://emscripten.org">emscripten.org</a>, and a guide to implementing the toolchain and compiling your own C/C++ app across to wasm at <a href="https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm">Compiling from C/C++ to WebAssembly</a>.</p>
+
+<h3 id="Writing_WebAssembly_directly">Writing WebAssembly directly</h3>
+
+<p>Do you want to build your own compiler, or your own tools, or make a JavaScript library that generates WebAssembly at runtime?</p>
+
+<p>In the same fashion as physical assembly languages, the WebAssembly binary format has a text representation — the two have a 1:1 correspondence. You can write or generate this format by hand and then convert it into the binary format with any of several <a href="https://webassembly.org/getting-started/advanced-tools/">WebAssemby text-to-binary tools</a>.</p>
+
+<p>For a simple guide on how to do this, see our <a href="/en-US/docs/WebAssembly/Text_format_to_wasm">Converting WebAssembly text format to wasm</a> article.</p>
+
+<h3 id="Writing_Rust_Targeting_WebAssembly">Writing Rust Targeting WebAssembly</h3>
+
+<p>It is also possible to write Rust code and compile over to WebAssembly, thanks to the tireless work of the Rust WebAssembly Working Group. You can get started with installing the necessary toolchain, compiling a sample Rust program to a WebAssembly npm package, and using that in a sample web app, over at our <a href="/en-US/docs/WebAssembly/Rust_to_wasm">Compiling from Rust to WebAssembly</a> article.</p>
+
+<h3 id="Using_AssemblyScript">Using AssemblyScript</h3>
+
+<p>For web developers who want to try WebAssembly without needing to learn the details of C or Rust, AssemblyScript will be the best option. It generates a small bundle and it's performance is slightly slower compared to C or Rust. You can check its documentation on <a href="https://assemblyscript.org/">https://assemblyscript.org/</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has given you an explanation of what WebAssembly is, why it is so useful, how it fits into the web, and how you can make use of it.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/category/webassembly/">WebAssembly articles on Mozilla Hacks blog</a></li>
+ <li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Loading_and_running">Loading and running WebAssembly code</a> — find out how to load your own WebAssembly module into a web page.</li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a> — find out how to use the other major features of the WebAssembly JavaScript API.</li>
+</ul>
diff --git a/files/es/webassembly/index.html b/files/es/webassembly/index.html
new file mode 100644
index 0000000000..2aaf10411f
--- /dev/null
+++ b/files/es/webassembly/index.html
@@ -0,0 +1,119 @@
+---
+title: WebAssembly
+slug: WebAssembly
+tags:
+ - Aterrizaje
+ - WebAssembly
+ - wasm
+translation_of: WebAssembly
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p class="summary" dir="ltr" id="docs-internal-guid-22bb55aa-d69e-e8ef-cbc6-aafea272f684">WebAssembly es un nuevo tipo de código que puede ser ejecutado en navegadores modernos — es un lenguaje de bajo nivel, similar al lenguaje ensamblador, con un formato binario compacto que se ejecuta con rendimiento casi nativo y provee un objetivo de compilación para lenguajes como C/C++ y Rust que les permite correr en la web. También está diseñado para correr a la par de JavaScript, permitiendo que ambos trabajen juntos.</p>
+
+<h2 dir="ltr" id="En_pocas_palabras">En pocas palabras</h2>
+
+<p dir="ltr">WebAssembly tiene grandes implicaciones para la plataforma web — provee una forma de correr código escrito en múltiples lenguajes en la web a una velocidad casi nativa, con aplicaciones cliente corriendo en la web que anteriormente no podrían haberlo hecho.</p>
+
+<p dir="ltr">WebAssembly esta diseñado para complementar y correr a la par de JavaScript — usando las APIs WebAssembly de JavaScript, puedes cargar módulos de WebAssembly en una aplicación JavaScript y compartir funcionalidad entre ambos. Esto te permite aprovechar el rendimiento y poder de WebAssembly y la expresividad y flexibilidad de JavaScript en las mismas aplicaciones, incluso si no sabes cómo escribir código WebAssembly.</p>
+
+<p dir="ltr">Y lo mejor es que está siendo desarrollado como un estándar web a través del <a href="https://www.w3.org/wasm/">grupo de trabajo de WebAssembly del W3C</a> y su <a href="https://www.w3.org/community/webassembly/">grupo comunitario</a> con las participación activa de todos los principales fabricantes de navegadores.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 dir="ltr" id="Guías">Guías</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAssembly/Concepts">Conceptos de WebAssembly</a></dt>
+ <dd>Empieza leyendo los conceptos de alto nivel detrás de WebAssembly — qué es, por qué es tan útil, cómo encaja en la plataforma web (y más allá), y cómo usarlo.</dd>
+ <dt><a href="/en-US/docs/WebAssembly/C_to_wasm">Compilar un nuevo módulo de C/C++ a WebAssembly</a></dt>
+ <dd>Al escribir código en C/C++, puedes compilarlo a .wasm usando una herramienta como <a href="/en-US/docs/Mozilla/Projects/Emscripten/">Emscripten</a>. Veamos cómo funciona.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/WebAssembly/existing_C_to_wasm">Compilar un módulo existente de C a WebAssembly</a></dt>
+ <dd>Uno de los principales casos de uso para WebAssembly es tomar las librerías existentes del ecosistema de C y permitir que los desarrolladores los usen en la web.</dd>
+ <dt><a href="/en-US/docs/WebAssembly/rust_to_wasm">Compilar de Rust a WebAssembly</a></dt>
+ <dd>Si has escrito algo en Rust, ¡puedes compilarlo a WebAssembly! Este tutorial te enseña todo lo que necesitas saber para compilar un proyecto de Rust a wasm y usarlo en una aplicación web existente.</dd>
+ <dt><a href="/en-US/docs/WebAssembly/Loading_and_running">Cargar y ejecutar código WebAssembly</a></dt>
+ <dd>Una vez que tengas un .wasm, este artículo cubre cómo recuperarlo, compilarlo e instanciarlo, combinando la API de <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/WebAssembly">WebAssembly de JavaScript</a> con las APIs <a href="/es/docs/Web/API/Fetch_API">Fetch</a> o <a href="/es/docs/Web/API/XMLHttpRequest">XHR</a>.</dd>
+ <dt><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Usar la API WebAssembly de JavaScript</a></dt>
+ <dd>Una vez cargado el módulo .wasm, querrás usarlo. En este artículo te mostramos cómo usar WebAssembly mediante la API WebAssembly de JavaScript.</dd>
+ <dt><a href="/en-US/docs/WebAssembly/Exported_functions">Funciones exportadas de WebAssembly</a></dt>
+ <dd>Las funciones exportadas de WebAssembly son el reflejo en JavaScript de las funciones de WebAssembly que te permiten llamar código WebAssembly desde JavaScript. Este artículo las describe.</dd>
+ <dt><a href="/en-US/docs/WebAssembly/Understanding_the_text_format">Entendiendo el formato de texto WebAssembly</a></dt>
+ <dd>Este artículo explica el formato de texto wasm. Esta es la representación textual de bajo nivel de un módulo .wasm, mostrada en las herramientas de desarrollador del navegador al depurar.</dd>
+ <dt><a href="/en-US/docs/WebAssembly/Text_format_to_wasm">Convertir el formato de texto WebAssembly a wasm</a></dt>
+ <dd>Este artículo provee una guía para convertir un módulo de WebAssembly escrito en su formato de texto a un binario .wasm.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 dir="ltr" id="Referencia_de_la_API">Referencia de la API</h2>
+
+<dl>
+ <dt>{{jsxref("Global_objects/WebAssembly", "WebAssembly")}}</dt>
+ <dd>Este objeto sirve como espacio de nombres para toda funcionalidad relacionada a WebAssembly.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/Global", "WebAssembly.Global()")}}</dt>
+ <dd>El objeto <code>WebAssembly.Global</code> representa una instancia variable global, accesible desde JavaScript e importable/exportable a través de una o más instancias de {{jsxref("WebAssembly.Module")}}. Esto permite el enlace dinámico de varios módulos.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/Module", "WebAssembly.Module()")}}</dt>
+ <dd>El objeto <code>WebAssembly.Module</code> contiene código WebAssembly sin estado que ha sido ya compilado por el navegador y puede ser <a href="/en-US/docs/Web/API/Worker/postMessage">compartido con workers</a> e instanciado varias veces.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/Instance", "WebAssembly.Instance()")}}</dt>
+ <dd>Un objeto <code>WebAssembly.Instance</code> es una instancia ejecutable y con estado de un <code>Module</code>.  Los objetos <code>Instance</code> contienen todas las <a href="/en-US/docs/WebAssembly/Exported_functions">funciones exportadas de WebAssembly</a> que permiten llamar a código WebAssembly desde JavaScript.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/instantiateStreaming", "WebAssembly.instantiateStreaming()")}}</dt>
+ <dd>La función <code>WebAssembly.instantiateStreaming()</code> es la principal API para compilar e instanciar código WebAssembly, retornando tanto un <code>Module</code> como su primera <code>Instance</code>.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/Memory", "WebAssembly.Memory()")}}</dt>
+ <dd>Un objeto <code>WebAssembly.</code><code>Memory</code> es un {{jsxref("Global_objects/ArrayBuffer", "ArrayBuffer")}} redimensionable que contiene los bytes de memoria accedidos por una <code>Instance</code>.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/Table", "WebAssembly.Table()")}}</dt>
+ <dd>Un objeto <code>WebAssembly.</code><code>Table</code> es un arreglo tipado redimensionable de valores opacos, como referencias a funciones, que son accedidos por una <code>Instance</code>.</dd>
+ <dt>{{jsxref("WebAssembly.CompileError()")}}</dt>
+ <dd>Crea un nuevo objeto <code>CompileError</code> de WebAssembly.</dd>
+ <dt>{{jsxref("WebAssembly.LinkError()")}}</dt>
+ <dd>Crea un nuevo objeto <code>LinkError</code> de WebAssembly.</dd>
+ <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt>
+ <dd>Crea un nuevo objeto <code>RuntimeError</code> de WebAssembly.</dd>
+</dl>
+</div>
+</div>
+
+<h2 dir="ltr" id="Ejemplos">Ejemplos</h2>
+
+<ul dir="ltr">
+ <li><a href="https://github.com/JasonWeathersby/WASMSobel">WASMSobel</a></li>
+ <li>Consulta nuestro repositorio <a href="https://github.com/mdn/webassembly-examples/">webassembly-examples</a> para ver otros ejemplos.</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Especificación</th>
+ <th scope="col">Estado</th>
+ <th scope="col">Comentarios</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('WebAssembly JS')}}</td>
+ <td>{{Spec2('WebAssembly JS')}}</td>
+ <td>Borrador inicial de la definición de la API de JavaScript.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.WebAssembly")}}</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul dir="ltr">
+ <li><a href="https://research.mozilla.org/webassembly/">WebAssembly en Mozilla Research</a></li>
+ <li><a href="http://webassembly.org/">webassembly.org</a></li>
+ <li><a href="https://hacks.mozilla.org/category/webassembly/">Artículos de WebAssembly en el blog Mozilla Hacks</a></li>
+ <li><a href="https://www.w3.org/community/webassembly/">Grupo comunitario de WebAssembly del W3C</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Large-Allocation">Cabecera HTTP Large-Allocation</a></li>
+ <li><a href="https://developers.google.com/web/updates/2018/03/emscripting-a-c-library">Compilar una librería de C a Wasm</a></li>
+</ul>
diff --git a/files/es/webassembly/loading_and_running/index.html b/files/es/webassembly/loading_and_running/index.html
new file mode 100644
index 0000000000..6b98952ec3
--- /dev/null
+++ b/files/es/webassembly/loading_and_running/index.html
@@ -0,0 +1,111 @@
+---
+title: Loading and running WebAssembly code
+slug: WebAssembly/Loading_and_running
+tags:
+ - JavaScript
+ - Traer
+ - WebAssembly
+ - XMLHttpRequest
+ - bytecode
+translation_of: WebAssembly/Loading_and_running
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p class="summary">Para utilizar WebAssembly en JavaScript, necesita primero jalar su módulo dentro de la memoria antes dela compilación/instanciación. Este artículo ofrece una referencia para mecanismos distintos que pueden traer el bytecode de WebAssembly, así como tener la forma de compilar/instanciarlo una vez que ya funciona.</p>
+
+<h2 id="¿Cuáles_son_las_opciones">¿Cuáles son las opciones?</h2>
+
+<p>WebAssembly no está integradon aún con la etiqueta <code>&lt;script type='module'&gt;</code> o con la directiva ES2015 <code>import</code>, así, no existe una forma para que el navegador busque sus módulos a partir de importaciones.</p>
+
+<p>Los métodos anteriores {{jsxref("WebAssembly.compile")}}/{{jsxref("WebAssembly.instantiate")}} requieren que se creen un {{domxref("ArrayBuffer")}} que contenga su módulo binario WebAssembly después de buscar los bytes sin procesar, y luego los compila/instancia. Estos es análogo a la <code>new Function(string)</code>, excepto que estamos sustituyendo una cadena de caracteres (código fuente JavaScript) con una memoria intermedia (arreglo) de bytes (código fuente de WebAssembly).</p>
+
+<p>Lo actual en métodos {{jsxref("WebAssembly.compileStreaming")}}/{{jsxref("WebAssembly.instantiateStreaming")}} es que son mucho más eficientes  — desempeñan sus acciones directamente sobre flujos de bytes sin procesar (raw streams) originados en la red, suprimiendo la necesidad de tenerl el paso de {{domxref("ArrayBuffer")}}.</p>
+
+<p>La pregunta ¿cómo hacemos para tener esos bytes dentro de la memoria intermedia (arreglo) y compilarlos? En la siguiente sección lo explicamos.</p>
+
+<h2 id="Utilización_de_Fetch_Traer_a">Utilización de Fetch (Traer a)</h2>
+
+<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> es una API moderna y conveniente para traer recursos de la red.</p>
+
+<p>La manera más eficiente y rápida de traer un módulo wasm (WebAssembly Module) es utilizando el método actualizado {{jsxref("WebAssembly.instantiateStreaming()")}}, que puede generar una llamada al método <code>fetch()</code> como primer argumento y manejará la búsqueda, compilación e instanciación del módulo paso a paso, teniendo acceso a los bytes sin procesar mientras se transmiten (stream) del servidor:</p>
+
+<pre class="brush: js notranslate">WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(results =&gt; {
+ // Hacemos algo con el resultado aquí!
+});</pre>
+
+<p>Si usamos el método anterior {{jsxref("WebAssembly.instantiate()")}} , que no trabaja sobre una transmisión (stream) directa, necesitaremos un paso adicional para convertir el byte code buscado a un {{domxref("ArrayBuffer")}}, como se muestra a continuación:</p>
+
+<pre class="brush: js notranslate">fetch('module.wasm').then(response =&gt;
+ response.arrayBuffer()
+).then(bytes =&gt;
+ WebAssembly.instantiate(bytes, importObject)
+).then(results =&gt; {
+ // Hacemos algo con el resultado aquí!
+});</pre>
+
+<h3 id="Más_allá_de_las_sobrecargas_de_instantiate">Más allá de las sobrecargas de instantiate()</h3>
+
+<p>La función {{jsxref("WebAssembly.instantiate()")}} tiene dos formas de sobrecargar — la primera se muestra arriba, toma el byte code como argumento para compilar y regresa un compromiso de que resolverá un objeto que contenga tanto un módulo objeto compilado, como una instancia desarrollada de ello. El objeto se ve como lo siguiente:</p>
+
+<pre class="brush: js notranslate">{
+ module : Module // El recién compilado objeto WebAssembly.Module,
+ instance : Instance // Una instancia nueva de WebAssembly.Instance del módulo}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Generalmente solo nos preocupamos de la instancia, pero resulta útil tener el módulo en caso de que querramos almacenarlo temporalmente (cache), compartirlo con otro proceso o ventana vía <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>, o simplemente crear mas instancias.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: La segunda forma de sobrecarga utiliza un objeto del tipo {{jsxref("WebAssembly.Module")}} como argumento y regresa un compromiso directo conteniendo la instancia del objeto como resultado. Vea el <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example">Segundo ejemplo de sobrecarga</a>.</p>
+</div>
+
+<h3 id="Ejecutando_su_código_WebAssembly">Ejecutando su código WebAssembly </h3>
+
+<p>Una vez que se tiene disponible la instancia WebAssembly en su código JavaScript, puede entonces comenzar a utilizar las funcionalidades de éste, que han sido exportadas vía la propiedad {{jsxref("WebAssembly.Instance/exports", "WebAssembly.Instance.exports")}}. Su código podría verse como lo que a continuación mostramos:</p>
+
+<pre class="brush: js notranslate">WebAssembly.instantiateStreaming(fetch('myModule.wasm'), importObject)
+.then(obj =&gt; {
+ // Llamada a una función exportada:
+ obj.instance.exports.exported_func();
+
+ // o acceso al contenido de la memoria exportada:
+ var i32 = new Uint32Array(obj.instance.exports.memory.buffer);
+
+ // o acceso a los elementos de una tabla exportada:
+ var table = obj.instance.exports.table;
+ console.log(table.get(0)());
+})</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Para mayor información sobre como funciona la exportación de módulos WebAssembly, debes leer <a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Utilización de la Interfaz (API) de WebAssembly JavaScript</a>, y <a href="/en-US/docs/WebAssembly/Understanding_the_text_format">Entendiendo el formato de texto en WebAssembly</a>.</p>
+</div>
+
+<h2 id="Utilizando_XMLHttpRequest">Utilizando XMLHttpRequest</h2>
+
+<p><code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> es de alguna forma más viejo que Fetch, pero se puede utilizar aún para obtener un arreglo de tipos. De nuevo, los pasos para utilizarlo, asumiendo que nuestro módulo se llama <code>simple.wasm</code>:</p>
+
+<ol>
+ <li>Crear una instancia nueva de {{domxref("XMLHttpRequest()")}}  y utilizar su método {{domxref("XMLHttpRequest.open","open()")}} para abrir una petición, dejando el método de petición en <code>GET</code>, y declarando la ruta al alrchivo que queremos traer.</li>
+ <li>La parte clave de esto es poner el tipo de respuesta al uso de <code>'arraybuffer'</code> por medio de la propiedad {{domxref("XMLHttpRequest.responseType","responseType")}}.</li>
+ <li>Luego, enviar la petición utilizando {{domxref("XMLHttpRequest.send()")}}.</li>
+ <li>Cuando luego se utilice el manejador de evento {{domxref("XMLHttpRequest.onload", "onload")}} para invocar una función cuando la respuesta haya terminado de descargar  — en esta función tomamos el arreglo de la propiedad {{domxref("XMLHttpRequest.response", "response")}} y luego lo mandamos a nuestro método {{jsxref("WebAssembly.instantiate()")}} como hicimos con Fetch.</li>
+</ol>
+
+<p>El código final queda:</p>
+
+<pre class="brush: js notranslate">request = new XMLHttpRequest();
+request.open('GET', 'simple.wasm');
+request.responseType = 'arraybuffer';
+request.send();
+
+request.onload = function() {
+ var bytes = request.response;
+ WebAssembly.instantiate(bytes, importObject).then(results =&gt; {
+ results.instance.exports.exported_func();
+ });
+};</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Puede ver un ejemplo de esta acción en <a href="https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html">xhr-wasm.html</a>.</p>
+</div>