Overview

Overview

Like GWT, Pyjs translates a Python application and libraries (including UI widgets and DOM classes) into a Javascript application and libraries, and packages it all up:

<ol class="left spaced"> <li class="one"> <strong>pyjs</strong> translates Python code to Javascript by walking the Python abstract syntax tree and generating Javascript.</li>

<li class="two"> <strong>pyjslib</strong> takes care of Python types that require a custom Javascript implementation for pyjs to work. For example, even though Python lists are similar to Javascript arrays, Python lists are converted to custom objects that implement methods such as <em>append</em>.</li>

<li class="three"> <strong>UI widgets and a DOM library</strong> are provided as a convenience. They are written in Python and, like everything else, they are translated to Javascript for deployment. These are based on those in GWT.</li>

<li class="four"> <strong>build</strong> manages the overall translation of individual components and creates a set of <code>.html</code> and <code>.js</code> files that can be served up by a Web server.</li> </ol>

<h2>Hello World</h2>

<p>The omnipresent hello world example, let's call it 'Hello Pyjs':</p>

<pre class="code strong" title="Pyjs Example: hello.py (compiles to Javascript)"> from pyjamas.ui.RootPanel import RootPanel from pyjamas.ui.Label import Label

l = Label('Hello Pyjs') RootPanel().add(l) </pre>

<p>Now run <code>pyjsbuild hello.py</code> to generate a plain Javascript application: pyjs creates an <code>./output</code> folder containing all files you need to move to your webspace later. Of course you can test locally, too.</p>

<p>Add 3 additional lines in total and your application can run with both Pyjs (i.e. plain Javascript) <em>and</em> Pyjs Desktop:</p>

<pre class="code" title="Pyjd Example: hello.py (runs as a native application)"> <strong>import pyjd # this is dummy in pyjs</strong> from pyjamas.ui.RootPanel import RootPanel from pyjamas.ui.Label import Label

<strong>pyjd.setup('public/hello.html')</strong> l = Label('Hello Pyjs') RootPanel().add(l) <strong>pyjd.run()</strong> </pre>

<p>Execute <code>pyjd hello.py</code>, or <code>python hello.py</code>, to run the very same application native on Python, giving you a Python stack trace on errors. Pyjs Desktop gives you much more control making testing and debugging a piece of a cake. No more web development pain &ndash; hooray! &nbsp; Note the <code>hello.html</code> file referenced above: this is a container for your application generated by Pyjs that you can adjust to your needs.</p>

<p>Ready for more? <a href="./documentation.html#Getting Help">Let's get started!</a></p>