OLD | NEW |
1 {{+bindTo:partials.standard_nacl_article}} | 1 {{+bindTo:partials.standard_nacl_article}} |
2 | 2 |
3 <section id="what-a-difference-python-makes-codelab"> | 3 <section id="what-a-difference-python-makes-codelab"> |
4 <span id="cds2014-python"></span><h1 id="what-a-difference-python-makes-codelab"
><span id="cds2014-python"></span>What a Difference Python Makes - Codelab</h1> | 4 <span id="cds2014-python"></span><h1 id="what-a-difference-python-makes-codelab"
><span id="cds2014-python"></span>What a Difference Python Makes - Codelab</h1> |
5 <h2 id="introduction">Introduction</h2> | 5 <h2 id="introduction">Introduction</h2> |
6 <p>Learn how you can use client-side Python on your webpage. | 6 <p>Learn how you can use client-side Python on your webpage. |
7 Use the python <a href="https://docs.python.org/2/library/difflib.html" | 7 Use the python <a href="https://docs.python.org/2/library/difflib.html" |
8 target="_blank">difflib</a> module to generate attractive online | 8 target="_blank">difflib</a> module to generate attractive online |
9 textual diffs. | 9 textual diffs. |
10 Develop inside Google Chrome, using a hot off the presses version | 10 Develop inside Google Chrome, using a hot off the presses version |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
42 </dl> | 42 </dl> |
43 <h2 id="setup">Setup</h2> | 43 <h2 id="setup">Setup</h2> |
44 <p>For this codelab, you will need to point your web browser at | 44 <p>For this codelab, you will need to point your web browser at |
45 the Beta preview of our in-browser NaCl Dev Environment.</p> | 45 the Beta preview of our in-browser NaCl Dev Environment.</p> |
46 <a href="https://naclports.storage.googleapis.com/builds/pepper_41/trunk-176-g9b
9e342/publish/devenv/pnacl/app/bash.html" | 46 <a href="https://naclports.storage.googleapis.com/builds/pepper_41/trunk-176-g9b
9e342/publish/devenv/pnacl/app/bash.html" |
47 target="_blank">Click here to open the environment.</a><p>While no installation
is needed, the first load of the page will | 47 target="_blank">Click here to open the environment.</a><p>While no installation
is needed, the first load of the page will |
48 require you to agree to allow the page unlimited storage | 48 require you to agree to allow the page unlimited storage |
49 (Click “Ok” in the bar at the top of your browser window.)</p> | 49 (Click “Ok” in the bar at the top of your browser window.)</p> |
50 <p>The first run requires a large download. Please be patient. | 50 <p>The first run requires a large download. Please be patient. |
51 Also, as PNaCl translates executables to native code on demand, | 51 Also, as PNaCl translates executables to native code on demand, |
52 each program will also have have a noticable load delay on first run. | 52 each program will also have a noticable load delay on first run. |
53 We’re actively working to improve this.</p> | 53 We’re actively working to improve this.</p> |
54 <p>NOTE: This environment will leave a substantial (800MB) payload in your | 54 <p>NOTE: This environment will leave a substantial (800MB) payload in your |
55 browser. See the cleanup section below to learn how to recover this space.</p> | 55 browser. See the cleanup section below to learn how to recover this space.</p> |
56 <p>Once the download is complete you should see a bash prompt:</p> | 56 <p>Once the download is complete, you should see a bash prompt (ignore |
| 57 the gcc warning, our web C compiler is coming soon!):</p> |
57 <pre class="prettyprint"> | 58 <pre class="prettyprint"> |
58 WARNING: gcc not yet available for your platform (coming soon). | 59 WARNING: gcc not yet available for your platform (coming soon). |
59 bash.nmf-4.3$ | 60 bash.nmf-4.3$ |
60 </pre> | 61 </pre> |
61 <h3 id="our-web-based-tools">Our Web-based Tools</h3> | 62 <h3 id="our-web-based-tools">Our Web-based Tools</h3> |
62 <p>These development tools are a <a class="reference external" href="nacldev">wo
rk in progress</a>. | 63 <p>These development tools are a <a class="reference external" href="nacldev">wo
rk in progress</a>. |
63 At this point, they are a learning tool and demonstration of NaCl’s | 64 At this point, they are a learning tool and demonstration of NaCl’s |
64 flexibility, but are not the recommended tools for a production application. | 65 flexibility, but are not the recommended tools for a production application. |
65 In the future, that may change, but for the moment, | 66 In the future, that may change, but for the moment, |
66 to develop a substantial application for Native Client / | 67 to develop a substantial application for Native Client / |
67 Portable Native Client, | 68 Portable Native Client, |
68 we recommend you use the | 69 we recommend you use the |
69 <a class="reference external" href="/native-client/sdk/download">Native Client S
DK</a>.</p> | 70 <a class="reference external" href="/native-client/sdk/download">Native Client S
DK</a>.</p> |
70 <b><font color="#880000"> | 71 <b><font color="#880000"> |
71 NOTE: The NaCl Development Environment is not yet stable. | 72 NOTE: The NaCl Development Environment is not yet stable. |
72 Ideally user data is preserved, but currently it can be lost during updates | 73 Ideally, user data is preserved, but currently it can be lost during updates |
73 or sporadically. We're working to resolve this. | 74 or sporadically. We're working to resolve this. |
74 </font></b><h3 id="navigating-in-the-dev-environment">Navigating in the Dev Envi
ronment</h3> | 75 </font></b><h3 id="navigating-in-the-dev-environment">Navigating in the Dev Envi
ronment</h3> |
75 <p>The NaCl Dev Environment behaves like a mini-UNIX system. | 76 <p>The NaCl Dev Environment behaves like a mini-UNIX system. |
76 You start-up in bash command prompt. | 77 You start-up in bash command prompt. |
77 Standard UNIX commands like cd, ls, mkdir, rm, rmdir, etc. | 78 Standard UNIX commands like cd, ls, mkdir, rm, rmdir, etc. |
78 can be used to navigate and modify the Dev Environment’s | 79 can be used to navigate and modify the Dev Environment’s |
79 virtual filesystem.</p> | 80 virtual filesystem.</p> |
80 <p>There are 3 locations mounted by the environment:</p> | 81 <p>There are 3 locations mounted by the environment:</p> |
81 <blockquote> | 82 <blockquote> |
82 <div><ul class="small-gap"> | 83 <div><ul class="small-gap"> |
83 <li>/tmp mounts the HTML5 Filesystem temporary storage area.</li> | 84 <li>/tmp mounts the HTML5 Filesystem temporary storage area.</li> |
84 <li>/mnt/html5 mounts the HTML5 Filesystem persistent storage area.</li> | 85 <li>/mnt/html5 mounts the HTML5 Filesystem persistent storage area.</li> |
85 <li>Your home directory ~/, located in /home/user, | 86 <li>Your home directory ~/, located in /home/user, |
86 mounts a portion of the HTML5 Filsystem persistent storage area | 87 mounts a portion of the HTML5 Filsystem persistent storage area |
87 that corresponds to the /mnt/html5/home directory.</li> | 88 that corresponds to the /mnt/html5/home directory.</li> |
88 </ul> | 89 </ul> |
89 </div></blockquote> | 90 </div></blockquote> |
90 <h3 id="clipboard">Clipboard</h3> | 91 <h3 id="clipboard">Clipboard</h3> |
91 <p>Many of the steps in this tutorial will be easier to copy and paste | 92 <p>Many of the steps in this tutorial will be easier to copy and paste |
92 into the Dev Environment. | 93 into the Dev Environment. |
93 To copy and paste in the Dev Environment web page, | 94 To copy and paste in the Dev Environment web page, |
94 you can use the keyboard or the menu options under (☰ → Edit).</p> | 95 you can use the keyboard or the menu options (top right corner ☰ → E
dit).</p> |
95 <p>On your platform use:</p> | 96 <p>On your platform use:</p> |
96 <blockquote> | 97 <blockquote> |
97 <div><ul class="small-gap"> | 98 <div><ul class="small-gap"> |
98 <li><span id="copy_key">Loading...</span> | 99 <li><span id="copy_key">Loading...</span> |
99 <script> | 100 <script> |
100 var tag = document.getElementById('copy_key'); | 101 var tag = document.getElementById('copy_key'); |
101 if (navigator.appVersion.indexOf('Mac') >= 0) { | 102 if (navigator.appVersion.indexOf('Mac') >= 0) { |
102 tag.innerHTML = '⌘-C'; | 103 tag.innerHTML = '⌘-C'; |
103 } else { | 104 } else { |
104 tag.innerHTML = 'Ctrl-C'; | 105 tag.innerHTML = 'Ctrl-C'; |
(...skipping 29 matching lines...) Expand all Loading... |
134 <pre class="prettyprint"> | 135 <pre class="prettyprint"> |
135 $ vim <filename> | 136 $ vim <filename> |
136 </pre> | 137 </pre> |
137 <p>Here’s an online <a class="reference external" href="http://www.openvim
.com/tutorial.html">vim tutorial</a>.</p> | 138 <p>Here’s an online <a class="reference external" href="http://www.openvim
.com/tutorial.html">vim tutorial</a>.</p> |
138 </li> | 139 </li> |
139 </ul> | 140 </ul> |
140 <h3 id="git-setup">Git Setup</h3> | 141 <h3 id="git-setup">Git Setup</h3> |
141 <p>This tutorial also uses a revision control program called | 142 <p>This tutorial also uses a revision control program called |
142 <a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)"
>git</a>. | 143 <a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)"
>git</a>. |
143 In order to commit to a git repository, | 144 In order to commit to a git repository, |
144 you need to setup your environment to with your identity.</p> | 145 you need to set up your identity.</p> |
145 <p>Run these commands (with your info) to setup your <cite>~/.gitconfig</cite> | 146 <p>Run these commands (with your info) to setup your <cite>~/.gitconfig</cite> |
146 for use:</p> | 147 for use:</p> |
147 <pre class="prettyprint"> | 148 <pre class="prettyprint"> |
148 git config --global user.name "John Doe" | 149 git config --global user.name "John Doe" |
149 git config --global user.email johndoe@example.com | 150 git config --global user.email johndoe@example.com |
150 </pre> | 151 </pre> |
151 <h2 id="get-the-code">Get the Code!</h2> | 152 <h2 id="get-the-code">Get the Code!</h2> |
152 <p>Rather than start from nothing, for this codelab we’ve provided | 153 <p>Rather than start from nothing, for this codelab we’ve provided |
153 you with a zip file containing a starting point.</p> | 154 you with a zip file containing a starting point.</p> |
154 <p>Download the codelab:</p> | 155 <p>Download the codelab:</p> |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
194 <p>This will attempt to open the sample, but will be blocked by | 195 <p>This will attempt to open the sample, but will be blocked by |
195 a popup blocker the first time. Click on the URL to accept the popup. | 196 a popup blocker the first time. Click on the URL to accept the popup. |
196 It also clobbers /tmp/differ for good measure.</p> | 197 It also clobbers /tmp/differ for good measure.</p> |
197 <p>As you can see, this isn’t quite what we’re going for.</p> | 198 <p>As you can see, this isn’t quite what we’re going for.</p> |
198 <p>You’ll want to modify diff.py, using the editor you selected earlier. | 199 <p>You’ll want to modify diff.py, using the editor you selected earlier. |
199 You’ll probably want to consult the <a href="https://docs.python.org/2/lib
rary/difflib.html" | 200 You’ll probably want to consult the <a href="https://docs.python.org/2/lib
rary/difflib.html" |
200 target="_blank">difflib</a> documentation. | 201 target="_blank">difflib</a> documentation. |
201 I would suggest you check out the HtmlDiff class and make use of | 202 I would suggest you check out the HtmlDiff class and make use of |
202 the make_file member function. Note our goal is to create a | 203 the make_file member function. Note our goal is to create a |
203 full HTML diff, so the make_table function is insufficient. | 204 full HTML diff, so the make_table function is insufficient. |
204 I would also suggest the splitlines | 205 The splitlines function may also come in handy.</p> |
205 function may come in handy.</p> | |
206 <p>You can test diff.py manually as you would in a normal UNIX environment. | 206 <p>You can test diff.py manually as you would in a normal UNIX environment. |
207 It can be run like this:</p> | 207 It can be run like this:</p> |
208 <pre class="prettyprint"> | 208 <pre class="prettyprint"> |
209 ./diff.py before.txt after.txt out.html | 209 ./diff.py before.txt after.txt out.html |
210 </pre> | 210 </pre> |
211 <p>Once everything is working diff.html will contain an html diff. | 211 <p>Once everything is working, diff.html will contain an html diff. |
212 After the initial <cite>make</cite> you can hit “Run” to test your c
hanges.</p> | 212 After the initial <cite>make</cite> you can hit “Run” to test your c
hanges.</p> |
213 <p>Now get to it, and good luck!</p> | 213 <p>Now get to it, and good luck!</p> |
214 <h2 id="what-you-ve-learned">What you’ve learned</h2> | 214 <h2 id="what-you-ve-learned">What you’ve learned</h2> |
215 <p>While the details of building and packaging Python have been | 215 <p>While the details of building and packaging Python have been |
216 insulated from you for the purpose of this exercise, the key take-home lesson | 216 insulated from you for the purpose of this exercise, the key take-home lesson |
217 is how easy it is to leverage Python using PNaCl. | 217 is how easy it is to leverage Python using PNaCl. |
218 As you’ve likely experienced, the initial start time is non-trivial. | 218 As you’ve likely experienced, the initial start time is non-trivial. |
219 We’re working on improving this, both by improving PNaCl, | 219 We’re working on improving this, both by improving PNaCl, |
220 and our Python port.</p> | 220 and our Python port.</p> |
221 <p>The same approach to deploying Python apps can be used for the other | 221 <p>The same approach to deploying Python apps can be used for the other |
222 interpreted languages that have been ported to PNaCl.</p> | 222 interpreted languages that have been ported to PNaCl.</p> |
223 <p>Check out the range of interpreters, libraries, and tools | 223 <p>Check out the range of interpreters, libraries, and tools |
224 <a class="reference external" href="https://code.google.com/p/naclports/wiki/Por
tList">already ported to PNaCl and ready to be integrated with your Web App</a>.
</p> | 224 <a class="reference external" href="https://code.google.com/p/naclports/wiki/Por
tList">already ported to PNaCl and ready to be integrated with your Web App</a>.
</p> |
225 <p>While our in-browser environment is rapidly evolving | 225 <p>While our in-browser environment is rapidly evolving |
226 to become a complete development solution, | 226 to become a complete development solution, |
227 for the broadest range of development options, check out the | 227 for the broadest range of development options, check out the |
228 <a class="reference external" href="https://developer.chrome.com/native-client/s
dk/download">NaCl SDK</a>.</p> | 228 <a class="reference external" href="https://developer.chrome.com/native-client/s
dk/download">NaCl SDK</a>.</p> |
229 <p>For questions, concerns, and help contact us at | 229 <p>For questions, concerns, or help contact us at |
230 <a class="reference external" href="https://groups.google.com/forum/#!forum/nati
ve-client-discuss">native-client-discuss@googlegroups.com</a>.</p> | 230 <a class="reference external" href="https://groups.google.com/forum/#!forum/nati
ve-client-discuss">native-client-discuss@googlegroups.com</a>.</p> |
231 <p>Bring your interpreted app to PNaCl today!</p> | 231 <p>Bring your interpreted app to PNaCl today!</p> |
232 <h2 id="cleanup">Cleanup</h2> | 232 <h2 id="cleanup">Cleanup</h2> |
233 <p>The Web-based version of the Chrome Dev Environment installs | 233 <p>The Web-based version of the Chrome Dev Environment installs |
234 package data (>800MB) into the HTML5 Filesystem storage associated | 234 package data (>800MB) into the HTML5 Filesystem storage associated |
235 with naclports.storage.googleapis.com . | 235 with naclports.storage.googleapis.com . |
236 To recover this storage (i.e. uninstall), | 236 To recover this storage (i.e. uninstall), |
237 enter <strong>chrome://settings/cookies</strong> in the Chrome URL bar. | 237 enter <strong>chrome://settings/cookies</strong> in the Chrome URL bar. |
238 In the cookies UI, search for “naclports”. | 238 In the cookies UI, search for “naclports”. |
239 Then click the “x” next to the naclports entry.</p> | 239 Then click the “x” next to the naclports entry.</p> |
240 </section> | 240 </section> |
241 | 241 |
242 {{/partials.standard_nacl_article}} | 242 {{/partials.standard_nacl_article}} |
OLD | NEW |