Index: native_client_sdk/doc_generated/cds2014/python.html |
diff --git a/native_client_sdk/doc_generated/cds2014/python.html b/native_client_sdk/doc_generated/cds2014/python.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..bef59c7566948330936e96530228963e809f5077 |
--- /dev/null |
+++ b/native_client_sdk/doc_generated/cds2014/python.html |
@@ -0,0 +1,240 @@ |
+{{+bindTo:partials.standard_nacl_article}} |
+ |
+<section id="what-a-difference-python-makes-codelab"> |
+<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> |
+<h2 id="introduction">Introduction</h2> |
+<p>Learn how you can use client-side Python on your webpage. |
+Use the python <a href="https://docs.python.org/2/library/difflib.html" |
+ target="_blank">difflib</a> module to generate attractive online |
+textual diffs. |
+Develop inside Google Chrome, using a hot off the presses version |
+of our NaCl Dev Environment, running on a webpage, |
+powered by Portable Native Client. |
+The techniques in this codelab also apply to other interpreted languages |
+we’ve ported to PNaCl, including: Python, Lua, Ruby, Tcl, Bash, and Forth.</p> |
+<dl class="docutils"> |
+<dt>Requirements:</dt> |
+<dd><ul class="first last small-gap"> |
+<li>A Desktop / Laptop Windows, Mac, Linux, or ChromeOS browser |
+<br/><span id="python_compat" style="color: #cccc00" |
+ >Checking browser compatibility...</span><br/> |
+<i id="python_compat2"></i> |
+<script> |
+var tag = document.getElementById('python_compat'); |
+var tag2 = document.getElementById('python_compat2'); |
+if (!('application/x-pnacl' in navigator.mimeTypes)) { |
+ tag.innerHTML = |
+ 'This codelab does not appear to be supported by your browser.'; |
+ tag.style.color = '#cc0000'; |
+ tag2.innerHTML = |
+ 'You do not appear to be running a browser such as ' + |
+ 'Google Chrome which supports Portable Native Client ' + |
+ 'or you have disabled Portable Native Client.'; |
+} else { |
+ tag.innerHTML = 'This codelab appears to be supported by your browser.'; |
+ tag.style.color = '#00cc00'; |
+} |
+</script></li> |
+<li>A fast broadband connection (500MB download)</li> |
+<li>Can read and write Python</li> |
+</ul> |
+</dd> |
+</dl> |
+<h2 id="setup">Setup</h2> |
+<p>For this codelab, you will need to point your web browser at |
+the Beta preview of our in-browser NaCl Dev Environment.</p> |
+<a href="https://naclports.storage.googleapis.com/builds/pepper_41/trunk-169-gc77aece/publish/devenv/pnacl/app/bash.html" |
+target="_blank">Click here to open the environment.</a><p>While no installation is needed, the first load of the page will |
+require you to agree to allow the page unlimited storage |
+(Click “Ok” in the bar at the top of your browser window.)</p> |
+<p>The first run requires a large download. Please be patient. |
+Also, as PNaCl translates executables to native code on demand, |
+each program will also have have a noticable load delay on first run. |
+We’re actively working to improve this.</p> |
+<p>NOTE: This environment will leave a substantial (800MB) payload in your |
+browser. See the cleanup section below to learn how to recover this space.</p> |
+<p>Once the download is complete you should see a bash prompt:</p> |
+<pre class="prettyprint"> |
+WARNING: gcc not yet available for your platform (coming soon). |
+bash.nmf-4.3$ |
+</pre> |
+<h3 id="our-web-based-tools">Our Web-based Tools</h3> |
+<p>These development tools are a <a class="reference external" href="nacldev">work in progress</a>. |
+At this point, they are a learning tool and demonstration of NaCl’s |
+flexibility, but are not the recommended tools for a production application. |
+In the future, that may change, but for the moment, |
+to develop a substantial application for Native Client / |
+Portable Native Client, |
+we recommend you use the |
+<a class="reference external" href="/native-client/sdk/download">Native Client SDK</a>.</p> |
+<b><font color="#880000"> |
+NOTE: The NaCl Development Environment is not yet stable. |
+Ideally user data is preserved, but currently it can be lost during updates |
+or sporadically. We're working to resolve this. |
+</font></b><h3 id="navigating-in-the-dev-environment">Navigating in the Dev Environment</h3> |
+<p>The NaCl Dev Environment behaves like a mini-UNIX system. |
+You start-up in bash command prompt. |
+Standard UNIX commands like cd, ls, mkdir, rm, rmdir, etc. |
+can be used to navigate and modify the Dev Environment’s |
+virtual filesystem.</p> |
+<p>There are 3 locations mounted by the environment:</p> |
+<blockquote> |
+<div><ul class="small-gap"> |
+<li>/tmp mounts the HTML5 Filesystem temporary storage area.</li> |
+<li>/mnt/html5 mounts the HTML5 Filesystem persistent storage area.</li> |
+<li>Your home directory ~/, located in /home/user, |
+mounts a portion of the HTML5 Filsystem persistent storage area |
+that corresponds to the /mnt/html5/home directory.</li> |
+</ul> |
+</div></blockquote> |
+<h3 id="clipboard">Clipboard</h3> |
+<p>Many of the steps in this tutorial will be easier to copy and paste |
+into the Dev Environment. |
+To copy and paste in the Dev Environment web page, |
+you can use the keyboard or the menu options under (☰ → Edit).</p> |
+<p>On your platform use:</p> |
+<blockquote> |
+<div><ul class="small-gap"> |
+<li><span id="copy_key">Loading...</span> |
+<script> |
+var tag = document.getElementById('copy_key'); |
+if (navigator.appVersion.indexOf('Mac') >= 0) { |
+ tag.innerHTML = '⌘-C'; |
+} else { |
+ tag.innerHTML = 'Ctrl-C'; |
+} |
+</script> to Copy</li> |
+<li><span id="paste_key">Loading...</span> |
+<script> |
+var tag = document.getElementById('paste_key'); |
+if (navigator.appVersion.indexOf('Mac') >= 0) { |
+ tag.innerHTML = '⌘-V'; |
+} else { |
+ tag.innerHTML = 'Ctrl-V'; |
+} |
+</script> to Paste</li> |
+</ul> |
+</div></blockquote> |
+<h4 id="editing">Editing</h4> |
+<p>To follow along in this codelab, you’ll need to use a text editor to modify |
+various files in our development environment. |
+There are currently two editor options, nano or vim. |
+We have an Emacs port, but it is not yet available in the Dev Environment |
+(coming soon). |
+If you’re unsure what to pick, nano is simpler to start with and has on-screen |
+help.</p> |
+<ul class="small-gap"> |
+<li><p class="first">You can open <strong>nano</strong> like this:</p> |
+<pre class="prettyprint"> |
+$ nano <filename> |
+</pre> |
+<p>Here’s an online <a class="reference external" href="http://mintaka.sdsu.edu/reu/nano.html">nano tutorial</a>.</p> |
+</li> |
+<li><p class="first">You can open <strong>vim</strong> like this:</p> |
+<pre class="prettyprint"> |
+$ vim <filename> |
+</pre> |
+<p>Here’s an online <a class="reference external" href="http://www.openvim.com/tutorial.html">vim tutorial</a>.</p> |
+</li> |
+</ul> |
+<h3 id="git-setup">Git Setup</h3> |
+<p>This tutorial also uses a revision control program called |
+<a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)">git</a>. |
+In order to commit to a git repository, |
+you need to setup your environment to with your identity.</p> |
+<p>Run these commands (with your info) to setup your <cite>~/.gitconfig</cite> |
+for use:</p> |
+<pre class="prettyprint"> |
+git config --global user.name "John Doe" |
+git config --global user.email johndoe@example.com |
+</pre> |
+<h2 id="get-the-code">Get the Code!</h2> |
+<p>Rather than start from nothing, for this codelab we’ve provided |
+you with a zip file containing a starting point.</p> |
+<p>Download the codelab:</p> |
+<pre class="prettyprint"> |
+geturl https://nacltools.storage.googleapis.com/cds2014/cds2014_python.zip cds2014_python.zip |
+</pre> |
+<p>Unzip it:</p> |
+<pre class="prettyprint"> |
+unzip cds2014_python.zip |
+</pre> |
+<p>Go into the codelab directory:</p> |
+<pre class="prettyprint"> |
+cd cds2014_python |
+</pre> |
+<p>Create a new local git repo:</p> |
+<pre class="prettyprint"> |
+git init |
+</pre> |
+<p>Add everything:</p> |
+<pre class="prettyprint"> |
+git add . |
+</pre> |
+<p>Commit it:</p> |
+<pre class="prettyprint"> |
+git commit -am "initial" |
+</pre> |
+<p>While working, you can see what you’ve changed by running:</p> |
+<pre class="prettyprint"> |
+git diff |
+</pre> |
+<h2 id="your-challenge-should-you-choose-to-accept-it">Your challenge, should you choose to accept it...</h2> |
+<p>Javascript has many wonderful features out of the box. |
+Unfortunately, generating textual diffs is not one of them. |
+Python on the other hand has the <a href="https://docs.python.org/2/library/difflib.html" |
+ target="_blank">difflib</a> module in its standard library.</p> |
+<p>The starting point you’ve just extracted contains the shell |
+of a web app using Portable Native Client Python to generate a diff. |
+Just one thing is missing, that whole diffing thing...</p> |
+<p>To see where things stand, deploy the sample like this:</p> |
+<pre class="prettyprint"> |
+make |
+</pre> |
+<p>This will copy the sample to /tmp/differ (clobbering whatever is already |
+there). It will also attempt to open the sample, but will be blocked by |
+a popup blocker. Click on the URL to accept the popup.</p> |
+<p>As you can see, this isn’t quite what we’re going for.</p> |
+<p>You’ll want to modify diff.py, using the editor you selected earlier. |
+You’ll probably want to consult the <a href="https://docs.python.org/2/library/difflib.html" |
+ target="_blank">difflib</a> documentation. |
+I would suggest you check out the HtmlDiff class and make use of |
+the make_file member function. I would also suggest the splitlines |
+function may come in handy.</p> |
+<p>You can test diff.py manually as you would in a normal UNIX environment. |
+It can be run like this:</p> |
+<pre class="prettyprint"> |
+./diff.py before.txt after.txt out.html |
+</pre> |
+<p>Once everything is working diff.html will contain an html diff. |
+Run <cite>make</cite> again to deploy and test the full app.</p> |
+<p>Now get to it, and good luck!</p> |
+<h2 id="what-you-ve-learned">What you’ve learned</h2> |
+<p>While the details of building and packaging Python have been |
+insulated from you for the purpose of this exercise, the key take-home lesson |
+is how easy it is to leverage Python using PNaCl. |
+As you’ve likely experienced, the initial start time is non-trivial. |
+We’re working on improving this, both by improving PNaCl, |
+and our Python port.</p> |
+<p>The same approach to deploying Python apps can be used for the other |
+interpreted languages that have been ported to PNaCl.</p> |
+<p>Check out the range of interpreters, libraries, and tools |
+<a class="reference external" href="https://code.google.com/p/naclports/wiki/PortList">already ported to PNaCl and ready to be integrated with your Web App</a>.</p> |
+<p>While our in-browser environment is rapidly evolving |
+to become a complete development solution, |
+for the broadest range of development options, check out the |
+<a class="reference external" href="https://developer.chrome.com/native-client/sdk/download">NaCl SDK</a>.</p> |
+<p>For questions, concerns, and help contact us at |
+<a class="reference external" href="https://groups.google.com/forum/#!forum/native-client-discuss">native-client-discuss@googlegroups.com</a>.</p> |
+<p>Bring your interpreted app to PNaCl today!</p> |
+<h2 id="cleanup">Cleanup</h2> |
+<p>The Web-based version of the Chrome Dev Environment installs |
+package data (>800MB) into the HTML5 Filesystem storage associated |
+with naclports.storage.googleapis.com . |
+To recover this storage (i.e. uninstall), |
+enter <strong>chrome://settings/cookies</strong> in the Chrome URL bar. |
+In the cookies UI, search for “naclports”. |
+Then click the “x” next to the naclports entry.</p> |
+</section> |
+ |
+{{/partials.standard_nacl_article}} |