| OLD | NEW |
| 1 {{+bindTo:partials.standard_nacl_article}} | 1 {{+bindTo:partials.standard_nacl_article}} |
| 2 | 2 |
| 3 <section id="building-a-nacl-app"> | 3 <section id="building-a-nacl-app"> |
| 4 <span id="io2014"></span><h1 id="building-a-nacl-app"><span id="io2014"></span>B
uilding a NaCl App</h1> | 4 <span id="io2014"></span><h1 id="building-a-nacl-app"><span id="io2014"></span>B
uilding a NaCl App</h1> |
| 5 <section id="in-the-browser"> | |
| 6 <h2 id="in-the-browser">In the browser!</h2> | 5 <h2 id="in-the-browser">In the browser!</h2> |
| 7 <p>Follow along with Brad Nelson’s Google I/O 2014 talk. | 6 <p>Follow along with Brad Nelson’s Google I/O 2014 talk. |
| 8 Explore our new in-browser development environment and debugger.</p> | 7 Explore our new in-browser development environment and debugger.</p> |
| 9 <p>Learn how easy it is to edit, build, and debug NaCl application | 8 <p>Learn how easy it is to edit, build, and debug NaCl application |
| 10 all in your desktop web browser or on a Chromebook. | 9 all in your desktop web browser or on a Chromebook. |
| 11 Work either on-line or off-line!</p> | 10 Work either on-line or off-line!</p> |
| 12 <iframe class="video" width="500" height="281" | 11 <iframe class="video" width="500" height="281" |
| 13 src="//www.youtube.com/embed/OzNuzBDEWzk?rel=0" frameborder="0"></iframe><sectio
n id="work-in-progress"> | 12 src="//www.youtube.com/embed/OzNuzBDEWzk?rel=0" frameborder="0"></iframe><h3 id=
"work-in-progress">Work in Progress</h3> |
| 14 <h3 id="work-in-progress">Work in Progress</h3> | |
| 15 <p>These development tools are a work in progress, see <a class="reference inter
nal" href="#feature-status">Feature Status</a>. | 13 <p>These development tools are a work in progress, see <a class="reference inter
nal" href="#feature-status">Feature Status</a>. |
| 16 At this point, they are a learning tool and demonstration of NaCl’s | 14 At this point, they are a learning tool and demonstration of NaCl’s |
| 17 flexibility, but are not the recommended tools for a production application. | 15 flexibility, but are not the recommended tools for a production application. |
| 18 To develop a substantial application for Native Client / | 16 To develop a substantial application for Native Client / |
| 19 Portable Native Client, | 17 Portable Native Client, |
| 20 we currently recommend you use the | 18 we currently recommend you use the |
| 21 <a class="reference external" href="/native-client/sdk/download">Native Client S
DK</a>.</p> | 19 <a class="reference external" href="/native-client/sdk/download">Native Client S
DK</a>.</p> |
| 22 <b><font color="#880000"> | 20 <b><font color="#880000"> |
| 23 NOTE: The NaCl Development Environment is not yet stable. | 21 NOTE: The NaCl Development Environment is not yet stable. |
| 24 Ideally user data is preserved, but currently it can be lost during updates | 22 Ideally user data is preserved, but currently it can be lost during updates |
| 25 or sporadically. We're working to resolve this. | 23 or sporadically. We're working to resolve this. |
| 26 </font></b></section><section id="installation"> | 24 </font></b><h3 id="installation">Installation</h3> |
| 27 <h3 id="installation">Installation</h3> | |
| 28 <p>The setup process currently requires several steps. | 25 <p>The setup process currently requires several steps. |
| 29 We’re working to reduce the number of steps in future releases. | 26 We’re working to reduce the number of steps in future releases. |
| 30 As the process gets easier, we’ll update this page.</p> | 27 As the process gets easier, we’ll update this page.</p> |
| 31 <p>To install the development environment:</p> | 28 <p>To install the development environment:</p> |
| 32 <blockquote> | 29 <blockquote> |
| 33 <div><ul class="small-gap"> | 30 <div><ul class="small-gap"> |
| 34 <li>Install the <a class="reference external" href="https://chrome.google.com/we
bstore/detail/nacl-development-environm/aljpgkjeipgnmdpikaajmnepbcfkglfa">NaCl D
evelopment Environment</a>.</li> | 31 <li>Install the <a class="reference external" href="https://chrome.google.com/we
bstore/detail/nacl-development-environm/aljpgkjeipgnmdpikaajmnepbcfkglfa">NaCl D
evelopment Environment</a>.</li> |
| 35 <li><p class="first">Navigate to: chrome://flags and:</p> | 32 <li><p class="first">Navigate to: chrome://flags and:</p> |
| 36 <ul class="small-gap"> | 33 <ul class="small-gap"> |
| 37 <li>Enable <strong>Native Client</strong>.</li> | 34 <li>Enable <strong>Native Client</strong>.</li> |
| (...skipping 16 matching lines...) Expand all Loading... |
| 54 <li><p class="first">Navigate to: chrome://flags and:</p> | 51 <li><p class="first">Navigate to: chrome://flags and:</p> |
| 55 <ul class="small-gap"> | 52 <ul class="small-gap"> |
| 56 <li>Enable <strong>Native Client GDB-based debugging</strong>.</li> | 53 <li>Enable <strong>Native Client GDB-based debugging</strong>.</li> |
| 57 <li>Restart your browser by clicking <strong>Relaunch Now</strong>.</li> | 54 <li>Restart your browser by clicking <strong>Relaunch Now</strong>.</li> |
| 58 </ul> | 55 </ul> |
| 59 </li> | 56 </li> |
| 60 <li>NOTE: If you experience unexplained hangs, disable GDB-based debugging | 57 <li>NOTE: If you experience unexplained hangs, disable GDB-based debugging |
| 61 temporarily and try again.</li> | 58 temporarily and try again.</li> |
| 62 </ul> | 59 </ul> |
| 63 </div></blockquote> | 60 </div></blockquote> |
| 64 </section><section id="editor"> | |
| 65 <h3 id="editor">Editor</h3> | 61 <h3 id="editor">Editor</h3> |
| 66 <p>To follow along in this tutorial, you’ll need to use a text editor to m
odify | 62 <p>To follow along in this tutorial, you’ll need to use a text editor to m
odify |
| 67 various files in our development environment. | 63 various files in our development environment. |
| 68 There are currently two editor options, nano or vim. | 64 There are currently two editor options, nano or vim. |
| 69 Emacs is coming soon... | 65 Emacs is coming soon... |
| 70 If you’re unsure what to pick, nano is simpler to start with and has on-sc
reen | 66 If you’re unsure what to pick, nano is simpler to start with and has on-sc
reen |
| 71 help.</p> | 67 help.</p> |
| 72 <ul class="small-gap"> | 68 <ul class="small-gap"> |
| 73 <li><p class="first">You can open <strong>nano</strong> like this:</p> | 69 <li><p class="first">You can open <strong>nano</strong> like this:</p> |
| 74 <pre class="prettyprint"> | 70 <pre class="prettyprint"> |
| 75 $ nano <filename> | 71 $ nano <filename> |
| 76 </pre> | 72 </pre> |
| 77 <p>Here’s an online <a class="reference external" href="http://mintaka.sds
u.edu/reu/nano.html">nano tutorial</a>.</p> | 73 <p>Here’s an online <a class="reference external" href="http://mintaka.sds
u.edu/reu/nano.html">nano tutorial</a>.</p> |
| 78 </li> | 74 </li> |
| 79 <li><p class="first">You can open <strong>vim</strong> like this:</p> | 75 <li><p class="first">You can open <strong>vim</strong> like this:</p> |
| 80 <pre class="prettyprint"> | 76 <pre class="prettyprint"> |
| 81 $ vim <filename> | 77 $ vim <filename> |
| 82 </pre> | 78 </pre> |
| 83 <p>Here’s an online <a class="reference external" href="http://www.openvim
.com/tutorial.html">vim tutorial</a>.</p> | 79 <p>Here’s an online <a class="reference external" href="http://www.openvim
.com/tutorial.html">vim tutorial</a>.</p> |
| 84 </li> | 80 </li> |
| 85 </ul> | 81 </ul> |
| 86 </section><section id="git-setup"> | |
| 87 <h3 id="git-setup">Git Setup</h3> | 82 <h3 id="git-setup">Git Setup</h3> |
| 88 <p>This tutorial also uses a revision control program called | 83 <p>This tutorial also uses a revision control program called |
| 89 <a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)"
>git</a>. | 84 <a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)"
>git</a>. |
| 90 In order to commit to a git repository, | 85 In order to commit to a git repository, |
| 91 you need to setup your environment to with your identity.</p> | 86 you need to setup your environment to with your identity.</p> |
| 92 <p>You’ll need to add these lines to <cite>~/.bashrc</cite> to cause them
to be invoked each | 87 <p>You’ll need to add these lines to <cite>~/.bashrc</cite> to cause them
to be invoked each |
| 93 time you start the development environment.</p> | 88 time you start the development environment.</p> |
| 94 <pre class="prettyprint"> | 89 <pre class="prettyprint"> |
| 95 git config --global user.name "John Doe" | 90 git config --global user.name "John Doe" |
| 96 git config --global user.email johndoe@example.com | 91 git config --global user.email johndoe@example.com |
| 97 </pre> | 92 </pre> |
| 98 <p>You can reload you <cite>~/.bashrc</cite> by running:</p> | 93 <p>You can reload you <cite>~/.bashrc</cite> by running:</p> |
| 99 <pre class="prettyprint"> | 94 <pre class="prettyprint"> |
| 100 source ~/.bashrc | 95 source ~/.bashrc |
| 101 </pre> | 96 </pre> |
| 102 </section><section id="tour-follow-the-video"> | |
| 103 <h3 id="tour-follow-the-video">Tour (follow the video)</h3> | 97 <h3 id="tour-follow-the-video">Tour (follow the video)</h3> |
| 104 <p>Create a working directory and go into it:</p> | 98 <p>Create a working directory and go into it:</p> |
| 105 <pre class="prettyprint"> | 99 <pre class="prettyprint"> |
| 106 $ mkdir work | 100 $ mkdir work |
| 107 $ cd work | 101 $ cd work |
| 108 </pre> | 102 </pre> |
| 109 <p>Download a zip file containing our sample:</p> | 103 <p>Download a zip file containing our sample:</p> |
| 110 <pre class="prettyprint"> | 104 <pre class="prettyprint"> |
| 111 $ curl http://nacltools.storage.googleapis.com/io2014/voronoi.zip -O | 105 $ curl http://nacltools.storage.googleapis.com/io2014/voronoi.zip -O |
| 112 $ ls -l | 106 $ ls -l |
| (...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 165 </pre> | 159 </pre> |
| 166 <p>To test our application, we run a local web server, written in python. | 160 <p>To test our application, we run a local web server, written in python. |
| 167 Run the server with this command (NOTE: Running through a Makefile | 161 Run the server with this command (NOTE: Running through a Makefile |
| 168 now):</p> | 162 now):</p> |
| 169 <pre class="prettyprint"> | 163 <pre class="prettyprint"> |
| 170 $ make serve | 164 $ make serve |
| 171 </pre> | 165 </pre> |
| 172 <p>Then, navigate to <a class="reference external" href="http://localhost:5103/"
>http://localhost:5103/</a> to test the demo.</p> | 166 <p>Then, navigate to <a class="reference external" href="http://localhost:5103/"
>http://localhost:5103/</a> to test the demo.</p> |
| 173 <p>If you follow along with the demo video, you will discover the sample crashes | 167 <p>If you follow along with the demo video, you will discover the sample crashes |
| 174 when you change the thread count.</p> | 168 when you change the thread count.</p> |
| 175 </section><section id="debugging"> | |
| 176 <h3 id="debugging">Debugging</h3> | 169 <h3 id="debugging">Debugging</h3> |
| 177 <p>If you haven’t installed the debugger at this point, skip to the next s
ection.</p> | 170 <p>If you haven’t installed the debugger at this point, skip to the next s
ection.</p> |
| 178 <p>At this point, if you have the debugger installed, you should be able to open | 171 <p>At this point, if you have the debugger installed, you should be able to open |
| 179 the developer console and view the resulting crash.</p> | 172 the developer console and view the resulting crash.</p> |
| 180 <p>You can see a backtrace with:</p> | 173 <p>You can see a backtrace with:</p> |
| 181 <pre class="prettyprint"> | 174 <pre class="prettyprint"> |
| 182 bt | 175 bt |
| 183 </pre> | 176 </pre> |
| 184 <p>You can see active threads with:</p> | 177 <p>You can see active threads with:</p> |
| 185 <pre class="prettyprint"> | 178 <pre class="prettyprint"> |
| 186 info threads | 179 info threads |
| 187 </pre> | 180 </pre> |
| 188 <p>Currently, symbol information is limited for GLibC executables. | 181 <p>Currently, symbol information is limited for GLibC executables. |
| 189 We have improvements coming that will improve the experience further.</p> | 182 We have improvements coming that will improve the experience further.</p> |
| 190 <p>For newlib and PNaCl executables you can retrieve full symbols information | 183 <p>For newlib and PNaCl executables you can retrieve full symbols information |
| 191 with:</p> | 184 with:</p> |
| 192 <pre class="prettyprint"> | 185 <pre class="prettyprint"> |
| 193 remote get irt irt | 186 remote get irt irt |
| 194 add-symbol-file irt | 187 add-symbol-file irt |
| 195 remote get nexe nexe | 188 remote get nexe nexe |
| 196 add-symbol-file nexe | 189 add-symbol-file nexe |
| 197 </pre> | 190 </pre> |
| 198 </section><section id="fix-it-up"> | |
| 199 <h3 id="fix-it-up">Fix it up</h3> | 191 <h3 id="fix-it-up">Fix it up</h3> |
| 200 <p>Return to the development environment and stop the test server, | 192 <p>Return to the development environment and stop the test server, |
| 201 by pressing Ctrl-C.</p> | 193 by pressing Ctrl-C.</p> |
| 202 <p>Open your editor again, navigate to line 485 and change <em>valu</em> to <em>
value</em>.</p> | 194 <p>Open your editor again, navigate to line 485 and change <em>valu</em> to <em>
value</em>.</p> |
| 203 <p>Then rebuild:</p> | 195 <p>Then rebuild:</p> |
| 204 <pre class="prettyprint"> | 196 <pre class="prettyprint"> |
| 205 $ make -j10 | 197 $ make -j10 |
| 206 </pre> | 198 </pre> |
| 207 <p>Check the diff and commit our fix:</p> | 199 <p>Check the diff and commit our fix:</p> |
| 208 <pre class="prettyprint"> | 200 <pre class="prettyprint"> |
| 209 $ git diff | 201 $ git diff |
| 210 $ git commit -am "fixed thread ui bug" | 202 $ git commit -am "fixed thread ui bug" |
| 211 </pre> | 203 </pre> |
| 212 <p>Now look at your commit history:</p> | 204 <p>Now look at your commit history:</p> |
| 213 <pre class="prettyprint"> | 205 <pre class="prettyprint"> |
| 214 $ git log | 206 $ git log |
| 215 </pre> | 207 </pre> |
| 216 <p>Run the demo again. And everything now works:</p> | 208 <p>Run the demo again. And everything now works:</p> |
| 217 <pre class="prettyprint"> | 209 <pre class="prettyprint"> |
| 218 $ make serve | 210 $ make serve |
| 219 </pre> | 211 </pre> |
| 220 </section><section id="thanks"> | |
| 221 <h3 id="thanks">Thanks</h3> | 212 <h3 id="thanks">Thanks</h3> |
| 222 <p>Thanks for checking out our environment. | 213 <p>Thanks for checking out our environment. |
| 223 Things are rapidly changing and in the coming months you can expect to see | 214 Things are rapidly changing and in the coming months you can expect to see |
| 224 further improvements and filling out of our platform and library support.</p> | 215 further improvements and filling out of our platform and library support.</p> |
| 225 <p>Check back at this page for the latest status.</p> | 216 <p>Check back at this page for the latest status.</p> |
| 226 </section><section id="feature-status"> | |
| 227 <h3 id="feature-status">Feature Status</h3> | 217 <h3 id="feature-status">Feature Status</h3> |
| 228 <p>Here is a summary of feature status. We hope to overcome these limitations | 218 <p>Here is a summary of feature status. We hope to overcome these limitations |
| 229 in the near future:</p> | 219 in the near future:</p> |
| 230 <blockquote> | 220 <blockquote> |
| 231 <div><ul class="small-gap"> | 221 <div><ul class="small-gap"> |
| 232 <li><p class="first">NaCl Development Environment</p> | 222 <li><p class="first">NaCl Development Environment</p> |
| 233 <ul class="small-gap"> | 223 <ul class="small-gap"> |
| 234 <li><p class="first">General</p> | 224 <li><p class="first">General</p> |
| 235 <ul class="small-gap"> | 225 <ul class="small-gap"> |
| 236 <li><p class="first">Supported:</p> | 226 <li><p class="first">Supported:</p> |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 268 <ul class="small-gap"> | 258 <ul class="small-gap"> |
| 269 <li>ChromeOS</li> | 259 <li>ChromeOS</li> |
| 270 <li>Mac OSX</li> | 260 <li>Mac OSX</li> |
| 271 <li>Windows</li> | 261 <li>Windows</li> |
| 272 </ul> | 262 </ul> |
| 273 </li> | 263 </li> |
| 274 </ul> | 264 </ul> |
| 275 </li> | 265 </li> |
| 276 </ul> | 266 </ul> |
| 277 </div></blockquote> | 267 </div></blockquote> |
| 278 </section></section></section> | 268 </section> |
| 279 | 269 |
| 280 {{/partials.standard_nacl_article}} | 270 {{/partials.standard_nacl_article}} |
| OLD | NEW |