| 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 <h2 id="in-the-browser">In the browser!</h2> | 5 <h2 id="in-the-browser">In the browser!</h2> |
| 6 <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. |
| 7 Explore our new in-browser development environment and debugger.</p> | 7 Explore our new in-browser development environment and debugger.</p> |
| 8 <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 |
| 9 all in your desktop web browser or on a Chromebook. | 9 all in your desktop web browser or on a Chromebook. |
| 10 Work either on-line or off-line!</p> | 10 Work either on-line or off-line!</p> |
| 11 <iframe class="video" width="500" height="281" | 11 <iframe class="video" width="500" height="281" |
| 12 src="//www.youtube.com/embed/OzNuzBDEWzk?rel=0" frameborder="0"></iframe><h3 id=
"work-in-progress">Work in Progress</h3> | 12 src="//www.youtube.com/embed/OzNuzBDEWzk?rel=0" frameborder="0"></iframe><h3 id=
"our-web-based-tools">Our Web-based Tools</h3> |
| 13 <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 <a class="reference external" href="nacldev">wo
rk in progress</a>. |
| 14 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 |
| 15 flexibility, but are not the recommended tools for a production application. | 15 flexibility, but are not the recommended tools for a production application. |
| 16 To develop a substantial application for Native Client / | 16 In the future, that may change, but for the moment, |
| 17 to develop a substantial application for Native Client / |
| 17 Portable Native Client, | 18 Portable Native Client, |
| 18 we currently recommend you use the | 19 we recommend you use the |
| 19 <a class="reference external" href="/native-client/sdk/download">Native Client S
DK</a>.</p> | 20 <a class="reference external" href="/native-client/sdk/download">Native Client S
DK</a>.</p> |
| 20 <b><font color="#880000"> | 21 <b><font color="#880000"> |
| 21 NOTE: The NaCl Development Environment is not yet stable. | 22 NOTE: The NaCl Development Environment is not yet stable. |
| 22 Ideally user data is preserved, but currently it can be lost during updates | 23 Ideally user data is preserved, but currently it can be lost during updates |
| 23 or sporadically. We're working to resolve this. | 24 or sporadically. We're working to resolve this. |
| 24 </font></b><h3 id="installation">Installation</h3> | 25 </font></b><h3 id="installation">Installation</h3> |
| 25 <p>The setup process currently requires several steps. | 26 <p>The setup process currently requires several steps. |
| 26 We’re working to reduce the number of steps in future releases. | 27 We’re working to reduce the number of steps in future releases. |
| 27 As the process gets easier, we’ll update this page.</p> | 28 As the process gets easier, we’ll update this page.</p> |
| 28 <p>To install the development environment:</p> | 29 <p>To install the development environment:</p> |
| (...skipping 22 matching lines...) Expand all Loading... |
| 51 <li><p class="first">Navigate to: chrome://flags and:</p> | 52 <li><p class="first">Navigate to: chrome://flags and:</p> |
| 52 <ul class="small-gap"> | 53 <ul class="small-gap"> |
| 53 <li>Enable <strong>Native Client GDB-based debugging</strong>.</li> | 54 <li>Enable <strong>Native Client GDB-based debugging</strong>.</li> |
| 54 <li>Restart your browser by clicking <strong>Relaunch Now</strong>.</li> | 55 <li>Restart your browser by clicking <strong>Relaunch Now</strong>.</li> |
| 55 </ul> | 56 </ul> |
| 56 </li> | 57 </li> |
| 57 <li>NOTE: If you experience unexplained hangs, disable GDB-based debugging | 58 <li>NOTE: If you experience unexplained hangs, disable GDB-based debugging |
| 58 temporarily and try again.</li> | 59 temporarily and try again.</li> |
| 59 </ul> | 60 </ul> |
| 60 </div></blockquote> | 61 </div></blockquote> |
| 61 <h3 id="editor">Editor</h3> | 62 <h4 id="editing">Editing</h4> |
| 62 <p>To follow along in this tutorial, you’ll need to use a text editor to m
odify | 63 <p>To follow along in this codelab, you’ll need to use a text editor to mo
dify |
| 63 various files in our development environment. | 64 various files in our development environment. |
| 64 There are currently two editor options, nano or vim. | 65 There are currently two editor options, nano or vim. |
| 65 Emacs is coming soon... | 66 We have an Emacs port, but it is not yet available in the Dev Environment |
| 67 (coming soon). |
| 66 If you’re unsure what to pick, nano is simpler to start with and has on-sc
reen | 68 If you’re unsure what to pick, nano is simpler to start with and has on-sc
reen |
| 67 help.</p> | 69 help.</p> |
| 68 <ul class="small-gap"> | 70 <ul class="small-gap"> |
| 69 <li><p class="first">You can open <strong>nano</strong> like this:</p> | 71 <li><p class="first">You can open <strong>nano</strong> like this:</p> |
| 70 <pre class="prettyprint"> | 72 <pre class="prettyprint"> |
| 71 $ nano <filename> | 73 $ nano <filename> |
| 72 </pre> | 74 </pre> |
| 73 <p>Here’s an online <a class="reference external" href="http://mintaka.sds
u.edu/reu/nano.html">nano tutorial</a>.</p> | 75 <p>Here’s an online <a class="reference external" href="http://mintaka.sds
u.edu/reu/nano.html">nano tutorial</a>.</p> |
| 74 </li> | 76 </li> |
| 75 <li><p class="first">You can open <strong>vim</strong> like this:</p> | 77 <li><p class="first">You can open <strong>vim</strong> like this:</p> |
| 76 <pre class="prettyprint"> | 78 <pre class="prettyprint"> |
| 77 $ vim <filename> | 79 $ vim <filename> |
| 78 </pre> | 80 </pre> |
| 79 <p>Here’s an online <a class="reference external" href="http://www.openvim
.com/tutorial.html">vim tutorial</a>.</p> | 81 <p>Here’s an online <a class="reference external" href="http://www.openvim
.com/tutorial.html">vim tutorial</a>.</p> |
| 80 </li> | 82 </li> |
| 81 </ul> | 83 </ul> |
| 82 <h3 id="git-setup">Git Setup</h3> | 84 <h3 id="git-setup">Git Setup</h3> |
| 83 <p>This tutorial also uses a revision control program called | 85 <p>This tutorial also uses a revision control program called |
| 84 <a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)"
>git</a>. | 86 <a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)"
>git</a>. |
| 85 In order to commit to a git repository, | 87 In order to commit to a git repository, |
| 86 you need to setup your environment to with your identity.</p> | 88 you need to setup your environment to with your identity.</p> |
| 87 <p>You’ll need to add these lines to <cite>~/.bashrc</cite> to cause them
to be invoked each | 89 <p>Run these commands (with your info) to setup your <cite>~/.gitconfig</cite> |
| 88 time you start the development environment.</p> | 90 for use:</p> |
| 89 <pre class="prettyprint"> | 91 <pre class="prettyprint"> |
| 90 git config --global user.name "John Doe" | 92 git config --global user.name "John Doe" |
| 91 git config --global user.email johndoe@example.com | 93 git config --global user.email johndoe@example.com |
| 92 </pre> | 94 </pre> |
| 93 <p>You can reload you <cite>~/.bashrc</cite> by running:</p> | |
| 94 <pre class="prettyprint"> | |
| 95 source ~/.bashrc | |
| 96 </pre> | |
| 97 <h3 id="tour-follow-the-video">Tour (follow the video)</h3> | 95 <h3 id="tour-follow-the-video">Tour (follow the video)</h3> |
| 98 <p>Create a working directory and go into it:</p> | 96 <p>Create a working directory and go into it:</p> |
| 99 <pre class="prettyprint"> | 97 <pre class="prettyprint"> |
| 100 $ mkdir work | 98 $ mkdir work |
| 101 $ cd work | 99 $ cd work |
| 102 </pre> | 100 </pre> |
| 103 <p>Download a zip file containing our sample:</p> | 101 <p>Download a zip file containing our sample:</p> |
| 104 <pre class="prettyprint"> | 102 <pre class="prettyprint"> |
| 105 $ curl http://nacltools.storage.googleapis.com/io2014/voronoi.zip -O | 103 $ curl http://nacltools.storage.googleapis.com/io2014/voronoi.zip -O |
| 106 $ ls -l | 104 $ ls -l |
| (...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 206 $ git log | 204 $ git log |
| 207 </pre> | 205 </pre> |
| 208 <p>Run the demo again. And everything now works:</p> | 206 <p>Run the demo again. And everything now works:</p> |
| 209 <pre class="prettyprint"> | 207 <pre class="prettyprint"> |
| 210 $ make serve | 208 $ make serve |
| 211 </pre> | 209 </pre> |
| 212 <h3 id="thanks">Thanks</h3> | 210 <h3 id="thanks">Thanks</h3> |
| 213 <p>Thanks for checking out our environment. | 211 <p>Thanks for checking out our environment. |
| 214 Things are rapidly changing and in the coming months you can expect to see | 212 Things are rapidly changing and in the coming months you can expect to see |
| 215 further improvements and filling out of our platform and library support.</p> | 213 further improvements and filling out of our platform and library support.</p> |
| 216 <p>Check back at this page for the latest status.</p> | 214 <p>Follow the status of the NaCl Dev Environment at <a class="reference external
" href="naclenv">this page</a>.</p> |
| 217 <h3 id="feature-status">Feature Status</h3> | |
| 218 <p>Here is a summary of feature status. We hope to overcome these limitations | |
| 219 in the near future:</p> | |
| 220 <blockquote> | |
| 221 <div><ul class="small-gap"> | |
| 222 <li><p class="first">NaCl Development Environment</p> | |
| 223 <ul class="small-gap"> | |
| 224 <li><p class="first">General</p> | |
| 225 <ul class="small-gap"> | |
| 226 <li><p class="first">Supported:</p> | |
| 227 <ul class="small-gap"> | |
| 228 <li>Python (built-in)</li> | |
| 229 <li>GCC w/ GLibC (x86-32 and x86-64 only)</li> | |
| 230 <li>Lua (install with: <cite>package -i lua && . setup-environment</cite
>)</li> | |
| 231 <li>Ruby (install with: <cite>package -i ruby && . setup-environment</ci
te>)</li> | |
| 232 <li>Nethack! (install with: <cite>package -i nethack && . setup-environm
ent</cite>)</li> | |
| 233 </ul> | |
| 234 </li> | |
| 235 <li><p class="first">Unsupported:</p> | |
| 236 <ul class="small-gap"> | |
| 237 <li>Targeting Newlib</li> | |
| 238 <li>Targeting PNaCl</li> | |
| 239 <li>Forking in bash</li> | |
| 240 <li>Pipes / Redirection</li> | |
| 241 <li>Symbolic and hard links</li> | |
| 242 </ul> | |
| 243 </li> | |
| 244 </ul> | |
| 245 </li> | |
| 246 <li><p class="first">Missing / broken on ARM:</p> | |
| 247 <ul class="small-gap"> | |
| 248 <li>Git (broken)</li> | |
| 249 <li>GCC (unsupported)</li> | |
| 250 </ul> | |
| 251 </li> | |
| 252 </ul> | |
| 253 </li> | |
| 254 <li><p class="first">Debugger</p> | |
| 255 <ul class="small-gap"> | |
| 256 <li>Runs reliably only on a recent Beta or Dev Channel (M36+) build.</li> | |
| 257 <li><p class="first">Currently unreliable on some platforms:</p> | |
| 258 <ul class="small-gap"> | |
| 259 <li>ChromeOS</li> | |
| 260 <li>Mac OSX</li> | |
| 261 <li>Windows</li> | |
| 262 </ul> | |
| 263 </li> | |
| 264 </ul> | |
| 265 </li> | |
| 266 </ul> | |
| 267 </div></blockquote> | |
| 268 </section> | 215 </section> |
| 269 | 216 |
| 270 {{/partials.standard_nacl_article}} | 217 {{/partials.standard_nacl_article}} |
| OLD | NEW |