Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Create a pyjaco example that utilizes jQuery. #4

Merged
merged 1 commit into from

2 participants

@buchuki
Collaborator

This example uses the pyjs.py script to compile a single javascript file.

It demonstrates several things I think a user might want to do that are not covered in the current examples:

  • use pyjaco with jquery
  • compile a single python file into a javascript file
  • include that external file in an HTML file (thus it could also be included in a Django template or CherryPy static file, etc)

I've also written a blog post documenting the process; you may want to link to it or include it in your documentation: http://archlinux.me/dusty/2011/12/27/pyjaco-and-jquery/

@buchuki buchuki Create a pyjaco example that utilizes jQuery.
This example uses the pyjs.py script to compile a single javascript file.
6971a58
@chrivers
Owner

Amazing! Thank you very much for this great work.

I am well aware that user-friendlyness is not the strong suit of pyjaco. What happened originally is that I looked for a project that did python-to-javascript compilation, and discovered py2js. However, it was clear that it was lacking in a number of areas. The amounts of improvements done to pyjaco means it is basically a rewrite.

In the beginning, I tried to do some optimization and implementation at the same time, but you just can't. So for now, I'm focusing on correctness. We do have one case with specifically optimized code, mostly for proof-of-concept: if you do a "for x in range(y, z, w)", you get a native javascript for-loop. I think it would be good to find other common idioms, and see if we can express them simpler.

As for your blog post, it's great. It's just the kind of thing we need to get people to use pyjaco. In my own project, I made a widget library that wraps most of the jQuery code, so it doesn't look quite so mixed as in your example, but I recognize that it's a completely valid use case.

Regarding the readability of the generated code, this has not been a major priority, I admit. Your input as a newcomer to the project is greatly appreciated. Which parts do you find hard to read? If you have any ideas for improvements that aren't difficult to implement, I believe I can make them rather quickly.

Regarding the use of "mock" python builtins, it's strictly required to get the right semantics, but I believe you are well aware of this. For example, because we use foo for almost everything behind-the-scenes, you can override getattr, cmp or whatever you want, and basically get the semantics you would expect from python.

@chrivers chrivers merged commit bab5601 into chrivers:devel
@buchuki
Collaborator

I appreciate the history, and I really like where the project is going. It's been a while since I've been on the ground floor of a project before it hit mainstream, but I see this one or something like it going platinum. Focusing on correctness first and then optimizations and readability is definitely the best way to go.

As for readability I had some troubles with the wrapped variables when using compile_string; I was seeing useless conversions to str() that were then causing failures. However once I wrapped them in @JSVar it looked a little better. At the moment, I primarily have issue with the three lines of boilerplate for dealing with kwargs and args in functions that don't accept arguments; this is an obvious future optimization. I also feel that the application of python formatting symbol could be clearer in the generated javascript (it's hard to understand what has happened there).

It would be nice if it were possible to create JSVar's globally at the beginning of a input string instead of having to decorate every function... maybe it is already and I've missed that.

If you use jabber or gtalk, add me, buchuki@jabber.org I'd be happy to discuss further development. I really am working on adding a watch feature to pyjs.py, and there will likely be further contributions in the next two weeks.

@thenewguy thenewguy referenced this pull request
Merged

Q unit20120826 #75

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 27, 2011
  1. @buchuki

    Create a pyjaco example that utilizes jQuery.

    buchuki authored
    This example uses the pyjs.py script to compile a single javascript file.
This page is out of date. Refresh to see the latest.
View
16 examples/jquery/README
@@ -0,0 +1,16 @@
+An example of using pyjaco to build a stand-alone javascript file that can be
+included with HTML. I like this method as it allows separating javascript from
+HTML and can therefore be used with a variety of backend setups.
+
+First run the following command in the main pyjaco directory:
+
+# python generate_library.py
+
+This will create the py-builtins.js that is included in the index.html file
+
+Next, generate the clicker.js javascript from clicker.py:
+
+python pyjs.py -N --output clicker.js
+
+Now you can load index.html in a browser and click the heading for a simple
+jQuery interaction.
View
16 examples/jquery/clicker.py
@@ -0,0 +1,16 @@
+@JSVar("jQuery")
+def ready():
+ jQuery('h1').click(on_click)
+
+@JSVar("jQuery", "Math.random", "Math.floor")
+def on_click():
+ if jQuery('#when_clicked').html():
+ r = Math.floor(Math.random() * 255)
+ g = Math.floor(Math.random() * 255)
+ b = Math.floor(Math.random() * 255)
+ color = "rgb(%d, %d, %d)" %(r,g,b)
+ jQuery('#when_clicked').attr('style', 'background-color: ' + color)
+ else:
+ jQuery('#when_clicked').html("you clicked it!")
+
+jQuery(ready)
View
12 examples/jquery/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="../../py-builtins.js"></script>
+ <script type="text/javascript" src="clicker.js"></script>
+ </head>
+<body>
+ <h1>Click me</h1>
+ <p id="when_clicked"></p>
+</body>
+</html>
Something went wrong with that request. Please try again.