Blog

Thomas Wanschik on July 29, 2010

PyvaScript - Pythonic syntax for your browser

Hey, after a lot of work in the last few weeks I'm finally ready to introduce you to one of our latest projects called PyvaScript. It's a new scripting language for your client side code with a syntax inspired by our favorite language Python. :) So let's take a closer look at what Waldemar conjured up.

Why?

We all know the pain resulting from switching between programming languages. Writing web projects using Django means to code in Python on the server side and (mostly) to code in JavaScript on the client side. Switching between both languages leads to many bugs and forces us to think differently in each language. This becomes even worse if we first write much of the code in one of both languages over a longer period of time and then switch over to the other one. In the end the result means unnecessary work.

The goal of PyvaScript is to solve this problem by giving you the possibility to use a Python like syntax as well as common functions from Python wherever that is possible on the client side too. Thus PyvaScript addresses developers who love Python while still being able to write fast code and interface with JS.

Diving in

So let's see what PyvaScript looks like:

# demo.pyva
li_elements = {
    'First message': '<li> I want you to feel pain,</li>',
    'Second message': '<li> to think about pain,</li>',
    'Third message': '<li> to accept pain,</li>',
    'Fourth message': '<li> to know pain. -- Tsunade</li>',
}

$(document).ready(
    def():
        ul = $("#ul")
        for key in li_elements:
            ul.append(li_elements[key])
)

This simple example demonstrates some key features of PyvaScript. First you see that PyvaScript wipes out semicolons as well as curly braces used to form blocks. Second you can see how to use the for-in-loop we all know and love from Python. Third it demonstrates the ability to use multi-line lambda functions which we are used to from JavaScript thus combining clean syntax with JavaScript features. And fourth you see that PyvaScript allows to use forbidden characters in Python like "$" for variable names. This allows PyvaScript to use JavaScript libraries without having to write any wrapper. In this example it's jQuery.

Now run

compile-pyva.py demo.pyva

from within the shell to compile the code to JavaScript. This creates a new file called "demo.js". (note that you have to install PyMeta 2 via setup.py install first)

Now you can add "demo.js" to your html file. But before this you have to include PyvaScript's "stdlib.js" containing function definitions used by the compiled source file. So put the following line into the head section of your html files before any compiled PyvaScript file:

...
<script src="stdlib.js" type="text/javascript"></script>
<script src="demo.js" type="text/javascript"></script>
...

That's it. Your first PyvaScript can now run in your browser. :)

What's different to Javascript?

There are still some differences to JavaScript. These are:

  • PyvaScript only supports the for-in-loop and optimizes it at compile time.
  • You don't have to use the keyword var anymore to define local variables.
  • Global variables can be defined using the keyword global. You still can use window.var_definition but it's cleaner to use global.
  • You have to use isinstance instead of instanceof.
  • Functions are defined via the keyword def instead of function.
  • We started to add common functions from Python to PyvaScript. At the moment you can use join on strings as well as append, insert and extend on arrays while still being able to use push instead of append for example. Additionally you can use the range function in for-loops.

Beside these points PyvaScript behaves just like JavaScript.

What's different to Python?

While trying to stay as close as possible to Python there are still some differences:

  • tuple objects are just lists. This means that they are mutable.
  • PyvaScript does neither support keyword arguments nor classes nor any other complex features from Python.
  • You can use multi-line lambda functions.
  • You can use characters like "$" as the first character for variable names. This allows you to interact with other JavaScript libraries like jQuery which otherwise would only be possible with additional wrapper code.

Potential pitfalls

In order to make PyvaScript work you have to keep two things in mind:

  • You have to include PyvaScripts "stdlib.js" before any of your compiled PyvaScript files.
  • Never call a function JS. PyvaScript defines a function called JS by itself to allow the use of native JavaScript code in PyvaScript so that you can write something like JS('for (var i=0; i< 5; i++) alert(i);') which wouldn't be possible with PyvaScript.

What's next?

As this is the first version of PyvaScript we will try to extend it wherever possible so that switching between languages will be even less painful. In particular we will focus on the following steps

  • Extending PyvaScript with standard methods for strings, lists, ...
  • Combining PyvaScript with the PyJS compiler from PyJamas

The last point is especially interesting because PyJS emulates many features from Python. It even includes many modules from Python, sys is just one example. So why use PyvaScript? As it turns out, PyJS emulates many features, therefore being not able to produce high-performance code. Additionally there is no easy way to use native JavaScript libraries without having to write wrappers. PyvaScript is intended to focus on these issues while leaving the emulation of complex features in PyJS. Thus PyvaScript aims to close this gap and to allow flawless interaction with PyJS. So stay tuned to PyvaScript development. There is more to come.