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 |