1 {{+bindTo:partials.standard_nacl_article}} 2 3 <section id="technical-overview"> 4 <span id="overview"></span><h1 id="technical-overview"><span id="overview"></span>Technical Overview</h1> 5 <div class="contents local" id="contents" style="display: none"> 6 <ul class="small-gap"> 7 <li><a class="reference internal" href="#why-use-native-client" id="id7">Why use Native Client?</a></li> 8 <li><a class="reference internal" href="#benefits-of-native-client" id="id8">Benefits of Native Client</a></li> 9 <li><a class="reference internal" href="#common-use-cases" id="id9">Common use cases</a></li> 10 <li><p class="first"><a class="reference internal" href="#how-native-client-works" id="id10">How Native Client works</a></p> 11 <ul class="small-gap"> 12 <li><a class="reference internal" href="#toolchains" id="id11">Toolchains</a></li> 13 <li><a class="reference internal" href="#security" id="id12">Security</a></li> 14 <li><a class="reference internal" href="#portability" id="id13">Portability</a></li> 15 </ul> 16 </li> 17 <li><p class="first"><a class="reference internal" href="#structure-of-a-web-application" id="id14">Structure of a web application</a></p> 18 <ul class="small-gap"> 19 <li><a class="reference internal" href="#pepper-plug-in-api" id="id15">Pepper plug-in API</a></li> 20 </ul> 21 </li> 22 <li><a class="reference internal" href="#where-to-start" id="id16">Where to start</a></li> 23 </ul> 24 25 </div><p><strong>Native Client</strong> (NaCl) is an open-source technology for running native 26 compiled code in the browser, with the goal of maintaining the portability 27 and safety that users expect from web applications. Native Client expands web 28 programming beyond JavaScript, enabling you to enhance your web applications 29 using your preferred language. This document describes some of the key benefits 30 and common use cases of Native Client.</p> 31 <p>Google has implemented the open-source <a class="reference external" href="http://www.chromium.org/nativeclient">Native Client project</a> in the Chrome browser on Windows, Mac, 32 Linux, and Chrome OS. The <a class="reference internal" href="/native-client/sdk/download.html"><em>Native Client Software Development Kit (SDK)</em></a>, itself an open-source project, lets you create web applications 33 that use NaCl and run in Chrome across multiple platforms.</p> 34 <p>A Native Client web application consists of JavaScript, HTML, CSS, and a NaCl 35 module written in a language supported by the SDK. The NaCl SDK currently 36 supports C and C++; as compilers for additional languages are developed, the SDK 37 will be updated.</p> 38 <div class="figure"> 39 <img alt="A web application with and without Native Client" src="/native-client/images/web-app-with-nacl.png" /> 40 <p class="caption">A web application with and without Native Client</p> 41 </div> 42 <p>Native Client comes in two flavors: traditional (NaCl) and portable (PNaCl). 43 Traditional, which must be distributed through the Chrome Web Store lets you 44 target a specific hardware platform. Portable can run on the open web. A 45 bitcode file that can be loaded from any web server is downloaded to a client 46 machine and converted to hardware-specific code before any execution. For 47 details, see <a class="reference internal" href="/native-client/nacl-and-pnacl.html"><em>NaCl and PNaCl</em></a>.</p> 48 <h2 id="why-use-native-client"><span id="id1"></span>Why use Native Client?</h2> 49 <p>Native Client open-source technology is designed to run compiled code 50 securely inside a browser at near-native speeds. Native Client gives web 51 applications some advantages of desktop software. Specifically, it provides the 52 means to fully harness the client’s computational resources for applications 53 such as:</p> 54 <ul class="small-gap"> 55 <li>3D games</li> 56 <li>multimedia editors</li> 57 <li>CAD modeling</li> 58 <li>client-side data analytics</li> 59 <li>interactive simulations.</li> 60 </ul> 61 <p>Native Client gives C and C++ (and other languages targeting it) the same level 62 of portability and safety as JavaScript.</p> 63 <h2 id="benefits-of-native-client"><span id="id2"></span>Benefits of Native Client</h2> 64 <p>Benefits of Native Client include:</p> 65 <ul class="small-gap"> 66 <li><strong>Graphics, audio, and much more:</strong> Running native code modules that render 2D 67 and 3D graphics, play audio, respond to mouse and keyboard events, run on 68 multiple threads, and access memory directly—all without requiring the user 69 to install a plug-in.</li> 70 <li><strong>Portability:</strong> Writing your applications once and running them on multiple 71 operating systems (Windows, Linux, Mac, and Chrome OS) and CPU architectures 72 (x86 and ARM).</li> 73 <li><strong>Easy migration path to the web:</strong> Leveraging years of work in existing 74 desktop applications. Native Client makes the transition from the desktop to 75 a web application significantly easier because it supports C and C++.</li> 76 <li><strong>Security:</strong> Protecting the user’s system from malicious or buggy 77 applications through Native Client’s double sandbox model. This model offers 78 the safety of traditional web applications without sacrificing performance 79 and without requiring users to install a plug-in.</li> 80 <li><strong>Performance:</strong> Running at speeds within 5% to 15% of a native desktop 81 application. Native Client also allows applications to harness all available 82 CPU cores via a threading API. This enables demanding applications such as 83 console-quality games to run inside the browser.</li> 84 </ul> 85 <h2 id="common-use-cases"><span id="id3"></span>Common use cases</h2> 86 <p>Typical use cases for Native Client include the following:</p> 87 <ul class="small-gap"> 88 <li><strong>Existing software components:</strong> Native Client lets you repurpose existing 89 C and C++ software in web applications. You don’t need to rewrite and debug 90 code that already works. It also lets your application take advantage of 91 things the browser does well such as handling user interaction and processing 92 events. You can also take advantage of the latest developments in HTML5.</li> 93 <li><strong>Legacy desktop applications:</strong> Native Client provides a smooth migration 94 path from desktop applications to the web. You can port and recompile existing 95 code for the computation engine of your application directly to Native Client, 96 and need rebuild only the user interface and event handling portions for the 97 browser.</li> 98 <li><strong>Heavy computation in enterprise applications:</strong> Native Client can handle the 99 number crunching required by large-scale enterprise applications. To ensure 100 protection of user data, Native Client lets you run complex cryptographic 101 algorithms directly in the browser so that unencrypted data never goes out 102 over the network.</li> 103 <li><strong>Multimedia applications:</strong> Codecs for processing sounds, images, and movies 104 can be added to the browser in a Native Client module.</li> 105 <li><strong>Games:</strong> Native Client lets web applications run at close to native 106 speed, reuse existing multithreaded/multicore C/C++ code bases, and 107 access low-latency audio, networking APIs, and OpenGL ES with programmable 108 shaders. Native Client is a natural fit for running a physics engine or 109 artificial intelligence module that powers a sophisticated web game. 110 Native Client also enables applications to run unchanged across 111 many platforms.</li> 112 <li><strong>Any application that requires acceleration:</strong> Native Client fits seamlessly 113 into web applications. It’s up to you to decide to what extent to use it. 114 Use of Native Client covers the full spectrum from complete applications to 115 small optimized routines that accelerate vital parts of web applications.</li> 116 </ul> 117 <h2 id="how-native-client-works"><span id="link-how-nacl-works"></span>How Native Client works</h2> 118 <p>Native Client is an umbrella name for a set of related software components for 119 developing C/C++ applications and running them securely on the web. At a high 120 level, Native Client consists of:</p> 121 <ul class="small-gap"> 122 <li><strong>Toolchains:</strong> collections of development tools (compilers, linkers, etc.) 123 that transform C/C++ code to Portable Native Client modules or Native Client 124 modules.</li> 125 <li><strong>Runtime components:</strong> components embedded in the browser or other host 126 platforms that allow execution of Native Client modules securely and 127 efficiently.</li> 128 </ul> 129 <p>The following diagram shows how these components interact:</p> 130 <div class="figure"> 131 <img alt="The Native Client toolchains and their outputs" src="/native-client/images/nacl-pnacl-component-diagram.png" /> 132 <p class="caption">The Native Client toolchains and their outputs</p> 133 </div> 134 <h3 id="toolchains"><span id="id4"></span>Toolchains</h3> 135 <p>A Native Client toolchain consists of a compiler, a linker, an assembler and 136 other tools that are used to convert C/C++ source code into a module that is 137 loadable by a browser.</p> 138 <p>The Native Client SDK provides two toolchains:</p> 139 <ul class="small-gap"> 140 <li>The left side of the diagram shows <strong>Portable Native Client</strong> (PNaCl, 141 pronounced “pinnacle”). An LLVM based toolchain produces a single, portable 142 (<strong>pexe</strong>) module. At runtime an ahead-of-time (AOT) translator, built into 143 the browser, translates the pexe into native code for the relevant client 144 architecture.</li> 145 <li>The right side of the diagram shows <strong>(non-portable) Native Client</strong>. A GCC 146 based toolchain produces multiple architecture-dependent (<strong>nexe</strong>) modules, 147 which are packaged into an application. At runtime the browser determines 148 which nexe to load based on the architecture of the client machine.</li> 149 </ul> 150 <p>The PNaCl toolchain is recommended for most applications. The NaCl-GCC 151 toolchain should only be used for applications that won’t be distributed on the 152 open web.</p> 153 <h3 id="security"><span id="id5"></span>Security</h3> 154 <p>Since Native Client permits the execution of native code on client machines, 155 special security measures have to be implemented:</p> 156 <ul class="small-gap"> 157 <li>The NaCl sandbox ensures that code accesses system resources only through 158 safe, whitelisted APIs, and operates within its limits without attempting to 159 interfere with other code running either within the browser or outside it.</li> 160 <li>The NaCl validator statically analyzes code before running it to make sure it 161 only uses code and data patterns that are permitted and safe.</li> 162 </ul> 163 <p>These security measures are in addition to the existing sandbox in the 164 Chrome browser. The Native Client module always executes in a process with 165 restricted permissions. The only interaction between this process and the 166 outside world is through defined browser interfaces. Because of the 167 combination of the NaCl sandbox and the Chrome sandbox, we say that 168 Native Client employs a <strong>double sandbox</strong> design.</p> 169 <h3 id="portability"><span id="id6"></span>Portability</h3> 170 <p>Portable Native Client (PNaCl, prounounced “pinnacle”) employs state-of-the-art 171 compiler technology to compile C/C++ source code to a portable bitcode 172 executable (<strong>pexe</strong>). PNaCl bitcode is an OS- and architecture-independent 173 format that can be freely distributed on the web and <a class="reference internal" href="#link-nacl-in-web-apps"><em>embedded in web 174 applications</em></a>.</p> 175 <p>The PNaCl translator is a component embedded in the Chrome browser; its task is 176 to run pexe modules. Internally, the translator compiles a pexe to a nexe 177 (described above), and then executes the nexe within the Native Client sandbox 178 as described above. The translator uses intelligent caching to avoid 179 re-compiling the pexe if it was previously compiled on the client’s browser.</p> 180 <p>Native Client also supports the execution of nexe modules directly in the 181 browser. However, since nexes contain architecture-specific machine code, they 182 are not allowed to be distributed on the open web. They can only be used as part 183 of applications and extensions that are installed from the Chrome Web Store.</p> 184 <p>For more details on the difference between NaCl and PNaCl, see 185 <a class="reference internal" href="/native-client/nacl-and-pnacl.html"><em>NaCl and PNaCl</em></a>.</p> 186 <h2 id="structure-of-a-web-application"><span id="link-nacl-in-web-apps"></span>Structure of a web application</h2> 187 <p id="application-files">A Native Client application consists of a set of files:</p> 188 <ul class="small-gap"> 189 <li><p class="first"><strong>HTML and CSS:</strong> The HTML file tells the browser where to find the manifest 190 (nmf file) through the embed tag.</p> 191 <pre class="prettyprint"> 192 <embed name="mygame" src="mygame.nmf" type="application/x-pnacl" /> 193 </pre> 194 </li> 195 <li><p class="first"><strong>Manifest:</strong> The manifest identifies the module to load and specifies 196 options. For example, “mygame.nmf” might look like this:</p> 197 <pre class="prettyprint"> 198 {... 199 ... 200 "url": "mygame.pexe", 201 } 202 </pre> 203 </li> 204 <li><strong>pexe (portable NaCl file):</strong> A compiled Native Client module. It uses the 205 <a class="reference internal" href="#link-pepper"><em>Pepper API</em></a>, which provides a bridge to JavaScript and 206 other browser resources.</li> 207 </ul> 208 <div class="figure"> 209 <img alt="Structure of a web application" src="/native-client/images/nacl-in-a-web-app.png" /> 210 <p class="caption">Structure of a web application</p> 211 </div> 212 <p>For more details, see <a class="reference internal" href="/native-client/devguide/coding/application-structure.html"><em>Application Structure</em></a>.</p> 213 <h3 id="pepper-plug-in-api"><span id="link-pepper"></span>Pepper plug-in API</h3> 214 <p>The Pepper plug-in API (PPAPI), called <strong>Pepper</strong> for convenience, is an 215 open-source, cross-platform C/C++ API for web browser plug-ins. Pepper allows a 216 C/C++ module to communicate with the hosting browser and to access system-level 217 functions in a safe and portable way. One of the security constraints in Native 218 Client is that modules cannot make OS-level calls. Pepper provides analogous 219 APIs that modules can use instead.</p> 220 <p>You can use the Pepper APIs to gain access to the full array of browser 221 capabilities, including:</p> 222 <ul class="small-gap"> 223 <li><a class="reference internal" href="/native-client/devguide/coding/message-system.html"><em>Talking to the JavaScript code in your application</em></a> from the C++ code in your NaCl module.</li> 224 <li><a class="reference internal" href="/native-client/devguide/coding/file-io.html"><em>Doing file I/O</em></a>.</li> 225 <li><a class="reference internal" href="/native-client/devguide/coding/audio.html"><em>Playing audio</em></a>.</li> 226 <li><a class="reference internal" href="/native-client/devguide/coding/3D-graphics.html"><em>Rendering 3D graphics</em></a>.</li> 227 </ul> 228 <p>Pepper includes both a <a class="reference internal" href="/native-client/c-api.html"><em>C API</em></a> and a <a class="reference internal" href="/native-client/cpp-api.html"><em>C++ API</em></a>. 229 The C++ API is a set of bindings written on top of the C API. For additional 230 information about Pepper, see <a class="reference external" href="http://code.google.com/p/ppapi/wiki/Concepts">Pepper Concepts</a>.</p> 231 <h2 id="where-to-start">Where to start</h2> 232 <p>The <a class="reference internal" href="/native-client/quick-start.html"><em>Quick Start</em></a> document provides links to downloads and 233 documentation to help you get started with developing and distributing Native 234 Client applications.</p> 235 </section> 236 237 {{/partials.standard_nacl_article}} 238
